sandboxnu · banushi-a · Apr 11, 2024 · Apr 1, 2024 · Apr 11, 2024 · Apr 11, 2024
diff --git a/next.config.js b/next.config.js
@@ -5,6 +5,17 @@
 await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
-const config = {};
+const config = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "logo.clearbit.com",
+        port: "",
+        pathname: "/**",
+      },
+    ],
+  },
+};
 
 export default config;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -126,14 +126,14 @@ model Review {
     otherBenefits       String?
     createdAt           DateTime        @default(now())
 
-    role   Role?   @relation(fields: [roleId], references: [id], onDelete: Cascade)
-    roleId String?
+    role   Role   @relation(fields: [roleId], references: [id], onDelete: Cascade)
+    roleId String
 
     profile   Profile? @relation(fields: [profileId], references: [id])
     profileId String?
 
-    company   Company? @relation(fields: [companyId], references: [id], onDelete: Cascade)
-    companyId String?
+    company   Company @relation(fields: [companyId], references: [id], onDelete: Cascade)
+    companyId String
 }
 
 enum Industry {

diff --git a/src/app/companies/page.tsx b/src/app/companies/page.tsx
@@ -1,12 +1,31 @@
-import HeaderLayout from "~/components/header-layout";
+import { RoleReviewCard } from "~/components/role-review-card";
 import SearchFilter from "~/components/search-filter";
+import { api } from "~/trpc/server";
+import { unstable_noStore as noStore } from "next/cache";
 
 export default async function Companies() {
+  /**
+   * FIXME: This is a temporary fix, figure out how to get build command working without noStore();
+   * @returns A promise containing the roles from the database
+   */
+  async function getRoles() {
+    noStore();
+    const roles = await api.role.list.query();
+    return roles;
+  }
+
+  const roles = await getRoles();
+
   return (
-    <div className="flex h-full flex-col">
-      <HeaderLayout>
-        <SearchFilter />
-      </HeaderLayout>
-    </div>
+    <>
+      <SearchFilter />
+      <div className="grid w-3/4 grid-cols-3 gap-4">
+        {roles.map((role) => {
+          return (
+            <RoleReviewCard key={role.id} roleObj={role} className="mb-4" />
+          );
+        })}
+      </div>
+    </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import "~/styles/globals.css";
 import { TRPCReactProvider } from "~/trpc/react";
 import { cn } from "~/lib/utils";
 import { bentonSansFont } from "~/styles/font";
+import HeaderLayout from "~/components/header-layout";
 
 export const metadata = {
   title: "Cooper",
@@ -21,7 +22,9 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className={cn("min-h-screen bg-white font-sans antialiased")}>
-        <TRPCReactProvider>{children}</TRPCReactProvider>
+        <TRPCReactProvider>
+          <HeaderLayout>{children}</HeaderLayout>
+        </TRPCReactProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,14 +4,9 @@ import SearchFilter from "~/components/search-filter";
 export default async function Home() {
   return (
     <div className="flex h-[85vh] flex-col">
-      <HeaderLayout>
-        <div className="flex h-full flex-col items-center justify-center">
-          <p className="mb-8 text-2xl font-semibold">
-            Search your dream co-op role!
-          </p>
-          <SearchFilter />
-        </div>
-      </HeaderLayout>
+      <div className="flex h-full flex-col items-center justify-center">
+        <SearchFilter />
+      </div>
     </div>
   );
 }
diff --git a/src/app/roles/page.tsx b/src/app/roles/page.tsx
@@ -1,30 +1,45 @@
-import HeaderLayout from "~/components/header-layout";
-import { RoleReviewCard } from "~/components/role-review-card";
+"use client";
+
+import { Review } from "@prisma/client";
+import { useState } from "react";
+import { ReviewCard } from "~/components/review-card";
+import { ReviewCardPreview } from "~/components/review-card-preview";
 import SearchFilter from "~/components/search-filter";
-import { api } from "~/trpc/server";
-import { unstable_noStore as noStore } from "next/cache";
+import { cn } from "~/lib/utils";
+import { api } from "~/trpc/react";
 
-export default async function Roles() {
-  /**
-   * FIXME: This is a temporary fix, figure out how to get build command working without noStore();
-   * @returns A promise containing the roles from the database
-   */
-  async function getRoles() {
-    noStore();
-    const roles = await api.role.list.query();
-    return roles;
-  }
+export default function Roles() {
+  const reviews = api.review.list.useQuery();
 
-  const roles = await getRoles();
+  const [selectedReview, setSelectedReview] = useState<Review | undefined>(
+    reviews.data ? reviews.data[0] : undefined,
+  );
 
   return (
-    <HeaderLayout>
+    <>
       <SearchFilter />
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {roles.map((role) => {
-          return <RoleReviewCard key={role.id} roleObj={role} />;
-        })}
-      </div>
-    </HeaderLayout>
+      {/* TODO: Loading animations */}
+      {reviews.data && (
+        <div className="mb-8 grid w-4/5 grid-cols-5 gap-4 lg:w-3/4">
+          <div className="col-span-2 gap-3">
+            {reviews.data.map((review) => {
+              return (
+                <div key={review.id} onClick={() => setSelectedReview(review)}>
+                  <ReviewCardPreview
+                    reviewObj={review}
+                    className={cn("mb-4 hover:border-2")}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          <div className="col-span-3">
+            {reviews.data.length > 0 && reviews.data[0] && (
+              <ReviewCard reviewObj={selectedReview || reviews.data[0]} />
+            )}
+          </div>
+        </div>
+      )}
+    </>
   );
 }
diff --git a/src/components/header-layout.tsx b/src/components/header-layout.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ReactNode } from "react";
 import Header from "~/components/header";
 
@@ -10,7 +11,7 @@ export default function HeaderLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex min-h-screen flex-col">
       <Header />
-      <article className="mt-16 flex flex-col items-center justify-center">
+      <article className="mt-16 flex w-[100vw] flex-col items-center justify-center gap-16">
         {children}
       </article>
     </div>

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,26 +1,30 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
 
 import LoginButton from "~/components/login-button";
-import LogoutButton from "./logout-button";
+import LogoutButton from "~/components/logout-button";
 import { cn } from "~/lib/utils";
-import { getServerSession } from "next-auth";
-import { Button } from "./ui/button";
 import { altivoFont } from "~/styles/font";
+import { useSession } from "next-auth/react";
+import { usePathname } from "next/navigation";
+import { Button } from "~/components/ui/button";
 
 /**
  * This is the header component. (Probably) should use header-layout instead
  * @returns The header component for the website
  */
-export default async function Header() {
-  const session = await getServerSession();
+export default function Header() {
+  const session = useSession();
+  const pathname = usePathname();
 
   const outerWidth = "w-40";
 
   return (
     <header className="flex h-20 w-full grid-cols-3 items-center justify-between border-b border-b-[#9A9A9A] bg-white pr-2 drop-shadow-sm">
       {/* Logo + cooper */}
-      <div className={cn("flex flex-grow items-end", outerWidth)}>
+      <Link href="/" className={cn("flex flex-grow items-end", outerWidth)}>
         <div className="mx-4 flex min-h-20 items-end">
           <Image
             src="/svg/hidingLogo.svg"
@@ -29,24 +33,39 @@ export default async function Header() {
             alt="Logo Picture"
           />
         </div>
-        <Link href="/">
-          <h1
+        <h1
+          className={cn(
+            "mb-2 hidden text-5xl font-semibold text-cooper-blue-600 lg:block",
+            altivoFont.className,
+          )}
+        >
+          cooper
+        </h1>
+      </Link>
+      {/* Centered Links */}
+      <div className="lg: mb-8 flex min-h-20 flex-shrink grid-cols-2 items-end justify-start gap-4 lg:gap-12">
+        <Link href="/roles">
+          <h2
             className={cn(
-              "mb-2 text-5xl font-semibold text-cooper-blue-600",
-              altivoFont.className,
+              "font-semibold",
+              pathname.includes("roles") &&
+                "underline decoration-cooper-pink-500 decoration-[3px] underline-offset-[6px]",
             )}
           >
-            cooper
-          </h1>
-        </Link>
-      </div>
-      {/* Centered Links */}
-      <div className="mb-8 flex min-h-20 flex-shrink grid-cols-2 items-end justify-start gap-4">
-        <Link href="/roles">
-          <h2 className={"font-semibold"}>Jobs</h2>
+            {" "}
+            Jobs{" "}
+          </h2>
         </Link>
         <Link href="/companies">
-          <h2 className="font-semibold">Companies</h2>
+          <h2
+            className={cn(
+              "font-semibold",
+              pathname.includes("companies") &&
+                "underline decoration-cooper-green-500 decoration-[3px] underline-offset-[6px]",
+            )}
+          >
+            Companies
+          </h2>
         </Link>
       </div>
       {/* New Review + Profile */}
@@ -64,6 +83,3 @@ export default async function Header() {
     </header>
   );
 }
-function useServerSession() {
-  throw new Error("Function not implemented.");
-}
diff --git a/src/components/review-card-preview.tsx b/src/components/review-card-preview.tsx
@@ -0,0 +1,87 @@
+"use client";
+/* eslint-disable @next/next/no-img-element */
+import { cn } from "~/lib/utils";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { ReviewCardStars } from "./review-card-stars";
+import Image from "next/image";
+
+import { Review } from "@prisma/client";
+import { truncateText } from "~/utils/stringHelpers";
+import { api } from "~/trpc/react";
+
+// todo: add this attribution in a footer somewhere
+//  <a href="https://clearbit.com">Logos provided by Clearbit</a>
+
+type ReviewCardPreviewProps = {
+  className?: string;
+  reviewObj: Review;
+};
+
+export function ReviewCardPreview({
+  className,
+  reviewObj,
+}: ReviewCardPreviewProps) {
+  // ===== COMPANY DATA ===== //
+  const company = api.company.getById.useQuery({
+    id: reviewObj.companyId,
+  });
+
+  // ===== ROLE DATA ===== //
+  const role = api.role.getById.useQuery({ id: reviewObj.roleId });
+
+  // Truncate Review Text
+  const reviewText = truncateText(reviewObj.textReview, 80);
+
+  return (
+    <Card
+      className={cn(
+        "flex h-64 w-[100%] flex-col justify-between overflow-hidden rounded-3xl",
+        className,
+      )}
+    >
+      <div>
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-start space-x-4">
+            {company.data ? (
+              <Image
+                src={`https://logo.clearbit.com/${company.data.name.replace(/\s/g, "")}.com`}
+                width={50}
+                height={50}
+                alt={`Logo of ${company.data?.name}`}
+                className="rounded-xl border"
+              />
+            ) : (
+              <div className="h-[50px] w-[50px] rounded-xl border bg-cooper-blue-200"></div>
+            )}
+            <div>
+              <CardTitle className="text-md md:text-xl">
+                {role.data && role.data.title}
+              </CardTitle>
+              <p className="text-xs font-semibold md:text-sm">
+                {company.data && company.data.name}
+              </p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="grid gap-2">
+          <div>
+            <h2 className="text-md font-semibold md:text-xl">
+              {reviewObj.reviewHeadline}
+            </h2>
+            <ReviewCardStars numStars={reviewObj.overallRating} />
+          </div>
+          <p className="text-xs lg:text-sm">{reviewText}</p>
+        </CardContent>
+      </div>
+      <CardFooter className="items-end justify-end text-xs italic">
+        see more...
+      </CardFooter>
+    </Card>
+  );
+}