Skip to content

Commit

Permalink
resolve build errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@JaiNarayanan
JaiNarayanan committed Sep 4, 2024
1 parent f9860cf commit a0bdaa6
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 59 deletions.
29 changes: 18 additions & 11 deletions components/DirectoryLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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;
};

Expand Down Expand Up @@ -58,7 +57,9 @@ const DirectoryLayout = (props: LayoutProps) => {
return (
<div className="w-full p-4 md:p-16 flex gap-8 flex-col">
<div className="max-w-screen-2xl relative w-full">
<h1 className="text-5xl font-figtree font-sans font-semibold">The Directory</h1>
<h1 className="text-5xl font-figtree font-sans font-semibold">
The Directory
</h1>
</div>
<Tab.Group>
<Tab.List className="max-w-md flex space-x-1 rounded-xl bg-blue-900/20 p-1">
Expand All @@ -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"
)
}
>
Expand All @@ -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"
)
}
>
Expand All @@ -93,16 +98,18 @@ const DirectoryLayout = (props: LayoutProps) => {
)}
>
<div className="w-full grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{startupsQuery.data?.map((startup) => (
{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 bg-white p-3", "focus:outline-none")}>
<Tab.Panel
className={twMerge("rounded-xl bg-white p-3", "focus:outline-none")}
>
<div className="w-full max-w-screen-2xl grid grid-cols-[repeat(auto-fill,minmax(270px,1fr))] gap-[36px]">
{projectsQuery.data?.map((project) => (
{projectsQuery.data?.map((project: Project) => (
<React.Fragment key={project.id}>
<ProjectTile project={project} key={project.id} />
</React.Fragment>
Expand All @@ -112,7 +119,7 @@ const DirectoryLayout = (props: LayoutProps) => {
</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>
<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>
);
};
Expand Down
11 changes: 9 additions & 2 deletions components/ProjectLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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"
/>
<button type="button" className="bg-blue-500 text-white px-2 rounded-sm">
<button
type="button"
className="bg-blue-500 text-white px-2 rounded-sm"
>
Search
</button>
</div>
Expand Down
116 changes: 82 additions & 34 deletions components/projects/ProjectTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -20,7 +26,9 @@ export default function ProjectTile({ project }: { project: Project }) {
const [dialogOpen, setDialogOpen] = useState(false);
const { supabase, user } = useSupabase();
// const [logo, setLogo] = useState<File | undefined>();
const [avatars, setAvatars] = useState<any>({});
type Avatars = Record<string, string>;

const [avatars, setAvatars] = useState<Avatars>({});
const [isFavorite, setIsFavorite] = useState(false);

useEffect(() => {
Expand Down Expand Up @@ -60,38 +68,55 @@ 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);
}
}
};

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<string, string> = {};
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 (
<>
<li className="m-0 p-0 list-none rounded-md" onClick={() => setDialogOpen(true)}>
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
<li
onClick={() => setDialogOpen(true)}
className="m-0 p-0 list-none rounded-md"
>
<div className="border border-0.5 relative h-0 pb-[75%] overflow-hidden rounded-md group">
<div className="flex items-center justify-center">
<img
Expand Down Expand Up @@ -123,7 +148,7 @@ export default function ProjectTile({ project }: { project: Project }) {
</div>
<div className="flex gap-2 items-center mt-2">
<div className="inline-flex">
{Object.entries(avatars).map(([key, value]: [any, any]) => {
{Object.entries(avatars).map(([key, value]: [string, string]) => {
console.log(key);
return (
<span className="avatar rounded-full relative border-[2px] border-[#F8F8F8] w-[30px] overflow-hidden">
Expand All @@ -132,7 +157,9 @@ export default function ProjectTile({ project }: { project: Project }) {
);
})}
</div>
<h1 className="text-black font-md font-figtree font-semibold">{project.name}</h1>
<h1 className="text-black font-md font-figtree font-semibold">
{project.name}
</h1>
<button
type="button"
onClick={toggleFavorite}
Expand All @@ -147,7 +174,11 @@ export default function ProjectTile({ project }: { project: Project }) {
</div>
</li>
<Transition appear show={dialogOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => setDialogOpen(false)}>
<Dialog
as="div"
className="relative z-10"
onClose={() => setDialogOpen(false)}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
Expand All @@ -174,10 +205,16 @@ export default function ProjectTile({ project }: { project: Project }) {
<Dialog.Panel className="w-full max-w-xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<div className="relative flex flex-col gap-y-4">
<div className="flex gap-x-8">
<img src={project.logo_url} className="w-48 rounded-lg" alt={`${name} logo`} />
<img
src={project.logo_url}
className="w-48 rounded-lg"
alt={`${name} logo`}
/>
<div className="flex flex-col gap-y-4">
<div className="flex gap-3">
<h1 className="text-4xl font-bold text-gray-900">{name}</h1>
<h1 className="text-4xl font-bold text-gray-900">
{name}
</h1>
<button
type="button"
onClick={toggleFavorite}
Expand Down Expand Up @@ -211,16 +248,27 @@ export default function ProjectTile({ project }: { project: Project }) {
</div> */}
</div>
<div className="flex flex-col">
<span className="text-primary font-medium text-lg mb-2">People</span>
<span className="text-primary font-medium text-lg mb-2">
People
</span>
<div className="flex gap-2">
<div className="flex flex-col gap-2 justify-between">
{project.profiles?.map((profile, i) => (
<div className="flex gap-2 items-center">
<img className="w-8 h-8 rounded-full" src={avatars[profile.id]} />
<h1 className="text-sm font-medium">{profile.name}</h1>
<img
className="w-8 h-8 rounded-full"
src={avatars[profile.id]}
alt={`${profile.name} avatar`}
/>
<h1 className="text-sm font-medium">
{profile.name}
</h1>
</div>
))}
<button className="px-6 py-2 bg-black text-white hover:bg-black/80 rounded-md mt-2">
<button
type="button"
className="px-6 py-2 bg-black text-white hover:bg-black/80 rounded-md mt-2"
>
Connect
</button>
</div>
Expand Down
36 changes: 28 additions & 8 deletions components/startups/StartupProfileTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean>(false);
const [connectionSent, setConnectionSent] = useState<boolean>(false);
Expand Down Expand Up @@ -80,7 +82,9 @@ export default function StartupProfileTile({
<h1 className="mt-1 text-sm">{displayName}</h1>
<p className="text-gray-500 text-xs">{role}</p>
{connectionSent ? (
<p className="text-xs px-2 py-1 mt-2 font-inter text-center">connection sent successfully!</p>
<p className="text-xs px-2 py-1 mt-2 font-inter text-center">
connection sent successfully!
</p>
) : (
<button
type="button"
Expand All @@ -95,7 +99,11 @@ export default function StartupProfileTile({
)}

<Transition appear show={connectDialogOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => setConnectDialogOpen(false)}>
<Dialog
as="div"
className="relative z-10"
onClose={() => setConnectDialogOpen(false)}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
Expand Down Expand Up @@ -123,30 +131,42 @@ export default function StartupProfileTile({
{v1Community ? (
<div className="flex flex-col justify-between items-center">
<p className="text-sm text-gray-400 p-4">
<a href={slackLink} target="_blank" rel="noreferrer">{`Message ${displayName} on Slack`}</a>
<a
href={slackLink}
target="_blank"
rel="noreferrer"
>{`Message ${displayName} on Slack`}</a>
</p>
{v1Member ? (
<>
<input
value={connectionMessage}
onChange={(evt) => setConnectionMessage(evt.target.value)}
onChange={(evt) =>
setConnectionMessage(evt.target.value)
}
className="w-full text-sm border border-gray-400 border-1 rounded h-fit"
type="text"
placeholder={`Send a message by email to ${displayName}...`}
/>
<button className="text-sm text-gray-400 p-4" type="button" onClick={sendConnectionMessage}>
<button
className="text-sm text-gray-400 p-4"
type="button"
onClick={sendConnectionMessage}
>
Send
</button>
</>
) : (
<p className="text-sm text-gray-400">
Become a V1 Member to connect with {displayName} through email!
Become a V1 Member to connect with {displayName}{" "}
through email!
</p>
)}
</div>
) : (
<p className="text-sm text-gray-400">
Finish signing in to connect with {displayName} through Slack!
Finish signing in to connect with {displayName} through
Slack!
</p>
)}
</Dialog.Panel>
Expand Down
Loading

0 comments on commit a0bdaa6

Please sign in to comment.