Merge pull request #50 from SJSUCSClub/31-feature-refactor-mockapi-to…

…-reflect-backend-endpoints

[Feature] Refactor to use real backend endpoints

app/(main)/courses/[id]/@reviews/page.tsx

@@ -1,32 +1,34 @@
 import PaginatedReviews from '@/app/(main)/courses/[id]/@reviews/paginated-reviews';
 import {
+  CourseReviewsRouteBody,
   CourseReviewsRouteParams,
   CourseReviewsRouteResponse,
-  CourseReviewsRouteBody,
 } from '@/types/api/course/reviews';
-import fakeFetch from '@/utils/fake-fetch';
+import serverFetch from '@/utils/server-fetch';
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const initialPaginatedItems = await fakeFetch<
+  const [department, courseNumber] = params.id.split('-');
+  const initialPaginatedItems = await serverFetch<
     CourseReviewsRouteResponse,
     CourseReviewsRouteBody,
     CourseReviewsRouteParams
   >({
-    endpoint: '/course/reviews',
+    endpoint: '/courses/reviews',
     params: {
-      itemsPerPage: 4,
-      courseId: params.id,
-      page: 0,
+      department: department.toUpperCase(),
+      courseNumber: courseNumber,
     },
     body: {
-      filters: {},
+      page: 1,
+      limit: 3,
     },
     timeout: 3000,
   });
 
   return (
     <PaginatedReviews
-      courseId={params.id}
+      department={department.toUpperCase()}
+      courseNumber={courseNumber}
       initialPaginatedItems={initialPaginatedItems}
     />
   );

app/(main)/courses/[id]/@reviews/paginated-reviews.tsx

@@ -3,13 +3,10 @@
 import React from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 
-import Button, { ButtonBox, ButtonBoxProvider } from '@/components/button';
+import Button from '@/components/button';
 import Dropdown from '@/components/forms/dropdown';
 import { TagCheckbox, TagCheckboxGroup } from '@/components/forms/tag-checkbox';
-import TextInput, {
-  TextInputBox,
-  TextInputBoxProvider,
-} from '@/components/forms/text-input';
+import TextInput from '@/components/forms/text-input';
 import LoadingSpinner from '@/components/loading-spinner';
 import Review from '@/components/review';
 import SectionLabel from '@/components/section-label';
@@ -20,37 +17,31 @@ import {
   CourseReviewsRouteParams,
   CourseReviewsRouteResponse,
 } from '@/types/api/course/reviews';
-import { Course } from '@/types/database';
 import { SortType, TagType } from '@/types/general';
-import fakeFetch from '@/utils/fake-fetch';
-import {
-  ChevronRightIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/outline';
+import serverFetch from '@/utils/server-fetch';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
 const PaginatedReviews: React.FC<{
   initialPaginatedItems: CourseReviewsRouteResponse | null;
-  courseId: `${Course['department']}${Course['courseNumber']}`;
-}> = ({ initialPaginatedItems, courseId }) => {
+  department: string;
+  courseNumber: string;
+}> = ({ initialPaginatedItems, department, courseNumber }) => {
   const fetchRequest = (page: number) =>
-    fakeFetch<
+    serverFetch<
       CourseReviewsRouteResponse,
       CourseReviewsRouteBody,
       CourseReviewsRouteParams
     >({
-      endpoint: '/course/reviews',
+      endpoint: '/courses/reviews',
       params: {
-        itemsPerPage: 4,
-        courseId: courseId,
-        page: page,
+        department: department,
+        courseNumber: courseNumber,
       },
       body: {
-        filters: {
-          search: search.current,
-          sort: sort.current,
-          tags: tags.current,
-          professors: professors.current,
-        },
+        // TODO - add search and other filters here
+        tags: tags.current,
+        page: page,
+        limit: 3,
       },
       timeout: 3000,
     });
@@ -116,13 +107,14 @@ const PaginatedReviews: React.FC<{
           >
             {
               paginatedItems?.filters.tags.map((tag) => (
-                <TagCheckbox key={tag.tag} value={tag.tag} count={tag.count}>
-                  {tag.tag}
+                // TODO - put real value, not just -1
+                <TagCheckbox key={tag} value={tag} count={-1}>
+                  {tag}
                 </TagCheckbox>
               )) as React.ReactNode[]
             }
           </TagCheckboxGroup>
-          <TagCheckboxGroup
+          {/*<TagCheckboxGroup
             onChange={handleSetProfessors}
             label="Professors"
             disabled={loading}
@@ -134,13 +126,13 @@ const PaginatedReviews: React.FC<{
                 </TagCheckbox>
               )) as React.ReactNode[]
             }
-          </TagCheckboxGroup>
+          </TagCheckboxGroup>*/}
         </div>
       </div>
       <div className="flex flex-1 flex-col gap-[10px] pb-[10px]">
         <div className="flex justify-between">
           <SectionLabel info="Reviews">
-            {paginatedItems?.totalReviews} Reviews
+            {paginatedItems?.totalResults} Reviews
           </SectionLabel>
           <Dropdown
             options={['Relevant', 'Newest', 'Highest', 'Lowest']}
@@ -157,17 +149,20 @@ const PaginatedReviews: React.FC<{
               title={`${professorName}`}
               href={`/professors/${professorId}`}
               {...rest}
+              userName={rest.username || ''}
+              upvotes={rest.votes.upvotes}
+              overall={rest.quality}
             />
           );
         })}
         {!isEndOfList ? (
           <Button
             variant="tertiary"
-            disabled={paginatedItems?.totalReviews === 0}
+            disabled={paginatedItems?.totalResults === 0}
             onClick={loadMore}
             loading={loading}
           >
-            {paginatedItems?.totalReviews !== 0 ? 'Show More' : 'No Reviews ;('}
+            {paginatedItems?.totalResults !== 0 ? 'Show More' : 'No Reviews ;('}
           </Button>
         ) : null}
       </div>

