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";
@@ -21,7 +22,7 @@ import { Typography } from "@litespace/ui/Typography";
 import React, { useCallback, useMemo } 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 || "",
+      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)
+          ) || [],
+      });
     },
   });
 
@@ -101,12 +133,17 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
             options={
               allTopics?.map((topic) => ({
                 label: topic.name.ar,
-                value: topic.name.ar,
+                value: topic.id,
               })) || []
             }
             placeholder={intl("complete-profile.topics.placeholder")}
-            values={form.state.topics}
-            setValues={(values) => form.set("topics", values)}
+            values={form.state.topics.map((topic) => topic.id)}
+            setValues={(values) =>
+              form.set(
+                "topics",
+                allTopics?.filter((topic) => values.includes(topic.id)) || []
+              )
+            }
           />
 
           <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/constants/mutation.ts

@@ -23,6 +23,7 @@ export enum MutationKey {
   DeleteSlot = "delete-slot",
   UpdateUser = "update-user",
   UpdateUserPersonalInfo = "update-user-personal-info",
+  UdpateUsertopics = "update-user-topics",
   UpdateStudent = "update-student",
   UpdateTutorTopics = "update-tutor-topics",
   CreateRoom = "create-room",

packages/headless/src/constants/query.ts

@@ -24,6 +24,7 @@ export enum QueryKey {
   FindUserById = "find-user-by-id",
   FindStudentStats = "find-student-stats",
   FindStudents = "find-students",
+  FindStudentById = "find-student-by-id",
   FindPersonalizedStudentStats = "find-personalized-student-stats",
   FindPersonalizedTutorStats = "find-personalized-tutor-stats",
   FindTopic = "find-topic",

packages/headless/src/student.ts

@@ -85,16 +85,14 @@ 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);
   }, [api.student, id]);
 
   return useQuery({
     queryFn: find,
-    queryKey: ["find-student-by-id"],
+    queryKey: [QueryKey.FindStudentById],
   });
 }

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: [MutationKey.UdpateUsertopics],
+    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[];
-};

packages/ui/src/components/Tabs/Tabs.tsx

@@ -21,7 +21,7 @@ export const Tabs = <T extends string>({
   setTab: (id: T) => void;
 }) => {
   return (
-    <div className="border border-natural-200 rounded-xl flex items-center justify-between w-full max-w-[530px]">
+    <div className="px-1 border border-natural-200 rounded-xl flex items-center justify-between w-full max-w-[530px]">
       {tabs.map(({ id, label, important, disabled }) => (
         <Tab
           key={id}
@@ -57,7 +57,7 @@ const Tab: React.FC<{
       <Typography
         tag="h6"
         className={cn(
-          "relative font-normal md:font-medium text-tiny md:text-body whitespace-nowrap w-fit",
+          "relative font-normal md:font-medium text-tiny md:text-body md:whitespace-nowrap w-fit",
           active
             ? "text-brand-700"
             : "text-natural-500 group-hover:text-brand-500 group-active:text-brand-700"

packages/ui/src/locales/ar-eg.json

@@ -925,7 +925,6 @@
   "payment.methods.wallet": "المحافظ الإلكترونة",
   "payment.methods.cards": "البطاقات",
   "payment.methods.fawry": "الدفع عن طريق فوري",
-  "labels.jobs.student": "طالب",
   "labels.contact-us": "تواصل معنا",
   "labels.leave": "المغادرة",
   "labels.enable-notifications": "تفعيل الإشعارات",