feat: Project edition

client/.gitignore

@@ -30,6 +30,7 @@ npm-debug.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 # vercel
 .vercel

client/package.json

@@ -67,7 +67,7 @@
   "devDependencies": {
     "@types/geojson": "7946.0.14",
     "@types/gtag.js": "0.0.5",
-    "@types/lodash": "4.14.191",
+    "@types/lodash": "^4.14.191",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@typescript-eslint/eslint-plugin": "5.13.0",

client/src/containers/cards/component.tsx

@@ -39,7 +39,12 @@ const Cards = ({ data = [], theme = 'grey', pathname, project = false }: CardsPr
         </div>
       )}
       {data.map((item) => (
-        <Card theme={theme} key={item.id} href={`${pathname}/${item.id}`} {...item} />
+        <Card
+          theme={theme}
+          key={item.id}
+          href={`${pathname}/${item.id}${project ? '/edit' : ''}`}
+          {...item}
+        />
       ))}
     </div>
   );

client/src/containers/funding/index.tsx

@@ -1,6 +1,9 @@
-import ProjectCard from 'containers/projects/ui/card';
 import React from 'react';
+
+import ProjectCard from 'containers/projects/ui/card';
+
 import Icon from 'components/icon';
+
 import CHEVRON_LEFT from 'svgs/icons/arrow-left.svg?sprite';
 
 const FundingHome = () => {
@@ -15,7 +18,7 @@ const FundingHome = () => {
             habitant sit sagittis.
           </p>
         </div>
-        <button className="bg-green-0 text-black rounded-lg p-3"> Report Funding</button>
+        <button className="p-3 text-black rounded-lg bg-green-0"> Report Funding</button>
       </div>
 
       <div className="flex items-center justify-end">

client/src/containers/my-projects/sidebar/contactDetails.tsx

@@ -1,10 +1,13 @@
-import ProjectCard from 'containers/projects/ui/card';
 import React from 'react';
+
 import Link from 'next/link';
+
+import ProjectCard from 'containers/projects/ui/card';
+
 import Icon from 'components/icon';
-import eye from 'svgs/icons/eye.svg?sprite';
-import CHEVRON_RIGHT from 'svgs/icons/arrow-right.svg?sprite';
 import CHEVRON_LEFT from 'svgs/icons/arrow-left.svg?sprite';
+import CHEVRON_RIGHT from 'svgs/icons/arrow-right.svg?sprite';
+import eye from 'svgs/icons/eye.svg?sprite';
 import LOCK from 'svgs/icons/lock.svg?sprite';
 import USER_TWO from 'svgs/icons/user-two.svg?sprite';
 const ContactDetails = () => {

client/src/containers/my-projects/sidebar/focus_area.tsx

@@ -1,10 +1,13 @@
-import ProjectCard from 'containers/projects/ui/card';
 import React from 'react';
+
 import Link from 'next/link';
+
+import ProjectCard from 'containers/projects/ui/card';
+
 import Icon from 'components/icon';
-import eye from 'svgs/icons/eye.svg?sprite';
-import CHEVRON_RIGHT from 'svgs/icons/arrow-right.svg?sprite';
 import CHEVRON_LEFT from 'svgs/icons/arrow-left.svg?sprite';
+import CHEVRON_RIGHT from 'svgs/icons/arrow-right.svg?sprite';
+import eye from 'svgs/icons/eye.svg?sprite';
 import LOCK from 'svgs/icons/lock.svg?sprite';
 import USER_TWO from 'svgs/icons/user-two.svg?sprite';
 

client/src/containers/my-projects/sidebar/form.tsx

@@ -7,7 +7,7 @@ import Funding from 'containers/my-projects/sidebar/funding';
 import ProjectDetails from './projectDetails';
 
 interface ProjectFormProps {
-  mode?: 'create' | 'edit';
+  mode: 'create' | 'edit';
   initialData?: any;
   projectId?: string;
 }
@@ -39,10 +39,10 @@ const SideNavigation = ({ currentStep, setCurrentStep }) => (
 const ProjectForm = ({ initialData }: ProjectFormProps) => {
   const [currentStep, setCurrentStep] = useState(STEPS[0].id);
 
-  const handleSubmit = () => {};
+  const onSubmit = () => {};
   return (
     <Form
-      onSubmit={handleSubmit}
+      onSubmit={onSubmit}
       initialValues={
         initialData || {
           partnerName: '',
@@ -68,8 +68,8 @@ const ProjectForm = ({ initialData }: ProjectFormProps) => {
 
         return errors;
       }}
-      render={() => (
-        <form className="flex flex-col gap-8 p-4 md:flex-row">
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-8 p-4 md:flex-row">
           <SideNavigation currentStep={currentStep} setCurrentStep={setCurrentStep} />
           <div className="flex-1 max-w-3xl">
             {STEPS.find((step) => step.id === currentStep)?.component}

client/src/containers/my-projects/sidebar/funding.tsx

@@ -1,6 +1,7 @@
-import FundingHome from 'containers/funding';
 import React from 'react';
 
+import FundingHome from 'containers/funding';
+
 const Funding = () => {
   return <FundingHome />;
 };

client/src/containers/my-projects/sidebar/projectDetails.tsx

@@ -1,14 +1,26 @@
 import React, { useState } from 'react';
-import ProjectCard from 'containers/projects/ui/card';
+
+import { Field } from 'react-final-form';
+
 import Link from 'next/link';
+
+import { RootState } from 'store';
+
+import { useAppSelector } from 'store/hooks';
+
+import ProjectCard from 'containers/projects/ui/card';
+
 import Icon from 'components/icon';
-import eye from 'svgs/icons/eye.svg?sprite';
-import upload from 'svgs/icons/upload.svg?sprite';
+
 import CHEVRON_RIGHT from 'svgs/icons/arrow-right.svg?sprite';
+import eye from 'svgs/icons/eye.svg?sprite';
 import LOCK from 'svgs/icons/lock.svg?sprite';
+import upload from 'svgs/icons/upload.svg?sprite';
 import USER_TWO from 'svgs/icons/user-two.svg?sprite';
+
 const ProjectDetails = () => {
   const [logo, setLogo] = useState<File | null>(null);
+  const draft = useAppSelector((state: RootState) => state['/projectForm']);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files?.[0]) {
@@ -21,9 +33,8 @@ const ProjectDetails = () => {
       <div className=" md:w-full">
         <div className="md:w-[559px] w-full">
           <p className="leading-none">
-            {' '}
             Lorem ipsum dolor sit amet consectetur et fringilla pellentesque in ut congue at
-            ultrices nulla nibh dolor sit amet pellentesque consectetur.{' '}
+            ultrices nulla nibh dolor sit amet pellentesque consectetur.
           </p>
 
           <div className="flex gap-4 p-2 my-5 rounded-xl bg-grey-60">
@@ -42,7 +53,6 @@ const ProjectDetails = () => {
           </div>
         </div>
         <div className="flex gap-2 text-[14px]/[10px] pb-3">
-          {' '}
           <span className="text-red-0">*</span>
           All fields marked with a red asterisk are mandatory to fill
         </div>
@@ -52,8 +62,11 @@ const ProjectDetails = () => {
               <Icon icon={eye} className="w-4 h-4 pr-1" />
               PARTNER ORGANIZATION NAME <span className="text-red-0">*</span>
             </label>
-            <input
-              type="text"
+
+            <Field
+              name="name"
+              value={draft.draftProject.name}
+              component={'input'}
               className="w-full p-2 mt-2 border border-gray-300 rounded-lg outline-none focus:ring focus:ring-blue-200"
             />
           </div>
@@ -63,9 +76,11 @@ const ProjectDetails = () => {
               <Icon icon={eye} className="w-4 h-4 pr-1" />
               PROJECT WEBSITE
             </label>
-            <input
-              type="text"
-              className="w-full p-2 mt-2 border border-gray-800 rounded-lg outline-none focus:ring focus:ring-blue-200"
+
+            <Field
+              name="website"
+              component="input"
+              className="w-full p-2 mt-2 border border-gray-300 rounded-lg outline-none focus:ring focus:ring-blue-200"
             />
           </div>
         </div>
@@ -75,10 +90,14 @@ const ProjectDetails = () => {
             <Icon icon={eye} className="w-4 h-4 pr-1" />
             Description <span className="text-red-0">*</span>
           </label>
-          <textarea className="w-full h-32 p-3 my-3 border border-gray-300 rounded-lg outline-none focus:ring focus:ring-blue-200"></textarea>
+
+          <Field
+            name="description"
+            component="textarea"
+            className="w-full h-32 p-3 my-3 border border-gray-300 rounded-lg outline-none focus:none "
+          />
         </div>
 
-        {/* Upload Logo */}
         <div className="mt-6">
           <label className="flex mb-1 font-medium text-gray-700">
             <Icon icon={eye} className="w-4 h-4 pr-1" /> LOGO
@@ -138,7 +157,7 @@ const ProjectDetails = () => {
 
         <div className="flex items-center justify-end">
           <button className="flex items-center p-2 mt-6 text-black transition bg-transparent border rounded-lg hover:bg-blue-700">
-            Contact Details{' '}
+            Contact Details
             <span className="pl-2">
               <Icon icon={CHEVRON_RIGHT} className="w-3 h-3" />
             </span>

client/src/hooks/my-projects/index.ts

@@ -22,6 +22,13 @@ export const fetchMemberProjects = (params: MyProjectProps) => {
   }).then((res) => res.data);
 };
 
+export const fetchMyProject = (id: string) => {
+  return API.request({
+    method: 'GET',
+    url: `/my-projects/${id}`,
+  }).then((res) => res.data);
+};
+
 export function useFetchMemberProjects(
   params: MyProjectProps = {},
   queryOption: UseQueryOptions<Project[], unknown> = {}
@@ -79,3 +86,15 @@ export function useMyInfinityProjects(
     data: DATA,
   };
 }
+
+export function useMyProject(id: string, queryOptions: UseQueryOptions<Project, unknown> = {}) {
+  const fetch = () => fetchMyProject(id);
+
+  const query = useQuery(['myProject', id], fetch, {
+    enabled: !!id,
+    placeholderData: { data: {} },
+    ...queryOptions,
+  });
+
+  return query;
+}

client/src/pages/my-projects/[projectId]/edit/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useRouter } from 'next/router';
+
+import { NextPage } from 'next';
+
+import { useMyProject } from 'hooks/my-projects';
+
+import MetaTags from 'containers/meta-tags';
+import ProjectForm from 'containers/my-projects/sidebar/form';
+
+import ProtectedRoute from 'hoc/protectedRoute';
+import NewProjectLayout from 'pages/my-projects/new/layout';
+
+const TITLE_TEXT = 'FORA Projects | FORA supported regenerative agriculture projects';
+const DESCRIPTION_TEXT =
+  'Stay up-to-date on the what, who, and where of the funding and strategies of FORA members for synergistic collaboration in support of your work.';
+const IMAGE_URL = `${process.env.NEXT_PUBLIC_BASE_PATH}images/meta/projects.jpg`;
+
+const EditProject: NextPage = () => {
+  const { query } = useRouter();
+  const { id: projectId } = query;
+  const { data: myProjectData } = useMyProject(`${projectId}`);
+
+  return (
+    <ProtectedRoute>
+      <div>
+        <MetaTags
+          title={TITLE_TEXT}
+          description={DESCRIPTION_TEXT}
+          type="website"
+          imageURL={IMAGE_URL}
+        />
+        <NewProjectLayout>
+          <ProjectForm mode="create" initialData={myProjectData} projectId={projectId as string} />
+        </NewProjectLayout>
+      </div>
+    </ProtectedRoute>
+  );
+};
+
+export default EditProject;

client/src/pages/my-projects/index.tsx

@@ -35,6 +35,4 @@ const MyProjects: React.FC = () => {
   );
 };
 
-// export const getServerSideProps = withAuth();
-
 export default MyProjects;

client/src/pages/my-projects/new/index.tsx

@@ -4,11 +4,14 @@ const TITLE_TEXT = 'FORA Projects | FORA supported regenerative agriculture proj
 const DESCRIPTION_TEXT =
   'Stay up-to-date on the what, who, and where of the funding and strategies of FORA members for synergistic collaboration in support of your work.';
 const IMAGE_URL = `${process.env.NEXT_PUBLIC_BASE_PATH}images/meta/projects.jpg`;
+import { NextPage } from 'next';
+
 import MetaTags from 'containers/meta-tags';
 import ProjectForm from 'containers/my-projects/sidebar/form';
-import NewProjectLayout from './layout';
+
 import ProtectedRoute from 'hoc/protectedRoute';
-import { NextPage } from 'next';
+
+import NewProjectLayout from './layout';
 
 const NewProjectPage: NextPage = () => {
   return (

client/src/pages/my-projects/new/layout.tsx

@@ -24,7 +24,6 @@ export default function NewProjectLayout({ children }: { children: React.ReactNo
           </div>
         </div>
       </div>
-
       {children}
     </Wrapper>
   );

client/src/store/index.ts

@@ -2,6 +2,7 @@ import actionMap from 'store/action-map';
 import dashboardsGeneralReport from 'store/dashboards/general-report';
 import funders from 'store/funders';
 import myProjects from 'store/myProjects';
+import ProjectFormReducer from 'store/myProjects/form';
 import projects from 'store/projects';
 
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
@@ -14,6 +15,7 @@ const staticReducers = {
   '/projects': projects,
   '/dashboards/general-report': dashboardsGeneralReport,
   '/myProjects': myProjects,
+  '/projectForm': ProjectFormReducer,
 };
 
 const asyncReducers = {};