update(web): update student settings page design

Author: moalidv

apps/web/src/components/Settings/StudentPublicInfo.tsx

@@ -5,7 +5,8 @@ import {
   useFindStudentById,
   useUpdateStudent,
 } from "@litespace/headless/student";
-import { useInfiniteTopics } from "@litespace/headless/topic";
+import { useInfiniteTopics, useUserTopics } from "@litespace/headless/topic";
+import { useUpdateUserTopics } from "@litespace/headless/user";
 import { IStudent, ITopic } from "@litespace/types";
 import { Button } from "@litespace/ui/Button";
 import { Form } from "@litespace/ui/Form";
@@ -18,10 +19,10 @@ import { Select } from "@litespace/ui/Select";
 import { Textarea } from "@litespace/ui/Textarea";
 import { useToast } from "@litespace/ui/Toast";
 import { Typography } from "@litespace/ui/Typography";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
 type IForm = {
-  topics: ITopic.Self["name"]["ar"][];
+  topics: ITopic.Self[];
   career: string;
   level: IStudent.EnglishLevel;
   aim: string;
@@ -31,17 +32,18 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
   const intl = useFormatMessage();
   const toast = useToast();
 
-  const { data } = useFindStudentById(id);
+  const { data: studentData } = useFindStudentById(id);
 
   const { list: allTopics } = useInfiniteTopics();
+  const { query: studentTopics } = useUserTopics();
 
   const onSuccess = useCallback(() => {
     toast.success({
       title: intl("student-settings.updated-successfully"),
     });
   }, [intl, toast]);
 
-  const onError = useOnError({
+  const studentOnError = useOnError({
     type: "mutation",
     handler: ({ messageId }) => {
       toast.error({
@@ -51,32 +53,62 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
     },
   });
 
-  const updateStudent = useUpdateStudent({ onSuccess, onError });
+  const topicOnError = useOnError({
+    type: "mutation",
+    handler: ({ messageId }) => {
+      toast.error({
+        title: intl("complete-profile.update.error"),
+        description: intl(messageId),
+      });
+    },
+  });
+
+  const updateStudent = useUpdateStudent({
+    onSuccess,
+    onError: studentOnError,
+  });
+  const updateStudentTopics = useUpdateUserTopics({
+    onSuccess,
+    onError: topicOnError,
+  });
 
   const validators = useMakeValidators<IForm>({
     career: { required: false },
     level: { required: false, validate: validateEnglishLevel },
     aim: { required: false },
   });
 
+  const studentTopicsIds = useMemo(
+    () => studentTopics.data?.map((topic) => topic.id),
+    [studentTopics.data]
+  );
+
   const form = useForm<IForm>({
     defaults: {
-      topics: data?.topics.map((topic) => topic.name.ar) || [],
-      career: data?.career || intl("labels.jobs.student"),
-      level: data?.level || IStudent.EnglishLevel.Beginner,
-      aim: data?.aim || "",
+      topics: studentTopics.data || [],
+      career: studentData?.jobTitle || intl("labels.jobs.student"),
+      level: studentData?.englishLevel || IStudent.EnglishLevel.Beginner,
+      aim: studentData?.learningObjective || "",
     },
     validators,
     onSubmit(data) {
       updateStudent.mutate({
-        id,
         payload: {
-          topics: data.topics,
-          career: data.career,
-          level: data.level,
-          aim: data.aim,
+          id,
+          englishLevel: data.level,
+          jobTitle: data.career,
+          learningObjective: data.aim,
         },
       });
+      updateStudentTopics.mutate({
+        addTopics: data.topics
+          .filter((topic) => !studentTopicsIds?.includes(topic.id))
+          .map((topic) => topic.id),
+        removeTopics:
+          studentTopicsIds?.filter(
+            (topic) => !data.topics.map((tp) => tp.id).includes(topic)
+          ) || [],
+      });
     },
   });
 
@@ -105,8 +137,14 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
               })) || []
             }
             placeholder={intl("complete-profile.topics.placeholder")}
-            values={form.state.topics}
-            setValues={(values) => form.set("topics", values)}
+            values={form.state.topics.map((topic) => topic.name.ar)}
+            setValues={(values) =>
+              form.set(
+                "topics",
+                allTopics?.filter((topic) => values.includes(topic.name.ar)) ||
+                  []
+              )
+            }
           />
 
           <Input

packages/atlas/src/api/student.ts

@@ -14,7 +14,7 @@ export class Student extends Base {
     return this.patch({ route: `/api/v1/student/`, payload });
   }
 
-  async findById(id: number): Promise<IStudent.FindStudentMetaApiResponse> {
+  async findById(id: number): Promise<IStudent.Self> {
     return this.get({ route: `api/v1/student/${id}` });
   }
 }

packages/headless/src/student.ts

@@ -85,9 +85,7 @@ export function useUpdateStudent({
   });
 }
 
-export function useFindStudentById(
-  id: number
-): UseQueryResult<IStudent.FindStudentMetaApiResponse> {
+export function useFindStudentById(id: number): UseQueryResult<IStudent.Self> {
   const api = useApi();
   const find = useCallback(async () => {
     return api.student.findById(id);

packages/headless/src/topic.ts

@@ -131,3 +131,27 @@ export function useDeleteTopic({
     onError,
   });
 }
+
+export function useUpdateUserTopics({
+  onSuccess,
+  onError,
+}: {
+  onSuccess: OnSuccess;
+  onError: OnError;
+}) {
+  const api = useApi();
+
+  const update = useCallback(
+    async (payload: ITopic.ReplaceUserTopicsApiPayload) => {
+      return await api.topic.replaceUserTopics(payload);
+    },
+    [api.topic]
+  );
+
+  return useMutation({
+    mutationFn: update,
+    mutationKey: ["update-user-topics"],
+    onSuccess,
+    onError,
+  });
+}

packages/types/src/student.ts

@@ -1,8 +1,4 @@
-<<<<<<< HEAD
 import { IFilter, IUser, Paginated } from "@/index";
-=======
-import { IFilter, ITopic, IUser } from "@/index";
->>>>>>> 9805f504 (update(web): update student settings page design)
 
 export enum EnglishLevel {
   Beginner = 1,
@@ -79,9 +75,3 @@ export type UpdateApiResponse = unknown;
 export type FindApiQuery = FindModelQuery;
 
 export type FindApiResponse = Paginated<Self>;
-export type FindStudentMetaApiResponse = Self & {
-  career: string;
-  level: EnglishLevel;
-  aim: string;
-  topics: ITopic.Self[];
-};