Merge pull request #156 from SJSUCSClub/155-improve-redesign-professo…

…rs-page [Improve] Redesign Professors Page
SJSUCSClub · Nov 15, 2024 · 415f044 · 415f044
2 parents c269c3e + 0b85279
commit 415f044
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 58 deletions.
diff --git a/app/(main)/professors/(page)/@name/lastname.tsx b/app/(main)/professors/(page)/@name/lastname.tsx
@@ -3,8 +3,6 @@
 import { Btn, Card } from '@/components/atoms';
 import { ProfessorsSearchResponse } from '@/types';
 import fetcher from '@/utils/fetcher';
-import { ChevronRightIcon } from '@heroicons/react/16/solid';
-import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import React from 'react';
 import useSWRInfinite from 'swr/infinite';
@@ -18,68 +16,64 @@ const getKey =
 
 interface LastNameDisplayProps {
   startswith: string;
+  initialResults: ProfessorsSearchResponse;
 }
 export const LastNameDisplay: React.FC<LastNameDisplayProps> = ({
   startswith,
+  initialResults,
 }) => {
-  const [active, setActive] = React.useState(false);
   const { data, error, isLoading, isValidating, size, setSize } =
     useSWRInfinite<ProfessorsSearchResponse>(getKey(startswith), fetcher, {
       revalidateOnFocus: false,
     });
   if (error) {
     throw error;
   }
-  const pages = data ? data[0].pages : 0;
-  const items = data?.flatMap((d) => d.items) ?? [];
-  return (
-    <Card className="flex flex-col p-[20px]">
-      {/** Render title and count **/}
-      <button
-        id={startswith}
-        className="flex flex-row items-center gap-[20px]"
-        onClick={() => setActive(!active)}
-      >
-        <div className="text-h3-mobile lg:text-h3-desktop">{startswith}</div>
-        <div className="text-text">{data?.[0].total_results || 0} results</div>
-        {active ? (
-          <ChevronDownIcon className="h-4 w-4" />
-        ) : (
-          <ChevronRightIcon className="h-4 w-4" />
-        )}
-      </button>
 
-      {/** Render items */}
-      {active ? (
-        <div className="flex flex-col gap-[20px] pt-md">
-          <div className="flex flex-row flex-wrap justify-center gap-[20px] overflow-auto">
-            {items.map((professor) => (
-              <Card className="items-center" key={professor.id}>
-                <Link
-                  href={`/professors/${professor.id}`}
-                  className="flex w-[250px] flex-col items-center py-md animation hover:bg-[rgb(var(--color-secondary)/0.15)] focus:bg-[rgb(var(--color-secondary)/0.15)]"
-                >
-                  <span className="overflow-ellipsis text-small-lg text-neutral">
-                    {professor.email}
-                  </span>
-                  <span className="overflow-ellipsis text-p font-bold">
-                    {professor.name}
-                  </span>
-                </Link>
-              </Card>
-            ))}
-          </div>
-          {size !== pages || isLoading || isValidating ? (
-            <div className="flex justify-center">
-              <Btn
-                className="justify-end"
-                variant="primary"
-                onClick={() => setSize(size + 1)}
-              >
-                Load more
-              </Btn>
-            </div>
-          ) : null}
+  // If no results, don't render
+  if (initialResults.total_results === 0) {
+    return <></>;
+  }
+
+  // otherwise, render
+  const pages = initialResults.pages;
+  const items = data?.flatMap((d) => d.items) ?? initialResults.items;
+  return (
+    <Card className="flex flex-col gap-[20px] p-[20px]">
+      <div className="flex flex-col items-center">
+        <span className="text-h3-mobile lg:text-h3-desktop">{startswith}</span>
+        <span className="text-text">
+          {initialResults.total_results} Professors
+        </span>
+      </div>
+      <div className="flex flex-row flex-wrap justify-center gap-[20px]">
+        {items.map((professor) => (
+          <Card className="items-center" key={professor.id}>
+            <Link
+              href={`/professors/${professor.id}`}
+              className="flex h-full w-[300px] flex-row items-center justify-between px-md py-md animation hover:bg-[rgb(var(--color-secondary)/0.15)] focus:bg-[rgb(var(--color-secondary)/0.15)]"
+            >
+              <div className="flex w-full flex-col text-center">
+                <span className="w-full text-p font-bold">
+                  {professor.name}
+                </span>
+                <span className="w-full text-small-lg text-neutral">
+                  {professor.email}
+                </span>
+              </div>
+            </Link>
+          </Card>
+        ))}
+      </div>
+      {size !== pages || isLoading || isValidating ? (
+        <div className="flex justify-center">
+          <Btn
+            className="justify-end"
+            variant="primary"
+            onClick={() => setSize(size + 1)}
+          >
+            Load more
+          </Btn>
         </div>
       ) : null}
     </Card>

diff --git a/app/(main)/professors/(page)/@name/page.tsx b/app/(main)/professors/(page)/@name/page.tsx
@@ -1,19 +1,35 @@
 import { LastNameDisplay } from '@/app/(main)/professors/(page)/@name/lastname';
+import { ProfessorsSearchResponse } from '@/types';
+import fetcher from '@/utils/fetcher';
 import SWRConfigProvider from '@/wrappers/swr-config';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Professors',
 };
 
-export default function Page() {
-  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+export default async function Page() {
+  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
 
-  const components = [];
+  const components: JSX.Element[] = [];
+  const initialResults = await Promise.all(
+    letters.map(async (letter) => {
+      return (await fetcher(
+        process.env.BASE_API_URL +
+          `/core/professors/search?startswith=${letter}&limit=3`,
+      )) as ProfessorsSearchResponse;
+    }),
+  );
 
-  for (const letter of letters) {
-    components.push(<LastNameDisplay startswith={letter} key={letter} />);
-  }
+  letters.forEach((letter, index) => {
+    components.push(
+      <LastNameDisplay
+        startswith={letter}
+        key={letter}
+        initialResults={initialResults[index]}
+      />,
+    );
+  });
   return (
     <>
       <h1 className="pb-md pt-xl max-lg:text-h2-mobile lg:text-h2-desktop">