feat: add hosts name in activity cards

Author: NoeTerrier

src/components/IcbdActivityCard.tsx

@@ -1,13 +1,15 @@
 import DirectusImage from "./DirectusImage";
 import { getTranslation, locale } from "@/locales";
 import styles from "@/styles/IcbdActivityCard.module.scss";
-import { ICBDActivity } from "@/types/aliases";
+import { ICBDActivity, ICBDSpeaker } from "@/types/aliases";
 import { useRouter } from "next/router";
 import Markdown from "react-markdown";
 
 export default function IcbdActivityCard(props: { activity: ICBDActivity }) {
   const router = useRouter();
 
+  const hosts = props.activity.hosts as ICBDSpeaker[];
+
   const translation = getTranslation(props.activity, locale(router));
   return (
     <div className={styles.content}>
@@ -23,6 +25,19 @@ export default function IcbdActivityCard(props: { activity: ICBDActivity }) {
       <Markdown className={styles.description}>
         {translation.description}
       </Markdown>
+      {hosts.length != 0 ? (
+        <p className={styles.hosts}>
+          {"⦿ " +
+            hosts
+              .map((s: ICBDSpeaker) => {
+                let speaker = s.icbd_speakers_id;
+                return `${speaker.first_name} ${speaker.last_name}`;
+              })
+              .join(" - ")}
+        </p>
+      ) : (
+        <></>
+      )}
     </div>
   );
 }

src/pages/icbd.tsx

@@ -241,11 +241,11 @@ export const getServerSideProps: GetServerSideProps<{
         readItems("icbd_activities", {
           fields: [
             "id",
-            "hosts",
             "icon",
             "timeslots",
             "color",
             { translations: ["*"] },
+            "hosts.icbd_speakers_id.*",
           ],
         })
       ),

src/styles/IcbdActivityCard.module.scss

@@ -33,6 +33,10 @@
     width: 100%;
   }
 
+  .hosts {
+    color: grey;
+  }
+
   @media (max-width: 1000px) {
     width: 65%;
   }