DEAR-129: update team config

24FSIIT16 · Jul 30, 2024 · 8da8469 · 8da8469
1 parent 3f73e1f
commit 8da8469
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 39 deletions.
diff --git a/app/(main)/team/(teamconfig)/[id]/config/components/TeamConfigForm.tsx b/app/(main)/team/(teamconfig)/[id]/config/components/TeamConfigForm.tsx
@@ -18,12 +18,16 @@ import {
 import Input from '@components/ui/Input/Input';
 import { Button } from '@components/ui/Buttons/Button';
 import { toast } from 'sonner';
+import useSWRClient from '@hooks/useSWRClient';
 import cn from '@/lib/utils';
 import { Checkbox } from '@components/ui/Checkbox/Checkbox';
 import { TeamConfigType } from '@/types/TeamConfigType';
+import useTeamClient from '@hooks/useTeamClient';
+import axios from 'axios';
+import Loading from '@components/Loading/Loading';
 
 interface TeamConfigFormProps {
-  config: TeamConfigType;
+  teamId: string;
 }
 
 const FormSchema = z.object({
@@ -34,23 +38,29 @@ const FormSchema = z.object({
       name: z.string(),
     })
   ),
-  happinessSurvey: z.boolean().default(true).optional(),
-  workKindSurvey: z.boolean().default(true).optional(),
-  emotionSurvey: z.boolean().default(true).optional(),
+  happinessSurvey: z.boolean().optional(),
+  workKindSurvey: z.boolean().optional(),
+  emotionSurvey: z.boolean().optional(),
 });
 
 type FormValues = z.infer<typeof FormSchema>;
 
-const TeamConfigForm: React.FC<TeamConfigFormProps> = ({ config }) => {
+const TeamConfigForm: React.FC<TeamConfigFormProps> = ({ teamId }) => {
+  const { data: config, isLoading } = useSWRClient<TeamConfigType>(`/v1/team/${teamId}/config`);
+  const { updateTeamConfig } = useTeamClient();
+
   const form = useForm<FormValues>({
     resolver: zodResolver(FormSchema),
-    defaultValues: {
-      teamName: config?.teamName || '',
-      workKinds: config?.workKinds.map((w) => ({ id: w.id, name: w.name })) || [{ id: undefined, name: '' }],
-      happinessSurvey: config?.happinessSurvey || true,
-      workKindSurvey: config?.workKindSurvey || true,
-      emotionSurvey: config?.emotionSurvey || true,
-    },
+    defaultValues: React.useMemo(
+      () => ({
+        teamName: config?.teamName || '',
+        workKinds: config?.workKinds.map((w) => ({ id: w.id, name: w.name })) || [{ id: undefined, name: '' }],
+        happinessSurvey: config?.happinessSurvey ?? false,
+        workKindSurvey: config?.workKindSurvey ?? false,
+        emotionSurvey: config?.emotionSurvey ?? false,
+      }),
+      [config]
+    ),
     mode: 'onSubmit',
   });
 
@@ -60,15 +70,42 @@ const TeamConfigForm: React.FC<TeamConfigFormProps> = ({ config }) => {
   });
 
   const surveyItems = [
-    { id: 'happinessSurvey', label: 'Happiness' },
-    { id: 'workKindSurvey', label: 'Worktype' },
-    { id: 'emotionSurvey', label: 'Emotion' },
+    { id: 'happinessSurvey', label: 'Happiness', value: config?.happinessSurvey, disabled: true },
+    { id: 'workKindSurvey', label: 'Worktype', value: config?.workKindSurvey, disabled: false },
+    { id: 'emotionSurvey', label: 'Emotion', value: config?.emotionSurvey, disabled: false },
   ];
 
-  const onSubmit: SubmitHandler<FormValues> = () => {
-    toast.success('Team has been updated');
+  React.useEffect(() => {
+    if (config) {
+      form.reset({
+        teamName: config.teamName,
+        workKinds: config.workKinds.map((w) => ({ id: w.id, name: w.name })),
+        happinessSurvey: config.happinessSurvey,
+        workKindSurvey: config.workKindSurvey,
+        emotionSurvey: config.emotionSurvey,
+      });
+    }
+  }, [config, form]);
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const updatedConfig = {
+      ...data,
+      id: teamId,
+    } as TeamConfigType;
+    try {
+      await updateTeamConfig(teamId, updatedConfig);
+      toast.success('Team configuration has been updated');
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        toast.error(`Something went wrong: ${error.message}`);
+      } else {
+        console.warn('Error: ', error);
+      }
+    }
   };
 
