Refactor recent projects into it's own cell

app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx

@@ -7,33 +7,13 @@ import { ImageFallback } from 'src/components/ImageUploader'
 
 import useUser from 'src/helpers/hooks/useUser'
 import LoginModal from 'src/components/LoginModal'
-import Gravatar from 'src/components/Gravatar/Gravatar'
+import RecentProjectsCell from 'src/components/RecentProjectsCell'
-import ProjectsOfUserCell from 'src/components/ProjectsOfUserCell'
 
 const ProfileSlashLogin = () => {
-  const { logOut, isAuthenticated, currentUser, client } = useAuth()
+  const { logOut, isAuthenticated, currentUser } = useAuth()
   const { user, loading } = useUser()
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
-  const [isOpen, setIsOpen] = useState(false)
-  const [anchorEl, setAnchorEl] = useState(null)
-  const [popoverId, setPopoverId] = useState(undefined)
-  const openPopover = (target) => {
-    setAnchorEl(target)
-    setPopoverId('simple-popover')
-    setIsOpen(true)
-  }
-  const closePopover = () => {
-    setAnchorEl(null)
-    setPopoverId(undefined)
-    setIsOpen(false)
-  }
-  const togglePopover = ({ currentTarget }) => {
-    if (isOpen) {
-      return closePopover()
-    }
 
-    openPopover(currentTarget)
-  }
   const recordedLogin = () => {
     ReactGA.event({
       category: 'login',
@@ -87,9 +67,7 @@ const ProfileSlashLogin = () => {
               <p className="text-ch-blue-400 font-fira-code leading-4 text-sm">
                 Recent Projects
               </p>
-              <ProjectsOfUserCell
+              <RecentProjectsCell
-                projectLimit={3}
-                isMinimal
                 userName={user?.userName || currentUser.userName}
               />
             </Popover.Panel>

app/web/src/components/Projects/Projects.tsx

@@ -1,17 +1,15 @@
 import { useMemo } from 'react'
-import { Link, routes } from '@redwoodjs/router'
+import type { Projects_Of_User } from 'types/graphql'
-import Svg from 'src/components/Svg/Svg'
-import CadPackage from 'src/components/CadPackage/CadPackage'
-
-import { countEmotes } from 'src/helpers/emote'
-import ImageUploader from 'src/components/ImageUploader'
 import ProjectCard from 'src/components/ProjectCard/ProjectCard'
 
 const ProjectsList = ({
   projects,
   shouldFilterProjectsWithoutImage = false,
   projectLimit = 80,
-  isMinimal = false,
+}: {
+  projects: Projects_Of_User['projects']
+  shouldFilterProjectsWithoutImage: boolean
+  projectLimit: number
 }) => {
   // temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
   // it helps avoid the look of the website just being filled with dumby data.
@@ -34,7 +32,7 @@ const ProjectsList = ({
     [projects, shouldFilterProjectsWithoutImage]
   )
 
-  return !isMinimal ? (
+  return (
     <section className="max-w-7xl mx-auto">
       <ul
         className="grid gap-x-8 gap-y-8 items-center relative"
@@ -46,36 +44,18 @@ const ProjectsList = ({
             index
           ) => (
             <ProjectCard
-              key={index}
+              key={`project-card-${index}`}
               title={title}
               mainImage={mainImage}
               user={user}
               Reaction={Reaction}
               cadPackage={cadPackage}
               childForks={childForks}
-              key={`project-card-${index}`}
             />
           )
         )}
       </ul>
     </section>
-  ) : (
-    <section>
-      <ul>
-        {filteredProjects.map(({ title, user }, index) => (
-          <Link
-            to={routes.project({
-              userName: user?.userName,
-              projectTitle: title,
-            })}
-            className="my-2 capitalize block hover:text-ch-pink-300"
-            key={`project-item-${index}`}
-          >
-            <p>{title.replace(/[-_]/g, ' ')}</p>
-          </Link>
-        ))}
-      </ul>
-    </section>
   )
 }
 

app/web/src/components/ProjectsCell/ProjectsCell.tsx

@@ -27,30 +27,19 @@ export const QUERY = gql`
 
 export const Loading = () => <div>Loading...</div>
 
-export const Empty = ({ isMinimal = false }) => {
+export const Empty = () => {
-  return !isMinimal ? (
+  return <div className="rw-text-center">{'No projects yet.'}</div>
-    <div className="rw-text-center">
-      {'No projects yet. '}
-      <Link to={routes.draftProject()} className="rw-link">
-        {'Create one?'}
-      </Link>
-    </div>
-  ) : (
-    <p className="text-ch-gray-400">None yet!</p>
-  )
 }
 
 export const Success = ({
   projects,
   variables: { shouldFilterProjectsWithoutImage, projectLimit },
-  isMinimal = false,
 }) => {
   return (
     <Projects
       projects={projects}
       shouldFilterProjectsWithoutImage={shouldFilterProjectsWithoutImage}
       projectLimit={projectLimit}
-      isMinimal={isMinimal}
     />
   )
 }

app/web/src/components/ProjectsOfUserCell/ProjectsOfUserCell.tsx

@@ -1,7 +1,5 @@
-import { Link, routes } from '@redwoodjs/router'
+import type { Projects_Of_User } from 'types/graphql'
-
 import Projects from 'src/components/Projects/Projects'
-
 export const QUERY = gql`
   query PROJECTS_OF_USER($userName: String!) {
     projects(userName: $userName) {
@@ -20,6 +18,7 @@ export const QUERY = gql`
         userName
       }
       Reaction {
+        id
         emote
       }
     }
@@ -38,17 +37,18 @@ export const Empty = ({ isMinimal = false }) => {
 
 export const Success = ({
   projects,
-  variables: { userName },
   shouldFilterProjectsWithoutImage = false,
   projectLimit = 80,
-  isMinimal = false,
+}: {
+  projects: Projects_Of_User['projects']
+  shouldFilterProjectsWithoutImage: boolean
+  projectLimit: number
 }) => {
   return (
     <Projects
       projects={projects}
       shouldFilterProjectsWithoutImage={shouldFilterProjectsWithoutImage}
       projectLimit={projectLimit}
-      isMinimal={isMinimal}
     />
   )
 }

app/web/src/components/RecentProjectsCell/RecentProjectsCell.tsx

@@ -0,0 +1,46 @@
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import type { Projects_Of_User } from 'types/graphql'
+import { Link, routes } from '@redwoodjs/router'
+import { QUERY as _QUERY } from 'src/components/ProjectsOfUserCell/ProjectsOfUserCell'
+
+export const QUERY = _QUERY
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <p className="text-ch-gray-400">None yet!</p>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ projects }: CellSuccessProps<Projects_Of_User>) => {
+  const filteredProjects = React.useMemo(
+    () =>
+      projects
+        .slice(0, 3)
+        .sort(
+          (a, b) =>
+            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+        ),
+    [projects]
+  )
+  return (
+    <section>
+      <ul>
+        {filteredProjects.map(({ title, user }, index) => (
+          <Link
+            to={routes.project({
+              userName: user?.userName,
+              projectTitle: title,
+            })}
+            className="my-2 capitalize block hover:text-ch-pink-300"
+            key={`project-item-${index}`}
+          >
+            <p>{title.replace(/[-_]/g, ' ')}</p>
+          </Link>
+        ))}
+      </ul>
+    </section>
+  )
+}

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

@@ -16,7 +16,7 @@ import Svg from 'src/components/Svg'
 import { ImageFallback } from 'src/components/ImageUploader'
 import useUser from 'src/helpers/hooks/useUser'
 import './MainLayout.css'
-import ProjectsOfUserCell from 'src/components/ProjectsOfUserCell'
+import RecentProjectsCell from 'src/components/RecentProjectsCell'
 
 let previousSubmission = ''
 
@@ -152,11 +152,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                       <p className="text-ch-blue-400 font-fira-code leading-4 text-sm">
                         Recent Projects
                       </p>
-                      <ProjectsOfUserCell
+                      <RecentProjectsCell userName={user?.userName} />
-                        projectLimit={3}
-                        isMinimal
-                        userName={user?.userName}
-                      />
                     </Popover.Panel>
                   )}
                 </Popover>