From a0bdaa6e12a23d814489e421dfbccbd64defdf2c Mon Sep 17 00:00:00 2001 From: jainarayanan Date: Wed, 4 Sep 2024 11:52:48 -0700 Subject: [PATCH] resolve build errors --- components/DirectoryLayout.tsx | 29 ++++-- components/ProjectLayout.tsx | 11 +- components/projects/ProjectTile.tsx | 116 +++++++++++++++------ components/startups/StartupProfileTile.tsx | 36 +++++-- pages/_app.tsx | 3 +- pages/_document.tsx | 14 ++- 6 files changed, 150 insertions(+), 59 deletions(-) diff --git a/components/DirectoryLayout.tsx b/components/DirectoryLayout.tsx index d7e5075..bab501c 100644 --- a/components/DirectoryLayout.tsx +++ b/components/DirectoryLayout.tsx @@ -1,10 +1,10 @@ import React, { useState, useEffect, Fragment } from "react"; -import supabase from "../utils/supabaseClient"; -import StartupTile from "./startups/StartupTile"; -import { Startup } from "../utils/types"; import { Tab } from "@headlessui/react"; import { twMerge } from "tailwind-merge"; import { useQuery } from "react-query"; +import supabase from "../utils/supabaseClient"; +import StartupTile from "./startups/StartupTile"; +import { Project, Startup } from "../utils/types"; import ProjectTile from "./projects/ProjectTile"; type LayoutProps = { @@ -25,7 +25,6 @@ const DirectoryLayout = (props: LayoutProps) => { `*, 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 - console.log(data); return data; }; @@ -58,7 +57,9 @@ const DirectoryLayout = (props: LayoutProps) => { return (
-

The Directory

+

+ The Directory +

@@ -67,7 +68,9 @@ const DirectoryLayout = (props: LayoutProps) => { 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" + selected + ? "bg-black text-white shadow" + : "text-black hover:bg-white/[0.12] hover:text-white" ) } > @@ -78,7 +81,9 @@ const DirectoryLayout = (props: LayoutProps) => { 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" + selected + ? "bg-black text-white shadow" + : "text-black hover:bg-white/[0.12] hover:text-white" ) } > @@ -93,16 +98,18 @@ const DirectoryLayout = (props: LayoutProps) => { )} >
- {startupsQuery.data?.map((startup) => ( + {startupsQuery.data?.map((startup: Startup) => ( ))}
- +
- {projectsQuery.data?.map((project) => ( + {projectsQuery.data?.map((project: Project) => ( @@ -112,7 +119,7 @@ const DirectoryLayout = (props: LayoutProps) => { -
+
); }; diff --git a/components/ProjectLayout.tsx b/components/ProjectLayout.tsx index 9702e0e..d6ecd5c 100644 --- a/components/ProjectLayout.tsx +++ b/components/ProjectLayout.tsx @@ -22,7 +22,11 @@ const ProjectLayout = (props: LayoutProps) => { useEffect(() => { const fetchProjectData = async () => { setDataFetchErrors([]); - const { data: projects2, error: dbError, status } = await supabase.from("projects").select("*"); + const { + data: projects2, + error: dbError, + status, + } = await supabase.from("projects").select("*"); setProjects(projects2); }; fetchProjectData(); @@ -54,7 +58,10 @@ const ProjectLayout = (props: LayoutProps) => { placeholder="Search for projects" className="px-2 rounded-md border-[1px] border-stone-300 h-10 w-full" /> -
diff --git a/components/projects/ProjectTile.tsx b/components/projects/ProjectTile.tsx index 92f9f39..b5c5d4e 100644 --- a/components/projects/ProjectTile.tsx +++ b/components/projects/ProjectTile.tsx @@ -1,13 +1,19 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import React, { Fragment, useCallback, useEffect, useState } from "react"; -import { DesktopComputerIcon, CodeIcon, InformationCircleIcon, ExternalLinkIcon } from "@heroicons/react/outline"; +import { + DesktopComputerIcon, + CodeIcon, + InformationCircleIcon, + ExternalLinkIcon, + HeartIcon as HeartOutlineIcon, +} from "@heroicons/react/outline"; import { Dialog, Transition } from "@headlessui/react"; +import { HeartIcon as HeartFilledIcon } from "@heroicons/react/solid"; +import { useQuery } from "react-query"; import ProjectProfileTile from "./ProjectProfileTile"; import { Project } from "../../utils/types"; import useSupabase from "../../hooks/useSupabase"; -import { HeartIcon as HeartOutlineIcon } from "@heroicons/react/outline"; -import { HeartIcon as HeartFilledIcon } from "@heroicons/react/solid"; import StartupProfileTile from "../startups/StartupProfileTile"; interface Favorite { @@ -20,7 +26,9 @@ export default function ProjectTile({ project }: { project: Project }) { const [dialogOpen, setDialogOpen] = useState(false); const { supabase, user } = useSupabase(); // const [logo, setLogo] = useState(); - const [avatars, setAvatars] = useState({}); + type Avatars = Record; + + const [avatars, setAvatars] = useState({}); const [isFavorite, setIsFavorite] = useState(false); useEffect(() => { @@ -60,7 +68,9 @@ export default function ProjectTile({ project }: { project: Project }) { setIsFavorite(false); } } else { - const { error } = await supabase.from("project_favorites").insert([{ user_id: user.id, project_id: project.id }]); + const { error } = await supabase + .from("project_favorites") + .insert([{ user_id: user.id, project_id: project.id }]); if (!error) { setIsFavorite(true); @@ -68,30 +78,45 @@ export default function ProjectTile({ project }: { project: Project }) { } }; - useEffect(() => { - const downloadImages = async () => { - try { - const urls: any = {}; - for (const project_member of project.profiles) { - const { data, error } = await supabase.storage.from("avatars").download(project_member.id); - - if (error) { - console.error(`Error downloading image`); - continue; - } - const url = URL.createObjectURL(data as Blob); - urls[project_member.id] = url; + const downloadImages = async () => { + try { + const urls: Record = {}; + for (const projectMember of project.profiles) { + // eslint-disable-next-line no-await-in-loop + const { data, error } = await supabase.storage + .from("avatars") + .download(projectMember.id); + + if (error) { + console.error("Error downloading image"); + return; } - setAvatars(urls); // Set the downloaded URLs in state - } catch (err) { - console.error("Error in downloadImages:", err); + const url = URL.createObjectURL(data as Blob); + urls[projectMember.id] = url; } - }; - downloadImages(); - }, [project.profiles]); + setAvatars(urls); // Set the downloaded URLs in state + } catch (err) { + console.error("Error in downloadImages:", err); + } + }; + // useEffect(() => { + // downloadImages(); + // }, [downloadImages]); + // const imagesQuery + const imagesQuery = useQuery({ + queryKey: ["projects", `${project.id}`, "images"], + queryFn: downloadImages, + staleTime: Infinity, + cacheTime: Infinity, + }); + return ( <> -
  • setDialogOpen(true)}> + {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */} +
  • setDialogOpen(true)} + className="m-0 p-0 list-none rounded-md" + >
    - {Object.entries(avatars).map(([key, value]: [any, any]) => { + {Object.entries(avatars).map(([key, value]: [string, string]) => { console.log(key); return ( @@ -132,7 +157,9 @@ export default function ProjectTile({ project }: { project: Project }) { ); })}
    -

    {project.name}

    +

    + {project.name} +

    • - setDialogOpen(false)}> + setDialogOpen(false)} + >
    - {`${name} + {`${name}
    -

    {name}

    +

    + {name} +

    - People + + People +
    {project.profiles?.map((profile, i) => (
    - -

    {profile.name}

    + {`${profile.name} +

    + {profile.name} +

    ))} -
    diff --git a/components/startups/StartupProfileTile.tsx b/components/startups/StartupProfileTile.tsx index 59b97a2..b384805 100644 --- a/components/startups/StartupProfileTile.tsx +++ b/components/startups/StartupProfileTile.tsx @@ -25,7 +25,9 @@ export default function StartupProfileTile({ } = startupProfile; const displayName = profileName ?? profileUsername; - const slackLink = (profileSlackLink as string) ?? "https://app.slack.com/client/T04JWPLEL5B/C04KPD6KS80"; + const slackLink = + (profileSlackLink as string) ?? + "https://app.slack.com/client/T04JWPLEL5B/C04KPD6KS80"; const { role, headshot_src: headshotSrc } = startupProfileMetadata; const [connectDialogOpen, setConnectDialogOpen] = useState(false); const [connectionSent, setConnectionSent] = useState(false); @@ -80,7 +82,9 @@ export default function StartupProfileTile({

    {displayName}

    {role}

    {connectionSent ? ( -

    connection sent successfully!

    +

    + connection sent successfully! +

    ) : ( ) : (

    - Become a V1 Member to connect with {displayName} through email! + Become a V1 Member to connect with {displayName}{" "} + through email!

    )}
    ) : (

    - Finish signing in to connect with {displayName} through Slack! + Finish signing in to connect with {displayName} through + Slack!

    )} diff --git a/pages/_app.tsx b/pages/_app.tsx index 5e2c583..7ca4016 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,10 +4,9 @@ import { useEffect } from "react"; import ReactGA from "react-ga4"; import type { AppProps } from "next/app"; import PropTypes from "prop-types"; +import { QueryClient, QueryClientProvider } from "react-query"; import { SupabaseProvider } from "../contexts/SupabaseContext"; - import "../styles/index.css"; -import { QueryClient, QueryClientProvider } from "react-query"; export const HOSTNAME = process.env.NODE_ENV === "development" diff --git a/pages/_document.tsx b/pages/_document.tsx index 0e6d79e..c476fb2 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,4 +1,10 @@ -import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document"; +import Document, { + DocumentContext, + Head, + Html, + Main, + NextScript, +} from "next/document"; class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { @@ -11,7 +17,11 @@ class MyDocument extends Document { - +