redwoodjs · cannikin · Mar 8, 2021 · Feb 25, 2021 · Feb 25, 2021 · Feb 25, 2021
diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/assets/scaffold.css b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/assets/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;
@@ -102,35 +99,6 @@
   color: #1a202c;
   text-decoration: underline;
 }
-.rw-flash-message {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin: 0 1rem;
-  padding: 1rem;
-  background: #e2e8f0;
-  border-radius: 0.25rem;
-}
-.rw-flash-message .rw-flash-message-dismiss {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1;
-  margin-right: 0.25rem;
-  transform-origin: center;
-  transform: rotate(45deg);
-  cursor: pointer;
-}
-.rw-flash-message .rw-flash-message-dismiss:hover {
-  opacity: 0.7;
-}
-.rw-flash-message.rw-flash-success {
-  background: #48bb78;
-  color: #fff;
-}
-.rw-flash-message.rw-flash-error {
-  background: #e53e3e;
-  color: #fff;
-}
 .rw-form-wrapper {
   box-sizing: border-box;
   font-size: 0.875rem;

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/editCell.js b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/editCell.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 PostForm from 'src/components/PostForm'
 
@@ -40,11 +41,10 @@ const UPDATE_POST_MUTATION = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Success = ({ post }) => {
-  const { addMessage } = useFlash()
   const [updatePost, { loading, error }] = useMutation(UPDATE_POST_MUTATION, {
     onCompleted: () => {
+      toast.success('Post updated')
       navigate(routes.posts())
-      addMessage('Post updated.', { classes: 'rw-flash-success' })
     },
   })
 

diff --git a/...ages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/foreignKeys/edit.js b/...ages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/foreignKeys/edit.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 UserProfileForm from 'src/components/UserProfileForm'
 
@@ -27,13 +28,12 @@ const UPDATE_USER_PROFILE_MUTATION = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Success = ({ userProfile }) => {
-  const { addMessage } = useFlash()
   const [updateUserProfile, { loading, error }] = useMutation(
     UPDATE_USER_PROFILE_MUTATION,
     {
       onCompleted: () => {
+        toast.success('UserProfile updated')
         navigate(routes.userProfiles())
-        addMessage('UserProfile updated.', { classes: 'rw-flash-success' })
       },
     }
   )

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/foreignKeys/new.js b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/foreignKeys/new.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 UserProfileForm from 'src/components/UserProfileForm'
 
@@ -13,13 +14,12 @@ const CREATE_USER_PROFILE_MUTATION = gql`
 `
 
 const NewUserProfile = () => {
-  const { addMessage } = useFlash()
   const [createUserProfile, { loading, error }] = useMutation(
     CREATE_USER_PROFILE_MUTATION,
     {
       onCompleted: () => {
+        toast.success('UserProfile created')
         navigate(routes.userProfiles())
-        addMessage('UserProfile created.', { classes: 'rw-flash-success' })
       },
     }
   )

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/index.js b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/index.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/PostsCell'
@@ -38,10 +39,9 @@ const checkboxInputTag = (checked) => {
 }
 
 const PostsList = ({ posts }) => {
-  const { addMessage } = useFlash()
   const [deletePost] = useMutation(DELETE_POST_MUTATION, {
     onCompleted: () => {
-      addMessage('Post deleted.', { classes: 'rw-flash-success' })
+      toast.success('Post deleted')
     },
     // This refetches the query on the list page. Read more about other ways to
     // update the cache over here:

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/new.js b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/new.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 PostForm from 'src/components/PostForm'
 
@@ -13,11 +14,10 @@ const CREATE_POST_MUTATION = gql`
 `
 
 const NewPost = () => {
-  const { addMessage } = useFlash()
   const [createPost, { loading, error }] = useMutation(CREATE_POST_MUTATION, {
     onCompleted: () => {
+      toast.success('Post created')
       navigate(routes.posts())
-      addMessage('Post created.', { classes: 'rw-flash-success' })
     },
   })
 

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/show.js b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/show.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/PostsCell'
@@ -32,11 +33,10 @@ const checkboxInputTag = (checked) => {
 }
 
 const Post = ({ post }) => {
-  const { addMessage } = useFlash()
   const [deletePost] = useMutation(DELETE_POST_MUTATION, {
     onCompleted: () => {
+      toast.success('Post deleted')
       navigate(routes.posts())
-      addMessage('Post deleted.', { classes: 'rw-flash-success' })
     },
   })
 

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/layouts/layout.js b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/layouts/layout.js
@@ -1,10 +1,10 @@
 import { Link, routes } from '@redwoodjs/router'
-import { Flash } from '@redwoodjs/web'
+import { Toaster } from '@redwoodjs/web/toast'
 
 const PostsLayout = (props) => {
   return (
     <div className="rw-scaffold">
-      <Flash timeout={1000} />
+      <Toaster />
       <header className="rw-header">
         <h1 className="rw-heading rw-heading-primary">
           <Link to={routes.posts()} className="rw-link">

diff --git a/packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.css.template b/packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.css.template
@@ -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;
@@ -102,35 +99,6 @@
   color: #1a202c;
   text-decoration: underline;
 }
-.rw-flash-message {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin: 0 1rem;
-  padding: 1rem;
-  background: #e2e8f0;
-  border-radius: 0.25rem;
-}
-.rw-flash-message .rw-flash-message-dismiss {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1;
-  margin-right: 0.25rem;
-  transform-origin: center;
-  transform: rotate(45deg);
-  cursor: pointer;
-}
-.rw-flash-message .rw-flash-message-dismiss:hover {
-  opacity: 0.7;
-}
-.rw-flash-message.rw-flash-success {
-  background: #48bb78;
-  color: #fff;
-}
-.rw-flash-message.rw-flash-error {
-  background: #e53e3e;
-  color: #fff;
-}
 .rw-form-wrapper {
   box-sizing: border-box;
   font-size: 0.875rem;

diff --git a/packages/cli/src/commands/generate/scaffold/templates/components/EditNameCell.js.template b/packages/cli/src/commands/generate/scaffold/templates/components/EditNameCell.js.template
@@ -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 ${singularPascalName}Form from 'src/components/${pascalScaffoldPath}${singularPascalName}Form'
 
@@ -20,11 +21,10 @@ const UPDATE_${singularConstantName}_MUTATION = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Success = ({ ${singularCamelName} }) => {
-  const { addMessage } = useFlash()
   const [update${singularPascalName}, { loading, error }] = useMutation(UPDATE_${singularConstantName}_MUTATION, {
     onCompleted: () => {
+      toast.success('${singularPascalName} updated')
       navigate(routes.${pluralRouteName}())
-      addMessage('${singularPascalName} updated.', { classes: 'rw-flash-success' })
     },
   })
 

diff --git a/packages/cli/src/commands/generate/scaffold/templates/components/Name.js.template b/packages/cli/src/commands/generate/scaffold/templates/components/Name.js.template
@@ -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/${pascalScaffoldPath}${pluralPascalName}Cell'
@@ -32,11 +33,10 @@ const checkboxInputTag = (checked) => {
 }
 
 const ${singularPascalName} = ({ ${singularCamelName} }) => {
-  const { addMessage } = useFlash()
   const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
     onCompleted: () => {
+      toast.success('${singularPascalName} deleted')
       navigate(routes.${pluralRouteName}())
-      addMessage('${singularPascalName} deleted.', { classes: 'rw-flash-success' })
     },
   })
 

diff --git a/packages/cli/src/commands/generate/scaffold/templates/components/Names.js.template b/packages/cli/src/commands/generate/scaffold/templates/components/Names.js.template
@@ -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/${pascalScaffoldPath}${pluralPascalName}Cell'
@@ -38,10 +39,9 @@ const checkboxInputTag = (checked) => {
 }
 
 const ${pluralPascalName}List = ({ ${pluralCamelName} }) => {
-  const { addMessage } = useFlash()
   const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
     onCompleted: () => {
-      addMessage('${singularPascalName} deleted.', { classes: 'rw-flash-success' })
+      toast.success('${singularPascalName} deleted')
     },
     // This refetches the query on the list page. Read more about other ways to
     // update the cache over here:

diff --git a/packages/cli/src/commands/generate/scaffold/templates/components/NewName.js.template b/packages/cli/src/commands/generate/scaffold/templates/components/NewName.js.template
@@ -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 ${singularPascalName}Form from 'src/components/${pascalScaffoldPath}${singularPascalName}Form'
 
@@ -13,11 +14,10 @@ const CREATE_${singularConstantName}_MUTATION = gql`
 `
 
 const New${singularPascalName} = () => {
-  const { addMessage } = useFlash()
   const [create${singularPascalName}, { loading, error }] = useMutation(CREATE_${singularConstantName}_MUTATION, {
     onCompleted: () => {
+      toast.success('${singularPascalName} created')
       navigate(routes.${pluralRouteName}())
-      addMessage('${singularPascalName} created.', { classes: 'rw-flash-success' })
     },
   })
 

diff --git a/packages/cli/src/commands/generate/scaffold/templates/layouts/NamesLayout.js.template b/packages/cli/src/commands/generate/scaffold/templates/layouts/NamesLayout.js.template
@@ -1,10 +1,10 @@
 import { Link, routes } from '@redwoodjs/router'
-import { Flash } from '@redwoodjs/web'
+import { Toaster } from '@redwoodjs/web/toast'
 
 const ${pluralPascalName}Layout = (props) => {
   return (
     <div className="rw-scaffold">
-      <Flash timeout={1000} />
+      <Toaster />
       <header className="rw-header">
         <h1 className="rw-heading rw-heading-primary">
           <Link

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -4,6 +4,7 @@
   "files": [
     "dist",
     "apollo",
+    "toast",
     "src/entry"
   ],
   "main": "./dist/index.js",
@@ -15,7 +16,8 @@
     "@redwoodjs/auth": "^0.26.2",
     "core-js": "3.6.5",
     "graphql": "^15.3.0",
-    "proptypes": "^1.1.0"
+    "proptypes": "^1.1.0",
+    "react-hot-toast": "^1.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.1"

diff --git a/packages/web/src/apollo/index.tsx b/packages/web/src/apollo/index.tsx
@@ -17,7 +17,6 @@ import {
   useFetchConfig,
 } from 'src/components/FetchConfigProvider'
 import { GraphQLHooksProvider } from 'src/components/GraphQLHooksProvider'
-import { FlashProvider } from 'src/flash'
 
 const ApolloProviderWithFetchConfig: React.FunctionComponent<{
   config?: Omit<ApolloClientOptions<InMemoryCache>, 'cache'>
@@ -76,7 +75,7 @@ export const RedwoodApolloProvider: React.FunctionComponent<{
     <FetchConfigProvider useAuth={useAuth}>
       <ApolloProviderWithFetchConfig config={graphQLClientConfig}>
         <GraphQLHooksProvider useQuery={useQuery} useMutation={useMutation}>
-          <FlashProvider>{children}</FlashProvider>
+          {children}
         </GraphQLHooksProvider>
       </ApolloProviderWithFetchConfig>
     </FetchConfigProvider>