app/(main)/courses/[id]/@schedules/page.tsx

@@ -1,23 +1,31 @@
 import PaginatedSchedules from '@/app/(main)/courses/[id]/@schedules/paginated-schedules';
 import {
+  CourseSchedulesRouteBody,
   CourseSchedulesRouteParams,
   CourseSchedulesRouteResponse,
 } from '@/types/api/course/schedules';
-import fakeFetch from '@/utils/fake-fetch';
+import serverFetch from '@/utils/server-fetch';
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const initialPaginatedSchedules = await fakeFetch<
+  const [department, courseNumber] = params.id.split('-');
+  const initialPaginatedSchedules = await serverFetch<
     CourseSchedulesRouteResponse,
+    CourseSchedulesRouteBody,
     CourseSchedulesRouteParams
   >({
-    endpoint: '/course/schedules',
-    params: { itemsPerPage: 4, page: 0, courseId: params.id },
+    endpoint: '/courses/schedules',
+    body: { limit: 3, page: 1 }, // backend is 1-indexed
+    params: {
+      department: department.toUpperCase(),
+      courseNumber: courseNumber,
+    },
     timeout: 2000,
   });
 
   return (
     <PaginatedSchedules
-      courseId={params.id}
+      department={department.toUpperCase()}
+      courseNumber={courseNumber}
       initialPaginatedItems={initialPaginatedSchedules}
     />
   );

app/(main)/courses/[id]/@schedules/paginated-schedules.tsx

@@ -8,19 +8,26 @@ import SectionLabel from '@/components/section-label';
 import usePaginatedItems from '@/hooks/use-paginated-items';
 import useWrappedRequest from '@/hooks/use-wrapped-request';
 import {
+  CourseSchedulesRouteBody,
   CourseSchedulesRouteParams,
   CourseSchedulesRouteResponse,
 } from '@/types/api/course/schedules';
