From 0090dd6b17431f9f212a7d8ca16d679313f9823e Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Mon, 10 Jun 2024 16:09:44 -0400 Subject: [PATCH] some refactoring/add types file --- .../src/features/common/LandingPage.tsx | 26 +++ .../src/features/common/ProgressModal.tsx | 18 +- .../src/features/common/Spinner.tsx | 4 +- .../src/features/common/types.ts | 27 +++ .../src/features/program/ProgramCard.tsx | 47 +++++ ...istProgramPage.tsx => ProgramListPage.tsx} | 126 +------------- .../__tests__/ListProgramPage.test.tsx | 2 +- .../src/features/round/RoundCard.tsx | 35 ++++ .../src/features/round/RoundListPage.tsx | 160 ++++++++++++++++++ packages/round-manager/src/index.tsx | 5 +- 10 files changed, 304 insertions(+), 146 deletions(-) create mode 100644 packages/round-manager/src/features/common/LandingPage.tsx create mode 100644 packages/round-manager/src/features/common/types.ts create mode 100644 packages/round-manager/src/features/program/ProgramCard.tsx rename packages/round-manager/src/features/program/{ListProgramPage.tsx => ProgramListPage.tsx} (59%) create mode 100644 packages/round-manager/src/features/round/RoundCard.tsx create mode 100644 packages/round-manager/src/features/round/RoundListPage.tsx diff --git a/packages/round-manager/src/features/common/LandingPage.tsx b/packages/round-manager/src/features/common/LandingPage.tsx new file mode 100644 index 0000000000..84a1251468 --- /dev/null +++ b/packages/round-manager/src/features/common/LandingPage.tsx @@ -0,0 +1,26 @@ +import { datadogLogs } from "@datadog/browser-logs"; +import { usePrograms } from "../../context/program/ReadProgramContext"; +import { ProgressStatus } from "../api/types"; +import Navbar from "./Navbar"; +import ProgramListPage from "../program/ProgramListPage"; +import RoundListPage from "../round/RoundListPage"; +import Footer from "common/src/components/Footer"; + +function LandingPage() { + datadogLogs.logger.info("====> Route: /"); + datadogLogs.logger.info(`====> URL: ${window.location.href}`); + + const { fetchProgramsStatus, listProgramsError } = usePrograms(); + const isSuccess = + fetchProgramsStatus === ProgressStatus.IS_SUCCESS && !listProgramsError; + + return ( +
+ + +
+
+ ); +} + +export default LandingPage; diff --git a/packages/round-manager/src/features/common/ProgressModal.tsx b/packages/round-manager/src/features/common/ProgressModal.tsx index b1bd705a5c..21cf62b137 100644 --- a/packages/round-manager/src/features/common/ProgressModal.tsx +++ b/packages/round-manager/src/features/common/ProgressModal.tsx @@ -1,22 +1,8 @@ -import { Fragment, ReactNode } from "react"; +import { Fragment } from "react"; import { Dialog, Transition } from "@headlessui/react"; import { CheckIcon, XIcon } from "@heroicons/react/solid"; import { ProgressStatus } from "../api/types"; - -export type Step = { - name: string; - description: string; - status: ProgressStatus; -}; - -interface ProgressModalProps { - isOpen: boolean; - steps: Step[]; - heading?: string; - subheading?: string; - redirectUrl?: string; - children?: ReactNode; -} +import { ProgressModalProps, Step } from "./types"; export default function ProgressModal({ isOpen, diff --git a/packages/round-manager/src/features/common/Spinner.tsx b/packages/round-manager/src/features/common/Spinner.tsx index 38335c37e2..3f5dfe0190 100644 --- a/packages/round-manager/src/features/common/Spinner.tsx +++ b/packages/round-manager/src/features/common/Spinner.tsx @@ -1,6 +1,4 @@ -type SpinnerProps = { - text: string; -}; +import { SpinnerProps } from "./types"; export function Spinner(props: SpinnerProps) { return ( diff --git a/packages/round-manager/src/features/common/types.ts b/packages/round-manager/src/features/common/types.ts new file mode 100644 index 0000000000..4d97f8618c --- /dev/null +++ b/packages/round-manager/src/features/common/types.ts @@ -0,0 +1,27 @@ +import { ReactNode } from "react"; +import { ProgressStatus } from "../api/types"; + +export type CardProps = { + title: string; + description: string; + footerContent: React.ReactNode; +}; + +export type SpinnerProps = { + text: string; +}; + +export type Step = { + name: string; + description: string; + status: ProgressStatus; +}; + +export interface ProgressModalProps { + isOpen: boolean; + steps: Step[]; + heading?: string; + subheading?: string; + redirectUrl?: string; + children?: ReactNode; +} diff --git a/packages/round-manager/src/features/program/ProgramCard.tsx b/packages/round-manager/src/features/program/ProgramCard.tsx new file mode 100644 index 0000000000..d5467afa8e --- /dev/null +++ b/packages/round-manager/src/features/program/ProgramCard.tsx @@ -0,0 +1,47 @@ +import { UserGroupIcon } from "@heroicons/react/solid"; +import { + BasicCard, + CardContent, + CardTitle, + CardDescription, + CardFooter, + CardFooterContent, +} from "../common/styles"; +import { CardProps } from "../common/types"; + +export const ProgramCard: React.FC = ( + props: CardProps +) => ( + + + + {props.title} + + +
+ + {props.description} +
+
+ {/* todo: Add badges to props for each round category */} +
+ + Quadratic funding + +
+ +
+ + Direct Grants + +
+
+ + + + + {props.footerContent} + + + +); diff --git a/packages/round-manager/src/features/program/ListProgramPage.tsx b/packages/round-manager/src/features/program/ProgramListPage.tsx similarity index 59% rename from packages/round-manager/src/features/program/ListProgramPage.tsx rename to packages/round-manager/src/features/program/ProgramListPage.tsx index 722492132c..f1cda92077 100644 --- a/packages/round-manager/src/features/program/ListProgramPage.tsx +++ b/packages/round-manager/src/features/program/ProgramListPage.tsx @@ -3,21 +3,11 @@ import { Link } from "react-router-dom"; import { ArrowNarrowRightIcon, - CalendarIcon, ChevronUpIcon, PlusIcon, - UserGroupIcon, } from "@heroicons/react/solid"; import { Spinner } from "../common/Spinner"; import Navbar from "../common/Navbar"; -import { - BasicCard, - CardContent, - CardDescription, - CardFooter, - CardFooterContent, - CardTitle, -} from "../common/styles"; // import { ReactComponent as Banner } from "../../assets/programs/city-voxel.svg"; import Footer from "common/src/components/Footer"; import { datadogLogs } from "@datadog/browser-logs"; @@ -29,84 +19,12 @@ import { allChains } from "../../app/wagmi"; import { useRoundsByAddress } from "../../context/round/RoundContext"; import { useAccount } from "wagmi"; import { getChainById, stringToBlobUrl } from "common"; -import { Button } from "common/src/styles"; - -interface ProgramCardProps { - title: string; - description: string; - footerContent: JSX.Element; -} +import { ProgramCard } from "./ProgramCard"; +import { RoundCard } from "../round/RoundCard"; const maxProgramsPerRow = 4; const maxRoundsPerSite = 5; -const ProgramCard: React.FC = (props: ProgramCardProps) => ( - - - - {props.title} - - -
- - {props.description} -
-
- {/* todo: Add badges to props for each round category */} -
- - Quadratic funding - -
- -
- - Direct Grants - -
-
- - - - - {props.footerContent} - - - -); - -const RoundCard: React.FC = (props: ProgramCardProps) => ( - - - - {props.title} - - - {/*
- {props.description} -
*/} -
- {/* todo: Add badges to props for proper round category */} -
- - Quadratic funding - -
-
-
- - 10 June 2024 - 01 July 2024 -
-
-
- - -
-
{props.footerContent}
-
- -); - const startAProgramCard = ( - {" "} {fetchProgramsStatus === ProgressStatus.IN_PROGRESS && ( )} @@ -270,46 +187,7 @@ function ListPrograms() { : programList.slice(0, maxProgramsPerRow * 2)} -
-
-
- - Rounds - - { - setViewAllRounds(!viewAllRounds); - }} - > - {viewAllRounds ? "View less" : "View all"} - -
-
-
- - Sort by Recent - - - - Filter by All - - -
-
-
-
-
- {roundList.length === 0 && ( -
- If you’re an operator of a round and you’re not a program admin, - that round will appear here. -
- )} - {viewAllRounds ? roundList : roundList.slice(0, maxRoundsPerSite)} -
-