From 09ef28c5078af4ade7e2fe5979e26326a63ca96c Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Mon, 23 Oct 2023 11:09:12 +0200
Subject: [PATCH] feat: fetch demo video from CMS

---
 .../Sections/DemoSection/DemoSection.tsx      | 16 +++++++++++-
 frontend/lib/api/cms/config.ts                |  1 +
 frontend/lib/api/cms/demoVideo.ts             | 25 +++++++++++++++++++
 frontend/lib/api/cms/useCmsApi.ts             |  2 ++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 frontend/lib/api/cms/demoVideo.ts

diff --git a/frontend/app/(home)/components/Sections/DemoSection/DemoSection.tsx b/frontend/app/(home)/components/Sections/DemoSection/DemoSection.tsx
index 847d5291ca67..002b05be7172 100644
--- a/frontend/app/(home)/components/Sections/DemoSection/DemoSection.tsx
+++ b/frontend/app/(home)/components/Sections/DemoSection/DemoSection.tsx
@@ -1,19 +1,33 @@
+import { useQuery } from "@tanstack/react-query";
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
 import { LuChevronRight } from "react-icons/lu";
 
+import { DEMO_VIDEO_DATA_KEY } from "@/lib/api/cms/config";
+import { useCmsApi } from "@/lib/api/cms/useCmsApi";
 import Button from "@/lib/components/ui/Button";
+import Spinner from "@/lib/components/ui/Spinner";
 
 import { VideoPlayer } from "./components/VideoPlayer";
 
 export const DemoSection = (): JSX.Element => {
   const { t } = useTranslation("home", { keyPrefix: "demo" });
+  const { getDemoVideoUrl } = useCmsApi();
+
+  const { data: demoVideoUrl } = useQuery({
+    queryKey: [DEMO_VIDEO_DATA_KEY],
+    queryFn: getDemoVideoUrl,
+  });
 
   return (
     <div className="sm:min-h-[calc(100vh-250px)] flex flex-col items-center justify-center gap-10">
       <h2 className="text-center text-3xl font-semibold mb-5">{t("title")}</h2>
       <div className="max-w-4xl">
-        <VideoPlayer videoSrc="https://user-images.githubusercontent.com/19614572/239713902-a6463b73-76c7-4bc0-978d-70562dca71f5.mp4" />
+        {demoVideoUrl !== undefined ? (
+          <VideoPlayer videoSrc={demoVideoUrl} />
+        ) : (
+          <Spinner />
+        )}
       </div>
       <Link href="/signup">
         <Button className="mt-2 rounded-full">
diff --git a/frontend/lib/api/cms/config.ts b/frontend/lib/api/cms/config.ts
index 6cd26632d8ba..b0dfd0d57177 100644
--- a/frontend/lib/api/cms/config.ts
+++ b/frontend/lib/api/cms/config.ts
@@ -1,2 +1,3 @@
 export const TESTIMONIALS_DATA_KEY = "testimonials";
 export const USE_CASES_DATA_KEY = "useCases";
+export const DEMO_VIDEO_DATA_KEY = "demoVideo";
diff --git a/frontend/lib/api/cms/demoVideo.ts b/frontend/lib/api/cms/demoVideo.ts
new file mode 100644
index 000000000000..a5d70a8126de
--- /dev/null
+++ b/frontend/lib/api/cms/demoVideo.ts
@@ -0,0 +1,25 @@
+import { AxiosInstance } from "axios";
+
+type CmsVideo = {
+  data: {
+    attributes: {
+      Video: {
+        data: {
+          attributes: {
+            url: string;
+          };
+        };
+      };
+    };
+  };
+};
+
+export const getDemoVideoUrl = async (
+  axiosInstance: AxiosInstance
+): Promise<string> => {
+  const response = await axiosInstance.get<CmsVideo>(
+    "/api/demo-video?populate=Video"
+  );
+
+  return response.data.data.attributes.Video.data.attributes.url;
+};
diff --git a/frontend/lib/api/cms/useCmsApi.ts b/frontend/lib/api/cms/useCmsApi.ts
index f00f0326f56a..6b75a5c3588b 100644
--- a/frontend/lib/api/cms/useCmsApi.ts
+++ b/frontend/lib/api/cms/useCmsApi.ts
@@ -2,6 +2,7 @@ import axios from "axios";
 
 import { DEFAULT_CMS_URL } from "@/lib/config/CONSTANTS";
 
+import { getDemoVideoUrl } from "./demoVideo";
 import { getTestimonials } from "./testimonials";
 import { getUseCases } from "./useCases";
 
@@ -14,5 +15,6 @@ export const useCmsApi = () => {
   return {
     getTestimonials: () => getTestimonials(axiosInstance),
     getUseCases: () => getUseCases(axiosInstance),
+    getDemoVideoUrl: () => getDemoVideoUrl(axiosInstance),
   };
 };