Merge pull request #534 from Irev-Dev/kurt/add-project-forking

Refactor IdeHeader to take middle buttons as children

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

@@ -1,21 +1,17 @@
 import { useAuth } from '@redwoodjs/auth'
-import { useLocation } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
 import { Popover } from '@headlessui/react'
 import { Link, navigate, routes } from '@redwoodjs/router'
-import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+
 import FullScriptEncoding from 'src/components/EncodedUrl/FullScriptEncoding'
 import ExternalScript from 'src/components/EncodedUrl/ExternalScript'
 import Svg from 'src/components/Svg/Svg'
-import NavPlusButton from 'src/components/NavPlusButton'
-import ProfileSlashLogin from 'src/components/ProfileSlashLogin'
-import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+import CaptureButton from 'src/components/CaptureButton/CaptureButton'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import Gravatar from 'src/components/Gravatar/Gravatar'
 import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle'
-import CaptureButton from 'src/components/CaptureButton/CaptureButton'
-import { toast } from '@redwoodjs/web/toast'
-
-import { ReactNode } from 'react'
 
 const FORK_PROJECT_MUTATION = gql`
   mutation ForkProjectMutation($input: ForkProjectInput!) {
@@ -55,101 +51,21 @@ const TopButton = ({
   )
 }
 
-interface IdeHeaderProps {
-  handleRender: () => void
-  projectTitle?: string
-  projectOwner?: string
-  projectOwnerId?: string
-  projectOwnerImage?: string
-  projectId?: string
-  children?: ReactNode
-}
-
-const IdeHeader = ({
+export default function IdeHeader({
   handleRender,
-  projectOwner,
-  projectTitle,
-  projectOwnerImage,
-  projectId,
-  projectOwnerId,
-  children,
-}: IdeHeaderProps) => {
-  const { currentUser } = useAuth()
-  const { project } = useIdeContext()
-  const canEdit =
-    (currentUser &&
-      currentUser?.sub === (project?.user?.id || projectOwnerId)) ||
-    currentUser?.roles.includes('admin')
-  const _projectId = projectId || project?.id
-  const _projectOwner = project?.user?.userName || projectOwner
-
-  return (
-    <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg">
-      <div className="h-full text-gray-300 flex items-center">
-        <div className="w-14 h-16 flex items-center justify-center bg-ch-gray-900">
-          <Link to={routes.home()}>
-            <Svg className="w-12 p-0.5" name="favicon" />
-          </Link>
-        </div>
-        {_projectId && (
-          <>
-            <span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4">
-              <Gravatar
-                image={project?.user?.image || projectOwnerImage}
-                className="w-10"
-              />
-              <Link
-                to={routes.user({
-                  userName: _projectOwner,
-                })}
-              >
-                {_projectOwner}
-              </Link>
-            </span>
-            <EditableProjectTitle
-              id={_projectId}
-              userName={_projectOwner}
-              projectTitle={project?.title || projectTitle}
-              canEdit={canEdit}
-              shouldRouteToIde={!projectTitle}
-            />
-          </>
-        )}
-      </div>
-      <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
-        {!children ? (
-          <DefaultTopButtons
-            project={project}
-            projectTitle={projectTitle}
-            projectId={projectId}
-            _projectOwner={_projectOwner}
-            handleRender={handleRender}
-            canEdit={canEdit}
-          />
-        ) : (
-          children
-        )}
-        <div className="h-8 w-8">
-          <NavPlusButton />
-        </div>
-        <ProfileSlashLogin />
-      </div>
-    </div>
-  )
-}
-
-export default IdeHeader
-
-function DefaultTopButtons({
-  project,
-  projectTitle,
-  projectId,
-  _projectOwner,
-  handleRender,
-  canEdit,
+  context,
+}: {
+  handleRender?: () => void
+  context: 'ide' | 'profile'
 }) {
   const { currentUser } = useAuth()
-  const { pathname } = useLocation()
+  const { project } = useIdeContext()
+
+  const isProfile = context === 'profile'
+  const canEdit =
+    (currentUser && currentUser?.sub === project?.user?.id) ||
+    currentUser?.roles?.includes('admin')
+  const projectOwner = project?.user?.userName
 
   const [createFork] = useMutation(FORK_PROJECT_MUTATION, {
     onCompleted: ({ forkProject }) => {
@@ -157,9 +73,7 @@ function DefaultTopButtons({
         userName: forkProject?.user?.userName,
         projectTitle: forkProject?.title,
       }
-      navigate(
-        pathname.includes('/ide') ? routes.ide(params) : routes.project(params)
-      )
+      navigate(!isProfile ? routes.ide(params) : routes.project(params))
     },
   })
   const handleFork = () => {
@@ -167,7 +81,7 @@ function DefaultTopButtons({
       variables: {
         input: {
           userId: currentUser.sub,
-          forkedFromId: project?.id || projectId,
+          forkedFromId: project?.id,
         },
       },
     })
@@ -180,95 +94,127 @@ function DefaultTopButtons({
 
   return (
     <>
-      {canEdit && !projectTitle && (
-        <CaptureButton
-          canEdit={canEdit}
-          projectTitle={project?.title}
-          userName={project?.user?.userName}
-          shouldUpdateImage={!project?.mainImage}
-          TheButton={({ onClick }) => (
+      <div className="flex justify-between flex-grow h-full">
+        <div className="flex h-full items-center text-gray-300">
+          {project?.id && (
+            <>
+              <span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4">
+                <Gravatar image={project?.user?.image} className="w-10" />
+                <Link
+                  to={routes.user({
+                    userName: projectOwner,
+                  })}
+                >
+                  {projectOwner}
+                </Link>
+              </span>
+              <EditableProjectTitle
+                id={project?.id}
+                userName={projectOwner}
+                projectTitle={project?.title}
+                canEdit={canEdit}
+                shouldRouteToIde={!isProfile}
+              />
+            </>
+          )}
+        </div>
+        <div className="grid grid-flow-col-dense gap-4 items-center mr-4">
+          {canEdit && !isProfile && (
+            <CaptureButton
+              canEdit={canEdit}
+              projectTitle={project?.title}
+              userName={project?.user?.userName}
+              shouldUpdateImage={!project?.mainImage}
+              TheButton={({ onClick }) => (
+                <TopButton
+                  onClick={onClick}
+                  name="Save Project Image"
+                  className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+                >
+                  <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
+                </TopButton>
+              )}
+            />
+          )}
+          {!isProfile && (
             <TopButton
-              onClick={onClick}
-              name="Save Project Image"
-              className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+              className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+              onClick={handleRender}
+              name={canEdit ? 'Save' : 'Preview'}
             >
-              <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
+              <Svg
+                name={canEdit ? 'floppy-disk' : 'photograph'}
+                className="w-6 h-6 text-ch-pink-500"
+              />
             </TopButton>
           )}
-        />
-      )}
-      {!projectTitle && (
-        <TopButton
-          className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-          onClick={handleRender}
-          name={canEdit ? 'Save' : 'Preview'}
-        >
-          <Svg
-            name={canEdit ? 'floppy-disk' : 'photograph'}
-            className="w-6 h-6 text-ch-pink-500"
-          />
-        </TopButton>
-      )}
-      {projectTitle && (
-        <TopButton
-          className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-          onClick={() =>
-            navigate(routes.ide({ userName: _projectOwner, projectTitle }))
-          }
-          name="Editor"
-        >
-          <Svg name="terminal" className="w-6 h-6 text-ch-pink-500" />
-        </TopButton>
-      )}
-      <Popover className="relative outline-none w-full h-full">
-        {({ open }) => {
-          return (
-            <>
-              <Popover.Button className="h-full w-full outline-none">
-                <TopButton
-                  Tag="div"
-                  name="Share"
-                  className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-                >
-                  <Svg
-                    name="share"
-                    className="w-6 h-6 text-ch-purple-500 mt-1"
-                  />
-                </TopButton>
-              </Popover.Button>
-              {open && (
-                <Popover.Panel className="absolute z-10 mt-4 right-0">
-                  <Tabs
-                    className="bg-ch-purple-gray-200 rounded-md shadow-md overflow-hidden text-gray-700"
-                    selectedTabClassName="bg-ch-gray-700 text-white"
-                  >
-                    <TabPanel>
-                      <FullScriptEncoding />
-                    </TabPanel>
-                    <TabPanel>
-                      <ExternalScript />
-                    </TabPanel>
+          {isProfile && (
+            <TopButton
+              className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+              onClick={() =>
+                navigate(
+                  routes.ide({
+                    userName: projectOwner,
+                    projectTitle: project.title,
+                  })
+                )
+              }
+              name="Editor"
+            >
+              <Svg name="terminal" className="w-6 h-6 text-ch-pink-500" />
+            </TopButton>
+          )}
+          <Popover className="relative outline-none w-full h-full">
+            {({ open }) => {
+              return (
+                <>
+                  <Popover.Button className="h-full outline-none">
+                    <TopButton
+                      Tag="div"
+                      name="Share"
+                      className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+                    >
+                      <Svg
+                        name="share"
+                        className="w-6 h-6 text-ch-purple-500 mt-1"
+                      />
+                    </TopButton>
+                  </Popover.Button>
+                  {open && (
+                    <Popover.Panel className="absolute z-10 mt-4 right-0">
+                      <Tabs
+                        className="bg-ch-purple-gray-200 rounded-md shadow-md overflow-hidden text-gray-700"
+                        selectedTabClassName="bg-ch-gray-700 text-white"
+                      >
+                        <TabPanel>
+                          <FullScriptEncoding />
+                        </TabPanel>
+                        <TabPanel>
+                          <ExternalScript />
+                        </TabPanel>
 
-                    <TabList className="flex whitespace-nowrap text-gray-700 border-t border-gray-700">
-                      <Tab className="p-3 px-5">encoded script</Tab>
-                      <Tab className="p-3 px-5">external script</Tab>
-                    </TabList>
-                  </Tabs>
-                </Popover.Panel>
-              )}
-            </>
-          )
-        }}
-      </Popover>
-      {currentUser?.sub && (
-        <TopButton
-          onClick={handleFork}
-          name="Fork"
-          className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-        >
-          <Svg name="fork-new" className="w-6 h-6 text-ch-blue-400" />
-        </TopButton>
-      )}
+                        <TabList className="flex whitespace-nowrap text-gray-700 border-t border-gray-700">
+                          <Tab className="p-3 px-5">encoded script</Tab>
+                          <Tab className="p-3 px-5">external script</Tab>
+                        </TabList>
+                      </Tabs>
+                    </Popover.Panel>
+                  )}
+                </>
+              )
+            }}
+          </Popover>
+          {currentUser?.sub && (
+            <TopButton
+              onClick={handleFork}
+              name="Fork"
+              className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+            >
+              <Svg name="fork-new" className="w-6 h-6 text-ch-blue-400" />
+            </TopButton>
+          )}
+        </div>
+      </div>
     </>
   )
 }

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import IdeContainer from 'src/components/IdeContainer/IdeContainer'
 import { useRender } from './useRender'
-import OutBound from 'src/components/OutBound/OutBound'
 import IdeSideBar from 'src/components/IdeSideBar/IdeSideBar'
-import IdeHeader from 'src/components/IdeHeader/IdeHeader'
-import Svg from 'src/components/Svg/Svg'
+import TopNav from 'src/components/TopNav/TopNav'
 import { useIdeInit } from 'src/components/EncodedUrl/helpers'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import { ShortcutsModalContext } from 'src/components/EditorMenu/AllShortcutsModal'
+import IdeHeader from 'src/components/IdeHeader/IdeHeader'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 interface Props {
-  cadPackage: string
+  cadPackage: CadPackageType
 }
 
 const IdeWrapper = ({ cadPackage }: Props) => {
@@ -33,7 +33,9 @@ const IdeWrapper = ({ cadPackage }: Props) => {
     <div className="h-full flex flex-col">
       <ShortcutsModalContext.Provider value={shortcutModalContextValues}>
         <nav className="flex">
-          <IdeHeader handleRender={onRender} />
+          <TopNav>
+            <IdeHeader handleRender={onRender} context="ide" />
+          </TopNav>
         </nav>
         <div className="h-full flex flex-grow bg-ch-gray-900">
           <div className="flex-shrink-0">

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

@@ -2,6 +2,8 @@ import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
+import { useIdeState } from 'src/helpers/hooks/useIdeState'
+import { IdeContext } from 'src/helpers/hooks/useIdeContext'
 
 import ProjectProfile from 'src/components/ProjectProfile/ProjectProfile'
 import { QUERY as PROJECT_REACTION_QUERY } from 'src/components/ProjectReactionsCell'
@@ -120,26 +122,20 @@ export const Empty = () => <div className="h-full">Empty</div>
 
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
-export const Success = ({
-  userProject,
-  variables: { isEditable },
-  refetch,
-}) => {
+export const Success = ({ userProject, refetch }) => {
   const { currentUser } = useAuth()
-  const [updateProject, { loading, error }] = useMutation(
-    UPDATE_PROJECT_MUTATION,
-    {
-      onCompleted: ({ updateProject }) => {
-        navigate(
-          routes.project({
-            userName: updateProject.user.userName,
-            projectTitle: updateProject.title,
-          })
-        )
-        toast.success('Project updated.')
-      },
-    }
-  )
+  const [state, thunkDispatch] = useIdeState()
+  const [updateProject] = useMutation(UPDATE_PROJECT_MUTATION, {
+    onCompleted: ({ updateProject }) => {
+      navigate(
+        routes.project({
+          userName: updateProject.user.userName,
+          projectTitle: updateProject.title,
+        })
+      )
+      toast.success('Project updated.')
+    },
+  })
   const [createProject] = useMutation(CREATE_PROJECT_MUTATION, {
     onCompleted: ({ createProject }) => {
       navigate(
@@ -160,7 +156,7 @@ export const Success = ({
     refetch()
   }
   const [deleteProject] = useMutation(DELETE_PROJECT_MUTATION, {
-    onCompleted: ({ deleteProject }) => {
+    onCompleted: () => {
       navigate(routes.home())
       toast.success('Project deleted.')
     },
@@ -206,15 +202,27 @@ export const Success = ({
     })
 
   return (
-    <ProjectProfile
-      userProject={userProject}
-      onSave={onSave}
-      onDelete={onDelete}
-      loading={loading}
-      error={error}
-      isEditable={isEditable}
-      onReaction={onReaction}
-      onComment={onComment}
-    />
+    <IdeContext.Provider
+      value={{
+        state,
+        thunkDispatch,
+        project: {
+          ...userProject?.Project,
+          user: {
+            id: userProject.id,
+            image: userProject.image,
+            userName: userProject.userName,
+          },
+        },
+      }}
+    >
+      <ProjectProfile
+        userProject={userProject}
+        onSave={onSave}
+        onDelete={onDelete}
+        onReaction={onReaction}
+        onComment={onComment}
+      />
+    </IdeContext.Provider>
   )
 }

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

@@ -10,6 +10,7 @@ import Button from 'src/components/Button/Button'
 import ProjectReactionsCell from '../ProjectReactionsCell'
 import { countEmotes } from 'src/helpers/emote'
 import { getActiveClasses } from 'get-active-classes'
+import TopNav from 'src/components/TopNav/TopNav'
 import IdeHeader from 'src/components/IdeHeader/IdeHeader'
 import CadPackage from 'src/components/CadPackage/CadPackage'
 import Gravatar from 'src/components/Gravatar/Gravatar'
@@ -50,7 +51,7 @@ const ProjectProfile = ({
           projectTitle: project?.title,
         })
       )
-  }, [currentUser])
+  }, [currentUser, project?.title, userProject.userName])
   useIdeInit(project?.cadPackage, project?.code, 'viewer')
   const [newDescription, setNewDescription] = useState(project?.description)
   const onDescriptionChange = (description) => setNewDescription(description())
@@ -70,14 +71,9 @@ const ProjectProfile = ({
     <>
       <div className="h-screen flex flex-col text-lg font-fira-sans">
         <div className="flex">
-          <IdeHeader
-            handleRender={() => {}}
-            projectOwner={userProject?.userName}
-            projectOwnerImage={userProject?.image}
-            projectOwnerId={userProject?.id}
-            projectTitle={project?.title}
-            projectId={project?.id}
-          />
+          <TopNav>
+            <IdeHeader context="profile" />
+          </TopNav>
         </div>
         <div className="relative flex-grow h-full">
           <div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0 h-full">

app/web/src/components/TopNav/TopNav.tsx

@@ -0,0 +1,31 @@
+import { Link, routes } from '@redwoodjs/router'
+import Svg from 'src/components/Svg/Svg'
+import NavPlusButton from 'src/components/NavPlusButton'
+import ProfileSlashLogin from 'src/components/ProfileSlashLogin'
+import { ReactNode } from 'react'
+interface IdeHeaderProps {
+  children?: ReactNode
+}
+
+const TopNav = ({ children }: IdeHeaderProps) => {
+  return (
+    <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg">
+      <div className="h-full text-gray-300 flex items-center">
+        <div className="w-14 h-16 flex items-center justify-center bg-ch-gray-900">
+          <Link to={routes.home()}>
+            <Svg className="w-12 p-0.5" name="favicon" />
+          </Link>
+        </div>
+      </div>
+      {children}
+      <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
+        <div className="h-8 w-8">
+          <NavPlusButton />
+        </div>
+        <ProfileSlashLogin />
+      </div>
+    </div>
+  )
+}
+
+export default TopNav

app/web/src/components/UserProfile/UserProfile.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useReducer } from 'react'
 import { useAuth } from '@redwoodjs/auth'
-import { Link, navigate, routes } from '@redwoodjs/router'
+import { navigate, routes } from '@redwoodjs/router'
 import ProjectsOfUser from 'src/components/ProjectsOfUserCell'
-import IdeHeader from 'src/components/IdeHeader/IdeHeader'
-import Svg from 'src/components/Svg/Svg'
+import TopNav from 'src/components/TopNav/TopNav'
 import {
   fieldComponents,
   fieldReducer,
@@ -27,13 +26,7 @@ function buildFieldsConfig(fieldsConfig, user, hasPermissionToEdit) {
   )
 }
 
-const UserProfile = ({
-  user,
-  isEditing,
-  loading,
-  onSave,
-  error,
-}: UserProfileType) => {
+const UserProfile = ({ user, isEditing, onSave }: UserProfileType) => {
   const { currentUser } = useAuth()
   const hasPermissionToEdit = currentUser?.sub === user.id
   useEffect(() => {
@@ -60,14 +53,7 @@ const UserProfile = ({
     <>
       <div className="md:h-screen flex flex-col text-lg font-fira-sans">
         <div className="flex">
-          <IdeHeader
-            handleRender={() => {}}
-            projectOwner={user?.userName}
-            projectOwnerImage={user?.image}
-            projectOwnerId={user?.id}
-          >
-            <span></span>
-          </IdeHeader>
+          <TopNav />
         </div>
         <div className="relative flex-grow h-full">
           <div className="grid md:grid-cols-profile-layout grid-flow-row-dense absolute inset-0">

app/web/src/pages/DevIdePage/DevIdePage.tsx

@@ -4,6 +4,7 @@ import { Toaster } from '@redwoodjs/web/toast'
 import { useIdeState } from 'src/helpers/hooks/useIdeState'
 import type { Project } from 'src/components/IdeProjectCell/IdeProjectCell'
 import { IdeContext } from 'src/helpers/hooks/useIdeContext'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 interface Props {
   cadPackage: string
@@ -21,7 +22,9 @@ const DevIdePage = ({ cadPackage, project }: Props) => {
       />
       <Toaster timeout={9000} />
       <IdeContext.Provider value={{ state, thunkDispatch, project }}>
-        <IdeWrapper cadPackage={cadPackage.toLocaleLowerCase()} />
+        <IdeWrapper
+          cadPackage={cadPackage.toLocaleLowerCase() as CadPackageType}
+        />
       </IdeContext.Provider>
     </div>
   )

app/web/src/pages/ProjectPage/ProjectPage.tsx

@@ -2,14 +2,11 @@ import { useAuth } from '@redwoodjs/auth'
 
 import ProjectCell from 'src/components/ProjectCell'
 import Seo from 'src/components/Seo/Seo'
-import { useIdeState } from 'src/helpers/hooks/useIdeState'
-import { IdeContext } from 'src/helpers/hooks/useIdeContext'
 import { Toaster } from '@redwoodjs/web/toast'
 import { makeSocialPublicId } from 'src/helpers/hooks/useUpdateProjectImages'
 
 const ProjectPage = ({ userName, projectTitle }) => {
   const { currentUser } = useAuth()
-  const [state, thunkDispatch] = useIdeState()
   const socialImageUrl = `http://res.cloudinary.com/irevdev/image/upload/c_scale,w_1200/v1/CadHub/${makeSocialPublicId(
     userName,
     projectTitle
@@ -23,13 +20,11 @@ const ProjectPage = ({ userName, projectTitle }) => {
         lang="en-US"
       />
       <Toaster timeout={1500} />
-      <IdeContext.Provider value={{ state, thunkDispatch, project: null }}>
-        <ProjectCell
-          userName={userName}
-          projectTitle={projectTitle}
-          currentUserId={currentUser?.sub}
-        />
-      </IdeContext.Provider>
+      <ProjectCell
+        userName={userName}
+        projectTitle={projectTitle}
+        currentUserId={currentUser?.sub}
+      />
     </>
   )
 }