Various improvements and member document support

Ackuq · Oct 1, 2023 · ee1847c · ee1847c
1 parent 264b2b0
commit ee1847c
Show file tree

Hide file tree

Showing 32 changed files with 387 additions and 86 deletions.
diff --git a/apps/web/app/api/member/[id]/documents/[page]/route.ts b/apps/web/app/api/member/[id]/documents/[page]/route.ts
@@ -0,0 +1,22 @@
+import getMemberDocuments from "@lib/api/documents/get-member-documents";
+
+interface Payload {
+  params: {
+    id: string;
+    page: string;
+  };
+}
+
+export async function GET(
+  _request: Request,
+  { params: { id, page } }: Payload,
+) {
+  const pageInt = parseInt(page);
+
+  if (Number.isNaN(pageInt)) {
+    return new Response("Invalid page", { status: 400 });
+  }
+
+  const memberDocuments = await getMemberDocuments({ id, page: pageInt });
+  return Response.json(memberDocuments);
+}
diff --git a/apps/web/app/cookie-policy/page.tsx b/apps/web/app/cookie-policy/page.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import { CodeBracketIcon } from "@heroicons/react/24/solid";

diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { PrimaryButton } from "@components/button";
-import { Card } from "@components/card";
+import { PrimaryButton } from "@components/common/button";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import { ExclamationCircleIcon } from "@heroicons/react/24/solid";

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -5,6 +5,7 @@ import Head from "./head";
 import Footer from "./footer";
 import Header from "@components/header/header";
 import { ThemeProvider } from "@components/providers/theme-provider";
