Merge pull request #187 from jedmund/toast-on-remix

Show toast when remix button clicked

components/Header/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useSnapshot } from 'valtio'
 import { deleteCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { Trans, useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 import clonedeep from 'lodash.clonedeep'
 import Link from 'next/link'
@@ -43,11 +43,13 @@ const Header = () => {
 
   // State management
   const [copyToastOpen, setCopyToastOpen] = useState(false)
+  const [remixToastOpen, setRemixToastOpen] = useState(false)
   const [loginModalOpen, setLoginModalOpen] = useState(false)
   const [signupModalOpen, setSignupModalOpen] = useState(false)
   const [settingsModalOpen, setSettingsModalOpen] = useState(false)
   const [leftMenuOpen, setLeftMenuOpen] = useState(false)
   const [rightMenuOpen, setRightMenuOpen] = useState(false)
+  const [originalName, setOriginalName] = useState('')
 
   // Snapshots
   const { account } = useSnapshot(accountState)
@@ -61,6 +63,14 @@ const Header = () => {
     setCopyToastOpen(false)
   }
 
+  function handleRemixToastOpenChanged(open: boolean) {
+    setRemixToastOpen(open)
+  }
+
+  function handleRemixToastCloseClicked() {
+    setRemixToastOpen(false)
+  }
+
   function handleLeftMenuButtonClicked() {
     setLeftMenuOpen(!leftMenuOpen)
   }
@@ -147,10 +157,13 @@ const Header = () => {
   }
 
   function remixTeam() {
+    setOriginalName(party.name ? party.name : t('no_title'))
+
     if (party.shortcode)
       api.remix(party.shortcode).then((response) => {
         const remix = response.data.party
         router.push(`/p/${remix.shortcode}`)
+        setRemixToastOpen(true)
       })
   }
 
@@ -222,6 +235,23 @@ const Header = () => {
     )
   }
 
+  const remixToast = () => {
+    return (
+      <Toast
+        open={remixToastOpen}
+        duration={2400}
+        type="foreground"
+        content={
+          <Trans i18nKey="toasts.remixed">
+            You remixed <strong>{{ title: originalName }}</strong>
+          </Trans>
+        }
+        onOpenChange={handleRemixToastOpenChanged}
+        onCloseClick={handleRemixToastCloseClicked}
+      />
+    )
+  }
+
   const saveButton = () => {
     return (
       <Tooltip content={t('tooltips.save')}>
@@ -469,6 +499,7 @@ const Header = () => {
       {left()}
       {right()}
       {urlCopyToast()}
+      {remixToast()}
       {settingsModal()}
       {loginModal()}
       {signupModal()}

components/Toast/index.scss

@@ -52,5 +52,9 @@
 
   p {
     line-height: 1.3;
+
+    strong {
+      font-weight: $bold;
+    }
   }
 }

components/Toast/index.tsx

@@ -7,7 +7,7 @@ import './index.scss'
 interface Props extends ToastPrimitive.ToastProps {
   className?: string
   title?: string
-  content: string
+  content: React.ReactNode
   onCloseClick: () => void
 }
 
@@ -39,7 +39,7 @@ const Toast = ({
         <p>{content}</p>
       </ToastPrimitive.Description>
       {children && (
-        <ToastPrimitive.Action asChild altText={content}>
+        <ToastPrimitive.Action asChild altText="">
           {children}
         </ToastPrimitive.Action>
       )}

public/locales/en/common.json

@@ -397,7 +397,8 @@
     }
   },
   "toasts": {
-    "copied": "This party's URL was copied to your clipboard"
+    "copied": "This party's URL was copied to your clipboard",
+    "remixed": "You remixed {{title}}"
   },
   "tokens": {
     "remix": "Remixed"

public/locales/ja/common.json

@@ -398,7 +398,8 @@
     }
   },
   "toasts": {
-    "copied": "この編成のURLはクリップボードにコピーされました"
+    "copied": "この編成のURLはクリップボードにコピーされました",
+    "remixed": "{{title}}をリミックスしました"
   },
   "tokens": {
     "remix": "リミックスされた"