refactored the shared components folder

premell · Sep 22, 2021 · 089ee42 · 089ee42
1 parent ae0eb1f
commit 089ee42
Show file tree

Hide file tree

Showing 35 changed files with 540 additions and 670 deletions.
diff --git a/atoms.js b/atoms.js
@@ -1,24 +1,10 @@
 import { atom, selector } from "recoil";
 import { recoilPersist } from "recoil-persist";
 
-import { SORTING_METHODS, STATS } from "@/shared/constants";
+import { SORTING_METHODS, STATS } from "shared/constants";
 
 const { persistAtom } = recoilPersist();
 
-// export const popupMessage = atom({
-//   key: "popupMessage",
-//   default: {
-//     show: false,
-//     message: "hello",
-//     type: "positive",
-//   },
-// });
-
-// export const numberOfMatchedPokemon = atom({
-//   key: "numberOfMatchedPokemon",
-//   default: 0
-// });
-
 export const pokemonPerPage = atom({
   key: "pokemonPerPage",
   default: 20,

diff --git a/components/Cart/Styles.jsx b/components/Cart/Styles.jsx
@@ -7,13 +7,12 @@ import { cart as cartAtoms } from "atoms.js";
 import { useCart, useCartModal, useWindowSize } from "shared/hooks";
 import { useEffect, useState } from "react";
 import {
-  TypeFlair,
-  TypeContainer,
   FavoritesHeart,
   Subheading1,
   Subheading2,
   BoldRegularText,
   Button,
+  AddToCartButton,
 } from "shared/components";
 import Link from "next/link";
 import {
@@ -38,7 +37,7 @@ const StyledHeader = styled.div`
 export const Header = () => {
   return (
     <StyledHeader>
-      <Subheading1>Shopping cart</Subheading1>
+      <h1>Shopping cart</h1>
     </StyledHeader>
   );
 };
@@ -156,18 +155,6 @@ const StyledButtonContainer = styled.div`
 const PokemonCard = ({ pokemon, handleDeleteClick }) => {
   const { name, types, price, images, image_url } = pokemon;
 
-  const { getCurrentCart, addPokemonToCart, removePokemonFromCart } = useCart();
-
-  const findPokemon = getCurrentCart().filter(
-    (arrayPokemon) => arrayPokemon.name === pokemon.name
-  );
-  const pokemonExistsInCart = findPokemon.length !== 0;
-
-  const handleButtonClick = () => {
-    if (pokemonExistsInCart) removePokemonFromCart(pokemon);
-    else addPokemonToCart(pokemon);
-  };
-
   return (
     <StyledCartCard>
       <Link as={`/pokemon/${name}`} href="/pokemon/[pokemonName]">
@@ -181,23 +168,10 @@ const PokemonCard = ({ pokemon, handleDeleteClick }) => {
         </div>
       </Link>
       <PokemonInformation>
-        <BoldRegularText>{name}</BoldRegularText>
-        <TypeContainer>
-          {types.map((type) => (
-            <TypeFlair key={type} type={type} />
-          ))}
-        </TypeContainer>
+        <h3>{name}</h3>
         <StyledButtonContainer>
-          <Subheading2>{formatAsUSDWithoutTrailingZeros(price)}</Subheading2>
-          <Button
-            handleClick={handleButtonClick}
-            type={`${pokemonExistsInCart ? "negative" : "positive"}`}
-            innerText={`${
-              !pokemonExistsInCart ? "Add to cart" : "Remove from cart"
-            }`}
-            width="130px"
-            height="40px"
-          />
+          <h2>{formatAsUSDWithoutTrailingZeros(price)}</h2>
+          <AddToCartButton width="130px" height="40px" pokemon={pokemon} />
         </StyledButtonContainer>
       </PokemonInformation>
     </StyledCartCard>
@@ -227,7 +201,7 @@ export const PokemonList = ({ pokemon }) => {
       <StyledPokemonList>
         {pokemon.length === 0 ? (
           <NoPokemonInCart>
-            <Subheading1>No pokemon in cart</Subheading1>
+            <h3>No pokemon in cart</h3>
           </NoPokemonInCart>
         ) : (
           pokemon.map((pokemon) => (
@@ -277,9 +251,9 @@ const CheckoutButton = styled.div`
 export const Checkout = ({ total }) => {
   return (
     <StyledCheckout>
-      <Subheading1>Total: {formatAsUSDWithoutTrailingZeros(total)}</Subheading1>
+      <h1>Total: {formatAsUSDWithoutTrailingZeros(total)}</h1>
       <CheckoutButton>
-        <BoldRegularText>Continue to checkout</BoldRegularText>
+        <h3>Continue to checkout</h3>
       </CheckoutButton>
     </StyledCheckout>
   );
@@ -288,18 +262,6 @@ export const Checkout = ({ total }) => {
 const RecommendedPokemonCard = ({ pokemon }) => {
   const { name, types, price, image_url } = pokemon;
 
-  const { getCurrentCart, addPokemonToCart, removePokemonFromCart } = useCart();
-
-  const findPokemon = getCurrentCart().filter(
-    (arrayPokemon) => arrayPokemon.name === pokemon.name
-  );
-  const pokemonExistsInCart = findPokemon.length !== 0;
-
-  const handleButtonClick = () => {
-    if (pokemonExistsInCart) removePokemonFromCart(pokemon);
-    else addPokemonToCart(pokemon);
-  };
-
   return (
     <StyledRecommendedCard>
       <Link as={`/pokemon/${name}`} href="/pokemon/[pokemonName]">
@@ -308,23 +270,16 @@ const RecommendedPokemonCard = ({ pokemon }) => {
             <FavoritesHeart pokemon={pokemon} />
           </HeartContainer>
           <Image quality={100} width={190} height={190} src={image_url} />
-          <BoldRegularText>{name}</BoldRegularText>
-          <TypeContainer>
-            {types.map((type) => (
-              <TypeFlair key={type} type={type} />
-            ))}
-          </TypeContainer>
+          <h3>{name}</h3>
+          <TypeFlairBox types={types} />
         </div>
       </Link>
-      <Subheading2>{formatAsUSDWithoutTrailingZeros(price)}</Subheading2>
-      <Button
-        handleClick={handleButtonClick}
-        type={`${pokemonExistsInCart ? "negative" : "positive"}`}
-        innerText={`${
-          !pokemonExistsInCart ? "Add to cart" : "Remove from cart"
-        }`}
+      <h2>{formatAsUSDWithoutTrailingZeros(price)}</h2>
+      <AddToCartButton
         width="80%"
         height="30px"
+        pokemon={pokemon}
+        activateCartDropdown={true}
       />
     </StyledRecommendedCard>
   );
@@ -360,7 +315,7 @@ export const SuggestedPokemon = ({ cartPokemon, favoritePokemon }) => {
   return (
     <>
       <RecommendedSection>
-        <Subheading1>Recommended pokemon</Subheading1>
+        <h1>Recommended pokemon</h1>
         {viewPosition !== 0 && (
           <LeftArrow onClick={moveLeft}>
             <IoIosArrowBack size={35} />

diff --git a/components/Footer.js b/components/Footer.js
@@ -16,7 +16,7 @@ const Footer = () => {
   return (
     <StyledFooter>
       <p>This is a pokemon website</p>
-      <BoldRegularText>Contact me</BoldRegularText>
+      <h3>Contact me</h3>
       <p>Email: [email protected]</p>
       <Links />
     </StyledFooter>

diff --git a/components/MainPokemonContainer/PokemonList/PokemonCard.js b/components/MainPokemonContainer/PokemonList/PokemonCard.js
@@ -8,8 +8,8 @@ import {
   Subheading2,
   BoldRegularText,
   RegularText,
-  TypeContainer,
-} from "@/shared/components";
+  TypeFlairBox,
+} from "shared/components";
 import Image from "next/image";
 import Link from "next/link";
 import { TypeFlair } from "shared/components";
@@ -18,25 +18,11 @@ import { formatAsUSDWithoutTrailingZeros } from "shared/javascript";
 import { FavoritesHeart } from "shared/components";
 
 import { useCart, useCartModal } from "shared/hooks";
+import { AddToCartButton } from "shared/components";
 
 const PokemonCard = ({ pokemon }) => {
   const { name, types, price, image_url } = pokemon;
 
-  const { showWithTimer } = useCartModal();
-  const { getCurrentCart, addPokemonToCart, removePokemonFromCart } = useCart();
-
-  const findPokemon = getCurrentCart().filter(
-    (arrayPokemon) => arrayPokemon.name === pokemon.name
-  );
-  const pokemonExistsInCart = findPokemon.length !== 0;
-
-  const handleButtonClick = () => {
-    if (pokemonExistsInCart) removePokemonFromCart(pokemon);
-    else addPokemonToCart(pokemon);
-
-    showWithTimer();
-  };
-
   return (
     <StyledPokemonCard>
       <HeartContainer>
@@ -45,24 +31,12 @@ const PokemonCard = ({ pokemon }) => {
       <Link as={`/pokemon/${name}`} href="/pokemon/[pokemonName]">
         <StyledPokemonMain>
           <Image quality={100} width={150} height={150} src={image_url} />
-          <BoldRegularText>{name}</BoldRegularText>
-          <TypeContainer>
-            {types.map((type) => (
-              <TypeFlair key={type} type={type} />
-            ))}
-          </TypeContainer>
-          <Subheading2>{formatAsUSDWithoutTrailingZeros(price)}</Subheading2>
+          <h3>{name}</h3>
+          <TypeFlairBox types={types} />
+          <h2>{formatAsUSDWithoutTrailingZeros(price)}</h2>
         </StyledPokemonMain>
       </Link>
-      <Button
-        handleClick={handleButtonClick}
-        type={`${pokemonExistsInCart ? "negative" : "positive"}`}
-        innerText={`${
-          !pokemonExistsInCart ? "Add to cart" : "Remove from cart"
-        }`}
-        width="80%"
-        height="30px"
-      />
+      <AddToCartButton width="80%" height="30px" pokemon={pokemon} />
     </StyledPokemonCard>
   );
 };

diff --git a/components/MainPokemonContainer/PokemonList/helperFunctions.js b/components/MainPokemonContainer/PokemonList/helperFunctions.js
@@ -1,4 +1,4 @@
-import { SORTING_METHODS } from "@/shared/constants";
+import { SORTING_METHODS } from "shared/constants";
 
 export const getTypeFilteredPokemon = (pokemonToFilter, typeFilter) => {
   const filteredPokemon = pokemonToFilter.filter((pokemon) => {

diff --git a/components/MainPokemonContainer/PokemonList/index.js b/components/MainPokemonContainer/PokemonList/index.js
@@ -4,8 +4,6 @@ import { NoPokemonFound } from "../Styles";
 
 import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 
-import { getAllPokemons } from "@/shared/javascript";
-
 import { useRecoilState } from "recoil";
 import { typeFilter as typeFilterAtoms } from "atoms.js";
 import { abilityFilter as abilityFilterAtoms } from "atoms.js";

diff --git a/components/MainPokemonContainer/Styles.js b/components/MainPokemonContainer/Styles.js
@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 
-import { formatAsUSDWithoutTrailingZeros } from "@/shared/javascript";
+import { formatAsUSDWithoutTrailingZeros } from "shared/javascript";
 
 import { RegularText, BoldRegularText } from "shared/components";
 import { AiOutlineClose } from "react-icons/ai";
@@ -102,7 +102,7 @@ export const FilterBox = ({ handleClick, text }) => {
   );
 };
 
-export const TypeContainer = styled.div`
+export const TypeFlairBox = styled.div`
   display: flex;
 `;
 
@@ -137,11 +137,11 @@ const StyledPriceFilterFlair = styled.div``;
 
 export const PriceFilterFlair = ({ min, max }) => {
   return (
-    <RegularText
-      style={{ margin: 0 }}
-    >{`Price: ${formatAsUSDWithoutTrailingZeros(
-      min
-    )} - ${formatAsUSDWithoutTrailingZeros(max)}`}</RegularText>
+    <p>
+      {`Price: ${formatAsUSDWithoutTrailingZeros(
+        min
+      )} - ${formatAsUSDWithoutTrailingZeros(max)}`}
+    </p>
   );
 };
 
@@ -320,9 +320,9 @@ const StyledNoPokemonFound = styled.div`
 export const NoPokemonFound = () => {
   return (
     <StyledNoPokemonFound>
-      <BoldRegularText style={{ height: "50px" }}>
+      <h3 style={{ height: "50px" }}>
         No pokemon were found
-      </BoldRegularText>
+      </h3>
     </StyledNoPokemonFound>
   );
 };
@@ -365,7 +365,7 @@ export const HeartContainer = styled.div`
 
 // import styled, { css } from "styled-components"
 //
-// import { formatAsUSDWithoutTrailingZeros } from "@/shared/javascript"
+// import { formatAsUSDWithoutTrailingZeros } from "shared/javascript"
 //
 // import { RegularText, BoldRegularText } from "shared/components"
 // import { AiOutlineClose } from "react-icons/ai"
@@ -451,7 +451,7 @@ export const HeartContainer = styled.div`
 //   )
 // }
 //
-// export const TypeContainer = styled.div`
+// export const TypeFlairBox = styled.div`
 //  display: flex;
 // `
 //
@@ -663,9 +663,9 @@ export const HeartContainer = styled.div`
 //
 //   return (
 //     <StyledNoPokemonFound>
-//       <BoldRegularText>
+//       <h3>
 //         No pokemon were found
-//       </BoldRegularText>
+//       </h3>
 //     </StyledNoPokemonFound>
 //   )
 //

diff --git a/components/MainPokemonContainer/ViewPanel.js b/components/MainPokemonContainer/ViewPanel.js
@@ -87,9 +87,9 @@ const ViewPanel = () => {
 
   return (
     <ViewPanelContainer>
-      <BoldRegularText>
+      <h3>
         {`${formatNumberOfMatchedPokemon(numberOfMatchedPokemon)} pokemon`}
-      </BoldRegularText>
+      </h3>
       <DropdownBox>
         <Dropdown
           labelPrefix="sort by "
@@ -202,9 +202,9 @@ export default ViewPanel;
 //
 //   return (
 //     <ViewPanelContainer>
-//       <BoldRegularText>
+//       <h3>
 //         {`${formatNumberOfMatchedPokemon(numberOfMatchedPokemon)} pokemon`}
-//       </BoldRegularText>
+//       </h3>
 //       <DropdownContainer>
 //         <Dropdown labelPrefix="sort by " defaultSelected={defaultSortingMethod} list={sorting_list} handleChange={sortingMethodChange} />
 //         <Dropdown labelPrefix="pokemon per page " defaultSelected={defaultPokemonPerPage} list={pokemon_per_page_list} handleChange={pokemonPerPageChange} />

diff --git a/components/Navbar/Cart/CartButton.js b/components/Navbar/Cart/CartButton.js
@@ -29,7 +29,7 @@ const CartButton = ({
         width="60px"
       >
         <FiShoppingCart size={22} style={{ strokeWidth: "2" }} />
-        <BoldRegularText>Cart</BoldRegularText>
+        <h3>Cart</h3>
       </NavButton>
       {children}
     </div>

diff --git a/components/Navbar/Cart/CartModal.js b/components/Navbar/Cart/CartModal.js
@@ -56,8 +56,8 @@ const CartModal = ({
           )}
         </ModalPokemonCartContainer>
         <ModalPokemonCartFooter>
-          <Subheading1>Total:</Subheading1>
-          <Subheading1>{formatAsUSDWithoutTrailingZeros(total)}</Subheading1>
+          <h1>Total:</h1>
+          <h1>{formatAsUSDWithoutTrailingZeros(total)}</h1>
         </ModalPokemonCartFooter>
       </StyledCartModal>
     </ForgivingBorder>

diff --git a/components/Navbar/Favorites/index.js b/components/Navbar/Favorites/index.js
@@ -30,7 +30,7 @@ const Favorites = () => {
     <NavButton onClick={handleFavoritesPopup}>
       <FavoritesPopup show={showFavorites} setShow={setShowFavorites} />
       <AiOutlineHeart size={23} />
-      <BoldRegularText>Favorites</BoldRegularText>
+      <h3>Favorites</h3>
     </NavButton>
   );
 };