Srm dashboard (#101)

* add Favorites feature to StartupTile * add type for Favorites feature * list projects associated with startup * project tiles * project dialog * change tab styling * resolve build errors * remove like for not logged in * image fit * fix lint issues * remove images when not logged in * update modal styling consistency * fix linting errors * add more data * fix lint errors * lint fixes * headshot image updates * fix linting issues * lint * cleanup --------- Co-authored-by: Connor Park <[email protected]>
V1Michigan · Sep 6, 2024 · 2f8443f · 2f8443f
1 parent 7963318
commit 2f8443f
Show file tree

Hide file tree

Showing 14 changed files with 5,675 additions and 5,099 deletions.
diff --git a/components/DirectoryLayout.tsx b/components/DirectoryLayout.tsx
@@ -1,7 +1,11 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect, Fragment, useMemo } from "react";
+import { Tab, Combobox } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+import { useQuery } from "react-query";
 import supabase from "../utils/supabaseClient";
 import StartupTile from "./startups/StartupTile";
-import { Startup } from "../utils/types";
+import { Project, Startup } from "../utils/types";
+import ProjectTile from "./projects/ProjectTile";
 
 type LayoutProps = {
   title: string;
@@ -11,47 +15,148 @@ type LayoutProps = {
 
 const DirectoryLayout = (props: LayoutProps) => {
   const { title, description: directoryDescription, link: _ } = props;
+  const [projectSearchText, setProjectSearchText] = useState("");
+  // const [selectedProjectCategory, setSelectedProjectCategory] = useState("");
+  const [startupSearchText, setStartupSearchText] = useState("");
 
-  const [startups, setStartups] = useState<Startup[] | null>(null);
-
-  useEffect(() => {
-    const fetchStartups = async () => {
-      const { data } = await supabase
-        .from("startups")
-        .select(
-          // This is necessary due to Supabase's API formatting requirements.
-          // eslint-disable-next-line quotes
-          `*, profiles!startups_members (username, name, email, slack_deeplink), startups_members (role, headshot_src)`
-        )
-        .order("user_id", { foreignTable: "startups_members" }); // To make sure roles are applied in the right order
-      setStartups(data);
-    };
-    fetchStartups();
-  }, []);
+  const fetchStartups = async () => {
+    const { data } = await supabase
+      .from("startups")
+      .select(
+        // This is necessary due to Supabase's API formatting requirements.
+        // eslint-disable-next-line quotes
+        `*, profiles!startups_members (id, username, name, email, slack_deeplink), startups_members (role, headshot_src)`
+      )
+      .order("user_id", { foreignTable: "startups_members" }); // To make sure roles are applied in the right order
+    return data;
+  };
+
+  const startupsQuery = useQuery({
+    queryKey: ["startups"],
+    queryFn: fetchStartups,
+    staleTime: Infinity,
+    cacheTime: Infinity,
+  });
+
+  const fetchProjects = async () => {
+    const { data } = await supabase.from("projects").select(
+      // This is necessary due to Supabase's API formatting requirements.
+      // eslint-disable-next-line quotes
+      `*, profiles!projects_members (id, username, name, email, slack_deeplink), projects_members (member_id)`
+    );
+    // .order("user_id", { foreignTable: "projects_members" }); // To make sure roles are applied in the right order
+    return data;
+  };
+
+  const filteredStartups = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    if (!startupsQuery?.data) return [];
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return startupsQuery.data?.filter((project: Project) => {
+      const matchesName = project.name
+        .toLowerCase()
+        .includes(startupSearchText.toLowerCase());
+
+      // const matchesCategory = selectedProjectCategory === "" || project.category === selectedProjectCategory;
+
+      return matchesName;
+    });
+  }, [startupsQuery.data, startupSearchText]);
 
   return (
-    <div className="w-full p-4 md:p-8 flex flex-col items-center bg-gray-50">
+    <div className="w-full p-4 md:p-16 flex gap-4 flex-col bg-gray-50">
       <div className="max-w-screen-2xl relative w-full">
-        <div className=" flex flex-col items-center max-w-screen-2xl w-full static">
-          <div className="w-full rounded-2xl p-16 bg-[url('/landing.jpg')]">
-            <h1 className="font-bold text-white text-3xl mb-6">{title}</h1>
-            <h3 className="font-regular text-white text-2xl mb-9">
-              {directoryDescription}
-            </h3>
-            {/* <a href={link} target="_blank" rel="noreferrer">
-              <p className="underline text-white hover:text-slate-500">
-                {" "}
-                Register a Startup{" "}
-              </p>
-            </a> */}
-          </div>
-        </div>
+        <h1 className="text-5xl font-figtree font-sans font-semibold mb-4">
+          The Directory
+        </h1>
+      </div>
+      <div className="flex flex-col">
+        <input
+          name="startupName"
+          type="text"
+          placeholder="Search by name"
+          value={startupSearchText}
+          onChange={(e) => setStartupSearchText(e.target.value)}
+          className="flex h-10 w-64 rounded-md border border-slate-200 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground"
+        />
       </div>
-      <div className="w-full max-w-screen-2xl mt-8 grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-4">
-        {startups?.map((startup) => (
-          <StartupTile startup={startup} key={startup.id} />
+      <div className="bg-gray-50 w-full grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+        {filteredStartups?.map((startup: Startup) => (
+          <React.Fragment key={startup.id}>
+            <StartupTile startup={startup} key={startup.id} />
+          </React.Fragment>
         ))}
       </div>
+      {/* <Tab.Group>
+        <Tab.List className="max-w-md flex space-x-1 rounded-xl bg-blue-900/20 p-1">
+          <Tab
+            className={({ selected }) =>
+              twMerge(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5",
+                "ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
+                selected
+                  ? "bg-black text-white shadow"
+                  : "text-black hover:bg-white/[0.12] hover:text-white"
+              )
+            }
+          >
+            Startups
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              twMerge(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5",
+                "ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
+                selected
+                  ? "bg-black text-white shadow"
+                  : "text-black hover:bg-white/[0.12] hover:text-white"
+              )
+            }
+          >
+            Projects
+          </Tab>
+        </Tab.List>
+        <Tab.Panels className="">
+          <Tab.Panel
+            className={twMerge(
+              "rounded-xl bg-white",
+              "ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none"
+            )}
+          >
+            <div className="bg-gray-50 w-full grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+              {startupsQuery.data?.map((startup: Startup) => (
+                <React.Fragment key={startup.id}>
+                  <StartupTile startup={startup} key={startup.id} />
+                </React.Fragment>
+              ))}
+            </div>
+          </Tab.Panel>
+          <Tab.Panel
+            className={twMerge("rounded-xl p-3", "focus:outline-none")}
+          >
+            <div className="flex flex-col mb-4">
+              <label htmlFor="name">Name</label>
+              <input
+                name="name"
+                type="text"
+                placeholder="Search by name"
+                value={projectSearchText}
+                onChange={(e) => setProjectSearchText(e.target.value)}
+                className="flex h-10 w-64 rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground"
+              />
+            </div>
+            <div className="bg-gray-50 w-full max-w-screen-2xl grid grid-cols-[repeat(auto-fill,minmax(270px,1fr))] gap-[36px]">
+              {filteredProjects?.map((project: Project) => (
+                <React.Fragment key={project.id}>
+                  <ProjectTile project={project} key={project.id} />
+                </React.Fragment>
+              ))}
+            </div>
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group> */}
+
+      <div className="w-full max-w-screen-2xl mt-8 gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-4" />
     </div>
   );
 };

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -32,11 +32,11 @@ const NAVIGATION = [
     href: "/events",
     right: false,
   },
-  // {
-  //   name: "Startups",
-  //   href: "/startups",
-  //   right: false,
-  // },
+  {
+    name: "Projects",
+    href: "/projects",
+    right: false,
+  },
   {
     name: "Dashboard",
     href: "/dashboard",
@@ -157,11 +157,7 @@ export default function NavbarBuilder() {
                         }
                           px-3 py-2 rounded-md text-sm font-medium ${
                             // eslint-disable-next-line no-nested-ternary, prettier/prettier
-                            inSafari
-                              ? !user
-                                ? "relative top-nav-nouser"
-                                : "relative top-nav-user"
-                              : ""
+                            inSafari ? (!user ? "relative top-nav-nouser" : "relative top-nav-user") : ""
                           }
                           ${item?.login && !user ? "hidden" : ""} 
                           ${item?.noauth && user ? "hidden" : ""}