fdel/magic-card-valuator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding in modal for card detail when card is clicked. Working through styling, and working with NextJS.

Browse Source
This commit is contained in:
Frank Delaguila
2022-11-04 15:40:07 -06:00
parent a7d15cc120
commit a036c449f7
6 changed files with 106 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/ClientOnlyPortal.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { useRef, useEffect, useState, ReactNode } from 'react';
import { createPortal } from 'react-dom';
interface Props {
children: ReactNode
selector: string
}
export default function ClientOnlyPortal({ children, selector }: Props) {
const ref = useRef();
const [mounted, setMounted] = useState(false);
useEffect(() => {
ref.current = document.querySelector(selector);
setMounted(true);
}, [selector]);
return mounted ? createPortal(children, ref.current!) : null;
}

14
components/modal.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { createPortal } from "react-dom";
import ClientOnlyPortal from "./ClientOnlyPortal";
export default function Modal({open}: { open: Function }) {
return (
<ClientOnlyPortal selector="#modal-root">
<div className='fixed bottom-0 container left-0 rounded-md modal'>
Hello
<button onClick={() => open(false)}>Close</button>
</div>
</ClientOnlyPortal>
);
}

17
pages/_document.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head>
<title>Magic Card Valuator</title>
</Head>
<body>
<Main />
{/* Here we will mount our modal portal */}
<div id="modal-root" />
<NextScript />
</body>
</Html>
)
}

63
pages/index.tsx
View File

@@ -5,25 +5,31 @@ import styles from '../styles/Home.module.css';
import React, { useEffect, useState, useMemo } from 'react';
import { debounce } from 'lodash';
import Modal from '../components/modal';
export default function Home() {
const [search, setSearch] = useState('');
const [selectedCard, setSelectedCard] = useState({});
const [cards, setCards] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [queryParams, setQueryParams] = useState('');
const [modalOpen, setModalOpen] = useState(false);
const searchForCard = async (event: React.ChangeEvent<HTMLInputElement>) => {
event.stopPropagation();
setSearch(event.target.value);
setLoading(true);
await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent(event.target.value)}`)
if( event.target.value !== '' ) {
await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent(event.target.value)}`)
.then( res => res.json() )
.then( ({data}) => {
setCards(data);
setLoading(false);
})
.catch( err => console.log(err) );
.catch( err => setError(err) );
}
};
const debounceSearch = useMemo( () => debounce(searchForCard, 300), [search] );
@@ -34,39 +40,48 @@ export default function Home() {
return (
<div>
<Head>
<title>Magic Card Valuator</title>
</Head>
<div className={`bg-center bg-no-repeat flex justify-center items-center mb-4 h-96 ${styles.hero}`}>
<div className="w-3/4 text-center">
<div className="absolute bg-red-800 w-96 bg-red-800 right-0 top-0 rounded-md mr-4 mt-4 p-4">
{error}
</div>
<div className={`bg-center bg-no-repeat flex justify-center items-center h-96 ${styles.hero}`}>
<div className="container text-center">
<label htmlFor="search" className="block mx-auto font-bold mb-2 text-2xl">Search for a Magic Card</label>
<input id="search" name="search" type="text" className={`block w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} />
<input id="search" name="search" type="text" className={`block w-full md:w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} />
</div>
</div>
<main className="container">
<section className="flex flex-wrap">
{loading && !cards.length ?
<div className="spinner"></div>
:
cards && cards.map( (card: any) => <Image className="hover:scale-110 transition-transform duration-150 ease-in-out w-1/6 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> )
}
</section>
<main className="container my-4">
{ cards?.length === 0 || !cards ?
<div>Please search for a card</div>
:
<section className="flex flex-wrap justify-center items-center">
{loading && search !== "" ?
<div className="spinner mx-auto"></div>
:
cards && cards.map( (card: any) => <Image onClick={() => {
setSelectedCard(card);
setModalOpen(true);
}} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> )
}
</section>
}
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
href="https://www.linkedin.com/in/frank-delaguila/"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span>
<Image className="fill-white" src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
rel="noopener noreferrer">
Frank Delaguila
</a>
</footer>
{modalOpen ?
<Modal open={setModalOpen} />
: null}
</div>
)
}

10
styles/Home.module.css
View File

@@ -29,5 +29,13 @@
}
@media (prefers-color-scheme: dark) {
}
@media only screen and (min-width: 1280px) {
.hero {
max-width: 1280px;
margin: 2rem auto 0 auto;
border-radius: 2rem;
}
}

8
styles/globals.css
View File

@@ -12,11 +12,18 @@
}
}
.modal {
background: #1d1d1c;
width: 100%;
height: 100%;
}
.spinner {
display: inline-block;
width: 80px;
height: 80px;
}
.spinner:after {
content: " ";
display: block;
@@ -28,6 +35,7 @@
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);