From a77be2b068e80b8a260037d02809dae682681a33 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 21 Jun 2023 03:38:48 -0700
Subject: [PATCH] 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 |  2 +-
 components/party/PartyDropdown/index.tsx    | 15 ++++--
 components/party/PartyHeader/index.tsx      | 53 +++++++++++++++++++--
 components/toasts/RemixedToast/index.tsx    |  6 ++-
 4 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/components/dialogs/RemixTeamAlert/index.tsx b/components/dialogs/RemixTeamAlert/index.tsx
index 739e631a..528181f4 100644
--- a/components/dialogs/RemixTeamAlert/index.tsx
+++ b/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>
         )
       }
diff --git a/components/party/PartyDropdown/index.tsx b/components/party/PartyDropdown/index.tsx
index 12791e4b..bd0993f0 100644
--- a/components/party/PartyDropdown/index.tsx
+++ b/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}
diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx
index 07032d88..f7124d33 100644
--- a/components/party/PartyHeader/index.tsx
+++ b/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}
+      />
     </>
   )
 }
diff --git a/components/toasts/RemixedToast/index.tsx b/components/toasts/RemixedToast/index.tsx
index d77a5c76..e1c4b3d9 100644
--- a/components/toasts/RemixedToast/index.tsx
+++ b/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)