Merge pull request #557 from Irev-Dev/franknoirot/add-recent-projects

Added recent projects list to logged-in nav

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

@@ -8,6 +8,7 @@ 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 ProjectsOfUserCell from 'src/components/ProjectsOfUserCell'
 
 const ProfileSlashLogin = () => {
   const { logOut, isAuthenticated, currentUser, client } = useAuth()
@@ -58,25 +59,39 @@ const ProfileSlashLogin = () => {
           </Popover.Button>
           {currentUser && (
             <Popover.Panel className="w-48 absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
-              <Link to={routes.user({ userName: user?.userName })}>
-                <h3 className="text-lg hover:text-ch-pink-300">
-                  Hello {user?.name}
-                </h3>
-              </Link>
-              <hr className="my-2" />
               <Link
-                className="my-2 mt-4 block hover:text-ch-pink-300"
-                to={routes.user({ userName: user?.userName })}
+                to={routes.user({
+                  userName: user?.userName || currentUser.userName,
+                })}
+              >
+                <p className="my-2 text-ch-blue-400 font-fira-code leading-4 text-sm">
+                  Hello {user?.name}
+                </p>
+              </Link>
+              <Link
+                className="my-2 block hover:text-ch-pink-300"
+                to={routes.user({
+                  userName: user?.userName || currentUser.userName,
+                })}
               >
                 <div>View Your Profile</div>
               </Link>
               <a
                 href="#"
                 onClick={logOut}
-                className="text-ch-gray-400 hover:text-ch-pink-300"
+                className="my-2 text-ch-gray-400 hover:text-ch-pink-300"
               >
                 Logout
               </a>
+              <hr className="my-4" />
+              <p className="text-ch-blue-400 font-fira-code leading-4 text-sm">
+                Recent Projects
+              </p>
+              <ProjectsOfUserCell
+                projectLimit={3}
+                isMinimal
+                userName={user?.userName || currentUser.userName}
+              />
             </Popover.Panel>
           )}
         </Popover>

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

@@ -11,6 +11,7 @@ const ProjectsList = ({
   projects,
   shouldFilterProjectsWithoutImage = false,
   projectLimit = 80,
+  isMinimal = false,
 }) => {
   // 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.
@@ -23,7 +24,7 @@ const ProjectsList = ({
         ? projects
             .filter(({ mainImage }) => mainImage)
             .slice(0, projectLimit || 80)
-        : [...projects]
+        : [...projects].slice(0, projectLimit || 80)
       )
         // sort should probably be done on the service, but the filtering is temp too
         .sort(
@@ -33,7 +34,7 @@ const ProjectsList = ({
     [projects, shouldFilterProjectsWithoutImage]
   )
 
-  return (
+  return !isMinimal ? (
     <section className="max-w-7xl mx-auto">
       <ul
         className="grid gap-x-8 gap-y-8 items-center relative"
@@ -52,11 +53,29 @@ const ProjectsList = ({
               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,26 +27,30 @@ export const QUERY = gql`
 
 export const Loading = () => <div>Loading...</div>
 
-export const Empty = () => {
-  return (
+export const Empty = ({ isMinimal = false }) => {
+  return !isMinimal ? (
     <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

@@ -15,6 +15,7 @@ export const QUERY = gql`
       createdAt
       updatedAt
       user {
+        id
         image
         userName
       }
@@ -27,18 +28,27 @@ export const QUERY = gql`
 
 export const Loading = () => <div>Loading...</div>
 
-export const Empty = () => {
-  return <div className="rw-text-center">No projects yet.</div>
+export const Empty = ({ isMinimal = false }) => {
+  return (
+    <p className={`${isMinimal && 'my-2 text-ch-gray-400'}`}>
+      No projects yet.
+    </p>
+  )
 }
 
 export const Success = ({
   projects,
-  variables: { shouldFilterProjectsWithoutImage },
+  variables: { userName },
+  shouldFilterProjectsWithoutImage = false,
+  projectLimit = 80,
+  isMinimal = false,
 }) => {
   return (
     <Projects
       projects={projects}
       shouldFilterProjectsWithoutImage={shouldFilterProjectsWithoutImage}
+      projectLimit={projectLimit}
+      isMinimal={isMinimal}
     />
   )
 }

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

@@ -16,6 +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'
 
 let previousSubmission = ''
 
@@ -130,13 +131,12 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                   {currentUser && (
                     <Popover.Panel className="w-48 absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
                       <Link to={routes.user({ userName: user?.userName })}>
-                        <h3 className="text-lg hover:text-ch-pink-300">
+                        <p className="my-2 text-ch-blue-400 font-fira-code leading-4 text-sm">
                           Hello {user?.name}
-                        </h3>
+                        </p>
                       </Link>
-                      <hr className="my-2" />
                       <Link
-                        className="my-2 mt-4 block hover:text-ch-pink-300"
+                        className="my-2 block hover:text-ch-pink-300"
                         to={routes.user({ userName: user?.userName })}
                       >
                         <div>View Your Profile</div>
@@ -144,10 +144,19 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                       <a
                         href="#"
                         onClick={logOut}
-                        className="text-ch-gray-400 hover:text-ch-pink-300"
+                        className="my-2 text-ch-gray-400 hover:text-ch-pink-300"
                       >
                         Logout
                       </a>
+                      <hr className="my-4" />
+                      <p className="text-ch-blue-400 font-fira-code leading-4 text-sm">
+                        Recent Projects
+                      </p>
+                      <ProjectsOfUserCell
+                        projectLimit={3}
+                        isMinimal
+                        userName={user?.userName}
+                      />
                     </Popover.Panel>
                   )}
                 </Popover>