Merge pull request #39 from kleros/refactor(frontend)/cooperative-page

Refactor(frontend)/cooperative page

Author: alcercu

frontend/.husky/pre-commit

@@ -1,3 +1,3 @@
 cd frontend
 yarn tsc
-yarn lint
+yarn lint --fix

frontend/src/components/Button.tsx

@@ -7,34 +7,45 @@ const baseStyle = clsx("px-8 py-2 rounded-full transition duration-75");
 const primaryStyle = clsx(
   baseStyle,
   "bg-primary-blue",
-  "hover:bg-primary-blue/90"
+  "hover:bg-primary-blue/90",
+  "disabled:bg-stroke"
 );
 
 const secondaryStyle = clsx(
+  baseStyle,
+  "bg-transparent border-2 border-white",
+  "hover:bg-primary-blue hover:border-primary-blue hover:text-background-2"
+);
+
+const tertiaryStyle = clsx(
   baseStyle,
   "bg-transparent border-2 border-white",
   "hover:bg-white/10"
 );
 
 
-interface IButton {
+interface IButton extends React.ComponentProps<"button"> {
   children: React.ReactNode;
   onClick?: () => void;
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "tertiary";
   className?: string;
 }
 
 const Button: React.FC<IButton> = ({
   children,
   onClick,
   className,
-  variant = "primary"
+  variant = "primary",
+  ...props
 }) => (
   <button
-    className={
-        clsx(variant === "primary" ? primaryStyle : secondaryStyle, className)
-      }
-    {...{ onClick }}
+    className={clsx(
+      variant === "primary" && primaryStyle,
+      variant === "secondary" && secondaryStyle,
+      variant === "tertiary" && tertiaryStyle,
+      className
+    )}
+    {...{ onClick, ...props }}
   >
     {children}
   </button>

frontend/src/components/Cooperative/MemberSection/LearnMore.tsx

@@ -1,18 +1,20 @@
 import React from "react";
 
+import Image from "next/image";
 import Link from "next/link";
 
 import Button from "@/components/Button";
 import { CooperativeLearnMoreSection } from "@/queries/cooperative/member-section";
-import Image from "next/image";
 
 const LearnMore: React.FC<CooperativeLearnMoreSection> = ({
   title,
   button,
   background,
 }) => {
   return (
-    <div className="relative w-full flex flex-col items-center justify-center mt-16 p-8 ">
+    <div className={
+      "relative w-full flex flex-col items-center justify-center mt-16 p-8"
+    }>
       <h2 className="text-primary-text text-xl mb-8 z-[1]">{title}</h2>
       <Link
         href={button.link.url}

frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx

@@ -1,77 +1,85 @@
-import Dropdown from "@/components/Dropdown";
-import { Reports } from "./ReportCard";
 import { useEffect, useMemo, useState } from "react";
+
+import Dropdown from "@/components/Dropdown";
 import { Report } from "@/queries/cooperative/report-section";
 
+import { Reports } from "./ReportCard";
+
 interface IDropdownContainer
   extends Pick<Report, "yearDropdownLabel" | "monthDropdownLabel"> {
   reports: Reports;
   setReportUrl: (url?: string) => void;
 }
 
+type IProcessedReports = Record<number, Array<string>>;
+
 const DropdownContainer: React.FC<IDropdownContainer> = ({
   reports,
   setReportUrl,
   yearDropdownLabel,
   monthDropdownLabel,
 }) => {
-  const [year, setYear] = useState<number>();
-  const [month, setMonth] = useState<string>();
-
-  const yearsSet = useMemo(
+  const processedReports = useMemo<IProcessedReports>(
     () =>
-      reports.reduce<Set<number>>((acc, current) => {
-        acc.add(current.year);
+      reports.reduce<IProcessedReports>((acc, report: Reports[number]) => {
+        const months = acc[report.year] ?? [];
+        if (report.month) {
+          acc[report.year] = [...months, report.month];
+        } else {
+          acc[report.year] = months;
+        }
         return acc;
-      }, new Set([])),
+      }, {}),
     [reports]
   );
 
   const years = useMemo(
     () =>
-      Array.from(new Set(yearsSet))
-        .sort((a, b) => a - b)
+      Object.keys(processedReports)
+        .map((key) => parseInt(key))
+        .sort((a, b) => b - a)
         .map((year) => ({
           key: year,
           value: year,
         })),
-    [yearsSet]
+    [processedReports]
   );
 
-  const monthsSet = useMemo(
-    () =>
-      reports.reduce<Set<string>>((acc, current) => {
-        if (current.month) {
-          acc.add(current.month);
-        }
-        return acc;
-      }, new Set([])),
-    [reports]
-  );
+  const firstYear = years[0].value;
+
+  const [year, setYear] = useState<number>(firstYear);
 
   const months = useMemo(
     () =>
-      Array.from(new Set(monthsSet))
+      processedReports[year]
         .sort((a, b) => monthOrder.indexOf(a) - monthOrder.indexOf(b))
         .map((month) => ({
           key: month,
           value: month,
         })),
-    [monthsSet]
+    [year, processedReports]
   );
 
-  const isMonthInfo = months.length !== 0;
+  const [month, setMonth] = useState<string>();
+
+  const isMonthInfo = months.length > 0;
+
+  useEffect(() => {
+    setMonth(undefined);
+  }, [year]);
 
   useEffect(() => {
     const selectedReport = reports.find(
       (report) =>
         (isMonthInfo ? report.month === month : true) && report.year === year
     );
     setReportUrl(selectedReport?.url);
-  }, [month, year]);
+  }, [isMonthInfo, month, year, reports, setReportUrl]);
 
   return (
-    <div className="flex flex-col md:flex-row gap-8 items-start md:items-center">
+    <div className={
+      "flex flex-col md:flex-row gap-8 items-start md:items-center"
+    }>
       <div className="flex gap-4 items-center">
         <label className="text-lg text-secondary-text">
           {yearDropdownLabel}
@@ -112,4 +120,5 @@ const monthOrder = [
   "November",
   "December",
 ];
+
 export default DropdownContainer;

frontend/src/components/Cooperative/ReportSection/ReportCard.tsx

@@ -1,10 +1,13 @@
+import { useState } from "react";
+
+import clsx from "clsx";
 import Image from "next/image";
+import Link from "next/link";
 
 import Button from "@/components/Button";
 import { Report } from "@/queries/cooperative/report-section";
-import { useState } from "react";
+
 import DropdownContainer from "./DropdownContainer";
-import Link from "next/link";
 
 export type Reports = {
   url: string;
@@ -27,7 +30,10 @@ const ReportCard: React.FC<IReportCard> = ({
   const [reportUrl, setReportUrl] = useState<string>();
 
   return (
-    <div className="bg-background-2 flex flex-col md:flex-row gap-16 pb-7 justify-between">
+    <div className={clsx(
+      "bg-background-2 md:pb-7",
+      "flex flex-col md:flex-row gap-16 justify-between"
+    )}>
       <div className="flex flex-col gap-8 items-start">
         <h2 className="text-2xl md:text-3xl font-medium text-primary-text">
           {title}
@@ -44,16 +50,23 @@ const ReportCard: React.FC<IReportCard> = ({
         />
 
         <Link href={reportUrl ?? ""} target="_blank" rel="noreferrer noopenner">
-          <Button variant="primary" className="text-background-1">
+          <Button
+            variant="primary"
+            className="text-background-1"
+            disabled={typeof reportUrl === "undefined"}
+          >
             {downloadButtonText}
           </Button>
         </Link>
       </div>
 
-      <div className="relative w-32 h-32 md:w-56 md:h-56 flex-shrink-0">
+      <div className={
+        "relative w-32 h-32 md:w-56 md:h-56 flex-shrink-0 hidden md:block"
+      }>
         <Image src={icon.url} alt={icon.name} fill className="object-contain" />
       </div>
     </div>
   );
 };
+
 export default ReportCard;

frontend/src/components/Cooperative/ReportSection/index.tsx

@@ -1,16 +1,20 @@
-import ReportCard from "./ReportCard";
+import { useCallback } from "react";
+
+import clsx from "clsx";
 
 import {
   CooperativePageReportQueryType,
   ReportType,
 } from "@/queries/cooperative/report-section";
 
+import ReportCard from "./ReportCard";
+
 interface IReportSection {
   reportsData: CooperativePageReportQueryType;
 }
 
 const ReportSection: React.FC<IReportSection> = ({ reportsData }) => {
-  const getReports = (reportType: ReportType) => {
+  const getReports = useCallback((reportType: ReportType) => {
     switch (reportType) {
       case "annual":
         return reportsData.annualReports;
@@ -19,9 +23,13 @@ const ReportSection: React.FC<IReportSection> = ({ reportsData }) => {
       default:
         return reportsData.treasuryReports;
     }
-  };
+  }, [reportsData]);
+
   return (
-    <div className="bg-background-2 py-12 lg:py-24 px-6 lg:px-32 flex flex-col gap-24">
+    <div className={clsx(
+      "bg-background-2 py-12 lg:py-24 px-6 lg:px-32",
+      "flex flex-col gap-12 md:gap-24"
+    )}>
       {reportsData.cooperativePageReportSection.reports.map((report, i) => (
         <ReportCard
           key={i}

frontend/src/components/Cooperative/hero.tsx

@@ -3,9 +3,8 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 
-import ExternalLink from "../ExternalLink";
-
 import Button from "@/components/Button";
+import ExternalLink from "@/components/ExternalLink";
 import { HeroQueryType } from "@/queries/cooperative/hero";
 
 interface IHero {
@@ -27,10 +26,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Button
-                variant="secondary"
-                className=" hover:!bg-primary-blue hover:!border-primary-blue hover:!text-background-2"
-              >
+              <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
             </Link>

frontend/src/components/Dropdown/DropdownItemButton.tsx

@@ -1,13 +1,6 @@
 import clsx from "clsx";
-import { DropdownItem } from ".";
 
-const dropwdownItemBaseStyle = clsx(
-  "w-full rounded-lg text-secondary-text text-left py-3 px-4"
-);
-const selectedStyle = clsx("!text-primary-blue bg-background-2");
-const dropdownItemHoverStyle = clsx(
-  "hover:text-primary-blue hover:bg-background-2 cursor-pointer"
-);
+import { DropdownItem } from ".";
 
 interface IDropdownItem {
   item: DropdownItem;
@@ -21,9 +14,11 @@ const DropdownItemButton: React.FC<IDropdownItem> = ({
 }) => (
   <button
     className={clsx(
-      dropwdownItemBaseStyle,
-      dropdownItemHoverStyle,
-      value === item.value ? selectedStyle : ""
+      "w-full rounded-lg text-left py-3 px-4",
+      value === item.value
+        ? "text-primary-blue bg-background-2"
+        : "text-secondary-text",
+      "hover:text-primary-blue hover:bg-background-2 cursor-pointer"
     )}
     onClick={() => handleClick(item.value)}
   >