Replace redwood flash with toaster

https://community.redwoodjs.com/t/redwood-flash-is-being-replaced-with-react-hot-toast-how-to-update-your-project-v0-27-0/1921
Resolves #326.

app/web/src/components/AdminParts/AdminParts.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { Link, routes } from '@redwoodjs/router'
 
 import { QUERY } from 'src/components/AdminPartsCell'
@@ -21,10 +22,6 @@ const truncate = (text) => {
   return output
 }
 
-const jsonTruncate = (obj) => {
-  return truncate(JSON.stringify(obj, null, 2))
-}
-
 const timeTag = (datetime) => {
   return (
     <time dateTime={datetime} title={datetime}>
@@ -38,10 +35,9 @@ const checkboxInputTag = (checked) => {
 }
 
 const AdminParts = ({ parts }) => {
-  const { addMessage } = useFlash()
   const [deletePart] = useMutation(DELETE_PART_MUTATION, {
     onCompleted: () => {
-      addMessage('Part deleted.', { classes: 'rw-flash-success' })
+      toast.success('Part deleted.')
     },
     // This refetches the query on the list page. Read more about other ways to
     // update the cache over here:

app/web/src/components/EditSubjectAccessRequestCell/EditSubjectAccessRequestCell.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 import SubjectAccessRequestForm from 'src/components/SubjectAccessRequestForm'
 
@@ -33,15 +34,12 @@ const UPDATE_SUBJECT_ACCESS_REQUEST_MUTATION = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Success = ({ subjectAccessRequest }) => {
-  const { addMessage } = useFlash()
   const [updateSubjectAccessRequest, { loading, error }] = useMutation(
     UPDATE_SUBJECT_ACCESS_REQUEST_MUTATION,
     {
       onCompleted: () => {
         navigate(routes.subjectAccessRequests())
-        addMessage('SubjectAccessRequest updated.', {
+        toast.success('SubjectAccessRequest updated.')
-          classes: 'rw-flash-success',
-        })
       },
     }
   )

app/web/src/components/EditUserCell/EditUserCell.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 
 import UserProfile from 'src/components/UserProfile'
@@ -33,11 +34,10 @@ export const Empty = () => <div className="h-full">Empty</div>
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 export const Success = ({ user, refetch, variables: { isEditable } }) => {
-  const { addMessage } = useFlash()
   const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
     onCompleted: ({ updateUserByUserName }) => {
       navigate(routes.user({ userName: updateUserByUserName.userName }))
-      addMessage('User updated.', { classes: 'rw-flash-success' })
+      toast.success('User updated.')
     },
   })
 

app/web/src/components/IdePartCell/IdePartCell.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 import IdeCascadeStudio from 'src/components/IdeCascadeStudio'
 import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
@@ -46,11 +47,10 @@ export const Loading = () => <div>Loading...</div>
 export const Empty = () => <div>Part not found</div>
 
 export const Success = ({ part, refetch }) => {
-  const { addMessage } = useFlash()
   const { user } = useUser()
   const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
     onCompleted: () => {
-      addMessage('Part updated.', { classes: 'rw-flash-success fixed w-screen z-10' })
+      toast.success('Part updated.')
     },
   })
   const [forkPart] = useMutation(FORK_PART_MUTATION, {
@@ -67,7 +67,7 @@ export const Success = ({ part, refetch }) => {
           partTitle: forkPart?.title,
         })
       )
-      addMessage('Part Forked.', { classes: 'rw-flash-success' })
+      toast.success('Part Forked.')
     },
   })
 

app/web/src/components/IdeToolbar/IdeToolbar.js

@@ -4,7 +4,8 @@ import OutBound from 'src/components/OutBound'
 import ReactGA from 'react-ga'
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 
 import Button from 'src/components/Button'
 import ImageUploader from 'src/components/ImageUploader'
@@ -43,7 +44,6 @@ const IdeToolbar = ({
     }
   })
 
-  const { addMessage } = useFlash()
   const [forkPart] = useMutation(FORK_PART_MUTATION, {
     refetchQueries: [
       {
@@ -86,9 +86,7 @@ const IdeToolbar = ({
           partTitle: data?.forkPart?.title,
         })
       )
-      addMessage(`Part created with title: ${data?.forkPart?.title}.`, {
+      toast.success(`Part created with title: ${data?.forkPart?.title}.`)
-        classes: 'rw-flash-success',
-      })
     } else if (isAuthenticated) onSave()
     else recordedLogin()
   }

app/web/src/components/LoginModal/LoginModal.js

@@ -6,13 +6,12 @@ import InputTextForm from 'src/components/InputTextForm'
 import OutBound from 'src/components/OutBound'
 import { Form, Submit } from '@redwoodjs/forms'
 import { useAuth } from '@redwoodjs/auth'
-import { useFlash } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { Link, routes } from '@redwoodjs/router'
 import { subscribe } from 'src/helpers/subscribe'
 
 const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
   const { logIn, signUp } = useAuth()
-  const { addMessage } = useFlash()
 
   const [tab, setTab] = useState(shouldStartWithSignup ? 0 : 1)
   const onTabChange = (_, newValue) => {
@@ -26,7 +25,7 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
     try {
       setError('')
       if (checkBox) {
-        subscribe({ email, addMessage })
+        subscribe({ email, addMessage: (msg) => toast.error(msg) })
       }
       await signUp({
         email,

app/web/src/components/PartCell/PartCell.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
 
@@ -113,7 +114,6 @@ export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
   const { currentUser } = useAuth()
-  const { addMessage } = useFlash()
   const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
     onCompleted: ({ updatePart }) => {
       navigate(
@@ -122,7 +122,7 @@ export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
           partTitle: updatePart.title,
         })
       )
-      addMessage('Part updated.', { classes: 'rw-flash-success' })
+      toast.success('Part updated.')
     },
   })
   const [createPart] = useMutation(CREATE_PART_MUTATION, {
@@ -133,7 +133,7 @@ export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
           partTitle: createPart?.title,
         })
       )
