feat: use partner categories for grouping

Author: Thechi2000

app/src/components/PartnersList.tsx

@@ -1,31 +1,55 @@
 import DirectusImage from "./DirectusImage";
-import { locale, translate } from "@/locales";
+import { getTranslation } from "@/locales";
 import styles from "@/styles/PartnersList.module.scss";
-import { Partner } from "@/types/aliases";
+import { Partner, PartnerCategory } from "@/types/aliases";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-export default function PartnersList({ partners }: { partners: Partner[] }) {
-  if (partners.length == 0) {
-    return;
+function PartnerDisplay({ p }: { p: Partner }) {
+  return (
+    <Link href={p.link || ""} key={p.id}>
+      <DirectusImage img={p.logo} name={p.name} className={styles.logo} />
+    </Link>
+  );
+}
+
+function PartnerCategoryDisplay({
+  c,
+  p,
+}: {
+  c: PartnerCategory;
+  p: Partner[];
+}) {
+  const router = useRouter();
+  const entries = p
+    .filter((p) => Date.parse(p.end || "01/01/1970") > Date.now())
+    .map((p) => <PartnerDisplay key={p.id} p={p} />);
+
+  if (entries.length === 0) {
+    console.log("noooo");
+    return <></>;
   }
 
-  var list: any = [];
-  partners.forEach((p) => {
-    list.push(
-      <Link href={p.link || ""} key={p.id}>
-        <DirectusImage img={p.logo} name={p.name} className={styles.logo} />
-      </Link>
-    );
-  });
+  return (
+    <>
+      <h1 className="light">{getTranslation(c, router.locale).name}</h1>
+      <div className={styles.list}>{entries}</div>
+    </>
+  );
+}
+
+export default function PartnersList({
+  partners,
+}: {
+  partners: [PartnerCategory, Partner[]][];
+}) {
+  partners.sort((a, b) => (b[0].rank || Infinity) - (a[0].rank || Infinity));
 
-  var router = useRouter();
   return (
     <div className={styles.partnersList}>
-      <h1 className="light">
-        {translate("partners", locale(router), { capitalize: true })}{" "}
-      </h1>
-      <div className={styles.list}>{list}</div>
+      {partners.map((e) => (
+        <PartnerCategoryDisplay key={e[0].id} c={e[0]} p={e[1]} />
+      ))}
     </div>
   );
 }

app/src/pages/index.tsx

@@ -15,6 +15,7 @@ import {
   Member,
   News,
   Partner,
+  PartnerCategory,
   PublicFiles,
   SocialLink,
 } from "@/types/aliases";
@@ -28,6 +29,21 @@ export default function Home(
   const router = useRouter();
   const translation = getTranslation(props.association, router.locale);
 
+  var orderedPartners = props.partners.reduce(
+    (list: [PartnerCategory, Partner[]][], partner: Partner) => {
+      var entry = list.find(
+        (e) => e[0].rank === (partner.category as PartnerCategory).rank
+      );
+      if (entry) {
+        entry[1].push(partner);
+      } else {
+        list.push([partner.category as PartnerCategory, [partner]]);
+      }
+      return list;
+    },
+    []
+  );
+
   return (
     <>
       <div className={styles.divLogo}>
@@ -53,7 +69,7 @@ export default function Home(
         />
       </div>
 
-      <PartnersList partners={props.partners} />
+      <PartnersList partners={orderedPartners} />
 
       <AssociationDescription
         association={props.association}
@@ -84,7 +100,14 @@ export const getServerSideProps: GetServerSideProps<{
       partners: (await directus()
         .request(
           readItems("association_partners", {
-            fields: [{ partners_id: ["*"] }],
+            fields: [
+              {
+                partners_id: [
+                  "*",
+                  { category: ["*", { translations: ["*"] }] },
+                ],
+              },
+            ],
           })
         )
         .then((result) => result.map((p) => p.partners_id))) as Partner[],