Fix remix toasts and alerts from both locations

The remix toast and alert was barely hooked up and not showing up when invoked from PartyHeader.

It now shows up whether you remix your own team (from PartyDropdown) or if you remix another person's team (from PartyHeader).

components/dialogs/RemixTeamAlert/index.tsx

@@ -46,7 +46,7 @@ const RemixTeamAlert = ({
           <Trans i18nKey="modals.remix_team.description.viewer">
             Remixing a team makes a copy of it in your account so you can make
             your own changes.\n\nWould you like to remix{' '}
-            <strong>{{ name: 'HEY' }}</strong>?
+            <strong>{{ name: name }}</strong>?
           </Trans>
         )
       }

components/party/PartyDropdown/index.tsx

@@ -131,7 +131,7 @@ const PartyDropdown = ({
     setCopyToastOpen(false)
   }
 
-  // Toasts / Remix team
+  // Toasts: Remix team
   function handleRemixToastOpenChanged(open: boolean) {
     setRemixToastOpen(!open)
   }
@@ -140,6 +140,11 @@ const PartyDropdown = ({
     setRemixToastOpen(false)
   }
 
+  function remixCallback() {
+    setRemixToastOpen(true)
+    remixTeamCallback()
+  }
+
   const editableItems = () => {
     return (
       <>
@@ -184,17 +189,19 @@ const PartyDropdown = ({
 
       <RemixTeamAlert
         creator={editable}
-        name={partySnapshot.name ? partySnapshot.name : t('no_title')}
+        name={partySnapshot.name || t('no_title')}
         open={remixAlertOpen}
         onOpenChange={handleRemixTeamAlertChange}
-        remixCallback={remixTeamCallback}
+        remixCallback={remixCallback}
       />
+
       <RemixedToast
         open={remixToastOpen}
-        partyName={originalName}
+        partyName={partySnapshot.name || t('no_title')}
         onOpenChange={handleRemixToastOpenChanged}
         onCloseClick={handleRemixToastCloseClicked}
       />
+
       <UrlCopiedToast
         open={copyToastOpen}
         onOpenChange={handleCopyToastOpenChanged}

components/party/PartyHeader/index.tsx

@@ -24,6 +24,9 @@ import SaveIcon from '~public/icons/Save.svg'
 import type { DetailsObject } from 'types'
 
 import './index.scss'
+import RemixTeamAlert from '~components/dialogs/RemixTeamAlert'
+import RemixedToast from '~components/toasts/RemixedToast'
+import { set } from 'local-storage'
 
 // Props
 interface Props {
@@ -44,13 +47,16 @@ const PartyHeader = (props: Props) => {
 
   const { party: partySnapshot } = useSnapshot(appState)
 
-  const [name, setName] = useState('')
+  // State: Component
+  const [remixAlertOpen, setRemixAlertOpen] = useState(false)
+  const [remixToastOpen, setRemixToastOpen] = useState(false)
 
+  // State: Data
+  const [name, setName] = useState('')
   const [chargeAttack, setChargeAttack] = useState(true)
   const [fullAuto, setFullAuto] = useState(false)
   const [autoGuard, setAutoGuard] = useState(false)
   const [autoSummon, setAutoSummon] = useState(false)
-
   const [buttonCount, setButtonCount] = useState<number | undefined>(undefined)
   const [chainCount, setChainCount] = useState<number | undefined>(undefined)
   const [turnCount, setTurnCount] = useState<number | undefined>(undefined)
@@ -157,6 +163,32 @@ const PartyHeader = (props: Props) => {
       )
   }
 
+  // Actions: Remix team
+  function remixTeamCallback() {
+    setRemixToastOpen(true)
+    props.remixCallback()
+  }
+
+  // Alerts: Remix team
+  function openRemixTeamAlert() {
+    setRemixAlertOpen(true)
+  }
+
+  function handleRemixTeamAlertChange(open: boolean) {
+    setRemixAlertOpen(open)
+  }
+
+  // Toasts: Remix team
+  function handleRemixToastOpenChanged(open: boolean) {
+    setRemixToastOpen(!open)
+  }
+
+  function handleRemixToastCloseClicked() {
+    setRemixToastOpen(false)
+  }
+
+  // Rendering
+
   const userBlock = (username?: string, picture?: string, element?: string) => {
     return (
       <div className={userClass}>
@@ -354,7 +386,7 @@ const PartyHeader = (props: Props) => {
           leftAccessoryIcon={<RemixIcon />}
           className="Remix"
           text={t('buttons.remix')}
-          onClick={props.remixCallback}
+          onClick={openRemixTeamAlert}
         />
       </Tooltip>
     )
@@ -423,6 +455,21 @@ const PartyHeader = (props: Props) => {
         </div>
         <section className={classes}>{renderTokens()}</section>
       </section>
+
+      <RemixTeamAlert
+        creator={props.editable}
+        name={partySnapshot.name ? partySnapshot.name : t('no_title')}
+        open={remixAlertOpen}
+        onOpenChange={handleRemixTeamAlertChange}
+        remixCallback={remixTeamCallback}
+      />
+
+      <RemixedToast
+        open={remixToastOpen}
+        partyName={props.party?.name || t('no_title')}
+        onOpenChange={handleRemixToastOpenChanged}
+        onCloseClick={handleRemixToastCloseClicked}
+      />
     </>
   )
 }

components/toasts/RemixedToast/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Toast from '~components/common/Toast'
 import { Trans, useTranslation } from 'next-i18next'
 
@@ -17,7 +17,9 @@ const RemixedToast = ({
   onCloseClick,
 }: Props) => {
   const { t } = useTranslation('common')
-
+  useEffect(() => {
+    console.log(partyName)
+  }, [])
   // Methods: Event handlers
   function handleOpenChange() {
     onOpenChange(open)