form tweaks

client/src/components/button/component.tsx

@@ -1,14 +1,15 @@
 import { FC } from 'react';
 
-import Link from 'next/link';
+import Link, { LinkProps } from 'next/link';
 
 import { cn } from 'lib/utils';
 
 import { THEME, SIZE } from './constants';
 import type { ButtonProps, AnchorProps, Overload } from './types';
 
 // Guard to check if href exists in props
-const hasHref = (props: ButtonProps | AnchorProps): props is AnchorProps => 'href' in props;
+const hasHref = (props: ButtonProps | AnchorProps | LinkProps): props is AnchorProps =>
+  'href' in props;
 
 function buildClassName({ className, disabled, size, theme }) {
   return cn({

client/src/components/forms/select/constants/theme.ts

@@ -18,7 +18,7 @@ const THEME = {
   light: {
     container: 'text-gray-600 text-sm',
     button:
-      'relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out cursor-pointer sm:text-sm sm:leading-5 border border-grey-0 rounded-lg',
+      'relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out cursor-pointer sm:text-sm sm:leading-5 border border-grey-40 rounded-lg',
     menu: 'bg-white',
     item: {
       base: 'text-sm',

client/src/components/forms/textarea/component.tsx

@@ -19,7 +19,7 @@ const THEME = {
   light: {
     base: 'leading-tight text-grey-0 bg-white border rounded placeholder:text-sm',
     status: {
-      none: 'border-gray-500',
+      none: 'border-grey-40',
       valid: 'border-green-500',
       error: 'border-red-500',
       disabled: 'border-grey-20 opacity-50',

client/src/containers/my-projects/form/steps/contact-details/index.tsx

@@ -83,6 +83,10 @@ export default function ContactDetailsStep() {
           theme="outline"
           href={`${pathname}?step=project-details`}
           className="flex items-center gap-2"
+          anchorLinkProps={{
+            href: `${pathname}?step=project-details`,
+            replace: true,
+          }}
         >
           <HiOutlineArrowLeft className="w-[20px] h-[20px]" />
           <span>Project Details</span>

client/src/containers/my-projects/form/steps/project-details/index.tsx

@@ -217,8 +217,12 @@ export default function ProjectDetailsStep() {
       <footer className="flex justify-end">
         <LinkButton
           theme="outline"
-          href={`${pathname}?step=contact-details`}
           className="flex items-center gap-1"
+          href={`${pathname}?step=contact-details`}
+          anchorLinkProps={{
+            href: `${pathname}?step=contact-details`,
+            replace: true,
+          }}
         >
           <span>Contact Details</span>
           <HiOutlineArrowRight className="w-[20px] h-[20px]" />

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

@@ -1,6 +1,18 @@
+import { useQueryClient } from '@tanstack/react-query';
+
 import LinkButton from 'components/button';
 
+import { Project } from 'types/project';
+
+import { NEW_PROJECT_QUERY_KEY } from './index';
+
 export default function FundingStep() {
+  const queryClient = useQueryClient();
+  const mutationCache = queryClient.getMutationCache();
+  const newProjectMutationState = mutationCache.find<{ data: { data: Project } }>({
+    mutationKey: NEW_PROJECT_QUERY_KEY,
+  })?.state;
+
   return (
     <div className="grid-cols-12 grid justify-center items-center">
       <div className="col-span-6 flex flex-col text-center gap-4 col-start-4 items-center">
@@ -9,7 +21,10 @@ export default function FundingStep() {
           Lorem ipsum dolor sit amet consectetur. Convallis fusce neque odio nunc elementum habitant
           sit sagittis.
         </p>
-        <LinkButton href="/my-fundings?project=${projectId}" theme="green">
+        <LinkButton
+          href={`/my-fundings?project=${newProjectMutationState?.data.data.data.id}`}
+          theme="green"
+        >
           Report Funding
         </LinkButton>
       </div>

client/src/containers/my-projects/new/header.tsx

@@ -2,7 +2,9 @@ import { useForm, useFormState } from 'react-final-form';
 
 import { useSearchParams } from 'next/navigation';
 
-import { useIsMutating } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { Project } from 'types/project';
 
 import { Button, LinkButton } from 'components/button/component';
 
@@ -13,25 +15,34 @@ import { NEW_PROJECT_QUERY_KEY } from './index';
 export default function NewProjectHeader() {
   const { invalid } = useFormState();
   const { submit } = useForm();
+
   const queryParams = useSearchParams();
   const currentStep = queryParams.get('step') as typeof FORM_STEPS[number]['value'];
 
-  const isMutatingNewProject = useIsMutating({ mutationKey: NEW_PROJECT_QUERY_KEY });
+  const queryClient = useQueryClient();
+  const mutationCache = queryClient.getMutationCache();
+  const newProjectMutationState = mutationCache.find<{ data: { data: Project } }>({
+    mutationKey: NEW_PROJECT_QUERY_KEY,
+  })?.state;
 
   return (
     <header className="flex justify-between items-center">
       <h2 className="text-3xl font-display">New project</h2>
       <div className="flex gap-4">
-        {currentStep === 'funding' && !isMutatingNewProject && (
-          <LinkButton theme="outline" size="xs" href="/projects/{projectId}">
+        {currentStep === 'funding' && newProjectMutationState?.status === 'success' && (
+          <LinkButton
+            theme="outline"
+            size="xs"
+            href={`/projects/${newProjectMutationState?.data.data.data.id}`}
+          >
             Project Page
           </LinkButton>
         )}
-        {currentStep !== 'funding' && (
+        {currentStep === 'contact-details' && (
           <Button
             type="submit"
             theme="green"
-            disabled={invalid || isMutatingNewProject > 0}
+            disabled={invalid || newProjectMutationState?.status === 'loading'}
             onClick={submit}
           >
             Save changes

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

@@ -5,13 +5,14 @@ import { useRouter } from 'next/navigation';
 import { useMutation } from '@tanstack/react-query';
 import { useSession } from 'next-auth/react';
 
+import { useMe } from 'hooks/members';
+
 import Wrapper from 'containers/wrapper';
 
 import API from 'services/api';
 
 import { FORM_STEPS } from '../constants';
 import Form from '../form';
-import { ProjectSchema } from '../form/validations';
 import FormWrapper from '../form/wrapper';
 import MyProjectsSidebar from '../sidebar';
 
@@ -22,9 +23,11 @@ export const NEW_PROJECT_QUERY_KEY = ['newProject'];
 export default function NewProject() {
   const { data: session } = useSession();
   const { push } = useRouter();
+  const { data: me } = useMe();
+
   const mutation = useMutation({
     mutationKey: NEW_PROJECT_QUERY_KEY,
-    mutationFn: (data: ProjectSchema) => {
+    mutationFn: (data: FormData) => {
       return API.request({
         method: 'POST',
         url: '/members/projects',
@@ -45,15 +48,34 @@ export default function NewProject() {
       if (index === 2) {
         return { ...step, disabled: mutation.isLoading || mutation.isIdle };
       }
-      return step;
+      return { ...step, disabled: mutation.isSuccess };
     });
   }, [mutation]);
 
   return (
     <Wrapper className="w-full flex grow">
       <FormWrapper
         onSubmit={(data) => {
-          mutation.mutate(data);
+          const formData = new FormData();
+
+          for (const key in data) {
+            if (data.hasOwnProperty(key)) {
+              const value = data[key];
+
+              if (Array.isArray(value)) {
+                value.forEach((v) => {
+                  formData.append(`${key}[]`, v);
+                });
+              } else {
+                formData.append(key, value);
+              }
+            }
+          }
+
+          formData.append('contact_first_name', me?.name.split(' ')[0]);
+          formData.append('contact_last_name', me?.name.split(' ')[1]);
+
+          mutation.mutate(formData);
         }}
         render={({ handleSubmit }) => {
           return (

client/src/hooks/members/index.tsx

@@ -0,0 +1,24 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+
+import { Funder } from 'types/funder';
+
+import API from 'services/api';
+
+export const useMe = (queryOptions: UseQueryOptions<{ data: Funder }, unknown, Funder> = {}) => {
+  const { data: session } = useSession();
+
+  const fetchMe = () =>
+    API.request<{ data: Funder }>({
+      method: 'GET',
+      url: '/members/funder',
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+    }).then((response) => response.data);
+
+  return useQuery(['me'], fetchMe, {
+    enabled: !!session?.accessToken,
+    ...queryOptions,
+  });
+};