From b572885eae125a1b789201589e4ce22014cfed1f Mon Sep 17 00:00:00 2001
From: Ludovic Mermod <ludovic.mermod@epfl.ch>
Date: Tue, 9 Jan 2024 16:59:40 +0100
Subject: [PATCH] feat: add support for svg in StrapiImage

---
 app/package-lock.json              | 20 +++++++++++++++
 app/package.json                   |  1 +
 app/src/components/StrapiImage.tsx | 40 +++++++++++++++++++-----------
 app/src/pages/index.tsx            | 23 ++++++++++++++---
 4 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index dcb7f62..4d25970 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -12,6 +12,7 @@
         "next": "13.4.12",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-inlinesvg": "^4.1.0",
         "strapi-sdk-js": "^2.3.3"
       },
       "devDependencies": {
@@ -5895,6 +5896,25 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-from-dom": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
+      "integrity": "sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-inlinesvg": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.1.0.tgz",
+      "integrity": "sha512-S7kSE6ldKVpumEYTNXmCs4pAKoDzklP6TklI8oBx23fw8/+VBwO5X0M7/Ii0weieO1DqElUJg5EI8cq7zo5oPg==",
+      "dependencies": {
+        "react-from-dom": "^0.6.2"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/app/package.json b/app/package.json
index a60aa85..6bfc644 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,6 +13,7 @@
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-inlinesvg": "^4.1.0",
     "strapi-sdk-js": "^2.3.3"
   },
   "devDependencies": {
diff --git a/app/src/components/StrapiImage.tsx b/app/src/components/StrapiImage.tsx
index 2163eeb..4a82b22 100644
--- a/app/src/components/StrapiImage.tsx
+++ b/app/src/components/StrapiImage.tsx
@@ -1,29 +1,41 @@
 import { CLIENT_STRAPI_URL } from "@/strapi";
 import Image from "next/image";
+import SVG from "react-inlinesvg";
 
 /**
  * Display an Image fetched from the Strapi instance
  * @param img object returned by Strapi when querying the image.
- * @param size the prepared size of the image (one of "thumbnail", "small", "medium", "large", "origin")
+ * @param size the prepared size of the image (one of "thumbnail", "small", "medium", "large", "origin"). This parameter is ignored for SVGs
  */
 export default function StrapiImage({
   img,
   size,
+  className,
 }: {
   img: any;
   size: "thumbnail" | "small" | "medium" | "large" | "origin";
+  className?: string;
 }) {
-  let selectedFormat =
-    size === "origin" ? img.data.attributes : img.data.attributes.formats[size];
-  return (
-    <>
-      <Image
-        alt={selectedFormat.name}
-        src={selectedFormat.url}
-        width={selectedFormat.width}
-        height={selectedFormat.height}
-        loader={(p) => `${CLIENT_STRAPI_URL}${p.src}`}
-      />
-    </>
-  );
+  let image = img.data.attributes;
+
+  if (image.ext !== ".svg") {
+    let selectedFormat = size === "origin" ? image : image.formats[size];
+
+    return (
+      <>
+        <Image
+          alt={selectedFormat.name}
+          src={selectedFormat.url}
+          width={selectedFormat.width}
+          height={selectedFormat.height}
+          loader={(p) => `${CLIENT_STRAPI_URL}${p.src}`}
+          className={className}
+        />
+      </>
+    );
+  } else {
+    return (
+      <SVG src={`${CLIENT_STRAPI_URL}${image.url}`} className={className} />
+    );
+  }
 }
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index cb04057..32bc984 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -1,15 +1,32 @@
 import Background from "@/assets/background.svg";
-import CLICLogo from "@/assets/clic_color_info.svg";
 import NavigationBar from "@/components/NavigationBar";
+import StrapiImage from "@/components/StrapiImage";
+import strapi from "@/strapi";
+import { ApiAssociation } from "@/types/generated/contentTypes";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
-export default function Home() {
+export default function Home(props: { association: ApiAssociation }) {
   return (
     <div className="main">
       <NavigationBar />
       <div className="background">
-        <CLICLogo className="CLICLogo" />
+        <StrapiImage
+          img={props.association.attributes.logo}
+          size="medium"
+          className="CLICLogo"
+        />
         <Background className="background" />
       </div>
     </div>
   );
 }
+
+export const getServerSideProps: GetServerSideProps<
+  InferGetServerSidePropsType<typeof Home>
+> = async (context) => {
+  let association = await strapi.find<ApiAssociation>("association", {
+    populate: "*",
+  });
+  console.log(JSON.stringify(association));
+  return { props: { association: association.data } };
+};