Be/subjects

client/src/api/subjects/subjects.api.ts

@@ -0,0 +1,7 @@
+import { apiPublic } from "../api.ts";
+import { SubjectsType } from "./subjects.type.ts";
+
+export const getAllSubjects = async (): Promise<SubjectsType[]> => {
+  const response = await apiPublic.get("/api/subjects");
+  return response.data;
+};

client/src/api/subjects/subjects.type.ts

@@ -0,0 +1,4 @@
+export type SubjectsType = {
+  id: string;
+  name: string;
+};

client/src/components/filters/Filters.tsx

@@ -6,10 +6,12 @@ import { Checkbox } from "../ui/checkbox/Checkbox";
 import { SliderRange } from "../ui/sliderRange/SliderRange";
 import { useTeachersFiltersStore } from "../../store/filters.store.ts";
 import { useShallow } from "zustand/react/shallow";
-import { Subjects } from "../../constants/subjects.ts";
 import { useSearchParams } from "react-router-dom";
+type FiltersProps = {
+  radioGroupValues: { label: string; value: string }[];
+};
 
-export const Filters = () => {
+export const Filters = ({ radioGroupValues }: FiltersProps) => {
   const [, setSearchParams] = useSearchParams();
   const {
     subjectDraft,
@@ -64,7 +66,7 @@ export const Filters = () => {
       >
         <h5 className="text-light-100 mb-5">Tutors</h5>
         <RadioGroup
-          options={Subjects}
+          options={radioGroupValues}
           value={subjectDraft ?? ""}
           onValueChange={(v: string) => setSubjectDraft(v || undefined)}
         />

client/src/components/skeletons/FiltersSkeleton.tsx

@@ -0,0 +1,51 @@
+const Skeleton = ({ className }: { className?: string }) => (
+  <div
+    className={`
+      animate-pulse
+      bg-white/10
+      rounded-md
+      ${className}
+    `}
+  />
+);
+
+export const FiltersSkeleton = () => {
+  return (
+    <div className="bg-white/10 w-72.5 sm:w-full lg:w-78 p-5 rounded-[30px]">
+      <Skeleton className="h-5 w-24 mb-5" />
+
+      <div className="flex flex-col items-start py-5 mr-7.5 mb-5 border-light-100 border-b border-t">
+        <Skeleton className="h-4 w-20 mb-5" />
+
+        <div className="flex flex-col gap-4 w-full">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-4 w-36" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+      </div>
+
+      <div className="flex flex-col items-start gap-5 mb-6">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-4 w-full rounded-full" />
+      </div>
+
+      <div className="mb-5">
+        <Skeleton className="h-3 w-32 mb-5" />
+        <div className="flex flex-col gap-4 py-5 border-light-100 border-b border-t">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Skeleton key={i} className="h-4 w-40" />
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5 mb-6">
+        <Skeleton className="h-10 w-full rounded-xl" />
+        <Skeleton className="h-10 w-full rounded-xl" />
+      </div>
+    </div>
+  );
+};

client/src/components/teacherProfileSection/LessonForm.tsx

@@ -1,5 +1,5 @@
 import { Button } from "../ui/button/Button";
-import { SelectComponent } from "../ui/select/select";
+import { SelectComponent } from "../ui/select/Select";
 import { LEVELS, SUBJECTS } from "./constants";
 import { useState } from "react";
 import { useModalStore } from "../../store/modals.store";

client/src/components/teacherProfileSection/ProfileExperienceEducation.tsx

@@ -1,4 +1,4 @@
-import { SelectComponent } from "../ui/select/select";
+import { SelectComponent } from "../ui/select/Select.tsx";
 import { EXPERIENCE_OPTIONS, EDUCATION_OPTIONS } from "./constants";
 
 type ProfileExperienceEducationProps = {

client/src/components/teacherSection/teacherSchedule/TeacherSchedule.tsx

@@ -5,7 +5,7 @@ import { TeacherType } from "../../../api/teacher/teacher.type";
 import { useModalStore } from "../../../store/modals.store";
 import { useAuthSessionStore } from "../../../store/authSession.store";
 import { useTeacherAppointmentsQuery } from "../../../features/appointments/query/useTeacherAppointmentsQuery";
-import { SelectComponent } from "../../ui/select/select";
+import { SelectComponent } from "../../ui/select/Select.tsx";
 import { Button } from "../../ui/button/Button";
 
 interface TeacherScheduleProps {

client/src/features/queryKeys.ts

@@ -10,7 +10,6 @@ export const queryKeys = {
   teachers: {
     all: ["teachers"] as const,
     myProfile: () => ["teachers", "me"] as const,
-    detail: (id: string) => ["teachers", id] as const,
     list: (params: TeachersQuery) => ["teachers", "list", params] as const,
   },
   teacher: (id: string) => ["teachers", id] as const,
@@ -27,3 +26,7 @@ export const chatKeys = {
   messages: (conversationId: string) =>
     ["chat", "messages", conversationId] as const,
 };
+
+export const subjectsKey = {
+  all: ["subjects"] as const,
+};

client/src/features/subjects/query/useSubjectsQuery.tsx

@@ -0,0 +1,24 @@
+import { useNotificationStore } from "../../../store/notification.store.ts";
+import { useQuery } from "@tanstack/react-query";
+import { subjectsKey } from "../../queryKeys.ts";
+import { useEffect } from "react";
+import { getErrorMessage } from "../../../util/ErrorUtil.ts";
+import { getAllSubjects } from "../../../api/subjects/subjects.api.ts";
+
+export function useSubjectsQuery() {
+  const notifyError = useNotificationStore((s) => s.error);
+
+  const query = useQuery({
+    queryKey: subjectsKey.all,
+    queryFn: getAllSubjects,
+  });
+
+  useEffect(() => {
+    if (query.isError) {
+      const msg = getErrorMessage(query.error);
+      notifyError(msg ?? "Failed to load subjects");
+    }
+  }, [query.isError, query.isSuccess, query.error, notifyError]);
+
+  return query;
+}

client/src/pages/chat/chatDialogPage/ChatDialogPage.tsx

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { ChatSideBarItem } from "../../../components/chat/chatSidebarItem/ChatSideBarItem.tsx";
 import { useMemo, useState } from "react";
-import { formatDate } from "../../../util/data.util.ts";
+import { formatDate } from "../../../util/date.util.ts";
 import { TextField } from "../../../components/ui/textField/TextField.tsx";
 import { Button } from "../../../components/ui/button/Button.tsx";
 import {

client/src/pages/teachersPage/TeachersPage.tsx

@@ -3,17 +3,33 @@ import { CardsList } from "../../components/cardsList/CardsList";
 import { Pagination } from "../../components/ui/pagination/Pagination";
 import { useTeachersQuery } from "../../features/teachers/query/useTeachersQuery.tsx";
 import { useTeachersFiltersStore } from "../../store/filters.store.ts";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { TeachersQuery } from "../../api/teacher/teacher.type.ts";
 import { useShallow } from "zustand/react/shallow";
 import { useSearchParams } from "react-router-dom";
 import { TeachersCardsSkeletonList } from "../../components/skeletons/TeachersCardsSkeletonList.tsx";
+import { useSubjectsQuery } from "../../features/subjects/query/useSubjectsQuery.tsx";
+import { mapSubjectsToOptions } from "../../util/mapSubjectToOptions.util.ts";
+import { FiltersSkeleton } from "../../components/skeletons/FiltersSkeleton.tsx";
+
 export const TeachersPage = () => {
   const [sp] = useSearchParams();
   const setFromExternalQuery = useTeachersFiltersStore(
     (s) => s.setFromExternalQuery,
   );
 
+  const listTopRef = useRef<HTMLDivElement | null>(null);
+
+  const handlePageChange = (page: number) => {
+    setPage(page);
+
+    requestAnimationFrame(() => {
+      listTopRef.current?.scrollIntoView({
+        block: "start",
+      });
+    });
+  };
+
   const {
     subject,
     minPrice,
@@ -62,12 +78,15 @@ export const TeachersPage = () => {
     pageSize,
   ]);
   const { data, isFetching } = useTeachersQuery(params);
+  const { data: radioGroupSubjects, isLoading: radioGroupSubjectsLoading } =
+    useSubjectsQuery();
   useEffect(() => {
     setFromExternalQuery({ subject: sp.get("subject") || undefined });
   }, [sp, setFromExternalQuery]);
-  const showSkeleton = isFetching;
+
   return (
     <div
+      ref={listTopRef}
       className="
            flex flex-col items-center justify-center
             w-full mx-auto
@@ -85,10 +104,20 @@ export const TeachersPage = () => {
       </h3>
       <div className="flex flex-col gap-10 lg:flex-row lg:items-start w-full">
         <div className="flex justify-center w-full lg:w-75 shrink-0">
-          <Filters />
+          {radioGroupSubjectsLoading ? (
+            <FiltersSkeleton />
+          ) : (
+            <Filters
+              radioGroupValues={
+                radioGroupSubjects
+                  ? mapSubjectsToOptions(radioGroupSubjects)
+                  : []
+              }
+            />
+          )}
         </div>
         <div className="w-full lg:flex-1 min-w-0">
-          {showSkeleton ? (
+          {isFetching ? (
             <TeachersCardsSkeletonList count={10} />
           ) : data?.items?.length ? (
             <CardsList cards={data.items} />
@@ -101,7 +130,7 @@ export const TeachersPage = () => {
               theme="primary"
               shape="round"
               activeIndex={pageNumber}
-              onIndexChange={setPage}
+              onIndexChange={handlePageChange}
               totalPages={data?.pagesCount ?? 1}
             />
           </div>

client/src/util/mapSubjectToOptions.util.ts

@@ -0,0 +1,13 @@
+import { SubjectsType } from "../api/subjects/subjects.type.ts";
+
+export type Option = {
+  label: string;
+  value: string;
+};
+
+export const mapSubjectsToOptions = (subjects: SubjectsType[]): Option[] => {
+  return subjects.map(({ id, name }) => ({
+    label: name,
+    value: id,
+  }));
+};

server/src/app.ts

@@ -10,6 +10,7 @@ import { chatRouter } from "./routes/chatRoute.js";
 import { streamRouter } from "./routes/streamRoute.js";
 
 import { videoCallRouter } from "./routes/videoCallRoute.js";
+import { subjectRouter } from "./routes/subjectRoute.js";
 
 // Create an express server
 const app = express();
@@ -23,6 +24,7 @@ app.use(express.json());
  * As we also host our client code on heroku we want to separate the API endpoints.
  */
 app.use("/api/auth", authRouter);
+app.use("/api/subjects", subjectRouter);
 app.use("/api/appointments", appointmentRouter);
 app.use("/api/teachers", teacherRouter);
 app.use("/api/reviews", reviewRouter);

server/src/composition/composition.types.ts

@@ -43,4 +43,7 @@ export const TYPES = {
   VideoCallQuery: Symbol.for("VideoCallQuery"),
   VideoCallService: Symbol.for("VideoCallService"),
   VideoCallController: Symbol.for("VideoCallController"),
+  //subjects
+  SubjectsController: Symbol.for("SubjectsController"),
+  SubjectsQuery: Symbol.for("SubjectsQuery"),
 };

server/src/composition/compositionRoot.ts

@@ -33,6 +33,8 @@ import { VideoCallCommand } from "../repositories/commandRepositories/videoCall.
 import { VideoCallController } from "../controllers/videoCall.controller.js";
 import { VideoCallQuery } from "../repositories/queryRepositories/videoCall.query.js";
 import { VideoCallService } from "../services/video/videoCall.service.js";
+import { SubjectsController } from "../controllers/subjects.controller.js";
+import { SubjectsQuery } from "../repositories/queryRepositories/subjects.query.js";
 
 export const container = new Container();
 
@@ -90,6 +92,9 @@ container.bind(TYPES.ChatQuery).to(ChatQuery);
 container.bind(TYPES.ChatCommand).to(ChatCommand);
 container.bind(TYPES.ChatController).to(ChatController);
 container.bind(TYPES.ConversationCommand).to(ConversationCommand);
+//subjects
+container.bind(TYPES.SubjectsController).to(SubjectsController);
+container.bind(TYPES.SubjectsQuery).to(SubjectsQuery);
 
 //video call
 container.bind<StreamController>(TYPES.StreamController).to(StreamController);

server/src/controllers/subjects.controller.ts

@@ -0,0 +1,21 @@
+import { TYPES } from "../composition/composition.types.js";
+import { inject, injectable } from "inversify";
+import { NextFunction, Response, Request } from "express";
+import { SubjectsQuery } from "../repositories/queryRepositories/subjects.query.js";
+
+@injectable()
+export class SubjectsController {
+  constructor(
+    @inject(TYPES.SubjectsQuery) private subjectsQuery: SubjectsQuery,
+  ) {}
+
+  async getSubjects(req: Request, res: Response, next: NextFunction) {
+    try {
+      const subjects = await this.subjectsQuery.getAllSubjects();
+
+      return res.status(200).json(subjects);
+    } catch (err) {
+      return next(err);
+    }
+  }
+}

server/src/db/schemes/subjects.schema.ts

@@ -0,0 +1,15 @@
+import mongoose from "mongoose";
+import { WithId } from "mongodb";
+import { SubjectsTypeDB } from "./types/subjects.types.js";
+
+const SubjectsSchema = new mongoose.Schema<SubjectsTypeDB>(
+  {
+    id: { type: String, required: true, unique: true, index: true },
+    name: { type: String, required: true, index: true },
+  },
+  { versionKey: false },
+);
+export const SubjectsModel = mongoose.model<WithId<SubjectsTypeDB>>(
+  "subjects",
+  SubjectsSchema,
+);

server/src/db/schemes/types/subjects.types.ts

@@ -0,0 +1,4 @@
+export type SubjectsTypeDB = {
+  id: string;
+  name: string;
+};

server/src/repositories/queryRepositories/subjects.query.ts

@@ -0,0 +1,17 @@
+import { injectable } from "inversify";
+import { SubjectsModel } from "../../db/schemes/subjects.schema.js";
+import { subjectsMapper } from "../../utils/mappers/subject.mapper.js";
+
+@injectable()
+export class SubjectsQuery {
+  async getAllSubjects(): Promise<ReturnType<typeof subjectsMapper>[]> {
+    try {
+      const subjects = await SubjectsModel.find().lean();
+      return subjects.map(subjectsMapper);
+    } catch (err: unknown) {
+      throw new Error("Something went wrong with getting all subjects", {
+        cause: err,
+      });
+    }
+  }
+}

server/src/routes/subjectRoute.ts

@@ -0,0 +1,11 @@
+import { Router } from "express";
+import { container } from "../composition/compositionRoot.js";
+import { SubjectsController } from "../controllers/subjects.controller.js";
+import { TYPES } from "../composition/composition.types.js";
+
+export const subjectRouter = Router();
+const subjectsController = container.get<SubjectsController>(
+  TYPES.SubjectsController,
+);
+
+subjectRouter.get("/", subjectsController.getSubjects.bind(subjectsController));

server/src/types/subjects/subjects.type.ts

@@ -0,0 +1,4 @@
+export type SubjectsViewType = {
+  id: string;
+  name: string;
+};