From f5d06631c2ff7b3bad50546f3df235fd67706c0e Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 26 Nov 2024 20:04:05 -0600
Subject: [PATCH] feat: tier list share button

---
 .../TierList/Controls/components/Share.tsx    | 21 ++++++++++++++
 .../{Controls.tsx => Controls/index.tsx}      |  9 ++++--
 .../src/components/TierList/URLManager.tsx    | 29 +++++++++++++++++++
 .../core/blitzkit/generateTierListParams.ts   |  9 ++++++
 .../src/pages/tools/tier-list/_index.tsx      |  2 ++
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 packages/website/src/components/TierList/Controls/components/Share.tsx
 rename packages/website/src/components/TierList/{Controls.tsx => Controls/index.tsx} (69%)
 create mode 100644 packages/website/src/components/TierList/URLManager.tsx
 create mode 100644 packages/website/src/core/blitzkit/generateTierListParams.ts

diff --git a/packages/website/src/components/TierList/Controls/components/Share.tsx b/packages/website/src/components/TierList/Controls/components/Share.tsx
new file mode 100644
index 000000000..7825f59b5
--- /dev/null
+++ b/packages/website/src/components/TierList/Controls/components/Share.tsx
@@ -0,0 +1,21 @@
+import { Share2Icon } from '@radix-ui/react-icons';
+import { useRef } from 'react';
+import { generateTierListParams } from '../../../../core/blitzkit/generateTierListParams';
+import { TierList } from '../../../../stores/tierList';
+import { CopyButton } from '../../../CopyButton';
+
+export function Share() {
+  const tanks = TierList.use((state) => state.tanks);
+  const input = useRef<HTMLInputElement>(null);
+
+  return (
+    <CopyButton
+      variant="outline"
+      copy={() =>
+        `${location.origin}/tools/tier-list?${generateTierListParams(tanks)}`
+      }
+    >
+      <Share2Icon /> Share
+    </CopyButton>
+  );
+}
diff --git a/packages/website/src/components/TierList/Controls.tsx b/packages/website/src/components/TierList/Controls/index.tsx
similarity index 69%
rename from packages/website/src/components/TierList/Controls.tsx
rename to packages/website/src/components/TierList/Controls/index.tsx
index 15c27d588..7592f113c 100644
--- a/packages/website/src/components/TierList/Controls.tsx
+++ b/packages/website/src/components/TierList/Controls/index.tsx
@@ -1,13 +1,14 @@
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { Button, Flex } from '@radix-ui/themes';
-import { TierList } from '../../stores/tierList';
-import { tierListRows } from './Table/constants';
+import { TierList } from '../../../stores/tierList';
+import { tierListRows } from '../Table/constants';
+import { Share } from './components/Share';
 
 export function TierListControls() {
   const mutateTierList = TierList.useMutation();
 
   return (
-    <Flex justify="center">
+    <Flex justify="center" gap="2">
       <Button
         color="red"
         onClick={() => {
@@ -18,6 +19,8 @@ export function TierListControls() {
       >
         <ReloadIcon /> Reset
       </Button>
+
+      <Share />
     </Flex>
   );
 }
diff --git a/packages/website/src/components/TierList/URLManager.tsx b/packages/website/src/components/TierList/URLManager.tsx
new file mode 100644
index 000000000..da16671d8
--- /dev/null
+++ b/packages/website/src/components/TierList/URLManager.tsx
@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { generateTierListParams } from '../../core/blitzkit/generateTierListParams';
+import { TierList } from '../../stores/tierList';
+
+export function URLManager() {
+  const tanks = TierList.use((state) => state.tanks);
+  const mutateTierList = TierList.useMutation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    params.forEach((value, key) => {
+      if (key.startsWith('row-')) {
+        const index = Number.parseInt(key.slice(4), 10);
+        const values = value.split(',').map(parseInt).filter(Boolean);
+
+        mutateTierList((draft) => {
+          draft.tanks[index] = values;
+        });
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    window.history.replaceState(null, '', `?${generateTierListParams(tanks)}`);
+  }, [tanks]);
+
+  return null;
+}
diff --git a/packages/website/src/core/blitzkit/generateTierListParams.ts b/packages/website/src/core/blitzkit/generateTierListParams.ts
new file mode 100644
index 000000000..8d465adcc
--- /dev/null
+++ b/packages/website/src/core/blitzkit/generateTierListParams.ts
@@ -0,0 +1,9 @@
+export function generateTierListParams(tanks: number[][]) {
+  const params = new URLSearchParams();
+
+  tanks.forEach((row, index) => {
+    params.set(`row-${index}`, row.join(','));
+  });
+
+  return params;
+}
diff --git a/packages/website/src/pages/tools/tier-list/_index.tsx b/packages/website/src/pages/tools/tier-list/_index.tsx
index 1bd55d237..2cfe0749a 100644
--- a/packages/website/src/pages/tools/tier-list/_index.tsx
+++ b/packages/website/src/pages/tools/tier-list/_index.tsx
@@ -3,6 +3,7 @@ import { FilterControl } from '../../../components/TankSearch/components/FilterC
 import { TierListControls } from '../../../components/TierList/Controls';
 import { TierListTable } from '../../../components/TierList/Table';
 import { TierListTiles } from '../../../components/TierList/Tiles';
+import { URLManager } from '../../../components/TierList/URLManager';
 import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
 import { TierList } from '../../../stores/tierList';
 
@@ -19,6 +20,7 @@ export function Page() {
 function Content() {
   return (
     <PageWrapper color="orange" maxWidth="100rem">
+      <URLManager />
       <TierListControls />
       <TierListTable />
       <FilterControl />