Merge pull request #97 from SJSUCSClub/95-improve-allow-filters-to-be…

…-used-on-mobile-screen-sizes [Improve] added popover for filters for mobile screen sizes
SJSUCSClub · Sep 30, 2024 · eccbc99 · eccbc99
2 parents 6380a7d + 8d60a58
commit eccbc99
Show file tree

Hide file tree

Showing 20 changed files with 479 additions and 70 deletions.
diff --git a/app/(main)/compare/page.tsx b/app/(main)/compare/page.tsx
@@ -1,4 +1,4 @@
-import { Card, LinkBtn } from '@/components/atoms';
+import { Btn, Card, LinkBtn } from '@/components/atoms';
 import { CompareItem, FilterGroup, SearchBar } from '@/components/molecules';
 import { BarChart } from '@/components/organisms';
 import {
@@ -8,6 +8,7 @@ import {
 } from '@/types';
 import fetcher from '@/utils/fetcher';
 import roundToTenth from '@/utils/round-to-tenth';
+import { EllipsisVerticalIcon, XMarkIcon } from '@heroicons/react/24/solid';
 
 export default async function Page({
   searchParams,
@@ -108,12 +109,34 @@ export default async function Page({
 
   return (
     <main>
-      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
-        <div className="w-[250px] max-lg:hidden">
-          <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
-            <p className="pb-md">
-              Search and select professors and/or courses to compare
-            </p>
+      <div className="mx-auto flex w-full max-w-content-width px-md py-lg">
+        <p className="flex-1">Grade/Rating Analysis</p>
+        <Btn
+          popoverTarget="filters"
+          variant="tertiary"
+          className="rounded-sm p-0 lg:hidden"
+        >
+          <EllipsisVerticalIcon width={24} height={24} />
+        </Btn>
+      </div>
+      <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
+        <div className="lg:w-[250px] lg:pr-md">
+          <div
+            id="filters"
+            popover="auto"
+            className="top-0 max-h-[100dvh] min-h-[50dvh] w-full overflow-y-auto bg-page pb-lg pt-lg max-lg:h-[100dvh] max-lg:px-md lg:sticky lg:flex lg:flex-col lg:gap-sm"
+          >
+            <div className="flex pb-md">
+              <p className="flex-1">Filters</p>
+              <Btn
+                popoverTarget="filters"
+                variant="tertiary"
+                className="rounded-sm p-0 lg:hidden"
+              >
+                <XMarkIcon width={24} height={24} />
+              </Btn>
+            </div>
+
             <div className="pb-lg pr-md">
               <SearchBar param="compareQuery" shouldResetPageOnChange={false} />
             </div>
@@ -149,41 +172,49 @@ export default async function Page({
           </div>
         </div>
         <div className="flex min-w-0 flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
-          <div className="flex gap-sm overflow-x-auto">
-            {professorStats.map((professor) => (
-              <CompareItem
-                key={professor.id}
-                link={`/professors/${professor.id}`}
-                review={professor.review}
-                takeAgainPercent={professor.takeAgainPercent}
-                avgGrade={professor.avgGrade}
-                totalReviews={professor.totalReviews}
-                id={professor.id}
-              />
-            ))}
-            {courseStats.map((course) => (
-              <CompareItem
-                key={course.id}
-                link={`/courses/${course.id}`}
-                review={course.review}
-                takeAgainPercent={course.takeAgainPercent}
-                avgGrade={course.avgGrade}
-                totalReviews={course.totalReviews}
-                id={course.id}
-              />
-            ))}
-          </div>
+          {professorStats.length + courseStats.length ? (
+            <div className="flex gap-sm overflow-x-auto">
+              {professorStats.map((professor) => (
+                <CompareItem
+                  key={professor.id}
+                  link={`/professors/${professor.id}`}
+                  review={professor.review}
+                  takeAgainPercent={professor.takeAgainPercent}
+                  avgGrade={professor.avgGrade}
+                  totalReviews={professor.totalReviews}
+                  id={professor.id}
+                />
+              ))}
+              {courseStats.map((course) => (
+                <CompareItem
+                  key={course.id}
+                  link={`/courses/${course.id}`}
+                  review={course.review}
+                  takeAgainPercent={course.takeAgainPercent}
+                  avgGrade={course.avgGrade}
+                  totalReviews={course.totalReviews}
+                  id={course.id}
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="w-full p-lg text-center italic text-neutral">
+              No items selected.
+              <br />
+              Search and select professors/courses to compare.
+            </p>
+          )}
           <Card className="p-lg max-lg:w-full lg:flex-1">
             <p className="pb-sm font-bold">Rating Distribution</p>
             <BarChart
               series={[
                 ...(professorStats.map((professor) => ({
                   name: professor.id,
-                  data: professor.ratingDistribution,
+                  data: professor.ratingDistribution.reverse(),
                 })) ?? []),
                 ...(courseStats.map((course) => ({
                   name: course.id,
-                  data: course.ratingDistribution,
+                  data: course.ratingDistribution.reverse(),
                 })) ?? []),
               ]}
               categories={[5, 4, 3, 2, 1]}

diff --git a/app/(main)/courses/[id]/@reviews/page.tsx b/app/(main)/courses/[id]/@reviews/page.tsx
@@ -8,6 +8,7 @@ import SessionProvider from '@/wrappers/session-provider';
 import { Btn, Spinner } from '@/components/atoms';
 import { FilterGroup } from '@/components/molecules';
 import { useSearchParams } from 'next/navigation';
+import { EllipsisVerticalIcon, XMarkIcon } from '@heroicons/react/24/solid';
 
 const getKey =
   (id: string, params: string) =>
@@ -60,11 +61,24 @@ export default function Page({ params }: { params: { id: string } }) {
   const results = data ? data[0] : null;
   const items = data ? data.flatMap((d) => d.items) : [];
   return (
-    <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
+    <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
       {results?.total_results ? (
-        <div className="w-[250px] max-lg:hidden">
-          <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
-            <p className="pb-md">Filters</p>
+        <div className="lg:w-[250px] lg:pr-md">
+          <div
+            id="review-filters"
+            popover="auto"
+            className="top-0 max-h-[100dvh] min-h-[50dvh] w-full overflow-y-auto bg-page pb-lg pt-lg max-lg:h-[100dvh] max-lg:px-md lg:sticky lg:flex lg:flex-col lg:gap-sm"
+          >
+            <div className="flex">
+              <p className="flex-1 pb-md">Filters</p>
+              <Btn
+                popoverTarget="review-filters"
+                variant="tertiary"
+                className="rounded-sm p-0 lg:hidden"
+              >
+                <XMarkIcon width={24} height={24} />
+              </Btn>
+            </div>
             <p className="pb-sm text-small-lg">Limit</p>
             <FilterGroup
               variant="radio"
@@ -93,7 +107,18 @@ export default function Page({ params }: { params: { id: string } }) {
       ) : null}
       <SessionProvider>
         <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
-          <p id="reviews">{results?.total_results ?? '-'} Review(s)</p>
+          <div className="flex">
+            <p id="reviews" className="flex-1">
+              {results?.total_results ?? '-'} Review(s)
+            </p>
+            <Btn
+              popoverTarget="review-filters"
+              variant="tertiary"
+              className="rounded-sm p-0 lg:hidden"
+            >
+              <EllipsisVerticalIcon width={24} height={24} />
+            </Btn>
+          </div>
           {isLoading || isValidating ? <Skeleton /> : null}
           {!isLoading && !isValidating
             ? items.map((item, i) => (

diff --git a/app/(main)/courses/[id]/@schedules/page.tsx b/app/(main)/courses/[id]/@schedules/page.tsx
@@ -12,7 +12,7 @@ const getKey =
   (pageIndex: number, previousPageData: CoursesIDSchedulesResponse) => {
     if (previousPageData && previousPageData.page === previousPageData.pages)
       return null;
-    return `/django/core/courses/${id}/schedules?page=${pageIndex + 1}`;
+    return `/django/core/courses/${id}/schedules?limit=4&page=${pageIndex + 1}`;
   };
 
 export default function Page({ params }: { params: { id: string } }) {

diff --git a/app/(main)/courses/[id]/@statistics/page.tsx b/app/(main)/courses/[id]/@statistics/page.tsx
@@ -186,7 +186,12 @@ export default async function Page({
         <Card className="p-lg max-lg:w-full lg:flex-1">
           <p className="pb-sm font-bold">Rating Distribution</p>
           <BarChart
-            series={[{ name: 'Rating Distribution', data: reviewDistribution }]}
+            series={[
+              {
+                name: 'Rating Distribution',
+                data: reviewDistribution.reverse(),
+              },
+            ]}
             categories={[5, 4, 3, 2, 1]}
           />
         </Card>

diff --git a/app/(main)/courses/search/page.tsx b/app/(main)/courses/search/page.tsx
@@ -1,7 +1,8 @@
-import { Card, LinkBtn } from '@/components/atoms';
+import { Btn, Card, LinkBtn } from '@/components/atoms';
 import { FilterGroup, PaginationBar } from '@/components/molecules';
 import { CoursesSearchResponse } from '@/types';
 import fetcher from '@/utils/fetcher';
+import { EllipsisVerticalIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 
 export default async function Page({
@@ -35,11 +36,24 @@ export default async function Page({
       <div className="mx-auto w-full max-w-content-width px-md py-lg">
         <p>Search results for &quot;{searchParams.query}&quot;</p>
       </div>
-      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
+      <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
         {total_results ? (
-          <div className="w-[250px] max-lg:hidden">
-            <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
-              <p className="pb-md">Filters</p>
+          <div className="lg:w-[250px] lg:pr-md">
+            <div
+              id="filters"
+              popover="auto"
+              className="top-0 max-h-[100dvh] min-h-[50dvh] w-full overflow-y-auto bg-page pb-lg pt-lg max-lg:h-[100dvh] max-lg:px-md lg:sticky lg:flex lg:flex-col lg:gap-sm"
+            >
+              <div className="flex">
+                <p className="flex-1 pb-md">Filters</p>
+                <Btn
+                  popoverTarget="filters"
+                  variant="tertiary"
+                  className="rounded-sm p-0 lg:hidden"
+                >
+                  <XMarkIcon width={24} height={24} />
+                </Btn>
+              </div>
               <p className="pb-sm text-small-lg">Limit</p>
               <FilterGroup
                 variant="radio"
@@ -94,7 +108,16 @@ export default async function Page({
           </div>
         ) : null}
         <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
-          <p>{total_results ?? '-'} Courses(s)</p>
+          <div className="flex">
+            <p className="flex-1">{total_results ?? '-'} Course(s)</p>
+            <Btn
+              popoverTarget="filters"
+              variant="tertiary"
+              className="rounded-sm p-0 lg:hidden"
+            >
+              <EllipsisVerticalIcon width={24} height={24} />
+            </Btn>
+          </div>
 
           {items && total_results > 0 ? (
             <Card>

diff --git a/app/(main)/professors/[id]/@reviews/page.tsx b/app/(main)/professors/[id]/@reviews/page.tsx
@@ -7,6 +7,7 @@ import { ProfessorsIDReviewsResponse } from '@/types';
 import fetcher from '@/utils/fetcher';
 import SessionProvider, { useSession } from '@/wrappers/session-provider';
 import { ChevronRightIcon } from '@heroicons/react/16/solid';
+import { EllipsisVerticalIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import { useSearchParams } from 'next/navigation';
 import useSWRInfinite from 'swr/infinite';
 
@@ -97,11 +98,24 @@ export default function Page({ params }: { params: { id: string } }) {
   // const hasReviewed = results?.has_reviewed;
   const items = data ? data.flatMap((d) => d.items) : [];
   return (
-    <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
+    <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
       {results?.total_results ? (
-        <div className="w-[250px] max-lg:hidden">
-          <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
-            <p className="pb-md">Filters</p>
+        <div className="lg:w-[250px] lg:pr-md">
+          <div
+            id="review-filters"
+            popover="auto"
+            className="top-0 max-h-[100dvh] min-h-[50dvh] w-full overflow-y-auto bg-page pb-lg pt-lg max-lg:h-[100dvh] max-lg:px-md lg:sticky lg:flex lg:flex-col lg:gap-sm"
+          >
+            <div className="flex">
+              <p className="flex-1 pb-md">Filters</p>
+              <Btn
+                popoverTarget="review-filters"
+                variant="tertiary"
+                className="rounded-sm p-0 lg:hidden"
+              >
+                <XMarkIcon width={24} height={24} />
+              </Btn>
+            </div>
             <p className="pb-sm text-small-lg">Limit</p>
             <FilterGroup
               variant="radio"
@@ -130,7 +144,18 @@ export default function Page({ params }: { params: { id: string } }) {
       ) : null}
       <SessionProvider>
         <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
-          <p id="reviews">{results?.total_results ?? '-'} Review(s)</p>
+          <div className="flex">
+            <p id="reviews" className="flex-1">
+              {results?.total_results ?? '-'} Review(s)
+            </p>
+            <Btn
+              popoverTarget="review-filters"
+              variant="tertiary"
+              className="rounded-sm p-0 lg:hidden"
+            >
+              <EllipsisVerticalIcon width={24} height={24} />
+            </Btn>
+          </div>
           <WriteReview id={params.id} />
           {isLoading || isValidating ? <Skeleton /> : null}
           {!isLoading && !isValidating

diff --git a/app/(main)/professors/[id]/@schedules/page.tsx b/app/(main)/professors/[id]/@schedules/page.tsx
@@ -12,7 +12,7 @@ const getKey =
   (pageIndex: number, previousPageData: ProfessorsIDSchedulesResponse) => {
     if (previousPageData && previousPageData.page === previousPageData.pages)
       return null;
-    return `/django/core/professors/${id}/schedules?page=${pageIndex + 1}`;
+    return `/django/core/professors/${id}/schedules?limit=4&page=${pageIndex + 1}`;
   };
 
 export default function Page({ params }: { params: { id: string } }) {

diff --git a/app/(main)/professors/[id]/@statistics/page.tsx b/app/(main)/professors/[id]/@statistics/page.tsx
@@ -194,7 +194,7 @@ export default async function Page({
             series={[
               {
                 name: 'Rating Distribution',
-                data: reviewDistribution,
+                data: reviewDistribution.reverse(),
               },
             ]}
             categories={[5, 4, 3, 2, 1]}

diff --git a/app/(main)/professors/search/page.tsx b/app/(main)/professors/search/page.tsx
@@ -1,7 +1,8 @@
-import { Card } from '@/components/atoms';
+import { Btn, Card } from '@/components/atoms';
 import { FilterGroup, PaginationBar } from '@/components/molecules';
 import { ProfessorsSearchResponse } from '@/types';
 import fetcher from '@/utils/fetcher';
+import { EllipsisVerticalIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 
 export default async function Page({
@@ -23,11 +24,24 @@ export default async function Page({
       <div className="mx-auto w-full max-w-content-width px-md py-lg">
         <p>Search results for &quot;{searchParams.query}&quot;</p>
       </div>
-      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
+      <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
         {total_results ? (
-          <div className="w-[250px] max-lg:hidden">
-            <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
-              <p className="pb-md">Filters</p>
+          <div className="lg:w-[250px] lg:pr-md">
+            <div
+              id="filters"
+              popover="auto"
+              className="top-0 max-h-[100dvh] min-h-[50dvh] w-full overflow-y-auto bg-page pb-lg pt-lg max-lg:h-[100dvh] max-lg:px-md lg:sticky lg:flex lg:flex-col lg:gap-sm"
+            >
+              <div className="flex">
+                <p className="flex-1 pb-md">Filters</p>
+                <Btn
+                  popoverTarget="filters"
+                  variant="tertiary"
+                  className="rounded-sm p-0 lg:hidden"
+                >
+                  <XMarkIcon width={24} height={24} />
+                </Btn>
+              </div>
               <p className="pb-sm text-small-lg">Limit</p>
               <FilterGroup
                 variant="radio"
@@ -38,7 +52,16 @@ export default async function Page({
           </div>
         ) : null}
         <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
-          <p>{total_results ?? '-'} Professor(s)</p>
+          <div className="flex">
+            <p className="flex-1">{total_results ?? '-'} Professor(s)</p>
+            <Btn
+              popoverTarget="filters"
+              variant="tertiary"
+              className="rounded-sm p-0 lg:hidden"
+            >
+              <EllipsisVerticalIcon width={24} height={24} />
+            </Btn>
+          </div>
 
           {items && total_results > 0 ? (
             <Card>