Get parts on profile to update when user saves a new part

web/src/components/EditUserCell/EditUserCell.js

@@ -26,9 +26,9 @@ const UPDATE_USER_MUTATION = gql`
   }
 `
 
-export const Loading = () => <div>Loading...</div>
+export const Loading = () => <div className="h-screen">Loading...</div>
 
-export const Empty = () => <div>Empty</div>
+export const Empty = () => <div className="h-full">Empty</div>
 
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 

web/src/components/IdePartCell/IdePartCell.js

@@ -1,6 +1,8 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { navigate, routes } from '@redwoodjs/router'
 import IdeCascadeStudio from 'src/components/IdeCascadeStudio'
+import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
+import useUser from 'src/helpers/hooks/useUser'
 
 export const QUERY = gql`
   query FIND_PART_BY_USENAME_TITLE($partTitle: String!, $userName: String!) {
@@ -45,12 +47,19 @@ 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' })
     },
   })
   const [forkPart] = useMutation(FORK_PART_MUTATION, {
+    refetchQueries: [
+      {
+        query: UsersPartsQuery,
+        variables: { userName: user?.userName },
+      },
+    ],
     onCompleted: ({ forkPart }) => {
       navigate(
         routes.ide({

web/src/components/IdeToolbar/IdeToolbar.js

@@ -11,6 +11,8 @@ import ImageUploader from 'src/components/ImageUploader'
 import Svg from '../Svg/Svg'
 import LoginModal from 'src/components/LoginModal'
 import { FORK_PART_MUTATION } from 'src/components/IdePartCell'
+import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
+import useUser from 'src/helpers/hooks/useUser'
 
 const IdeToolbar = ({
   canEdit,
@@ -27,9 +29,17 @@ const IdeToolbar = ({
   const { isAuthenticated, currentUser } = useAuth()
   const showForkButton = !(canEdit || isDraft)
   const [title, setTitle] = useState('untitled-part')
+  const { user } = useUser()
 
   const { addMessage } = useFlash()
-  const [forkPart] = useMutation(FORK_PART_MUTATION)
+  const [forkPart] = useMutation(FORK_PART_MUTATION, {
+    refetchQueries: [
+      {
+        query: UsersPartsQuery,
+        variables: { userName: userNamePart?.userName || user?.userName },
+      },
+    ],
+  })
 
   const handleClick = ({ event, whichPopup }) => {
     setAnchorEl(event.currentTarget)
@@ -145,7 +155,7 @@ const IdeToolbar = ({
           </span>
         )}
       </Button>
-      {isDraft && (
+      {isDraft && isAuthenticated && (
         <div className="flex items-center">
           <Button
             iconName={'save'}

web/src/components/PartCell/PartCell.js

@@ -97,9 +97,9 @@ const DELETE_PART_MUTATION = gql`
   }
 `
 
-export const Loading = () => <div>Loading...</div>
+export const Loading = () => <div className="h-screen">Loading...</div>
 
-export const Empty = () => <div>Empty</div>
+export const Empty = () => <div className="h-full">Empty</div>
 
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 

web/src/components/PartsOfUserCell/PartsOfUserCell.js

@@ -24,14 +24,7 @@ export const QUERY = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => {
-  return (
-    <div className="rw-text-center">
-      {'No parts yet. '}
-      <Link to={routes.draftPart()} className="rw-link">
-        {'Create one?'}
-      </Link>
-    </div>
-  )
+  return <div className="rw-text-center">No parts yet.</div>
 }
 
 export const Success = ({

web/src/helpers/hooks/useUser.js

@@ -0,0 +1,22 @@
+import { useQuery } from '@redwoodjs/web'
+import { useAuth } from '@redwoodjs/auth'
+
+const QUERY = gql`
+  query FIND_USER_BY_ID($id: String!) {
+    user: user(id: $id) {
+      id
+      image
+      userName
+      name
+    }
+  }
+`
+
+export default function () {
+  const { currentUser } = useAuth()
+  const { data, loading } = useQuery(QUERY, {
+    skip: !currentUser?.sub,
+    variables: { id: currentUser?.sub },
+  })
+  return { user: data?.user, loading }
+}

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, useQuery, useFlash } from '@redwoodjs/web'
+import { Flash, useFlash } from '@redwoodjs/web'
 import Tooltip from '@material-ui/core/Tooltip'
 import Popover from '@material-ui/core/Popover'
 import { getActiveClasses } from 'get-active-classes'
@@ -10,28 +10,16 @@ import { useLocation } from '@redwoodjs/router'
 import LoginModal from 'src/components/LoginModal'
 import ReactGA from 'react-ga'
 
-export const QUERY = gql`
-  query FIND_USER_BY_ID($id: String!) {
-    user: user(id: $id) {
-      id
-      image
-      userName
-      name
-    }
-  }
-`
 import Svg from 'src/components/Svg'
 import ImageUploader from 'src/components/ImageUploader'
+import useUser from 'src/helpers/hooks/useUser'
 
 let previousSubmission = ''
 
 const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
   const { logOut, isAuthenticated, currentUser, client } = useAuth()
   const { addMessage } = useFlash()
-  const { data, loading } = useQuery(QUERY, {
-    skip: !currentUser?.sub,
-    variables: { id: currentUser?.sub },
-  })
+  const { user, loading } = useUser()
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
   const [anchorEl, setAnchorEl] = useState(null)
@@ -154,7 +142,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                     <ImageUploader
                       className="rounded-full object-cover"
                       aspectRatio={1}
-                      imageUrl={data?.user?.image}
+                      imageUrl={user?.image}
                       width={80}
                     />
                   )}
@@ -188,14 +176,14 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
               }}
             >
               <div className="p-4 w-48">
-                <Link to={routes.user({ userName: data?.user?.userName })}>
+                <Link to={routes.user({ userName: user?.userName })}>
                   <h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
-                    Hello {data?.user?.name}
+                    Hello {user?.name}
                   </h3>
                 </Link>
                 <hr />
                 <br />
-                <Link to={routes.user({ userName: data?.user?.userName })}>
+                <Link to={routes.user({ userName: user?.userName })}>
                   <div className="text-indigo-800">Your Profile</div>
                 </Link>
                 <a href="#" className="text-indigo-800" onClick={logOut}>