-import fakeFetch from '@/utils/fake-fetch';
+import serverFetch from '@/utils/server-fetch';
 
 const PaginatedSchedules: React.FC<{
-  initialPaginatedItems: CourseSchedulesRouteResponse | null;
-  courseId: string;
-}> = ({ initialPaginatedItems, courseId }) => {
+  initialPaginatedItems: CourseSchedulesRouteResponse;
+  department: string;
+  courseNumber: string;
+}> = ({ initialPaginatedItems, department, courseNumber }) => {
   const initialFetchRequest = (page: number) =>
-    fakeFetch<CourseSchedulesRouteResponse, CourseSchedulesRouteParams>({
-      endpoint: '/course/schedules',
-      params: { itemsPerPage: 4, page: page, courseId: courseId },
+    serverFetch<
+      CourseSchedulesRouteResponse,
+      CourseSchedulesRouteBody,
+      CourseSchedulesRouteParams
+    >({
+      endpoint: '/courses/schedules',
+      params: { department: department, courseNumber: courseNumber },
+      body: { page: page, limit: 3 },
       timeout: 2000,
     });
   const { error, loading, wrappedRequest } = useWrappedRequest();
@@ -36,18 +43,25 @@ const PaginatedSchedules: React.FC<{
       <SectionLabel info="Sessions">Courses in Session</SectionLabel>
 
       {paginatedItems?.items.map((schedule, i) => {
-        const { days, classType, professorId, name, section, ...rest } =
-          schedule;
+        const {
+          days,
+          classType,
+          professorId,
+          professorName,
+          section,
+          ...rest
+        } = schedule;
         return (
           <Schedule
             key={i}
-            heading={`${name}`}
+            heading={`${professorName}`}
             subheading={`Section ${section}`}
             days={new Set(days)}
             additionalInfo={[classType]}
             href={`/professors/${professorId}`}
             {...rest}
             section={section}
+            overall={0} // TODO - determine what to do here besides pass in hard value
           />
         );
       })}
@@ -61,6 +75,7 @@ const PaginatedSchedules: React.FC<{
           {paginatedItems?.items.length !== 0 ? 'Show More' : 'No Schedules ;('}
         </Button>
       ) : null}
+      {error && <p>{error.toString()}</p>}
     </section>
   );
 };

app/(main)/courses/[id]/@summary/page.tsx

@@ -9,11 +9,12 @@ import LineChart from '@/components/line-chart';
 import SectionLabel from '@/components/section-label';
 import Tag from '@/components/tag';
 import {
+  CourseSummaryRouteBody,
   CourseSummaryRouteParams,
   CourseSummaryRouteResponse,
 } from '@/types/api/course/summary';
-import fakeFetch from '@/utils/fake-fetch';
 import getEvaluation from '@/utils/get-evaluation';
+import serverFetch from '@/utils/server-fetch';
 import {
   ArrowPathIcon,
   ArrowTopRightOnSquareIcon,
@@ -28,39 +29,41 @@ export default async function Page({
   params: { id: string };
   searchParams: { sort: string };
 }) {
-  const courseSummary = await fakeFetch<
+  const [department, courseNumber] = params.id.split('-');
+  const courseSummary = await serverFetch<
     CourseSummaryRouteResponse,
+    CourseSummaryRouteBody,
     CourseSummaryRouteParams
   >({
-    endpoint: '/course/summary',
-    params: { courseId: params.id },
-    timeout: 1000,
+    endpoint: '/courses/summary',
+    params: {
+      courseNumber: courseNumber,
+      department: department,
+    },
   });
-
   if (!courseSummary) notFound();
 
   const {
-    department,
-    courseNumber,
     satisfiesArea,
     prereqs,
     description,
-    openSections,
-    totalSections,
     totalReviews,
     name,
     units,
-    quality,
-    ease,
-    grade,
-    overall,
+    avgQuality,
+    avgEase,
+    avgGrade,
+    avgRating,
     qualityDistribution,
     gradeDistribution,
     easeDistribution,
     tags,
-    takeAgain,
-    overallDistribution,
+    takeAgainPercent,
+    ratingDistribution,
   } = courseSummary;
+  // TODO - figure out what to do besides hardcode
+  const openSections = 0;
+  const totalSections = 0;
 
   const type = searchParams.sort;
   return (
@@ -76,7 +79,14 @@ export default async function Page({
           department={department}
           courseNumber={courseNumber}
           name={name}
-          rating={type == 'quality' ? quality : type == 'ease' ? ease : overall}
+          rating={
+            // round to 1 decimal place
+            type == 'quality'
+              ? Math.round(avgQuality * 10) / 10
+              : type == 'ease'
+              ? Math.round(avgEase * 10) / 10
+              : Math.round(avgRating * 10) / 10
+          }
           totalReviews={totalReviews}
           units={units}
         />
@@ -89,22 +99,22 @@ export default async function Page({
             subtitle="Sections Open"
           />
           <InfoCard
-            type={grade ? getEvaluation(grade, 'grade') : 'default'}
+            type={avgGrade ? getEvaluation(avgGrade, 'grade') : 'default'}
             icon={<ClipboardDocumentListIcon />}
-            title={grade ?? '-'}
+            title={avgGrade ?? '-'}
             subtitle="Average Grade"
           />
           <InfoCard
-            type={getEvaluation(takeAgain, 'percentage')}
+            type={getEvaluation(takeAgainPercent, 'percentage')}
             icon={<ArrowPathIcon />}
-            title={`${takeAgain}%`}
+            title={`${takeAgainPercent}%`}
             subtitle="Would Take Again"
           />
         </div>
       </div>
 
       <div className="flex min-w-min flex-wrap justify-center gap-[10px]">
-        {tags.map((tag) => (
+        {(tags || []).map((tag) => (
           <Tag key={tag} size="lg">
             {tag}
           </Tag>
@@ -130,7 +140,7 @@ export default async function Page({
                   ? qualityDistribution
                   : type === 'ease'
                   ? easeDistribution
-                  : overallDistribution
+                  : ratingDistribution
               }
             />
           </div>