feat: fetch demo video from CMS

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">

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";

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;
+};

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),
   };
 };