Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: display the projects created by the user #541

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { ImageUpload } from "~/components/ImageUpload";
import { FieldArray, Form, FormControl, FormSection, Select, Textarea } from "~/components/ui/Form";
import { Input } from "~/components/ui/Input";
import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
import { MY_APPS_KEY } from "~/utils/types";

import { useCreateApplication } from "../hooks/useCreateApplication";
import { ApplicationSchema, contributionTypes, fundingSourceTypes, type Application } from "../types";
Expand All @@ -22,7 +23,7 @@ interface IApplicationFormProps {
}

export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element => {
const clearDraft = useLocalStorage("application-draft")[2];
const [myApps, setMyApps] = useLocalStorage<string[]>(`${MY_APPS_KEY}-${pollId}`);

const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();

Expand Down Expand Up @@ -56,7 +57,13 @@ export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element

const create = useCreateApplication({
onSuccess: (id: bigint) => {
clearDraft();
if (myApps) {
myApps.push(id.toString());
setMyApps(myApps);
} else {
setMyApps([id.toString()]);
}

router.push(`/rounds/${pollId}/applications/confirmation?id=${id.toString()}`);
},
onError: (err: { message: string }) =>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import clsx from "clsx";
import { useMemo, type ReactNode } from "react";
import { useFormContext } from "react-hook-form";
import { useAccount } from "wagmi";

import { Heading } from "~/components/ui/Heading";
import { Tag } from "~/components/ui/Tag";
Expand Down Expand Up @@ -41,6 +42,8 @@ export const ReviewApplicationDetails = (): JSX.Element => {

const application = useMemo(() => form.getValues(), [form]);

const { address } = useAccount();

return (
<div className="flex flex-col gap-8">
<div>
Expand All @@ -54,6 +57,8 @@ export const ReviewApplicationDetails = (): JSX.Element => {

<ValueField required body={application.name} title="Project name" />

<ValueField required body={address} title="Created By" />

<ValueField required body={application.bio} title="Project description" />

<div className="grid grid-flow-row gap-4 sm:grid-cols-2">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,7 @@ import type { IRequest } from "~/utils/types";
export function useApplicationById(registryAddress: string, id: string): UseTRPCQueryResult<IRequest, unknown> {
return api.applications.getById.useQuery({ registryAddress, id });
}

export function useApplicationsByIds(registryAddress: string, ids: string[]): UseTRPCQueryResult<IRequest[], unknown> {
return api.applications.getByIds.useQuery({ registryAddress, ids });
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function useCreateApplication(options: {
}): TUseCreateApplicationReturn {
const upload = useUploadMetadata();

const { chain } = useAccount();
const { chain, address } = useAccount();
const { getRoundByPollId } = useRound();

const roundData = getRoundByPollId(options.pollId);
Expand All @@ -44,7 +44,7 @@ export function useCreateApplication(options: {

const mutation = useMutation({
mutationFn: async (values: Application) => {
if (!signer || !chain) {
if (!signer || !chain || !address) {
throw new Error("Please connect your wallet first");
}

Expand All @@ -71,6 +71,7 @@ export function useCreateApplication(options: {
profileImageUrl: profileImageUrl.url,
bannerImageUrl: bannerImageUrl.url,
submittedAt: Date.now().valueOf(),
creator: address,
};

const uploadRes = await upload.mutateAsync(metadataValues);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const fundingSourceTypes = {
export const ApplicationSchema = z.object({
name: z.string().min(3),
bio: z.string().min(3),
creator: z.string().optional(),
profileImageUrl: z.string().optional(),
bannerImageUrl: z.string().optional(),
submittedAt: z.number().optional(),
Expand Down
100 changes: 55 additions & 45 deletions packages/interface/src/features/projects/components/ProjectItem.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import Image from "next/image";
import Link from "next/link";
import { useAccount } from "wagmi";

import { Button } from "~/components/ui/Button";
import { Heading } from "~/components/ui/Heading";
Expand All @@ -22,6 +24,7 @@ export interface IProjectItemProps {
recipient: IRecipient;
isLoading: boolean;
state?: EProjectState;
checkIsMine?: boolean;
action?: (e: Event) => void;
}

Expand All @@ -30,63 +33,70 @@ export const ProjectItem = ({
recipient,
isLoading,
state = undefined,
checkIsMine = false,
action = undefined,
}: IProjectItemProps): JSX.Element => {
const metadata = useProjectMetadata(recipient.metadataUrl);
const roundState = useRoundState({ pollId });
const { address } = useAccount();

return (
<article
className="dark:bg-lightBlack group w-96 rounded-xl bg-white shadow-lg hover:shadow-sm sm:w-full"
data-testid={`project-${recipient.id}`}
<Link
className={checkIsMine && metadata.data?.creator !== address ? "hidden" : ""}
href={`/rounds/${pollId}/${recipient.id}`}
>
<div className="opacity-70 transition-opacity group-hover:opacity-100">
<ProjectBanner url={metadata.data?.bannerImageUrl} />
<article
className="dark:bg-lightBlack group rounded-xl bg-white shadow-lg hover:shadow-sm sm:w-full"
data-testid={`project-${recipient.id}`}
>
<div className="opacity-70 transition-opacity group-hover:opacity-100">
<ProjectBanner url={metadata.data?.bannerImageUrl} />

<ProjectAvatar className="-mt-8 ml-4" rounded="full" url={metadata.data?.profileImageUrl} />
</div>

<ProjectAvatar className="-mt-8 ml-4" rounded="full" url={metadata.data?.profileImageUrl} />
</div>
<div className="p-4 pt-2">
<Heading as="h3" className="truncate dark:text-white" size="lg">
<Skeleton isLoading={isLoading}>{metadata.data?.name}</Skeleton>
</Heading>

<div className="p-4 pt-2">
<Heading as="h3" className="truncate dark:text-white" size="lg">
<Skeleton isLoading={isLoading}>{metadata.data?.name}</Skeleton>
</Heading>
<div className="line-clamp-2 h-10 text-sm text-gray-400">
<Skeleton className="w-full" isLoading={isLoading}>
{metadata.data?.bio}
</Skeleton>
</div>

<div className="line-clamp-2 h-10 text-sm text-gray-400">
<Skeleton className="w-full" isLoading={isLoading}>
{metadata.data?.bio}
<Skeleton className="w-[100px]" isLoading={isLoading}>
<ImpactCategories tags={metadata.data?.impactCategory} />
</Skeleton>
</div>

<Skeleton className="w-[100px]" isLoading={isLoading}>
<ImpactCategories tags={metadata.data?.impactCategory} />
</Skeleton>

{!isLoading && state !== undefined && action && roundState === ERoundState.VOTING && (
<div className="flex justify-end pt-6">
<Skeleton>
{state === EProjectState.DEFAULT && (
<Button size="sm" variant="inverted" onClick={action}>
Add to ballot
</Button>
)}

{state === EProjectState.ADDED && (
<Button size="sm" variant="primary" onClick={action}>
Added
<Image alt="check-white" height="18" src="/check-white.svg" width="18" />
</Button>
)}

{state === EProjectState.SUBMITTED && (
<Button size="sm" variant="disabled">
Submitted
</Button>
)}
</Skeleton>
</div>
)}
</div>
</article>
{!isLoading && state !== undefined && action && roundState === ERoundState.VOTING && (
<div className="flex justify-end pt-6">
<Skeleton>
{state === EProjectState.DEFAULT && (
<Button size="sm" variant="inverted" onClick={action}>
Add to ballot
</Button>
)}

{state === EProjectState.ADDED && (
<Button size="sm" variant="primary" onClick={action}>
Added
<Image alt="check-white" height="18" src="/check-white.svg" width="18" />
</Button>
)}

{state === EProjectState.SUBMITTED && (
<Button size="sm" variant="disabled">
Submitted
</Button>
)}
</Skeleton>
</div>
)}
</div>
</article>
</Link>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import clsx from "clsx";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useMemo } from "react";
import { type Hex, zeroAddress } from "viem";
Expand Down Expand Up @@ -43,11 +42,7 @@ export const ProjectsResults = ({ pollId }: IProjectsResultsProps): JSX.Element
<InfiniteLoading
{...projects}
renderItem={(item, { isLoading }) => (
<Link
key={item.id}
className={clsx("relative", { "animate-pulse": isLoading })}
href={`/rounds/${pollId}/${item.id}`}
>
<div key={item.id} className={clsx("relative", { "animate-pulse": isLoading })}>
{!results.isLoading && roundState === ERoundState.RESULTS ? (
<ProjectItemAwarded amount={results.data?.projects[item.id]?.votes} />
) : null}
Expand All @@ -59,7 +54,7 @@ export const ProjectsResults = ({ pollId }: IProjectsResultsProps): JSX.Element
recipient={item}
state={EProjectState.SUBMITTED}
/>
</Link>
</div>
)}
/>
);
Expand Down
52 changes: 39 additions & 13 deletions packages/interface/src/features/rounds/components/Projects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import clsx from "clsx";
import Link from "next/link";
import { useCallback, useMemo } from "react";
import { FiAlertCircle } from "react-icons/fi";
import { useLocalStorage } from "react-use";
import { Hex, zeroAddress } from "viem";

import { InfiniteLoading } from "~/components/InfiniteLoading";
Expand All @@ -12,9 +13,10 @@ import { Heading } from "~/components/ui/Heading";
import { useBallot } from "~/contexts/Ballot";
import { useMaci } from "~/contexts/Maci";
import { useRound } from "~/contexts/Round";
import { useApplicationsByIds } from "~/features/applications/hooks/useApplicationById";
import { useResults } from "~/hooks/useResults";
import { useRoundState } from "~/utils/state";
import { ERoundState } from "~/utils/types";
import { ERoundState, MY_APPS_KEY, type IRecipient } from "~/utils/types";

import { ProjectItem, ProjectItemAwarded } from "../../projects/components/ProjectItem";
import { useSearchProjects } from "../../projects/hooks/useProjects";
Expand Down Expand Up @@ -43,6 +45,12 @@ export const Projects = ({ pollId = "" }: IProjectsProps): JSX.Element => {

const ballot = useMemo(() => getBallot(pollId), [pollId, getBallot]);

const [myApps] = useLocalStorage<string[]>(`${MY_APPS_KEY}-${pollId}`);

const applications = useApplicationsByIds(round?.registryAddress ?? zeroAddress, myApps ?? []);

const myApplications = useMemo(() => applications.data, [applications]);

const handleAction = useCallback(
(projectIndex: number, projectId: string) => (e: Event) => {
e.preventDefault();
Expand Down Expand Up @@ -119,23 +127,41 @@ export const Projects = ({ pollId = "" }: IProjectsProps): JSX.Element => {
</div>

{roundState === ERoundState.APPLICATION && (
<div className="mb-4 flex w-full justify-end">
<Link href={`/rounds/${pollId}/applications/new`}>
<Button size="auto" variant="primary">
Create Application
</Button>
</Link>
<div className="mb-4 rounded-md border border-black p-4 dark:border-white">
<div className="flex justify-between">
<Heading size="xl">My Projects</Heading>

<Link href={`/rounds/${pollId}/applications/new`}>
<Button size="auto" variant="primary">
Create Application
</Button>
</Link>
</div>

<div className="my-4 gap-4 md:grid md:grid-cols-2 lg:grid lg:grid-cols-3">
{myApplications &&
myApplications.length > 0 &&
myApplications.map((project) => (
<ProjectItem
key={project.recipient.id}
checkIsMine
isLoading={false}
pollId={pollId}
recipient={project.recipient as IRecipient}
/>
))}

{(!myApplications || myApplications.length === 0) && (
<p className="text-gray-400">Create your application by clicking the button</p>
)}
</div>
</div>
)}

<InfiniteLoading
{...projects}
renderItem={(item, { isLoading }) => (
<Link
key={item.id}
className={clsx("relative", { "animate-pulse": isLoading })}
href={`/rounds/${pollId}/${item.id}`}
>
<div key={item.id} className={clsx("relative", { "animate-pulse": isLoading })}>
{!results.isLoading && roundState === ERoundState.RESULTS ? (
<ProjectItemAwarded amount={results.data?.projects[item.id]?.votes} />
) : null}
Expand All @@ -147,7 +173,7 @@ export const Projects = ({ pollId = "" }: IProjectsProps): JSX.Element => {
recipient={item}
state={defineState(Number.parseInt(item.index, 10))}
/>
</Link>
</div>
)}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/interface/src/hooks/useRegistry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ interface SubmitApplicationArgs {
*/
registryAddress: Hex;
/**
* The recipient of the attestation
* The recipient of the application
*/
recipient: Hex;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useMemo } from "react";
import { FiAlertCircle } from "react-icons/fi";
Expand Down Expand Up @@ -83,9 +82,7 @@ const ConfirmProjectPage = ({ pollId }: { pollId: string }): JSX.Element => {
</div>
)}

<Link href={`/rounds/${pollId}/${project.recipient.id}`}>
<ProjectItem isLoading={false} pollId={pollId} recipient={project.recipient as IRecipient} />
</Link>
<ProjectItem isLoading={false} pollId={pollId} recipient={project.recipient as IRecipient} />
</div>
</div>
</Layout>
Expand Down
Loading
Loading