some refactoring/add types file

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 (
+    <div className="bg-grey-50">
+      <Navbar programCta={isSuccess} /> <ProgramListPage />
+      <RoundListPage />
+      <Footer />
+    </div>
+  );
+}
+
+export default LandingPage;

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,

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 (

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;
+}

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<CardProps> = (
+  props: CardProps
+) => (
+  <BasicCard className="program-card border-none mb-10 md:w-[350px] relative rounded-lg">
+    <CardContent className="p-4 px-5">
+      <CardTitle className="font-medium text-2xl font-sans">
+        {props.title}
+      </CardTitle>
+      <CardDescription className="line-clamp-none text-gray-500">
+        <div className="flex items-center">
+          <UserGroupIcon className="h-4 w-4 inline mr-2" />
+          <span>{props.description}</span>
+        </div>
+        <div className="flex flex-col mt-6">
+          {/* todo: Add badges to props for each round category */}
+          <div className="my-1">
+            <span className="border border-green-100 rounded-2xl bg-green-100 p-1 px-2 font-mono">
+              Quadratic funding
+            </span>
+          </div>
+
+          <div className="my-1">
+            <span className="border border-yellow-100 rounded-2xl bg-yellow-100 p-1 px-2 font-mono">
+              Direct Grants
+            </span>
+          </div>
+        </div>
+      </CardDescription>
+    </CardContent>
+    <CardFooter>
+      <CardFooterContent className="p-6 bg-gray-100 rounded-b-xl">
+        {props.footerContent}
+      </CardFooterContent>
+    </CardFooter>
+  </BasicCard>
+);

