Merge pull request #142 from jedmund/party-url-query

Team URL queries

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

components/PartySegmentedControl/index.tsx

@@ -20,6 +20,7 @@ interface Props {
 }
 
 const PartySegmentedControl = (props: Props) => {
+  // Set up translations
   const { t } = useTranslation('common')
 
   const { party, grid } = useSnapshot(appState)
@@ -33,22 +34,16 @@ const PartySegmentedControl = (props: Props) => {
     switch (element) {
       case 1:
         return 'wind'
-        break
       case 2:
         return 'fire'
-        break
       case 3:
         return 'water'
-        break
       case 4:
         return 'earth'
-        break
       case 5:
         return 'dark'
-        break
       case 6:
         return 'light'
-        break
     }
   }
 
@@ -72,13 +67,6 @@ const PartySegmentedControl = (props: Props) => {
       })}
     >
       <SegmentedControl elementClass={getElement()}>
-        {/* <Segment
-                    groupName="grid"
-                    name="class"
-                    selected={props.selectedTab === GridType.Class}
-                    onClick={props.onClick}
-                >Class</Segment> */}
-
         <Segment
           groupName="grid"
           name="characters"

next.config.js

@@ -13,19 +13,35 @@ module.exports = {
     return [
       {
         source: '/',
-        destination: '/new'
-      }
+        destination: '/new',
+      },
+      {
+        source: '/p/:shortcode/characters',
+        destination: '/p/:shortcode',
+      },
+      {
+        source: '/p/:shortcode/weapons',
+        destination: '/p/:shortcode',
+      },
+      {
+        source: '/p/:shortcode/summons',
+        destination: '/p/:shortcode',
+      },
+      {
+        source: '/p/:shortcode/:garbage',
+        destination: '/p/:shortcode',
+      },
     ]
   },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
-      use: ["@svgr/webpack"]
-    });
+      use: ['@svgr/webpack'],
+    })
     config.module.rules[2].oneOf.forEach((one) => {
-      if (!`${one.issuer?.and}`.includes('_app')) return;
-      one.issuer.and = [path.resolve(__dirname)];
-    });
-    return config;
+      if (!`${one.issuer?.and}`.includes('_app')) return
+      one.issuer.and = [path.resolve(__dirname)]
+    })
+    return config
   },
-};
+}

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>