#95 empty state search

apps/web/src/app/(pages)/(dashboard)/companies/page.tsx

@@ -1,5 +1,6 @@
 import { unstable_noStore as noStore } from "next/cache";
 
+import NoResults from "~/app/_components/no-results";
 import { RoleReviewCard } from "~/app/_components/reviews/role-review-card";
 import SearchFilter from "~/app/_components/search/search-filter";
 import { api } from "~/trpc/server";
@@ -20,13 +21,17 @@ export default async function Companies() {
   return (
     <>
       <SearchFilter />
-      <div className="mb-8 grid h-[70dvh] w-3/4 grid-cols-1 gap-4 overflow-y-scroll md:grid-cols-2 xl:grid-cols-3">
-        {roles.map((role) => {
-          return (
-            <RoleReviewCard key={role.id} roleObj={role} className="mb-4" />
-          );
-        })}
-      </div>
+      {roles.length > 0 ? (
+        <div className="mb-8 grid h-[70dvh] w-3/4 grid-cols-1 gap-4 overflow-y-scroll md:grid-cols-2 xl:grid-cols-3">
+          {roles.map((role) => {
+            return (
+              <RoleReviewCard key={role.id} roleObj={role} className="mb-4" />
+            );
+          })}
+        </div>
+      ) : (
+        <NoResults />
+      )}
     </>
   );
 }

apps/web/src/app/(pages)/(dashboard)/roles/page.tsx

@@ -12,6 +12,8 @@ import { WorkEnvironment, WorkTerm } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
 import { useToast } from "@cooper/ui/hooks/use-toast";
 
+import LoadingResults from "~/app/_components/loading-results";
+import NoResults from "~/app/_components/no-results";
 import { ReviewCard } from "~/app/_components/reviews/review-card";
 import { ReviewCardPreview } from "~/app/_components/reviews/review-card-preview";
 import SearchFilter from "~/app/_components/search/search-filter";
@@ -79,7 +81,7 @@ export default function Roles({
   return (
     <>
       <SearchFilter search={searchParams?.search} {...validationResult.data} />
-      {reviews.isSuccess && (
+      {reviews.isSuccess && reviews.data.length > 0 && (
         <div className="mb-8 grid h-[70dvh] w-4/5 grid-cols-5 gap-4 lg:w-3/4">
           <div className="col-span-2 gap-3 overflow-scroll pr-4">
             {reviews.data.map((review, i) => {
@@ -106,6 +108,8 @@ export default function Roles({
           </div>
         </div>
       )}
+      {reviews.isSuccess && reviews.data.length === 0 && <NoResults />}
+      {reviews.isPending && <LoadingResults />}
     </>
   );
 }

apps/web/src/app/_components/cooper-logo.tsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+interface CooperLogoProps {
+  width?: number;
+}
+
+export default function CooperLogo({ width }: CooperLogoProps) {
+  return (
+    <Image
+      src="/svg/hidingLogo.svg"
+      width={width ?? 137}
+      height={width ? width / 2.28 : 60} // 2.28 is the approximate ratio in the hidingLogo.svg file
+      alt="Logo Picture"
+    />
+  );
+}

apps/web/src/app/_components/header.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -9,6 +8,7 @@ import { cn } from "@cooper/ui";
 
 import { NewReviewDialog } from "~/app/_components/reviews/new-review-dialogue";
 import { altivoFont } from "~/app/styles/font";
+import CooperLogo from "./cooper-logo";
 
 interface HeaderProps {
   session: Session | null;
@@ -29,12 +29,7 @@ export default function Header({ session, auth }: HeaderProps) {
       {/* Logo + Cooper */}
       <Link href="/" className={cn("flex flex-grow items-end", outerWidth)}>
         <div className="mx-4 flex h-20 items-end">
-          <Image
-            src="/svg/hidingLogo.svg"
-            alt="Logo Picture"
-            width={137}
-            height={60}
-          />
+          <CooperLogo />
         </div>
         <h1
           className={cn(

apps/web/src/app/_components/loading-results.tsx

@@ -0,0 +1,12 @@
+import CooperLogo from "./cooper-logo";
+
+export default function LoadingResults() {
+  return (
+    <section className="flex h-[50dvh] w-full flex-col items-center justify-center">
+      <CooperLogo width={200} />
+      <div className="rounded-lg border-2 border-cooper-blue-600 px-16 pb-4 pt-6 text-xl font-bold text-cooper-blue-700">
+        <h2 className="">Loading ...</h2>
+      </div>
+    </section>
+  );
+}

apps/web/src/app/_components/no-results.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+
+import { Button } from "@cooper/ui/button";
+
+import CooperLogo from "./cooper-logo";
+
+export default function NoResults() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  function clearFilters() {
+    router.push(pathname);
+  }
+
+  return (
+    <section className="flex h-[50dvh] w-full flex-col items-center justify-center">
+      <CooperLogo width={200} />
+      <div className="rounded-lg border-2 border-cooper-blue-600 px-16 pb-4 pt-6 text-xl font-bold">
+        <h2 className="text-cooper-blue-700">No Results Found</h2>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={clearFilters}
+          className="text-cooper-blue-600"
+        >
+          Clear Filters
+        </Button>
+      </div>
+    </section>
+  );
+}