packages/round-manager/src/features/program/ListProgramPage.tsx → 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<ProgramCardProps> = (props: ProgramCardProps) => (
-  <BasicCard className="program-card border-none mb-10 md:w-[350px] relative rounded-lg">
-    <CardContent className="p-4 px-5">
-      <CardTitle className="font-medium text-2xl font-sans">
-        {props.title}
-      </CardTitle>
-      <CardDescription className="line-clamp-none text-gray-500">
-        <div className="flex items-center">
-          <UserGroupIcon className="h-4 w-4 inline mr-2" />
-          <span>{props.description}</span>
-        </div>
-        <div className="flex flex-col mt-6">
-          {/* todo: Add badges to props for each round category */}
-          <div className="my-1">
-            <span className="border border-green-100 rounded-2xl bg-green-100 p-1 px-2 font-mono">
-              Quadratic funding
-            </span>
-          </div>
-
-          <div className="my-1">
-            <span className="border border-yellow-100 rounded-2xl bg-yellow-100 p-1 px-2 font-mono">
-              Direct Grants
-            </span>
-          </div>
-        </div>
-      </CardDescription>
-    </CardContent>
-    <CardFooter>
-      <CardFooterContent className="p-6 bg-gray-100 rounded-b-xl">
-        {props.footerContent}
-      </CardFooterContent>
-    </CardFooter>
-  </BasicCard>
-);
-
-const RoundCard: React.FC<ProgramCardProps> = (props: ProgramCardProps) => (
-  <BasicCard className="border-none w-full mb-8 rounded-xl md:h-[230px]">
-    <CardContent className="p-4 px-5">
-      <CardTitle className="font-medium text-2xl font-sans">
-        {props.title}
-      </CardTitle>
-      <CardDescription className=" text-gray-500">
-        {/* <div className="flex items-center">
-          <span>{props.description}</span>
-        </div> */}
-        <div className="flex flex-col mt-4">
-          {/* todo: Add badges to props for proper round category */}
-          <div>
-            <span className="border border-green-100 rounded-2xl bg-green-100 p-1 px-2 font-mono">
-              Quadratic funding
-            </span>
-          </div>
-          <div className="mt-4">
-            <div className="flex flex-row items-center p-1 font-sans">
-              <CalendarIcon className="h-4 w-4 inline mr-2" />
-              <span className="text-lg">10 June 2024 - 01 July 2024</span>
-            </div>
-          </div>
-        </div>
-      </CardDescription>
-    </CardContent>
-    <div>
-      <div className="pl-6 bg-white">{props.footerContent}</div>
-    </div>
-  </BasicCard>
-);
-
 const startAProgramCard = (
   <Link to="/program/create">
     <ProgramCard
@@ -199,7 +117,6 @@ function ListPrograms() {
 
   return (
     <div className="bg-grey-50">
-      <Navbar programCta={isSuccess} />{" "}
       {fetchProgramsStatus === ProgressStatus.IN_PROGRESS && (
         <Spinner text="We're fetching your Programs." />
       )}
@@ -270,46 +187,7 @@ function ListPrograms() {
               : programList.slice(0, maxProgramsPerRow * 2)}
           </div>
         </div>
-        <div className="flex flex-col mb-6">
-          <div className="flex flex-row items-center justify-between">
-            <div className="flex flex-row items-center justify-start pt-8">
-              <span className="text-2xl font-medium text-gray-500 antialiased">
-                Rounds
-              </span>
-              <span
-                className="ml-8 text-xs font-mono hover:cursor-pointer"
-                onClick={() => {
-                  setViewAllRounds(!viewAllRounds);
-                }}
-              >
-                {viewAllRounds ? "View less" : "View all"}
-              </span>
-            </div>
-            <div className="flex flex-row items-center justify-end">
-              <div className="flex flex-row items-center justify-end pt-8">
-                <span className="text-xs font-mono font-medium hover:cursor-pointer">
-                  Sort by Recent
-                </span>
-                <ChevronUpIcon className="h-4 w-4 inline ml-2 hover:cursor-pointer" />
-                <span className="text-xs font-mono font-medium hover:cursor-pointer ml-6">
-                  Filter by <span className="text-nectary-600">All</span>
-                </span>
-                <ChevronUpIcon className="h-4 w-4 inline ml-2 hover:cursor-pointer" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="w-full">
-          {roundList.length === 0 && (
-            <div className="text-md font-normal">
-              If you’re an operator of a round and you’re not a program admin,
-              that round will appear here.
-            </div>
-          )}
-          {viewAllRounds ? roundList : roundList.slice(0, maxRoundsPerSite)}
-        </div>
       </main>
-      <Footer />
     </div>
   );
 }

packages/round-manager/src/features/program/__tests__/ListProgramPage.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
 import { makeProgramData, renderWithProgramContext } from "../../../test-utils";
 import { ProgressStatus } from "../../api/types";
-import ListProgramPage from "../ListProgramPage";
+import ListProgramPage from "../ProgramListPage";
 
 jest.mock("../../common/Auth", () => ({
   useWallet: () => ({

packages/round-manager/src/features/round/RoundCard.tsx

@@ -0,0 +1,35 @@
+import { CalendarIcon } from "common";
+import { BasicCard, CardContent, CardTitle, CardDescription } from "../common/styles";
+import { CardProps } from "../common/types";
+
+export const RoundCard: React.FC<CardProps> = (props: CardProps) => (
+  <BasicCard className="border-none w-full mb-8 rounded-xl md:h-[230px]">
+    <CardContent className="p-4 px-5">
+      <CardTitle className="font-medium text-2xl font-sans">
+        {props.title}
+      </CardTitle>
+      <CardDescription className=" text-gray-500">
+        {/* <div className="flex items-center">
+            <span>{props.description}</span>
+          </div> */}
+        <div className="flex flex-col mt-4">
+          {/* todo: Add badges to props for proper round category */}
+          <div>
+            <span className="border border-green-100 rounded-2xl bg-green-100 p-1 px-2 font-mono">
+              Quadratic funding
+            </span>
+          </div>
+          <div className="mt-4">
+            <div className="flex flex-row items-center p-1 font-sans">
+              <CalendarIcon className="h-4 w-4 inline mr-2" />
+              <span className="text-lg">10 June 2024 - 01 July 2024</span>
+            </div>
+          </div>
+        </div>
+      </CardDescription>
+    </CardContent>
+    <div>
+      <div className="pl-6 bg-white">{props.footerContent}</div>
+    </div>
+  </BasicCard>
+);