Skip to content

Commit

Permalink
refactor: sync project schema WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
johnshift committed Aug 16, 2024
1 parent a2c913f commit 8ed509a
Show file tree
Hide file tree
Showing 25 changed files with 279 additions and 328 deletions.
11 changes: 0 additions & 11 deletions src/app/grants/[grantId]/@list/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { getQueryClient } from '@/shared/utils/get-query-client';

import { grantQueryKeys } from '@/grants/core/query-keys';
import { getGranteeDetails } from '@/grants/data/get-grantee-details';
import { getGranteeProject } from '@/grants/data/get-grantee-project';
import { getGranteeList } from '@/grants/data/get-grantee-list';
import { GranteeList } from '@/grants/components/grantee-list';

Expand Down Expand Up @@ -35,16 +34,6 @@ const ParallelGranteeList = async ({ params: { grantId } }: Props) => {
}),
];

// Prefetch first project details
if (grantee.projects.length > 0) {
promises.push(
queryClient.prefetchQuery({
queryKey: grantQueryKeys.project(grantee.projects[0]),
queryFn: () => getGranteeProject(grantee.projects[0]),
}),
);
}

await Promise.all(promises);
}

Expand Down
5 changes: 4 additions & 1 deletion src/app/grants/[grantId]/grantees/[granteeId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';
// export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';

const Page = () => null;
export default Page;
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';
// export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';

const Page = () => null;
export default Page;
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';
// export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';

const Page = () => null;
export default Page;
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';
// export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';

const Page = () => null;
export default Page;
5 changes: 4 additions & 1 deletion src/app/grants/[grantId]/grantees/page.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';
// export { GrantsStatsSection as default } from '@/grants/pages/grant-stats-section';

const Page = () => null;
export default Page;
14 changes: 7 additions & 7 deletions src/grants/components/grantee-card/grantee-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,32 @@ export const GranteeCard = () => {
return <p>TODO: No Grantee UI</p>;
}

const { logo, name, url, category, summary } = granteeData.data;
const { logoUrl, name, website, description } = granteeData.data;

return (
<div className="to-base-dark/20 flex flex-col gap-y-4 rounded-b-lg bg-gradient-to-tr from-tertiary/20 p-6 transition-all duration-300 md:rounded-lg md:p-5">
<GranteeLogoTitle name={name} logo={logo} category={category} />
<GranteeLogoTitle name={name} logoUrl={logoUrl} />

<span className="text-13 text-white/75">{summary}</span>
<span className="text-13 text-white/75">{description}</span>

{url && (
{website && (
<Button
as={Link}
href={url}
href={website}
target="_blank"
rel="noopener noreferrer"
className="flex h-auto w-fit items-center gap-1 rounded bg-white/10 p-1"
>
<span className="text-13 leading-4">
{getWebsiteText(url).hostname}
{getWebsiteText(website).hostname}
</span>
<ExternalIcon />
</Button>
)}

<div className="flex flex-col gap-2 md:border-t md:border-divider/25 md:pt-4">
<span className="text-13 text-white">Funding Details</span>
<GranteeFundingItems grantee={granteeData.data} />
<GranteeFundingItems granteeItem={granteeData.data} />
</div>
</div>
);
Expand Down
4 changes: 1 addition & 3 deletions src/grants/components/grantee-list/item/item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@ export const GranteeListItem = ({ granteeItem }: Props) => {
<div className="flex flex-col gap-4">
<GranteeLogoTitle
name={granteeItem.name}
logo={granteeItem.logoUrl}
// TODO: Confirm with team if grantee has category
category={''}
logoUrl={granteeItem.logoUrl}
classNames={{
root: '[&_*]:!text-13 [&_*]:!block',
}}
Expand Down
100 changes: 51 additions & 49 deletions src/grants/components/project-selections/project-selection.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useRef } from 'react';
// import Link from 'next/link';
// import { useParams } from 'next/navigation';
// import { useRef } from 'react';

import { cn } from '@/shared/utils/cn';
// import { cn } from '@/shared/utils/cn';

import { useGranteeProject } from '@/grants/hooks/use-grantee-project';
import { ProjectSelectionItemSkeleton } from '@/grants/components/project-selections/project-selection-item-skeleton';
// import { ProjectSelectionItemSkeleton } from '@/grants/components/project-selections/project-selection-item-skeleton';

interface Props {
projectId: string;
Expand All @@ -16,47 +15,50 @@ interface Props {
showError: () => void;
}

export const ProjectSelection = ({
projectId,
href,
isActiveBypass,
showError,
}: Props) => {
const { projectId: paramsProjectId } = useParams() as { projectId: string };

const { data, error, isLoading } = useGranteeProject(projectId);

const errorRef = useRef(false);

if (isLoading) {
return <ProjectSelectionItemSkeleton />;
}

// Parent component will handle error display
if (error?.message && !errorRef.current) {
errorRef.current = true;
showError();
return null;
}

const isActive = isActiveBypass || paramsProjectId === projectId;

if (!data) return null;

return (
<Link
prefetch
href={href}
scroll={false}
className={cn(
'flex grow justify-center rounded-lg px-4 py-4',
'rounded-2xl bg-medium-gray px-3 py-3 text-center text-base font-semibold',
{
'is-active': isActive,
},
)}
>
{data.data.name}
</Link>
);
export const ProjectSelection = (
{
// projectId,
// href,
// isActiveBypass,
// showError,
}: Props,
) => {
return null;
// const { projectId: paramsProjectId } = useParams() as { projectId: string };

// const { data, error, isLoading } = useGranteeProject(projectId);

// const errorRef = useRef(false);

// if (isLoading) {
// return <ProjectSelectionItemSkeleton />;
// }

// // Parent component will handle error display
// if (error?.message && !errorRef.current) {
// errorRef.current = true;
// showError();
// return null;
// }

// const isActive = isActiveBypass || paramsProjectId === projectId;

// if (!data) return null;

// return (
// <Link
// prefetch
// href={href}
// scroll={false}
// className={cn(
// 'flex grow justify-center rounded-lg px-4 py-4',
// 'rounded-2xl bg-medium-gray px-3 py-3 text-center text-base font-semibold',
// {
// 'is-active': isActive,
// },
// )}
// >
// {data.data.name}
// </Link>
// );
};
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const grantees = [
{ ...fakeGranteeItem(), id: grantee.id },
...fakeGrantees().slice(1),
];
const granteeProject = fakeGranteeProject({ id: grantee.projects[0] });
const granteeProject = fakeGranteeProject({ id: grantee.projects[0].id });

const meta: Meta<typeof ProjectSelections> = {
title: 'grants/components/project-selections',
Expand Down
102 changes: 51 additions & 51 deletions src/grants/components/project-selections/project-selections.tsx
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
'use client';

import { useParams } from 'next/navigation';
import { useState } from 'react';
// import { useParams } from 'next/navigation';
// import { useState } from 'react';

import { errMsg } from '@/shared/core/errors';
// import { errMsg } from '@/shared/core/errors';

import { useGranteeProjectFetch } from '@/grants/hooks/use-grantee-project-fetch';
import { ProjectSelectionItemSkeleton } from '@/grants/components/project-selections/project-selection-item-skeleton';
// import { ProjectSelectionItemSkeleton } from '@/grants/components/project-selections/project-selection-item-skeleton';

import { ProjectSelection } from './project-selection';
// import { ProjectSelection } from './project-selection';

const WRAPPER_CLASSNAME = 'flex w-full gap-3 rounded-20 bg-white/5 p-3';
// const WRAPPER_CLASSNAME = 'flex w-full gap-3 rounded-20 bg-white/5 p-3';

export const ProjectSelections = () => {
const { grantId, granteeId, projectId } = useParams() as {
grantId: string;
granteeId?: string;
projectId?: string;
};
return null;
// const { grantId, granteeId, projectId } = useParams() as {
// grantId: string;
// granteeId?: string;
// projectId?: string;
// };

const [hasError, setHasError] = useState(false);
const showError = () => setHasError(true);
// const [hasError, setHasError] = useState(false);
// const showError = () => setHasError(true);

const { granteeData, projectData, isLoading, errorMessage } =
useGranteeProjectFetch({
grantId,
granteeId,
projectId,
});
// const { granteeData, projectData, isLoading, errorMessage } =
// useGranteeProjectFetch({
// grantId,
// granteeId,
// projectId,
// });

if (isLoading) {
return (
<div className={WRAPPER_CLASSNAME}>
<ProjectSelectionItemSkeleton />
<ProjectSelectionItemSkeleton />
</div>
);
}
// if (isLoading) {
// return (
// <div className={WRAPPER_CLASSNAME}>
// <ProjectSelectionItemSkeleton />
// <ProjectSelectionItemSkeleton />
// </div>
// );
// }

if (hasError) {
return <p>Error: {errMsg.INTERNAL}</p>;
}
// if (hasError) {
// return <p>Error: {errMsg.INTERNAL}</p>;
// }

// This component is stacked with others. Top most component renders the error.
if (errorMessage) return null;
if (!granteeData?.data) return null;
// // This component is stacked with others. Top most component renders the error.
// if (errorMessage) return null;
// if (!granteeData?.data) return null;

if (!projectData?.data) {
return <p>TODO: No Grantee Project UI</p>;
}
// if (!projectData?.data) {
// return <p>TODO: No Grantee Project UI</p>;
// }

const baseHref = `/grants/${grantId}/grantees/${granteeData.data.id}/projects`;
// const baseHref = `/grants/${grantId}/grantees/${granteeData.data.id}/projects`;

return (
<div className={WRAPPER_CLASSNAME}>
{granteeData.data.projects.map((id, index) => (
<ProjectSelection
key={id}
projectId={id}
href={`${baseHref}/${id}`}
isActiveBypass={!projectId && index === 0}
showError={showError}
/>
))}
</div>
);
// return (
// <div className={WRAPPER_CLASSNAME}>
// {granteeData.data.projects.map((id, index) => (
// <ProjectSelection
// key={id}
// projectId={id}
// href={`${baseHref}/${id}`}
// isActiveBypass={!projectId && index === 0}
// showError={showError}
// />
// ))}
// </div>
// );
};
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const grantees = [
{ ...fakeGranteeItem(), id: grantee.id },
...fakeGrantees().slice(1),
];
const granteeProject = fakeGranteeProject({ id: grantee.projects[0] });
const granteeProject = fakeGranteeProject({ id: grantee.projects[0].id });

const meta: Meta<typeof GranteeProjectStats> = {
title: 'grants/components/project-stats',
Expand Down
Loading

0 comments on commit 8ed509a

Please sign in to comment.