refactor: some components

SpaceCowMedia · Sep 10, 2024 · c2adcd9 · c2adcd9
1 parent 33ffc43
commit c2adcd9
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 179 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/font": "^14.2.0",
-    "@spacecowmedia/spellbook-client": "^3.7.10",
+    "@spacecowmedia/spellbook-client": "^3.7.11",
     "debounce": "^1.2.1",
     "markdown-to-jsx": "^7.3.2",
     "next": "^14.2.0",

diff --git a/src/components/combo/CardGroup/CardGroup.tsx b/src/components/combo/CardGroup/CardGroup.tsx
@@ -1,20 +1,22 @@
 import styles from "./cardGroup.module.scss";
-import { useState } from "react";
+import React, { useState } from "react";
 import CardLink from "../../layout/CardLink/CardLink";
 import CardImage from "../../layout/CardImage/CardImage";
-import { Template } from "lib/types";
 import TemplateCard from "components/combo/TemplateCard/TemplateCard";
+import { Template } from "@spacecowmedia/spellbook-client";
 
 type Props = {
   cards: Array<{ name: string; oracleImageUrl: string }>;
   templates: Template[];
 };
 
-const CardGroup = ({ cards, templates }: Props) => {
+const CardGroup: React.FC<Props> = ({ cards, templates }: Props) => {
   const [hoveredOverCardIndex, setHoveredOverCardIndex] = useState(-1);
 
   const shouldExpand = (index: number): boolean => {
-    if (hoveredOverCardIndex < 0) return false;
+    if (hoveredOverCardIndex < 0) {
+      return false;
+    }
     return index - 4 === hoveredOverCardIndex || index - 8 === hoveredOverCardIndex;
   };
 
@@ -27,9 +29,8 @@ const CardGroup = ({ cards, templates }: Props) => {
           onMouseEnter={() => setHoveredOverCardIndex(index)}
           onMouseLeave={() => setHoveredOverCardIndex(-1)}
         >
-          {"template" in card ? (
-            <TemplateCard className={styles.cardImg} template={card} />
-          ) : (
+          {"template" in card && <TemplateCard className={styles.cardImg} template={card} />}
+          {"oracleImageUrl" in card && (
             <CardLink className="relative" name={card.name}>
               <CardImage img={card.oracleImageUrl} name={card.name} className={styles.cardImg} />
             </CardLink>

diff --git a/src/components/combo/CardHeader/CardHeader.tsx b/src/components/combo/CardHeader/CardHeader.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import styles from "./cardHeader.module.scss";
 
 type Props = {
@@ -6,7 +7,7 @@ type Props = {
   cardsArt?: string[];
 };
 
-const CardHeader = ({ title = "", subtitle = "", cardsArt = [] }: Props) => {
+const CardHeader: React.FC<Props> = ({ title = "", subtitle = "", cardsArt = [] }: Props) => {
   return (
     <header className={`hidden sm:flex ${styles.header}`}>
       <div className="flex w-full h-64">
@@ -22,16 +23,8 @@ const CardHeader = ({ title = "", subtitle = "", cardsArt = [] }: Props) => {
       </div>
       <div className={styles.mask} />
       <div className={styles.comboTitleWrapper}>
-        <h1
-          className={`heading-title ${styles.headingTitle} ${styles.comboTitle}`}
-        >
-          {title}
-        </h1>
-        <h2
-          className={`heading-title ${styles.headingTitle} ${styles.comboSubtitle}`}
-        >
-          {subtitle}
-        </h2>
+        <h1 className={`heading-title ${styles.headingTitle} ${styles.comboTitle}`}>{title}</h1>
+        <h2 className={`heading-title ${styles.headingTitle} ${styles.comboSubtitle}`}>{subtitle}</h2>
       </div>
     </header>
   );

diff --git a/src/components/combo/ComboList/ComboList.tsx b/src/components/combo/ComboList/ComboList.tsx
@@ -2,8 +2,8 @@ import styles from "./comboList.module.scss";
 import TextWithMagicSymbol from "../../layout/TextWithMagicSymbol/TextWithMagicSymbol";
 import React, { useEffect, useState } from "react";
 import PlaceholderText from "../../layout/PlaceholderText/PlaceholderText";
-import {addPeriod} from "../../../lib/addPeriod";
-import {Template} from "lib/types";
+import { addPeriod } from "../../../lib/addPeriod";
+import { Template } from "@spacecowmedia/spellbook-client";
 
 type Props = {
   title: string;
@@ -17,7 +17,7 @@ type Props = {
   appendPeriod?: boolean;
 };
 
-const ComboList = ({
+const ComboList: React.FC<Props> = ({
   title,
   cardsInCombo = [],
   templatesInCombo = [],
@@ -26,7 +26,7 @@ const ComboList = ({
   iterations,
   id,
   className,
-  appendPeriod
+  appendPeriod,
 }: Props) => {
   const [numberOfPlaceHolderItems, setNumberOfPlaceHolderItems] = useState(0);
 
@@ -35,10 +35,7 @@ const ComboList = ({
   }, []);
 
   return (
-    <div
-      id={id}
-      className={`md:flex-1 my-4 w-full rounded overflow-hidden ${className}`}
-    >
+    <div id={id} className={`md:flex-1 my-4 w-full rounded overflow-hidden ${className}`}>
       <div className="pr-6 py-4">
         <h2 className={styles.comboListTitle}>{title}</h2>
         <ol className={`${styles.comboList} ${showNumbers && "list-decimal"}`}>

diff --git a/src/components/combo/ComboSidebarLinks/ComboSidebarLinks.tsx b/src/components/combo/ComboSidebarLinks/ComboSidebarLinks.tsx
@@ -3,7 +3,8 @@ import EdhrecLink from "./EdhrecLink/EdhrecLink";
 import Link from "next/link";
 import ShareComboButtons from "./ShareComboButtons/ShareComboButtons";
 import Embed from "components/combo/ComboSidebarLinks/Embed/Embed";
-import {Variant} from "lib/types";
+import React from "react";
+import { Variant } from "@spacecowmedia/spellbook-client";
 
 type Props = {
   cards: string[];
@@ -12,33 +13,25 @@ type Props = {
   comboId: string;
   tcgPlayerPrice: string;
   cardKingdomPrice: string;
-  combo: Variant
+  combo: Variant;
 };
 
-const ComboSidebarLinks = ({
+const ComboSidebarLinks: React.FC<Props> = ({
   cards,
   comboLink,
   edhrecLink,
   comboId,
   tcgPlayerPrice,
   cardKingdomPrice,
-  combo
+  combo,
 }: Props) => {
   return (
     <div className="mt-4 mb-4 w-full rounded overflow-hidden">
-      <BuyComboButtons
-        cards={cards}
-        tcgPlayerPrice={tcgPlayerPrice}
-        cardKingdomPrice={cardKingdomPrice}
-      />
+      <BuyComboButtons cards={cards} tcgPlayerPrice={tcgPlayerPrice} cardKingdomPrice={cardKingdomPrice} />
       <div className="mt-1">
         {/*<SimilarComboButton cards={cards} comboId={comboId} />*/}
         {!!edhrecLink && <EdhrecLink link={edhrecLink} />}
-        <Link
-          id="report-error-button"
-          className="button w-full"
-          href={`/report-error/?comboId=${comboId}`}
-        >
+        <Link id="report-error-button" className="button w-full" href={`/report-error/?comboId=${comboId}`}>
           Report an Error with this Combo
         </Link>
         <Embed combo={combo} />

diff --git a/src/components/combo/PrerequisiteList/PrerequisiteList.tsx b/src/components/combo/PrerequisiteList/PrerequisiteList.tsx
@@ -1,8 +1,9 @@
-import {NewPrerequisiteType, Template} from "../../../lib/types";
+import { NewPrerequisiteType } from "../../../lib/types";
 import TextWithMagicSymbol from "../../layout/TextWithMagicSymbol/TextWithMagicSymbol";
-import styles from "./prerequisiteList.module.scss";
 import Icon from "../../layout/Icon/Icon";
-import {addPeriod} from "../../../lib/addPeriod";
+import { addPeriod } from "../../../lib/addPeriod";
+import { Template } from "@spacecowmedia/spellbook-client";
+import React from "react";
 
 type Props = {
   prerequisites: NewPrerequisiteType[];
@@ -11,29 +12,37 @@ type Props = {
   cardsInCombo?: string[];
   includeCardLinks?: boolean;
   templatesInCombo?: Template[];
-}
+};
 
 const ICON_MAP = {
-  "B": 'battlefield',
-  "C": 'commandZone',
-  "G": 'graveyard',
-  "H": 'hand',
-  "L": 'library',
-  "E": 'exile',
-}
-const PrerequisiteList = ({ prerequisites, className, id, cardsInCombo, includeCardLinks, templatesInCombo }: Props) => {
-
+  B: "battlefield",
+  C: "commandZone",
+  G: "graveyard",
+  H: "hand",
+  L: "library",
+  E: "exile",
+};
+const PrerequisiteList: React.FC<Props> = ({
+  prerequisites,
+  className,
+  id,
+  cardsInCombo,
+  includeCardLinks,
+  templatesInCombo,
+}: Props) => {
   return (
-    <div
-      id={id}
-      className={`md:flex-1 my-4 w-full rounded overflow-hidden ${className}`}
-    >
+    <div id={id} className={`md:flex-1 my-4 w-full rounded overflow-hidden ${className}`}>
       <div className="pr-6 py-4">
         <h2 className="font-bold text-xl mb-2">Prerequisites</h2>
         <ol className="list-inside">
           {prerequisites.map((prereq, index) => (
             <li key={`${prereq.z}-${index}`}>
-              {ICON_MAP[prereq.z as keyof typeof ICON_MAP] && <><Icon name={ICON_MAP[prereq.z as keyof typeof ICON_MAP] as any}/>&nbsp;</> }
+              {ICON_MAP[prereq.z as keyof typeof ICON_MAP] && (
+                <>
+                  <Icon name={ICON_MAP[prereq.z as keyof typeof ICON_MAP] as any} />
+                  &nbsp;
+                </>
+              )}
               <TextWithMagicSymbol
                 text={addPeriod(prereq.s)}
                 cardsInCombo={cardsInCombo}
@@ -45,7 +54,7 @@ const PrerequisiteList = ({ prerequisites, className, id, cardsInCombo, includeC
         </ol>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default PrerequisiteList
+export default PrerequisiteList;
diff --git a/src/components/combo/PrerequisiteList/prerequisiteList.module.scss b/src/components/combo/PrerequisiteList/prerequisiteList.module.scss