feat: add socials to commission page

Author: NoeTerrier

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

@@ -1,7 +1,8 @@
 import DirectusImage from "@/components/DirectusImage";
+import SocialsList from "@/components/SocialsList";
 import { directus, populateLayoutProps } from "@/directus";
 import { getTranslation, locale, queryTranslations } from "@/locales";
-import { Commission } from "@/types/aliases";
+import { Commission, SocialLink } from "@/types/aliases";
 import { readItems } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
@@ -21,29 +22,48 @@ export default function Page(
         <h4>{translation.small_description}</h4>
 
         <Markdown className="text">{translation.description}</Markdown>
+
+        <SocialsList socials={props.socialLinks} />
       </div>
     </div>
   );
 }
 
 export const getServerSideProps: GetServerSideProps<{
   commission: Commission;
+  socialLinks: SocialLink[];
 }> = populateLayoutProps(async (context) => {
   if (typeof context.params?.slug !== "string") {
     console.log(typeof context.params?.slug);
     return { notFound: true };
   }
 
-  let commission = await directus().request(
+  let commissions = await directus().request(
     readItems("commissions", {
       filter: { slug: { _eq: context.params.slug } },
       ...queryTranslations,
     })
   );
 
-  if (commission.length != 1) {
+  if (commissions.length != 1) {
     return { notFound: true };
   }
 
-  return { props: { commission: commission[0] } };
+  let commission = commissions[0];
+
+  let socialLinks = (await directus()
+    .request(
+      readItems("commissions_social_links", {
+        fields: [{ social_links_id: ["*"] }],
+        filter: { commissions_id: { _eq: commission.id } },
+      })
+    )
+    .then((result) => result.map((s) => s.social_links_id))) as SocialLink[];
+
+  return {
+    props: {
+      commission: commission,
+      socialLinks: socialLinks,
+    },
+  };
 });

app/src/styles/NewsCard.module.scss

@@ -16,7 +16,7 @@
 
   .content {
     position: relative;
-    margin: 1em;
+    margin: 2rem;
     display: flex;
     flex-direction: column;
 
@@ -39,8 +39,8 @@
     .button {
       position: absolute;
       margin: 0;
-      bottom: 0.5em;
-      right: 0.5em;
+      bottom: 0;
+      right: 0;
       width: 2rem;
       height: 2rem;
       font-size: 2rem;

app/src/styles/globals.scss

@@ -103,8 +103,6 @@ a {
 }
 
 h1 {
-  color: variables.$dark-title-color;
-
   letter-spacing: 0.1em;
 
   margin: 0;
@@ -116,15 +114,22 @@ h1 {
   text-transform: uppercase;
   font-size: 50pt;
 
-  &.light {
-    color: variables.$title-color;
-  }
-
   @media (max-width: 800px) {
     font-size: 40pt;
   }
 }
 
+h1,
+h2,
+h3,
+h4 {
+  color: variables.$dark-title-color;
+
+  &.light {
+    color: variables.$title-color;
+  }
+}
+
 .pageList {
   display: flex;
   flex-direction: row;