Added link in ProjectProfile and fork count to ProjectCard

app/api/src/services/projects/projects.ts

@@ -90,16 +90,15 @@ export const forkProject = async ({ input }) => {
   title = await generateUniqueString(title, isUniqueCallback)
 
   const { code, description, cadPackage } = projectData
-  const data = foreignKeyReplacement({
+
+  return db.project.create({
+    data: foreignKeyReplacement({
       ...input,
       title,
       code,
       description,
       cadPackage,
-  })
-  console.log('forking data', data)
-  return db.project.create({
-    data
+    }),
   })
 }
 
@@ -268,7 +267,8 @@ export const deleteProject = async ({ id }: Prisma.ProjectWhereUniqueInput) => {
 
 export const Project = {
   forkedFrom: (_obj, { root }) =>
-    root.forkedFromId && db.project.findUnique({where: { id: root.forkedFromId}}),
+    root.forkedFromId &&
+    db.project.findUnique({ where: { id: root.forkedFromId } }),
   childForks: (_obj, { root }) =>
     db.project.findMany({ where: { forkedFromId: root.id } }),
   user: (_obj, { root }: ResolverArgs<ReturnType<typeof project>>) =>

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -1,4 +1,5 @@
 import { useAuth } from '@redwoodjs/auth'
+import { useLocation } from '@redwoodjs/router'
 import { Popover } from '@headlessui/react'
 import { Link, navigate, routes } from '@redwoodjs/router'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
@@ -120,6 +121,7 @@ const IdeHeader = ({
           <DefaultTopButtons
             project={project}
             projectTitle={projectTitle}
+            projectId={projectId}
             _projectOwner={_projectOwner}
             handleRender={handleRender}
             canEdit={canEdit}
@@ -141,18 +143,22 @@ export default IdeHeader
 function DefaultTopButtons({
   project,
   projectTitle,
+  projectId,
   _projectOwner,
   handleRender,
   canEdit,
 }) {
   const { currentUser } = useAuth()
+  const { pathname } = useLocation()
+
   const [createFork] = useMutation(FORK_PROJECT_MUTATION, {
     onCompleted: ({ forkProject }) => {
-      navigate(
-        routes.ide({
+      const params = {
         userName: forkProject?.user?.userName,
         projectTitle: forkProject?.title,
-        })
+      }
+      navigate(
+        pathname.includes('/ide') ? routes.ide(params) : routes.project(params)
       )
     },
   })
@@ -161,7 +167,7 @@ function DefaultTopButtons({
       variables: {
         input: {
           userId: currentUser.sub,
-          forkedFromId: project.id,
+          forkedFromId: project?.id || projectId,
         },
       },
     })

app/web/src/components/ProjectCard/ProjectCard.tsx

@@ -6,7 +6,14 @@ import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'
 import { ImageFallback } from '../ImageUploader/ImageUploader'
 
-const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
+const ProjectCard = ({
+  title,
+  mainImage,
+  user,
+  Reaction,
+  cadPackage,
+  childForks,
+}) => (
   <li
     className="rounded p-1.5 bg-ch-gray-760 hover:bg-ch-gray-710 shadow-ch"
     key={`${user?.userName}--${title}`}
@@ -45,7 +52,8 @@ const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
           {countEmotes(Reaction).reduce((prev, { count }) => prev + count, 0)}
         </div>
         <div className="px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm">
-          <Svg name="fork-new" className="w-4 mr-2" />0
+          <Svg name="fork-new" className="w-4 mr-2" />
+          {childForks?.length || 0}
         </div>
       </div>
     </Link>

app/web/src/components/ProjectCell/ProjectCell.tsx

@@ -26,9 +26,7 @@ export const QUERY = gql`
         mainImage
         createdAt
         updatedAt
-        userId
         cadPackage
-        forkedFromId
         forkedFrom {
           id
           title

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -38,7 +38,6 @@ const ProjectProfile = ({
   const hasPermissionToEdit =
     currentUser?.sub === userProject.id || currentUser?.roles.includes('admin')
   const project = userProject?.Project
-  console.log({ project })
 
   const emotes = countEmotes(project?.Reaction)
   const userEmotes = project?.userReactions.map(({ emote }) => emote)
@@ -73,10 +72,10 @@ const ProjectProfile = ({
         <div className="flex">
           <IdeHeader
             handleRender={() => {}}
-            projectTitle={project?.title}
             projectOwner={userProject?.userName}
             projectOwnerImage={userProject?.image}
             projectOwnerId={userProject?.id}
+            projectTitle={project?.title}
             projectId={project?.id}
           />
         </div>
@@ -147,9 +146,20 @@ const ProjectProfile = ({
                   <KeyValue keyName="Updated on">
                     {new Date(project?.updatedAt).toDateString()}
                   </KeyValue>
-                  { project.forkedFrom && <KeyValue keyName="Forked from">
-                    { project.forkedFrom.title } by { project.forkedFrom.user.userName }
-                  </KeyValue> }
+                  {project.forkedFrom && (
+                    <KeyValue keyName="Forked from">
+                      <Link
+                        className="pink-link"
+                        to={routes.project({
+                          userName: project.forkedFrom.user.userName,
+                          projectTitle: project.forkedFrom.title,
+                        })}
+                      >
+                        {project.forkedFrom.title}
+                      </Link>{' '}
+                      by {project.forkedFrom.user.userName}
+                    </KeyValue>
+                  )}
                 </div>
                 <KeyValue keyName="Reactions">
                   <EmojiReaction

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

@@ -40,7 +40,10 @@ const ProjectsList = ({
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
       >
         {filteredProjects.map(
-          ({ title, mainImage, user, Reaction, cadPackage }, index) => (
+          (
+            { title, mainImage, user, Reaction, cadPackage, childForks },
+            index
+          ) => (
             <ProjectCard
               key={index}
               title={title}
@@ -48,6 +51,7 @@ const ProjectsList = ({
               user={user}
               Reaction={Reaction}
               cadPackage={cadPackage}
+              childForks={childForks}
             />
           )
         )}

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

@@ -9,6 +9,9 @@ export const QUERY = gql`
       title
       cadPackage
       mainImage
+      childForks {
+        id
+      }
       createdAt
       updatedAt
       user {

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

@@ -9,6 +9,9 @@ export const QUERY = gql`
       title
       mainImage
       cadPackage
+      childForks {
+        id
+      }
       createdAt
       updatedAt
       user {

app/web/src/index.css

@@ -52,6 +52,7 @@
 .markdown-overrides div {
   @apply text-ch-gray-300 bg-transparent;
 }
+.pink-link,
 .markdown-overrides a,
 .markdown-overrides div a {
   @apply text-ch-pink-500 underline bg-transparent;