From 68144743b1f5714e152e81c2c54ed85f22c472ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?=
 <andres.gonzalez@vizzuality.com>
Date: Wed, 5 Mar 2025 12:26:35 +0100
Subject: [PATCH] form tweaks

---
 client/src/components/button/component.tsx    |  5 +-
 .../forms/select/constants/theme.ts           |  2 +-
 .../components/forms/textarea/component.tsx   |  2 +-
 .../form/steps/contact-details/index.tsx      |  4 ++
 .../form/steps/project-details/index.tsx      |  6 +-
 .../containers/my-projects/new/funding.tsx    | 17 ++++-
 .../src/containers/my-projects/new/header.tsx | 23 +++++--
 .../src/containers/my-projects/new/index.tsx  | 30 ++++++--
 client/src/hooks/me/index.ts                  | 68 -------------------
 client/src/hooks/me/types.ts                  |  9 ---
 client/src/hooks/members/index.tsx            | 24 +++++++
 11 files changed, 97 insertions(+), 93 deletions(-)
 delete mode 100644 client/src/hooks/me/index.ts
 delete mode 100644 client/src/hooks/me/types.ts
 create mode 100644 client/src/hooks/members/index.tsx

diff --git a/client/src/components/button/component.tsx b/client/src/components/button/component.tsx
index f6510551..38800070 100644
--- a/client/src/components/button/component.tsx
+++ b/client/src/components/button/component.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import Link from 'next/link';
+import Link, { LinkProps } from 'next/link';
 
 import { cn } from 'lib/utils';
 
@@ -8,7 +8,8 @@ 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({
diff --git a/client/src/components/forms/select/constants/theme.ts b/client/src/components/forms/select/constants/theme.ts
index 6a1c8310..8977cf7d 100644
--- a/client/src/components/forms/select/constants/theme.ts
+++ b/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',
diff --git a/client/src/components/forms/textarea/component.tsx b/client/src/components/forms/textarea/component.tsx
index d2f3a4f6..aca603f4 100644
--- a/client/src/components/forms/textarea/component.tsx
+++ b/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',
diff --git a/client/src/containers/my-projects/form/steps/contact-details/index.tsx b/client/src/containers/my-projects/form/steps/contact-details/index.tsx
index 69ea945f..886cc9bf 100644
--- a/client/src/containers/my-projects/form/steps/contact-details/index.tsx
+++ b/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>
diff --git a/client/src/containers/my-projects/form/steps/project-details/index.tsx b/client/src/containers/my-projects/form/steps/project-details/index.tsx
index bf2d27c4..8ec65568 100644
--- a/client/src/containers/my-projects/form/steps/project-details/index.tsx
+++ b/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]" />
diff --git a/client/src/containers/my-projects/new/funding.tsx b/client/src/containers/my-projects/new/funding.tsx
index 8315e412..8e44ae65 100644
--- a/client/src/containers/my-projects/new/funding.tsx
+++ b/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>
diff --git a/client/src/containers/my-projects/new/header.tsx b/client/src/containers/my-projects/new/header.tsx
index 7d881576..ae49f02f 100644
--- a/client/src/containers/my-projects/new/header.tsx
+++ b/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
diff --git a/client/src/containers/my-projects/new/index.tsx b/client/src/containers/my-projects/new/index.tsx
index 2c482a51..da448c1c 100644
--- a/client/src/containers/my-projects/new/index.tsx
+++ b/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,7 +48,7 @@ export default function NewProject() {
       if (index === 2) {
         return { ...step, disabled: mutation.isLoading || mutation.isIdle };
       }
-      return step;
+      return { ...step, disabled: mutation.isSuccess };
     });
   }, [mutation]);
 
@@ -53,7 +56,26 @@ export default function NewProject() {
     <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 (
diff --git a/client/src/hooks/me/index.ts b/client/src/hooks/me/index.ts
deleted file mode 100644
index bfe0567d..00000000
--- a/client/src/hooks/me/index.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useMemo } from 'react';
-
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useSession } from 'next-auth/react';
-
-import API from 'services/api';
-
-import { UseSaveMeProps, SaveMeProps } from './types';
-
-export default function useMe() {
-  const { data: session, status } = useSession();
-  const loading = status === 'loading';
-
-  const query = useQuery(
-    ['me'],
-    () =>
-      API.request({
-        method: 'GET',
-        url: '/me',
-        headers: {
-          Authorization: `Bearer ${session.accessToken}`,
-        },
-      }).then((response) => response.data),
-    {
-      enabled: !!session && !loading,
-    }
-  );
-
-  const { data } = query;
-
-  return useMemo(
-    () => ({
-      ...query,
-      user: data?.data,
-    }),
-    [query, data?.data]
-  );
-}
-
-export function useSaveMe({
-  requestConfig = {
-    method: 'PATCH',
-  },
-}: UseSaveMeProps) {
-  const queryClient = useQueryClient();
-  const { data: session } = useSession();
-
-  const saveMe = ({ data }: SaveMeProps) =>
-    API.request({
-      url: '/me',
-      data,
-      headers: {
-        Authorization: `Bearer ${session.accessToken}`,
-      },
-      ...requestConfig,
-    });
-
-  return useMutation(saveMe, {
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries(['me']);
-      console.info('Succces', data, variables, context);
-    },
-    onError: (error, variables, context) => {
-      // An error happened!
-      console.info('Error', error, variables, context);
-    },
-  });
-}
diff --git a/client/src/hooks/me/types.ts b/client/src/hooks/me/types.ts
deleted file mode 100644
index c16339aa..00000000
--- a/client/src/hooks/me/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { AxiosRequestConfig } from 'axios';
-
-export interface UseSaveMeProps {
-  requestConfig?: AxiosRequestConfig;
-}
-
-export interface SaveMeProps {
-  data: any;
-}
diff --git a/client/src/hooks/members/index.tsx b/client/src/hooks/members/index.tsx
new file mode 100644
index 00000000..5204122f
--- /dev/null
+++ b/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,
+  });
+};