feat: add members list to commission page

Author: NoeTerrier

app/src/components/MembersList.tsx

@@ -0,0 +1,27 @@
+import Card from "./Card";
+import { locale, translate } from "@/locales";
+import styles from "@/styles/MembersList.module.scss";
+import { AssociationMembership, Member } from "@/types/aliases";
+import { useRouter } from "next/router";
+
+export default function MembersList(props: {
+  membership: AssociationMembership & { member: Member }[];
+}) {
+  var router = useRouter();
+
+  return (
+    <div className={styles.membersList}>
+      <h1>{translate("committee", locale(router), { capitalize: true })}</h1>
+      <div>
+        {props.membership.map((m) => (
+          <Card
+            size="small"
+            key={(m as any).id}
+            member={m.member}
+            membership={m}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

app/src/pages/commissions/[slug].tsx

@@ -1,8 +1,14 @@
 import DirectusImage from "@/components/DirectusImage";
+import MembersList from "@/components/MembersList";
 import SocialsList from "@/components/SocialsList";
 import { directus, populateLayoutProps } from "@/directus";
 import { getTranslation, locale, queryTranslations } from "@/locales";
-import { Commission, SocialLink } from "@/types/aliases";
+import {
+  AssociationMembership,
+  Commission,
+  Member,
+  SocialLink,
+} from "@/types/aliases";
 import { readItems } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
@@ -24,6 +30,7 @@ export default function Page(
         <Markdown className="text">{translation.description}</Markdown>
 
         <SocialsList socials={props.socialLinks} />
+        <MembersList membership={props.members} />
       </div>
     </div>
   );
@@ -32,6 +39,7 @@ export default function Page(
 export const getServerSideProps: GetServerSideProps<{
   commission: Commission;
   socialLinks: SocialLink[];
+  members: (AssociationMembership & { member: Member })[];
 }> = populateLayoutProps(async (context) => {
   if (typeof context.params?.slug !== "string") {
     console.log(typeof context.params?.slug);
@@ -60,10 +68,26 @@ export const getServerSideProps: GetServerSideProps<{
     )
     .then((result) => result.map((s) => s.social_links_id))) as SocialLink[];
 
+  let members = (await directus().request(
+    readItems("commission_memberships", {
+      fields: [
+        "*",
+        { member: ["*"] },
+        //@ts-ignore
+        { translations: ["*"] },
+      ],
+      filter: {
+        level: { _eq: "committee" },
+        commission: { _eq: commission.id },
+      },
+    })
+  )) as (AssociationMembership & { member: Member })[];
+
   return {
     props: {
       commission: commission,
       socialLinks: socialLinks,
+      members: members,
     },
   };
 });

app/src/pages/index.tsx

@@ -1,16 +1,11 @@
 import PreviewImage from "@/assets/galleryPreview.png";
 import AssociationDescription from "@/components/AssociationDescription";
-import Card from "@/components/Card";
 import DirectusImage from "@/components/DirectusImage";
+import MembersList from "@/components/MembersList";
 import NewsCard from "@/components/NewsCard";
 import PartnersList from "@/components/PartnersList";
 import { directus, populateLayoutProps } from "@/directus";
-import {
-  getTranslation,
-  locale,
-  queryTranslations,
-  translate,
-} from "@/locales";
+import { getTranslation, queryTranslations } from "@/locales";
 import styles from "@/styles/Homepage.module.scss";
 import {
   Association,
@@ -59,19 +54,7 @@ export default function Home(
         publicFiles={props.publicFiles}
       />
 
-      <div className={styles.cardList}>
-        <h1>{translate("committee", locale(router), { capitalize: true })}</h1>
-        <div>
-          {props.committee.map((m) => (
-            <Card
-              size="small"
-              key={(m as any).id}
-              member={m.member}
-              membership={m}
-            />
-          ))}
-        </div>
-      </div>
+      <MembersList membership={props.committee} />
     </>
   );
 }

app/src/styles/Homepage.module.scss

@@ -66,27 +66,3 @@
     padding-right: 5rem;
   }
 }
-
-.cardList {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1em;
-  margin-top: 5rem;
-
-  border-radius: 3rem;
-  background-color: variables.$white-background-color;
-  width: 80%;
-
-  @media (max-width: 800px) {
-    width: 100%;
-  }
-
-  > div {
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    align-items: center;
-    justify-items: center;
-    padding: 2rem;
-  }
-}

app/src/styles/MembersList.module.scss

@@ -0,0 +1,25 @@
+@use "./utilities/variables";
+
+.membersList {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1em;
+  margin-top: 5rem;
+
+  border-radius: 3rem;
+  background-color: variables.$white-background-color;
+  width: 80%;
+
+  @media (max-width: 800px) {
+    width: 100%;
+  }
+
+  > div {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    align-items: center;
+    justify-items: center;
+    padding: 2rem;
+  }
+}

app/src/styles/globals.scss

@@ -129,19 +129,3 @@ h4 {
     color: variables.$title-color;
   }
 }
-
-.pageList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 3rem;
-
-  width: fit-content;
-
-  > :first-child {
-    flex-basis: 100%;
-    display: flex;
-    justify-content: center;
-  }
-}