From 11e633b0249d70025607ecf1896fd851c1e936c0 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 30 Mar 2024 13:58:34 +0100
Subject: [PATCH] update

---
 components/Bag/Bulk/index.tsx | 144 ++++++++++++++++++++++++++++------
 pages/bag.tsx                 |  12 ++-
 2 files changed, 131 insertions(+), 25 deletions(-)

diff --git a/components/Bag/Bulk/index.tsx b/components/Bag/Bulk/index.tsx
index ed38397..6fd6e36 100644
--- a/components/Bag/Bulk/index.tsx
+++ b/components/Bag/Bulk/index.tsx
@@ -1,9 +1,11 @@
 import { DeckImportType } from "@/components/DeckPool/deck-import.type";
 import { MapData, useLocalDeckStorage, useLocalMapStorage } from "@/lib/hooks";
+import { useCopyToClipboard } from "@/lib/hooks/useCopyToClipboard";
 import { useGenericImport } from "@/lib/hooks/useGenericImport";
 import { useJsonCheck } from "@/lib/hooks/useJsonCheck";
 import {
   Box,
+  Button,
   Divider,
   FormLabel,
   Grid,
@@ -15,13 +17,17 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useDebounce } from "use-debounce";
 const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
 
 export const BagBulkContainer = () => {
-  const { decks, pushDeck } = useLocalDeckStorage();
-  const { data: maps, clear } = useLocalMapStorage();
+  const { query, push } = useRouter();
+  const { decks, pushDeck, removeDeckbyId } = useLocalDeckStorage();
+  const { data: maps, add: addMap } = useLocalMapStorage();
 
   const [rawText, setRawText] = useState<string>();
   const [_url, setUrl] = useState<string>();
@@ -33,6 +39,13 @@ export const BagBulkContainer = () => {
 
   const localBulk = { decks, maps };
 
+  useEffect(() => {
+    if (query?.url) {
+      urlDisclosure.onOpen();
+      setUrl(query.url as string);
+    }
+  }, [query?.url]);
+
   return (
     <Box h="100%">
       <Box p="0.5rem" minH="150px">
@@ -42,7 +55,10 @@ export const BagBulkContainer = () => {
         <HStack justifyContent="space-between">
           <Box>
             <HStack>
-              <Switch onChange={urlDisclosure.onToggle} />
+              <Switch
+                isChecked={urlDisclosure.isOpen}
+                onChange={urlDisclosure.onToggle}
+              />
               {urlDisclosure.isOpen ? (
                 <Text my="0.5rem">Enter URL</Text>
               ) : (
@@ -50,19 +66,53 @@ export const BagBulkContainer = () => {
               )}
             </HStack>
             {urlDisclosure.isOpen && (
-              <Input
-                maxW="200px"
-                bg="white"
-                value={url}
-                onChange={(e) => {
-                  if (rawText) setRawText(undefined);
-                  if (e.target.value === "") {
-                    setUrl(undefined);
-                    return;
-                  }
-                  setUrl(e.target.value);
-                }}
-              />
+              <HStack gap="0.5rem">
+                <Input
+                  isDisabled={!!query?.url as boolean}
+                  maxW="200px"
+                  bg="white"
+                  defaultValue={query?.url as string | undefined}
+                  value={url}
+                  onChange={(e) => {
+                    if (rawText) setRawText(undefined);
+                    if (e.target.value === "") {
+                      setUrl(undefined);
+                      return;
+                    }
+                    setUrl(e.target.value);
+                  }}
+                />
+                {!query?.url && (
+                  <Button
+                    fontSize="0.7rem"
+                    p="0.25rem 0.5rem"
+                    as={Link}
+                    href={{
+                      pathname: "/bag",
+                      query: { tab: 2, url },
+                    }}
+                  >
+                    Share Import
+                  </Button>
+                )}
+
+                {query?.url && (
+                  <Button
+                    fontSize="0.7rem"
+                    p="0.25rem 0.5rem"
+                    onClick={() => {
+                      push({
+                        pathname: "/bag",
+                        query: { tab: 2 },
+                      });
+                      setUrl(undefined);
+                      urlDisclosure.onClose();
+                    }}
+                  >
+                    Clear Import
+                  </Button>
+                )}
+              </HStack>
             )}
           </Box>
           {urlDisclosure.isOpen && (
@@ -85,16 +135,30 @@ export const BagBulkContainer = () => {
           )}
         </HStack>
       </Box>
-      {!urlDisclosure.isOpen && <BulkGrid bulk={localBulk} />}
-      {urlDisclosure.isOpen && rawText && <GridTextWrapper text={rawText} />}
+      {!urlDisclosure.isOpen && (
+        <BulkGrid
+          bulk={localBulk}
+          isLocal={true}
+          fns={{ pushDeck, removeDeckbyId }}
+        />
+      )}
+      {urlDisclosure.isOpen && rawText && (
+        <GridTextWrapper
+          text={rawText}
+          fns={{ pushDeck, removeDeckbyId, addMap }}
+        />
+      )}
       {urlDisclosure.isOpen && dataGeneric?.data && (
-        <GridTextWrapper text={JSON.stringify(dataGeneric?.data)} />
+        <GridTextWrapper
+          text={JSON.stringify(dataGeneric?.data)}
+          fns={{ pushDeck, removeDeckbyId, addMap }}
+        />
       )}
     </Box>
   );
 };
 
-const GridTextWrapper = ({ text }: { text: string }) => {
+const GridTextWrapper = ({ text, fns }: { text: string; fns?: Fns }) => {
   const { data: isJsonValid } = useJsonCheck(text);
   if (!isJsonValid) return <Invalid />;
 
@@ -103,7 +167,7 @@ const GridTextWrapper = ({ text }: { text: string }) => {
     maps?: MapData[];
   };
   if (!parsed?.decks && !parsed?.maps) return <Invalid />;
-  return <BulkGrid bulk={parsed} />;
+  return <BulkGrid bulk={parsed} fns={fns} />;
 };
 
 const Invalid = () => (
@@ -112,9 +176,19 @@ const Invalid = () => (
   </Box>
 );
 
+type Fns = {
+  pushDeck: (deck: DeckImportType) => void;
+  removeDeckbyId: (id: string) => void;
+  addMap?: (map: MapData) => void;
+};
+
 const BulkGrid = ({
   bulk,
+  isLocal,
+  fns,
 }: {
+  fns?: Fns;
+  isLocal?: boolean;
   bulk: {
     decks?: DeckImportType[];
     maps?: MapData[];
@@ -125,7 +199,19 @@ const BulkGrid = ({
       <Box h="100%" bg="white" p="0.5rem">
         <FormLabel fontWeight={700}>Decks</FormLabel>
         {bulk?.decks?.map((deck) => (
-          <Box key={deck.id + deck.version_id}>
+          <Box
+            key={deck.id + deck.version_id}
+            _hover={{ bg: isLocal ? "rgba(0,0,0,0.25)" : "green" }}
+            onClick={() => {
+              if (isLocal) {
+                fns?.removeDeckbyId(deck.id);
+                toast.success(`Removed ${deck.name}`);
+                return;
+              }
+              fns?.pushDeck(deck);
+              toast.success(`Imported ${deck.name}. Reload Page.`);
+            }}
+          >
             <Text>{deck.name}</Text>
           </Box>
         ))}
@@ -133,7 +219,17 @@ const BulkGrid = ({
         <FormLabel fontWeight={700}>Maps</FormLabel>
 
         {bulk?.maps?.map((map) => (
-          <Box key={map.imgUrl}>
+          <Box
+            key={map.imgUrl}
+            onClick={() => {
+              if (!fns?.addMap) return;
+              fns.addMap(map);
+              toast.success(
+                `Imported ${map.meta?.title ?? map?.imgUrl}. Reload page`,
+              );
+            }}
+            _hover={{ bg: isLocal ? "" : "green" }}
+          >
             <Text>{map?.meta?.title ?? map?.imgUrl}</Text>
           </Box>
         ))}
diff --git a/pages/bag.tsx b/pages/bag.tsx
index 301b562..31a7f88 100644
--- a/pages/bag.tsx
+++ b/pages/bag.tsx
@@ -12,14 +12,24 @@ import { Navbar } from "@/components/Navbar";
 import { BagDecks } from "@/components/Bag/Deck";
 import { BagMap } from "@/components/Bag/Map";
 import { BagBulkContainer } from "@/components/Bag/Bulk";
+import { useRouter } from "next/router";
 
 const BagPage = () => {
+  const { query, push } = useRouter();
+  const tab = query?.tab as number | undefined;
+
   return (
     <Flex flexDir={"column"} bg="brand.highlight" h="100svh">
       <Box color="brand.secondary">
         <Navbar />
       </Box>
-      <Tabs h="100%">
+      <Tabs
+        h="100%"
+        index={tab ? +tab : 0}
+        onChange={(e) => {
+          push({ query: { ...query, tab: e.toString() } });
+        }}
+      >
         <TabList>
           <Tab>Decks</Tab>
           <Tab>Maps</Tab>