v0.35.0

web/package.json

@@ -13,10 +13,10 @@
     ]
   },
   "dependencies": {
-    "@redwoodjs/auth": "^0.34.0",
-    "@redwoodjs/forms": "^0.34.0",
-    "@redwoodjs/router": "^0.34.0",
-    "@redwoodjs/web": "^0.34.0",
+    "@redwoodjs/auth": "^0.35.0",
+    "@redwoodjs/forms": "^0.35.0",
+    "@redwoodjs/router": "^0.35.0",
+    "@redwoodjs/web": "^0.35.0",
     "netlify-identity-widget": "^1.9.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

web/src/App.js

@@ -1,6 +1,6 @@
 import { AuthProvider } from '@redwoodjs/auth'
 import netlifyIdentity from 'netlify-identity-widget'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
@@ -14,11 +14,13 @@ isBrowser && netlifyIdentity.init()
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={netlifyIdentity} type="netlify">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={netlifyIdentity} type="netlify">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 

web/src/Routes.js

@@ -8,6 +8,7 @@
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
 import { Router, Route, Private, Set } from '@redwoodjs/router'
+import PostsLayout from 'src/layouts/PostsLayout'
 import BlogLayout from 'src/layouts/BlogLayout'
 
 const Routes = () => {
@@ -20,10 +21,12 @@ const Routes = () => {
         <Route path="/" page={HomePage} name="home" />
       </Set>
       <Private unauthenticated="home">
-        <Route path="/admin/posts/new" page={NewPostPage} name="newPost" />
-        <Route path="/admin/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
-        <Route path="/admin/posts/{id:Int}" page={PostPage} name="post" />
-        <Route path="/admin/posts" page={PostsPage} name="posts" />
+        <Set wrap={PostsLayout}>
+          <Route path="/admin/posts/new" page={PostNewPostPage} name="newPost" />
+          <Route path="/admin/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
+          <Route path="/admin/posts/{id:Int}" page={PostPostPage} name="post" />
+          <Route path="/admin/posts" page={PostPostsPage} name="posts" />
+        </Set>
       </Private>
       <Route notfound page={NotFoundPage} />
     </Router>

web/src/components/Post/EditPostCell/EditPostCell.js

@@ -1,9 +1,10 @@
-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'
+import PostForm from 'src/components/Post/PostForm'
 
 export const QUERY = gql`
-  query FIND_POST_BY_ID($id: Int!) {
+  query FindPostById($id: Int!) {
     post: post(id: $id) {
       id
       title
@@ -26,11 +27,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' })
     },
   })
 

web/src/components/Post/NewPost/NewPost.js

@@ -1,6 +1,7 @@
-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'
+import PostForm from 'src/components/Post/PostForm'
 
 const CREATE_POST_MUTATION = gql`
   mutation CreatePostMutation($input: CreatePostInput!) {
@@ -11,11 +12,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' })
     },
   })
 

web/src/components/Post/Post/Post.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'
 
 const DELETE_POST_MUTATION = gql`
@@ -30,11 +31,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' })
     },
   })
 

web/src/components/Post/PostCell/PostCell.js

@@ -1,7 +1,7 @@
-import Post from 'src/components/Post'
+import Post from 'src/components/Post/Post'
 
 export const QUERY = gql`
-  query FIND_POST_BY_ID($id: Int!) {
+  query FindPostById($id: Int!) {
     post: post(id: $id) {
       id
       title

web/src/components/Post/PostForm/PostForm.js

@@ -7,6 +7,12 @@ import {
   Submit,
 } from '@redwoodjs/forms'
 
+const formatDatetime = (value) => {
+  if (value) {
+    return value.replace(/:\d{2}\.\d{3}\w/, '')
+  }
+}
+
 const PostForm = (props) => {
   const onSubmit = (data) => {
     props.onSave(data, props?.post?.id)

web/src/components/Post/Posts/Posts.js

@@ -1,6 +1,9 @@
-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/Post/PostsCell'
+
 const DELETE_POST_MUTATION = gql`
   mutation DeletePostMutation($id: Int!) {
     deletePost(id: $id) {
@@ -36,16 +39,20 @@ 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:
+    // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+    refetchQueries: [{ query: QUERY }],
+    awaitRefetchQueries: true,
   })
 
   const onDeleteClick = (id) => {
     if (confirm('Are you sure you want to delete post ' + id + '?')) {
-      deletePost({ variables: { id }, refetchQueries: ['POSTS'] })
+      deletePost({ variables: { id } })
     }
   }
 

web/src/components/Post/PostsCell/PostsCell.js

@@ -1,6 +1,6 @@
 import { Link, routes } from '@redwoodjs/router'
 
-import Posts from 'src/components/Posts'
+import Posts from 'src/components/Post/Posts'
 
 export const QUERY = gql`
   query POSTS {

web/src/layouts/PostsLayout/PostsLayout.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">

web/src/pages/EditPostPage/EditPostPage.js

@@ -1,12 +0,0 @@
-import PostsLayout from 'src/layouts/PostsLayout'
-import EditPostCell from 'src/components/EditPostCell'
-
-const EditPostPage = ({ id }) => {
-  return (
-    <PostsLayout>
-      <EditPostCell id={id} />
-    </PostsLayout>
-  )
-}
-
-export default EditPostPage

web/src/pages/NewPostPage/NewPostPage.js

@@ -1,12 +0,0 @@
-import PostsLayout from 'src/layouts/PostsLayout'
-import NewPost from 'src/components/NewPost'
-
-const NewPostPage = () => {
-  return (
-    <PostsLayout>
-      <NewPost />
-    </PostsLayout>
-  )
-}
-
-export default NewPostPage

web/src/pages/Post/EditPostPage/EditPostPage.js

@@ -0,0 +1,7 @@
+import EditPostCell from 'src/components/Post/EditPostCell'
+
+const EditPostPage = ({ id }) => {
+  return <EditPostCell id={id} />
+}
+
+export default EditPostPage

web/src/pages/Post/NewPostPage/NewPostPage.js

@@ -0,0 +1,7 @@
+import NewPost from 'src/components/Post/NewPost'
+
+const NewPostPage = () => {
+  return <NewPost />
+}
+
+export default NewPostPage

web/src/pages/Post/PostPage/PostPage.js

@@ -0,0 +1,7 @@
+import PostCell from 'src/components/Post/PostCell'
+
+const PostPage = ({ id }) => {
+  return <PostCell id={id} />
+}
+
+export default PostPage

web/src/pages/Post/PostsPage/PostsPage.js

@@ -0,0 +1,7 @@
+import PostsCell from 'src/components/Post/PostsCell'
+
+const PostsPage = () => {
+  return <PostsCell />
+}
+
+export default PostsPage

web/src/pages/PostPage/PostPage.js

@@ -1,12 +0,0 @@
-import PostsLayout from 'src/layouts/PostsLayout'
-import PostCell from 'src/components/PostCell'
-
-const PostPage = ({ id }) => {
-  return (
-    <PostsLayout>
-      <PostCell id={id} />
-    </PostsLayout>
-  )
-}
-
-export default PostPage

web/src/pages/PostsPage/PostsPage.js

@@ -1,12 +0,0 @@
-import PostsLayout from 'src/layouts/PostsLayout'
-import PostsCell from 'src/components/PostsCell'
-
-const PostsPage = () => {
-  return (
-    <PostsLayout>
-      <PostsCell />
-    </PostsLayout>
-  )
-}
-
-export default PostsPage

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;
@@ -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;
@@ -238,8 +206,9 @@
   border-radius: 0.25rem;
   outline: none;
 }
-.rw-input[type='checkbox'] {
-  width: initial;
+.rw-input[type='checkbox'],
+.rw-input[type='radio'] {
+  width: 1rem;
   margin-left: 0;
 }
 .rw-input:focus {