Subscribe to router and reset state on change

components/PartyDetails/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, ChangeEvent, KeyboardEvent } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useSnapshot } from 'valtio'
+import { subscribe, useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import clonedeep from 'lodash.clonedeep'
 
@@ -25,7 +25,7 @@ import Token from '~components/Token'
 
 import api from '~utils/api'
 import { accountState } from '~utils/accountState'
-import { appState } from '~utils/appState'
+import { appState, initialAppState } from '~utils/appState'
 import { formatTimeAgo } from '~utils/timeAgo'
 import { youtube } from '~utils/youtube'
 
@@ -124,6 +124,26 @@ const PartyDetails = (props: Props) => {
     }
   }, [props.party])
 
+  // Subscribe to router changes and reset state
+  // if the new route is a new team
+  useEffect(() => {
+    router.events.on('routeChangeStart', (url, { shallow }) => {
+      if (url === '/new' || url === '/') {
+        const party = initialAppState.party
+
+        setName(party.name ? party.name : '')
+        setAutoGuard(party.autoGuard)
+        setFullAuto(party.fullAuto)
+        setChargeAttack(party.chargeAttack)
+        setClearTime(party.clearTime)
+        setRemixes(party.remixes)
+        setTurnCount(party.turnCount)
+        setButtonCount(party.buttonCount)
+        setChainCount(party.chainCount)
+      }
+    })
+  }, [])
+
   useEffect(() => {
     // Extract the video IDs from the description
     if (appState.party.description) {
@@ -475,7 +495,8 @@ const PartyDetails = (props: Props) => {
     }
   }
 
-  const editable = (
+  const editable = () => {
+    return (
       <section className={editableClasses}>
         <CharLimitedFieldset
           fieldName="name"
@@ -630,6 +651,7 @@ const PartyDetails = (props: Props) => {
         </div>
       </section>
     )
+  }
 
   const clearTimeString = () => {
     const minutes = Math.floor(clearTime / 60)
@@ -664,21 +686,28 @@ const PartyDetails = (props: Props) => {
     }
   }
 
-  const readOnly = (
+  const readOnly = () => {
+    return (
       <section className={readOnlyClasses}>
         <section className="Details">
-        <Token className={classNames({ ChargeAttack: true, On: chargeAttack })}>
+          <Token
+            className={classNames({ ChargeAttack: true, On: chargeAttack })}
+          >
             {`${t('party.details.labels.charge_attack')} ${
               chargeAttack ? 'On' : 'Off'
             }`}
           </Token>
 
           <Token className={classNames({ FullAuto: true, On: fullAuto })}>
-          {`${t('party.details.labels.full_auto')} ${fullAuto ? 'On' : 'Off'}`}
+            {`${t('party.details.labels.full_auto')} ${
+              fullAuto ? 'On' : 'Off'
+            }`}
           </Token>
 
           <Token className={classNames({ AutoGuard: true, On: autoGuard })}>
-          {`${t('party.details.labels.auto_guard')} ${fullAuto ? 'On' : 'Off'}`}
+            {`${t('party.details.labels.auto_guard')} ${
+              fullAuto ? 'On' : 'Off'
+            }`}
           </Token>
 
           {turnCount ? (
@@ -696,6 +725,7 @@ const PartyDetails = (props: Props) => {
         <Linkify>{embeddedDescription}</Linkify>
       </section>
     )
+  }
 
   const remixSection = () => {
     return (
@@ -755,8 +785,8 @@ const PartyDetails = (props: Props) => {
             ''
           )}
         </div>
-        {readOnly}
+        {readOnly()}
-        {editable}
+        {editable()}
 
         {deleteAlert()}
       </section>