From f0d6f1f8a471188ecd5176503393450f819f40dd Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 14 Jan 2023 12:23:03 -0800
Subject: [PATCH] Implement query param switching

Adding /characters, /weapons, or /summons will direct you to that tab by default, with /weapons as the default.

Clicking the segmented controller replaces the URL with the corresponding path, but doesn't push the navigation stack
---
 components/Party/index.tsx | 23 ++++++++++++++++++++---
 pages/p/[party].tsx        | 31 +++++++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 14c3f49a..fd32525d 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -21,9 +21,14 @@ interface Props {
   new?: boolean
   team?: Party
   raids: Raid[][]
+  selectedTab: GridType
   pushHistory?: (path: string) => void
 }
 
+const defaultProps = {
+  selectedTab: GridType.Weapon,
+}
+
 const Party = (props: Props) => {
   // Set up router
   const router = useRouter()
@@ -39,6 +44,11 @@ const Party = (props: Props) => {
     if (props.team) storeParty(props.team)
   }, [])
 
+  // Set selected tab from props
+  useEffect(() => {
+    setCurrentTab(props.selectedTab)
+  }, [props.selectedTab])
+
   // Methods: Creating a new party
   async function createParty(details?: DetailsObject) {
     let payload = {}
@@ -184,17 +194,22 @@ const Party = (props: Props) => {
 
   // Methods: Navigating with segmented control
   function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const path = [
+      router.asPath.split('/').filter((el) => el != '')[1],
+      event.target.value,
+    ].join('/')
+
     switch (event.target.value) {
-      case 'class':
-        setCurrentTab(GridType.Class)
-        break
       case 'characters':
+        router.replace(path)
         setCurrentTab(GridType.Character)
         break
       case 'weapons':
+        router.replace(path)
         setCurrentTab(GridType.Weapon)
         break
       case 'summons':
+        router.replace(path)
         setCurrentTab(GridType.Summon)
         break
       default:
@@ -264,4 +279,6 @@ const Party = (props: Props) => {
   )
 }
 
+Party.defaultProps = defaultProps
+
 export default Party
diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx
index 7e1631ca..c015abea 100644
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -12,9 +12,11 @@ import generateTitle from '~utils/generateTitle'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
 import api from '~utils/api'
+import { GridType } from '~utils/enums'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
+import { useQueryState } from 'next-usequerystate'
 
 interface Props {
   party: Party
@@ -35,6 +37,27 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  // URL state
+  const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
+
+  useEffect(() => {
+    const parts = router.asPath.split('/')
+    const tab = parts[parts.length - 1]
+
+    switch (tab) {
+      case 'characters':
+        setSelectedTab(GridType.Character)
+        break
+      case 'weapons':
+        setSelectedTab(GridType.Weapon)
+        break
+      case 'summons':
+        setSelectedTab(GridType.Summon)
+        break
+    }
+  }, [router.asPath])
+
+  // Static data
   useEffect(() => {
     persistStaticData()
   }, [persistStaticData])
@@ -48,7 +71,11 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
 
   return (
     <React.Fragment>
-      <Party team={props.party} raids={props.sortedRaids} />
+      <Party
+        team={props.party}
+        raids={props.sortedRaids}
+        selectedTab={selectedTab}
+      />
       <Head>
         {/* HTML */}
         <title>