Merge pull request #13 from JollyGrin/feat/update-bag

Feat/update bag
JollyGrin · Mar 12, 2024 · 7ffdbb5 · 7ffdbb5
2 parents 0643b04 + e66f731
commit 7ffdbb5
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 25 deletions.
diff --git a/components/Bag/StarterDecks/index.tsx b/components/Bag/StarterDecks/index.tsx
@@ -0,0 +1,39 @@
+import { DeckImportType } from "@/components/DeckPool/deck-import.type";
+import { Box, Button, Flex, Text, useDisclosure } from "@chakra-ui/react";
+import { useStarterDecks } from "./useStarterDecks";
+
+export const StarterDeckContainer = (props: {
+  pushDeck: (data: DeckImportType) => void;
+  deckIds?: string[];
+}) => {
+  const { isOpen, onOpen } = useDisclosure();
+  const results = useStarterDecks({ enabled: isOpen });
+  const hasResult = !!results.find((record) => record.status === "success");
+  return (
+    <Box p="1rem" mt="2rem" bg="antiquewhite" borderRadius="0.25rem">
+      <Text>Don't have any decks in mind?</Text>
+      {!hasResult && (
+        <Button mt="1rem" onClick={onOpen}>
+          Load starter decks
+        </Button>
+      )}
+      <Flex flexWrap="wrap" gap="0.5rem" mt="1rem">
+        {results?.map(
+          (record) =>
+            record.data !== undefined && (
+              <Button
+                borderRadius="0.25rem"
+                cursor="pointer"
+                p="0.5rem"
+                bg="rgba(0,0,0,0.15)"
+                isDisabled={props.deckIds?.includes(record.data.id)}
+                onClick={() => props.pushDeck(record.data as DeckImportType)}
+              >
+                {record.data.name}
+              </Button>
+            ),
+        )}
+      </Flex>
+    </Box>
+  );
+};
diff --git a/components/Bag/StarterDecks/useStarterDecks.ts b/components/Bag/StarterDecks/useStarterDecks.ts
@@ -0,0 +1,37 @@
+import { DeckImportType } from "@/components/DeckPool/deck-import.type";
+import { useQuery, useQueries } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+export const useStarterDecks = (props: { enabled: boolean }) => {
+  const deckKeys = Object.keys(BACKUP_DECKS);
+  console.log({ deckKeys });
+
+  const queries = useQueries({
+    queries: deckKeys.map((id) => ({
+      queryKey: ["starter-deck", id],
+      queryFn: () => fetchDeck(BACKUP_DECKS[id as BACKUP_KEY]),
+      enabled: props.enabled,
+    })),
+  });
+
+  return queries;
+};
+
+async function fetchDeck(url: string) {
+  try {
+    const result = await axios.get<DeckImportType>(url);
+    return result.data;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+type BACKUP_KEY = keyof typeof BACKUP_DECKS;
+enum BACKUP_DECKS {
+  THRALL = "https://arweave.net/OCa_LQ9vLH7ucJqVsxPYScaVoZL7btnzaRioH7rZjdw",
+  MANDOLORIAN = "https://arweave.net/iQKZY8HNihjGO0wt6pHGxo6uD-9416-24X65WCzL68g",
+  GINGER = "https://arweave.net/5vbOUVYkn1GUIPbpZdORslk10kT--Pt4KKziQYDIqcU",
+  JOHNWICK = "https://arweave.net/z46jYDgrKBQT8bA_NqC5BJkWD6GFkWUFLKXRO8sAj_4",
+  FRANKEN = "https://arweave.net/Nh3KzSYPTVhxXzV4N0YQ9YLHhkXQxxs-2wSwj7Xr12w",
+}
diff --git a/lib/hooks/useUnmatchedDeck.ts b/lib/hooks/useUnmatchedDeck.ts
@@ -1,3 +1,4 @@
+import { DeckImportType } from "@/components/DeckPool/deck-import.type";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { useState } from "react";
@@ -8,14 +9,16 @@ export const useUnmatchedDeck = () => {
   const [deckId, setDeckId] = useState<string>();
   const [deckIdDebounced] = useDebounce(deckId, 300);
   const [apiUrl, setApiUrl] = useState<string>(
-    "https://unbrewed-api.vercel.app/api/unmatched-deck/"
+    "https://unbrewed-api.vercel.app/api/unmatched-deck/",
   );
 
   const { data, isLoading, error } = useQuery(
     ["deck", deckIdDebounced, apiUrl],
     async () => {
       try {
-        const result = await axios.get(apiUrl + deckIdDebounced);
+        const result = await axios.get<DeckImportType>(
+          apiUrl + deckIdDebounced,
+        );
         return result.data;
       } catch (err) {
         console.error(err);
@@ -25,7 +28,7 @@ export const useUnmatchedDeck = () => {
       enabled: !!deckIdDebounced,
       onSuccess: (e) => toast.success("Deck fetched!"),
       onError: (e) => toast.error("Error fetching deck"),
-    }
+    },
   );
 
   return {

diff --git a/pages/bag.tsx b/pages/bag.tsx
@@ -1,39 +1,36 @@
-//@ts-nocheck
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import {
   Box,
   Button,
   Flex,
   HStack,
   Input,
-  Spinner,
   Tag,
   Text,
+  VStack,
 } from "@chakra-ui/react";
 import { CardFactory } from "@/components/CardFactory/card.factory";
 import { DECK_ID } from "@/lib/constants/unmatched-deckids";
 import { useUnmatchedDeck } from "@/lib/hooks/useUnmatchedDeck";
-import { useRouter } from "next/router";
 import { Carousel } from "@/components/Game/game.carousel";
-import {
-  DeckImportDataType,
-  DeckImportType,
-} from "@/components/DeckPool/deck-import.type";
+import { DeckImportType } from "@/components/DeckPool/deck-import.type";
 import { useLocalDeckStorage } from "@/lib/hooks/useLocalStorage";
 import Link from "next/link";
+import { StarterDeckContainer } from "@/components/Bag/StarterDecks";
 
 const BagPage = () => {
   const { data, isLoading, error, deckId, setDeckId, apiUrl, setApiUrl } =
     useUnmatchedDeck();
 
   const { decks, pushDeck, removeDeckbyId, totalKbLeft, setStar, star } =
     useLocalDeckStorage();
+
   const [selectedDeckId, setSelectedDeckId] = useState<string>();
 
   return (
     <Flex flexDir={"column"} bg="antiquewhite" h="100svh">
       <BagNav />
-      <DeckStats length={decks?.length} deckKb={totalKbLeft} />
+      <DeckStats length={decks?.length ?? 0} deckKb={totalKbLeft ?? 0} />
       <Flex justifyContent={"space-between"}>
         {decks && (
           <Carousel
@@ -45,20 +42,25 @@ const BagPage = () => {
                     .toUpperCase()}
                   id={deck?.id}
                   setSelectedDeck={setSelectedDeckId}
+                  isSelected={selectedDeckId === deck.id}
                   star={star}
                 />
               </Box>
             ))}
           />
         )}
       </Flex>
-      <Flex bg="purple" p={3} gap={2}>
-        {/* <Button>Load from URL</Button>
-        <Button>Load from JSON</Button> */}
-      </Flex>
 
       <Flex bg="indigo" flexDir={"column"} p={3}>
-        {!selectedDeckId && !data && <UnmatchedInput setDeckId={setDeckId} />}
+        {!selectedDeckId && !data && (
+          <>
+            <UnmatchedInput setDeckId={setDeckId} />
+            <StarterDeckContainer
+              pushDeck={pushDeck}
+              deckIds={decks?.map((deck) => deck.id)}
+            />
+          </>
+        )}
         {!selectedDeckId && data && <DeckInfo data={data} />}
         {selectedDeckId && (
           <DeckInfo data={decks?.find((deck) => deck.id === selectedDeckId)} />
@@ -128,7 +130,7 @@ const BagNav = () => {
   );
 };
 
-const DeckStats = ({ length, deckKb }) => {
+const DeckStats = ({ length, deckKb }: { length: number; deckKb: number }) => {
   return (
     <Box mt={2} p={2}>
       <Text
@@ -146,12 +148,24 @@ const DeckStats = ({ length, deckKb }) => {
   );
 };
 
-const DeckSlot = ({ abbrev, id, setSelectedDeck, star }) => {
+const DeckSlot = ({
+  abbrev,
+  id,
+  setSelectedDeck,
+  isSelected,
+  star,
+}: {
+  abbrev: string;
+  id: string;
+  setSelectedDeck: any;
+  star: string;
+  isSelected: boolean;
+}) => {
   const isStarred = star === id;
   return (
     <Flex
       m={2}
-      bg="rgba(0,0,0,0.25)"
+      bg={`rgba(0,0,0,0.${isSelected ? 50 : 25})`}
       w="100px"
       height="100px"
       borderRadius={5}
@@ -166,7 +180,7 @@ const DeckSlot = ({ abbrev, id, setSelectedDeck, star }) => {
           h="85%"
           w="85%"
           borderRadius={"inherit"}
-          border={isStarred && "2px solid gold"}
+          border={isStarred ? "2px solid gold" : ""}
           p={2}
           color="antiquewhite"
           justifyContent={"center"}
@@ -185,7 +199,11 @@ const DeckSlot = ({ abbrev, id, setSelectedDeck, star }) => {
   );
 };
 
-const UnmatchedInput = ({ setDeckId }) => {
+const UnmatchedInput = ({
+  setDeckId,
+}: {
+  setDeckId: Dispatch<SetStateAction<string | undefined>>;
+}) => {
   return (
     <>
       <Text color="antiquewhite" fontSize={"1.25rem"}>
@@ -212,7 +230,13 @@ const UnmatchedInput = ({ setDeckId }) => {
   );
 };
 
-const DeckCarousel = ({ data, selectedDeck }) => {
+const DeckCarousel = ({
+  data,
+  selectedDeck,
+}: {
+  data?: DeckImportType;
+  selectedDeck?: DeckImportType;
+}) => {
   const deck = selectedDeck ? selectedDeck : data;
   if (!deck) return <div />;
   return (
@@ -226,7 +250,7 @@ const DeckCarousel = ({ data, selectedDeck }) => {
   );
 };
 
-const DeckInfo: DeckImportDataType = ({ data }) => {
+const DeckInfo = ({ data }: { data?: DeckImportType }) => {
   if (!data) return <div />;
   const { hero, sidekick } = data.deck_data;
   return (
@@ -241,7 +265,7 @@ const DeckInfo: DeckImportDataType = ({ data }) => {
       </HStack>
       <HStack display={sidekick.quantity === 0 ? "none" : "inline-flex"}>
         <Tag>
-          {sidekick.quantity > 1
+          {sidekick.quantity !== null && sidekick.quantity > 1
             ? sidekick.quantity + "x"
             : "❤️️" + sidekick.hp}
         </Tag>
@@ -250,6 +274,9 @@ const DeckInfo: DeckImportDataType = ({ data }) => {
           {sidekick.name}
         </Text>
       </HStack>
+      <Text mt="1rem" color="antiquewhite">
+        {data.deck_data.hero.specialAbility}
+      </Text>
     </Box>
   );
 };