Merge pull request #37 from kleros/feat/cooperative-page

feat(frontend): cooperative-page

Author: alcercu

frontend/.husky/pre-commit

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

frontend/src/assets/svgs/icons/down-arrow-blue.svg

@@ -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/Button.tsx

@@ -0,0 +1,38 @@
+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";
+
+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"
+    }>
+      <h2 className="text-primary-text text-xl mb-8 z-[1]">{title}</h2>
+      <Link
+        href={button.link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="z-[1]"
+      >
+        <Button>
+          <span className="text-background-2">{button.text}</span>
+        </Button>
+      </Link>
+      <Image
+        src={background.url}
+        alt="Learn more Image Background"
+        fill
+        className="object-cover rounded-2xl"
+      />
+    </div>
+  );
+};
+export default LearnMore;

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

@@ -0,0 +1,29 @@
+import ExternalLink from "@/components/ExternalLink";
+import { CooperativePageMemberQueryType } from "@/queries/cooperative/member-section";
+import LearnMore from "./LearnMore";
+
+interface IMemberSection {
+  memberData: CooperativePageMemberQueryType["cooperativePageMemberSection"];
+}
+
+const MemberSection: React.FC<IMemberSection> = ({ memberData }) => {
+  return (
+    <div className="bg-background-1 py-12 lg:py-24 px-6 lg:px-32">
+      <h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-8">
+        {memberData.header}
+      </h1>
+      <p className="text-lg text-secondary-text mb-16">{memberData.subtitle}</p>
+      <LearnMore {...memberData.learnMoreSection} />
+      <h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-8 mt-16">
+        {memberData.secondaryHeader}
+      </h1>
+      <ExternalLink
+        url={memberData.arrowLink.link.url}
+        text={memberData.arrowLink.text}
+        className="!gap-2"
+      />
+    </div>
+  );
+};
+
+export default MemberSection;

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

@@ -0,0 +1,124 @@
+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 processedReports = useMemo<IProcessedReports>(
+    () =>
+      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;
+      }, {}),
+    [reports]
+  );
+
+  const years = useMemo(
+    () =>
+      Object.keys(processedReports)
+        .map((key) => parseInt(key))
+        .sort((a, b) => b - a)
+        .map((year) => ({
+          key: year,
+          value: year,
+        })),
+    [processedReports]
+  );
+
+  const firstYear = years[0].value;
+
+  const [year, setYear] = useState<number>(firstYear);
+
+  const months = useMemo(
+    () =>
+      processedReports[year]
+        .sort((a, b) => monthOrder.indexOf(a) - monthOrder.indexOf(b))
+        .map((month) => ({
+          key: month,
+          value: month,
+        })),
+    [year, processedReports]
+  );
+
+  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);
+  }, [isMonthInfo, month, year, reports, setReportUrl]);
+
+  return (
+    <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}
+        </label>
+        <Dropdown
+          items={years}
+          value={year}
+          onChange={(val) => setYear(Number(val))}
+        />
+      </div>
+      {isMonthInfo ? (
+        <div className="flex gap-4 items-center">
+          <label className="text-lg text-secondary-text">
+            {monthDropdownLabel}
+          </label>
+          <Dropdown
+            items={months}
+            value={month}
+            onChange={(val) => setMonth(val.toString())}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+const monthOrder = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export default DropdownContainer;

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

@@ -0,0 +1,72 @@
+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 DropdownContainer from "./DropdownContainer";
+
+export type Reports = {
+  url: string;
+  month?: string;
+  year: number;
+}[];
+
+interface IReportCard extends Report {
+  reports: Reports;
+}
+const ReportCard: React.FC<IReportCard> = ({
+  title,
+  subtitle,
+  icon,
+  reports,
+  yearDropdownLabel,
+  monthDropdownLabel,
+  downloadButtonText,
+}) => {
+  const [reportUrl, setReportUrl] = useState<string>();
+
+  return (
+    <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}
+        </h2>
+        <p className="text-lg text-secondary-text">{subtitle}</p>
+
+        <DropdownContainer
+          {...{
+            reports,
+            setReportUrl,
+            yearDropdownLabel,
+            monthDropdownLabel,
+          }}
+        />
+
+        <Link href={reportUrl ?? ""} target="_blank" rel="noreferrer noopenner">
+          <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 hidden md:block"
+      }>
+        <Image src={icon.url} alt={icon.name} fill className="object-contain" />
+      </div>
+    </div>
+  );
+};
+
+export default ReportCard;

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

@@ -0,0 +1,44 @@
+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 = useCallback((reportType: ReportType) => {
+    switch (reportType) {
+      case "annual":
+        return reportsData.annualReports;
+      case "risk":
+        return reportsData.riskReports;
+      default:
+        return reportsData.treasuryReports;
+    }
+  }, [reportsData]);
+
+  return (
+    <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}
+          {...report}
+          reports={getReports(report.reportType)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ReportSection;