+import { twMerge } from "tailwind-merge";
 
 const roboto = Roboto({
   weight: ["300", "400", "500", "700"],
@@ -18,7 +19,10 @@ export default function RootLayout({ children }: PropsWithChildren) {
     <html lang="sv" suppressHydrationWarning>
       <Head />
       <body
-        className={`${roboto.className} bg-background-light dark:bg-background-dark text-font-light dark:text-font-dark flex min-h-screen flex-col shadow-sm`}
+        className={twMerge(
+          roboto.className,
+          "bg-background-light dark:bg-background-dark text-font-light dark:text-font-dark flex min-h-screen flex-col",
+        )}
       >
         <ThemeProvider attribute="class">
           <Header />

diff --git a/apps/web/app/ledamot/[id]/biography-entry.tsx b/apps/web/app/ledamot/[id]/biography-entry.tsx
@@ -25,9 +25,9 @@ export default function BiographyEntry({ information }: Props) {
         {information.code}
         <ChevronDownIcon className="h-4 w-4 transition-transform group-aria-[expanded=true]:rotate-180" />
       </div>
-      <div className="px-4 pb-6 pt-2 group-aria-[expanded=false]:hidden">
+      <p className="px-4 pb-6 pt-2 group-aria-[expanded=false]:hidden">
         {information.content}
-      </div>
+      </p>
     </button>
   );
 }
diff --git a/apps/web/app/ledamot/[id]/biography.tsx b/apps/web/app/ledamot/[id]/biography.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import type { Information } from "@lib/api/member/types";
 import BiographyEntry from "./biography-entry";
 

diff --git a/apps/web/app/ledamot/[id]/documents.tsx b/apps/web/app/ledamot/[id]/documents.tsx
@@ -1,9 +1,32 @@
 "use client";
-import type { MemberDocuments } from "@lib/api/member/types";
-import { useState } from "react";
+import { Card, CommitteeHeader } from "@components/common/card";
+import Pagination from "@components/common/pagination";
+import type { MemberDocument, MemberDocuments } from "@lib/api/member/types";
+import { routes } from "@lib/navigation";
+import Link from "next/link";
+import { useRef, useState } from "react";
 
-function Document() {
-  return <div>hej</div>;
+interface DocumentProps {
+  document: MemberDocument;
+}
+
+function Document({ document }: DocumentProps) {
+  return (
+    <Link href={routes.document(document.id)}>
+      <Card className="p-0 transition-opacity hover:opacity-75 dark:shadow-slate-900">
+        <CommitteeHeader committee={document.committee} />
+        <div className="p-4 ">
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {document.title}
+          </p>
+          <p className="pb-1">{document.altTitle}</p>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {document.subtitle}
+          </p>
+        </div>
+      </Card>
+    </Link>
+  );
 }
 
 interface Props {
@@ -12,13 +35,39 @@ interface Props {
 }
 
 export default function Documents({ initialDocuments, memberId }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [page, setPage] = useState(1);
   const [documents, setDocuments] = useState(initialDocuments.documents);
 
+  async function changePage(page: number) {
+    const response = await fetch(
+      `${window.location.origin}${routes.api.memberDocument(memberId, page)}`,
+      { next: { revalidate: 60 * 60 * 24 } },
+    );
+    const newDocuments: MemberDocuments = await response.json();
+    setPage(page);
+    setDocuments(newDocuments.documents);
+    containerRef.current?.scrollIntoView();
+  }
+
   return (
-    <>
+    <div
+      className="scroll-mt-header-with-margin sm:scroll-mt-header-sm-with-margin m-4 grid gap-4"
+      ref={containerRef}
+    >
+      <Pagination
+        current={page}
+        total={initialDocuments.pages}
+        onChange={changePage}
+      />
       {documents.map((document) => (
-        <div key={document.id}>{document.altTitle}</div>
+        <Document key={document.id} document={document} />
       ))}
-    </>
+      <Pagination
+        current={page}
+        total={initialDocuments.pages}
+        onChange={changePage}
+      />
+    </div>
   );
 }
diff --git a/apps/web/app/ledamot/[id]/statistics.tsx b/apps/web/app/ledamot/[id]/statistics.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import type { MemberDetailedResponse } from "@lib/api/member/types";
 import { twMerge } from "tailwind-merge";
 

diff --git a/apps/web/app/ledamot/[id]/tabs.tsx b/apps/web/app/ledamot/[id]/tabs.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import type { MemberDocuments } from "@lib/api/member/types";
 import { useState } from "react";
 import Documents from "./documents";

diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import { ExclamationCircleIcon } from "@heroicons/react/24/solid";

diff --git a/apps/web/app/om-oss/page.tsx b/apps/web/app/om-oss/page.tsx
@@ -1,6 +1,6 @@
 import { githubFrontend, githubProfile, linkedIn } from "@lib/socials";
 import PageTitle from "@components/common/page-title";
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import React from "react";
 import { InformationCircleIcon } from "@heroicons/react/24/solid";
 import ExternalLink from "@components/common/external-link";

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,9 +1,10 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Typed from "@components/common/typed";
 import Link from "next/link";
 import { routes } from "@lib/navigation";
 import PageTitle from "@components/common/page-title";
 import Container from "@components/common/container";
+import { twMerge } from "tailwind-merge";
 
 export const metadata = {
   title: "Partiguiden | Rösta rätt",
@@ -53,7 +54,10 @@ export default function IndexPage() {
               <Link
                 key={subject.id}
                 href={routes.standpoint(subject.id)}
-                className="bg-background-elevated-light dark:bg-background-elevated-dark-200 rounded py-3 shadow-md transition-opacity hover:opacity-70"
+                className={twMerge(
+                  "bg-background-elevated-light rounded py-3 shadow-md transition-opacity hover:opacity-70",
+                  "dark:bg-background-elevated-dark-200 dark:shadow-slate-900",
+                )}
               >
                 {subject.name}
               </Link>

diff --git a/apps/web/app/parti/[party]/page.tsx b/apps/web/app/parti/[party]/page.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import { Divider } from "@components/common/divider";
 import ExternalLink from "@components/common/external-link";

diff --git a/apps/web/app/standpunkter/[id]/party-standpoints.tsx b/apps/web/app/standpunkter/[id]/party-standpoints.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import { ChevronUpIcon } from "@heroicons/react/24/solid";
 import { dateString } from "@lib/dates";
 import {
-  backgroundHover,
-  borderBottom,
-  marker,
-  textColor,
+  partyBackgroundHover,
+  partyBorderBottom,
+  partyMarker,
+  partyTextColor,
 } from "@lib/styles/party";
 import type { Standpoint } from "@partiguiden/party-data/types";
 import type { Party } from "@partiguiden/party-data/types";
@@ -34,13 +34,14 @@ export default function PartyStandpoints({
     <>
       <button
         onClick={handleClick}
-        className={`${borderBottom[party]} flex w-full items-center justify-between border-b-2 py-3 pl-2 text-start text-3xl font-light`}
+        aria-expanded={visible ? "true" : "false"}
+        className={twMerge(
+          partyBorderBottom[party],
+          "group flex w-full items-center justify-between border-b-2 py-3 pl-2 text-start text-3xl font-light",
+        )}
       >
         {partyNames[party]}
-        <ChevronUpIcon
-          data-active={visible ? "true" : "false"}
-          className="mr-2 h-6 w-6 transition-transform duration-300 data-[active=true]:rotate-180"
-        />
+        <ChevronUpIcon className="mr-2 h-6 w-6 transition-transform duration-300 group-aria-[expanded=true]:rotate-180" />
       </button>
 
       {visible && (
@@ -49,7 +50,9 @@ export default function PartyStandpoints({
             <Card key={standpoint.url} className="grid gap-5">
               <p className="text-2xl">{standpoint.title}</p>
               {standpoint.opinions.length > 0 ? (
-                <ul className={`${marker[party]} ml-4 grid list-disc gap-3`}>
+                <ul
+                  className={`${partyMarker[party]} ml-4 grid list-disc gap-3`}
+                >
                   {standpoint.opinions.map((opinion) => (
                     <li key={opinion}>{opinion}</li>
                   ))}
@@ -61,8 +64,8 @@ export default function PartyStandpoints({
                 <a
                   className={twMerge(
                     "whitespace-nowrap rounded p-2 text-sm font-medium uppercase transition-colors",
-                    textColor[party],
-                    backgroundHover[party],
+                    partyTextColor[party],
+                    partyBackgroundHover[party],
                   )}
                   target="_blank"
                   rel="noopener noreferrer"

diff --git a/apps/web/components/card.tsx b/apps/web/components/card.tsx
diff --git a/apps/web/components/common/breadcrumbs.tsx b/apps/web/components/common/breadcrumbs.tsx
@@ -17,7 +17,7 @@ export interface BreadcrumbsProps {
 
 export default function Breadcrumbs({ links, current }: BreadcrumbsProps) {
   return (
-    <nav aria-label="Breadcrumbs">
+    <nav aria-label="Brödsmulor">
       <ol className="sm:text-md inline-flex flex-wrap items-center gap-1 text-sm text-slate-700 dark:text-slate-300 ">
         <li>
           <Link

diff --git a/apps/web/components/button.tsx → apps/web/components/common/button.tsx b/apps/web/components/button.tsx → apps/web/components/common/button.tsx
diff --git a/apps/web/components/common/card.tsx b/apps/web/components/common/card.tsx
@@ -0,0 +1,52 @@
+import { committeeInfo, type Committee } from "@lib/committes";
+import { committeeBackground } from "@lib/styles/committees";
+import { twMerge } from "tailwind-merge";
+
+type CardHeaderProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+export function CardHeader({ children, className }: CardHeaderProps) {
+  return (
+    <div className={twMerge("w-full px-4 py-1", className)}>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+type CommitteeHeaderProps = {
+  committee?: Committee | null;
+};
+
+export function CommitteeHeader({ committee }: CommitteeHeaderProps) {
+  if (!committee) {
+    return;
+  }
+  const info = committeeInfo[committee];
+  return (
+    <CardHeader
+      className={twMerge("text-font-dark", committeeBackground[committee])}
+    >
+      {info.desc}
+    </CardHeader>
+  );
+}
+
+type BaseCardProps = React.PropsWithChildren<
+  React.HTMLAttributes<HTMLDivElement>
+>;
+
+export function Card({ children, className = "", ...props }: BaseCardProps) {
+  return (
+    <div
+      className={twMerge(
+        "overflow-hidden rounded bg-white p-4 shadow-md",
+        "dark:bg-background-elevated-dark",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}