+  if (isLoading) return <Loading />;
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-8">
@@ -100,7 +137,7 @@ const TeamConfigForm: React.FC<TeamConfigFormProps> = ({ config }) => {
                       <Checkbox
                         checked={field.value as boolean}
                         onCheckedChange={(checked) => field.onChange(checked)}
-                        disabled={item.id === 'happinessSurvey'}
+                        disabled={item.disabled}
                       />
                     </FormControl>
                     <FormLabel className="cursor-pointer font-light">{item.label}</FormLabel>

diff --git a/app/(main)/team/(teamconfig)/[id]/config/layout.tsx b/app/(main)/team/(teamconfig)/[id]/config/layout.tsx
@@ -8,7 +8,7 @@ interface TeamConfigLayoutProps {
 const TeamConfigLayout: React.FC<TeamConfigLayoutProps> = ({ children }) => (
   <div className="space-y-8 px-16 pb-16">
     <div className="space-y-0.5">
-      <h1>Team settings</h1>
+      <h1>Team configurations</h1>
       <p className="text-md font-thin">Customize your teams experience.</p>
     </div>
     <Separtor className="dark:border-secondaryBG-dark" />

diff --git a/app/(main)/team/(teamconfig)/[id]/config/page.tsx b/app/(main)/team/(teamconfig)/[id]/config/page.tsx
@@ -1,10 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import useSWRClient from '@hooks/useSWRClient';
-import Loading from '@components/Loading/Loading';
-import Error from '@components/Error/Error';
-import { TeamConfigType } from '@/types/TeamConfigType';
 import TeamConfigForm from './components/TeamConfigForm';
 
 interface TeamConfigPageProps {
@@ -13,25 +9,10 @@ interface TeamConfigPageProps {
   };
 }
 
-const defaultConfig: TeamConfigType = {
-  teamName: '',
-  workKinds: [],
-  happinessSurvey: true,
-  workKindSurvey: true,
-  emotionSurvey: true,
-};
-
 const TeamConfigPage: React.FC<TeamConfigPageProps> = ({ params }) => {
   const { id: teamId } = params;
-  const { data, isLoading, error } = useSWRClient<TeamConfigType>(`/v1/team/${teamId}/config`);
-
-  if (isLoading) return <Loading />;
-  if (error)
-    return (
-      <Error errorMessage="It seems there was a problem loading the team configuration." action="/team" showContact />
-    );
 
-  return <TeamConfigForm config={data || defaultConfig} />;
+  return <TeamConfigForm teamId={teamId} />;
 };
 
 export default TeamConfigPage;
diff --git a/hooks/useTeamClient.ts b/hooks/useTeamClient.ts
@@ -2,6 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import { useAuth } from '@providers/AuthProvider';
 import { API_BASE_URL } from '@/lib/api/apiClient';
 import { CreateTeamDTO, JoinTeamDTO, Team } from '@/types/TeamType';
+import { TeamConfigType } from '@/types/TeamConfigType';
 
 const client = axios.create({ withCredentials: true, baseURL: API_BASE_URL });
 
@@ -14,9 +15,17 @@ const useTeamClient = () => {
 
   const joinTeam = async (body: JoinTeamDTO): Promise<AxiosResponse<Team>> => client.post('/v1/team/join', body);
 
+  const getTeamConfig = async (teamId: string): Promise<AxiosResponse<TeamConfigType>> =>
+    client.get(`/v1/team/${teamId}/config`);
+
+  const updateTeamConfig = async (teamId: string, body: TeamConfigType): Promise<AxiosResponse<TeamConfigType>> =>
+    client.put(`v1/team/${teamId}/config`, body);
+
   return {
     createTeam,
     joinTeam,
+    getTeamConfig,
+    updateTeamConfig,
   };
 };