-      addMessage('Part Created.', { classes: 'rw-flash-success' })
+      toast.success('Part Created.')
     },
   })
   const onSave = async (id, input) => {
@@ -147,7 +147,7 @@ export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
   const [deletePart] = useMutation(DELETE_PART_MUTATION, {
     onCompleted: ({ deletePart }) => {
       navigate(routes.home())
-      addMessage('Part deleted.', { classes: 'rw-flash-success' })
+      toast.success('Part deleted.')
     },
   })
 

app/web/src/components/SubjectAccessRequest/SubjectAccessRequest.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { Link, routes, navigate } from '@redwoodjs/router'
 
 import { QUERY } from 'src/components/SubjectAccessRequestsCell'
@@ -32,15 +33,12 @@ const checkboxInputTag = (checked) => {
 }
 
 const SubjectAccessRequest = ({ subjectAccessRequest }) => {
-  const { addMessage } = useFlash()
   const [deleteSubjectAccessRequest] = useMutation(
     DELETE_SUBJECT_ACCESS_REQUEST_MUTATION,
     {
       onCompleted: () => {
         navigate(routes.subjectAccessRequests())
-        addMessage('SubjectAccessRequest deleted.', {
+        toast.success('SubjectAccessRequest deleted.')
-          classes: 'rw-flash-success',
-        })
       },
       // This refetches the query on the list page. Read more about other ways to
       // update the cache over here:

app/web/src/components/SubjectAccessRequests/SubjectAccessRequests.js

@@ -1,4 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 import { Link, routes } from '@redwoodjs/router'
 
 import { QUERY } from 'src/components/SubjectAccessRequestsCell'
@@ -38,14 +39,11 @@ const checkboxInputTag = (checked) => {
 }
 
 const SubjectAccessRequestsList = ({ subjectAccessRequests }) => {
-  const { addMessage } = useFlash()
   const [deleteSubjectAccessRequest] = useMutation(
     DELETE_SUBJECT_ACCESS_REQUEST_MUTATION,
     {
       onCompleted: () => {
-        addMessage('SubjectAccessRequest deleted.', {
+        toast.success('SubjectAccessRequest deleted.')
-          classes: 'rw-flash-success',
-        })
       },
       // This refetches the query on the list page. Read more about other ways to
       // update the cache over here:

app/web/src/components/Users/Users.js

@@ -1,5 +1,5 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
-import { Link, routes } from '@redwoodjs/router'
+import { toast } from '@redwoodjs/web/toast'
 
 const DELETE_USER_MUTATION = gql`
   mutation DeleteUserMutation($id: String!) {
@@ -36,10 +36,9 @@ const checkboxInputTag = (checked) => {
 }
 
 const UsersList = ({ users }) => {
-  const { addMessage } = useFlash()
   const [deleteUser] = useMutation(DELETE_USER_MUTATION, {
     onCompleted: () => {
-      addMessage('User deleted.', { classes: 'rw-flash-success' })
+      toast.success('User deleted.')
     },
   })
 

app/web/src/helpers/subscribe.js

@@ -7,9 +7,7 @@ export const subscribe = ({ email, addMessage }) => {
     )
   } catch (e) {
     setTimeout(() => {
-      addMessage('Problem subscribing to newsletter', {
+      addMessage('Problem subscribing to newsletter')
-        classes: 'bg-red-300 text-red-900',
-      })
     }, 1000)
   }
 }

app/web/src/layouts/MainLayout/MainLayout.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
-import { Flash, useFlash } from '@redwoodjs/web'
+import { Toaster, toast } from '@redwoodjs/web/toast'
 import Tooltip from '@material-ui/core/Tooltip'
 import Popover from '@material-ui/core/Popover'
 import { getActiveClasses } from 'get-active-classes'
@@ -20,7 +20,6 @@ let previousSubmission = ''
 
 const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
   const { logOut, isAuthenticated, currentUser, client } = useAuth()
-  const { addMessage } = useFlash()
   const { user, loading } = useUser()
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
@@ -75,12 +74,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
       client
         .confirm(token, true)
         .then(() => {
-          addMessage('Email confirmed', { classes: 'rw-flash-success' })
+          toast.success('Email confirmed')
         })
         .catch(() => {
-          addMessage('Problem confirming email', {
+          toast.error('Problem confirming email')
-            classes: 'bg-red-300 text-red-900',
-          })
         })
     } else if (key === 'recovery_token') {
       client
@@ -89,12 +86,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
           navigate(routes.updatePassword())
         })
         .catch(() => {
-          addMessage('Problem recovering account', {
+          toast.error('Problem recovering account')
-            classes: 'bg-red-300 text-red-900',
-          })
         })
     }
-  }, [hash, client]) // complaining about not having addMessage, however adding it puts useEffect into a loop
+  }, [hash, client])
   return (
     <div>
       <header id="cadhub-main-header">
@@ -197,7 +192,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
           )}
         </nav>
       </header>
-      <Flash timeout={1500} />
+      <Toaster timeout={1500} />
       <LoginModal
         open={isLoginModalOpen}
         onClose={() => setIsLoginModalOpen(false)}

app/web/src/layouts/SubjectAccessRequestsLayout/SubjectAccessRequestsLayout.js

@@ -1,10 +1,10 @@
 import { Link, routes } from '@redwoodjs/router'
-import { Flash } from '@redwoodjs/web'
+import { Toaster } from '@redwoodjs/web/toast'
 
 const SubjectAccessRequestsLayout = (props) => {
   return (
     <div className="rw-scaffold">
-      <Flash timeout={1000} />
+      <Toaster timeout={1000} />
       <header className="rw-header">
         <h1 className="rw-heading rw-heading-primary">
           <Link to={routes.subjectAccessRequests()} className="rw-link">

app/web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js

@@ -1,28 +1,25 @@
 import { routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
 import { Form, Submit } from '@redwoodjs/forms'
-import { useFlash } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 
 import InputTextForm from 'src/components/InputTextForm'
 import MainLayout from 'src/layouts/MainLayout'
 import Seo from 'src/components/Seo/Seo'
 
 const AccountRecoveryPage = () => {
-  const { addMessage } = useFlash()
   const { client } = useAuth()
   const onSubmit = ({ email }) => {
     client
       .requestPasswordRecovery(email)
       .then(() => {
-        addMessage('Email sent', { classes: 'rw-flash-success' })
+        toast.success('Email sent')
         setTimeout(() => {
           navigate(routes.home())
         }, 500)
       })
       .catch(() => {
-        addMessage('Problem sending email', {
+        toast.error('Problem sending email')
-          classes: 'bg-red-300 text-red-900',
-        })
       })
   }
   return (

app/web/src/pages/SubjectAccessRequestsPage/SubjectAccessRequestsPage.js

@@ -6,6 +6,7 @@ import { Form, Submit } from '@redwoodjs/forms'
 import MainLayout from 'src/layouts/MainLayout'
 import Seo from 'src/components/Seo/Seo'
 import InputTextForm from 'src/components/InputTextForm'
+import { toast } from '@redwoodjs/web/dist/toast'
 
 export const QUERY = gql`
   query SUBJECT_ACCESS_REQUEST($userName: String!) {
@@ -74,7 +75,6 @@ const CREATE_SUBJECT_ACCESS_REQUEST_MUTATION = gql`
 `
 
 const SubjectAccessRequestPage = () => {
-  const { addMessage } = useFlash()
   const [input, setInput] = useState({})
   const { data } = useQuery(QUERY, {
     skip: !input.userName,
@@ -88,9 +88,7 @@ const SubjectAccessRequestPage = () => {
     CREATE_SUBJECT_ACCESS_REQUEST_MUTATION,
     {
       onCompleted: () => {
-        addMessage('SubjectAccessRequest created.', {
+        toast.success('SubjectAccessRequest created.')
-          classes: 'rw-flash-success',
-        })
       },
     }
   )

app/web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js

@@ -1,35 +1,30 @@
 import { routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
 import { Form, Submit } from '@redwoodjs/forms'
-import { useFlash } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 
 import InputTextForm from 'src/components/InputTextForm'
 import MainLayout from 'src/layouts/MainLayout'
 import Seo from 'src/components/Seo/Seo'
 
 const UpdatePasswordPage = () => {
-  const { addMessage } = useFlash()
   const { client } = useAuth()
   const onSubmit = ({ password, confirm }) => {
     if (password !== confirm || !password) {
-      addMessage("Passwords don't match, try again", {
+      toast.error("Passwords don't match, try again")
-        classes: 'bg-red-300 text-red-900',
-      })
       return
     }
     client
       .currentUser()
       .update({ password })
       .then(() => {
-        addMessage('Password updated', { classes: 'rw-flash-success' })
+        toast.success('Password updated')
         setTimeout(() => {
           navigate(routes.home())
         }, 500)
       })
       .catch(() => {
-        addMessage('Problem updating password', {
+        toast.error('Problem updating password')
-          classes: 'bg-red-300 text-red-900',
-        })
       })
   }
   return (

app/web/src/scaffold.css

@@ -6,9 +6,6 @@
 .rw-scaffold ::after,
 .rw-scaffold ::before {
   box-sizing: inherit;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e2e8f0;
 }
 .rw-scaffold main {
   color: #4a5568;