Update: UseContext to ftch navMap Data

src/app/api/website/route.ts → src/app/api/website/navigation-map/route.ts

@@ -1,12 +1,11 @@
+import { NavMap } from "@datatypes/NavMap";
 import { NextRequest, NextResponse } from "next/server";
 
-// I want to use this path to store the navmap of the website and in a get request, return the navmap
-
 export async function GET(req: NextRequest) {
-  const navmap = [
+  const navMap: NavMap[] = [
     {
       title: 'Business',
-      videoUrl:   '/media/videos/navMenu/business.webm',
+      videoUrl: '/videos/navmenu/business.webm',
       items: [
         {
           title: 'About Us',
@@ -28,7 +27,7 @@ export async function GET(req: NextRequest) {
     },
     {
       title: 'Media Network',
-      videoUrl:   '/media/videos/navMenu/media-network.webm',
+      videoUrl: '/videos/navmenu/media-network.webm',
       items: [
         {
           title: 'Business and Brands',
@@ -50,7 +49,7 @@ export async function GET(req: NextRequest) {
     },
     {
       title: 'Education & Teaching',
-      videoUrl:   '/media/videos/navMenu/education-and-teaching.webm',
+      videoUrl: '/videos/navmenu/education-and-teaching.webm',
       items: [
         {
           title: 'Resources',
@@ -68,7 +67,7 @@ export async function GET(req: NextRequest) {
     },
     {
       title: 'Collaborators',
-      videoUrl:   '/media/videos/navMenu/collaborators.webm',
+      videoUrl: '/videos/navmenu/collaborators.webm',
       items: [
         {
           title: 'Explorers',
@@ -82,7 +81,7 @@ export async function GET(req: NextRequest) {
     },
     {
       title: 'Partners',
-      videoUrl:   '/media/videos/navMenu/partners.webm',
+      videoUrl: '/videos/navmenu/partners.webm',
       items: [
         {
           title: 'Corporate & Foundations',
@@ -96,7 +95,7 @@ export async function GET(req: NextRequest) {
     },
     {
       title: 'Commercial',
-      videoUrl:   '/media/videos/navMenu/commercial.webm',
+      videoUrl: '/videos/navmenu/commercial.webm',
       items: [
         {
           title: 'Advertise with Us',
@@ -113,6 +112,6 @@ export async function GET(req: NextRequest) {
       ],
     },
   ];
-  
-  return NextResponse.json(navmap);
+
+  return NextResponse.json(navMap);
 };

src/components/navigation/NavMenu/Megamenu/index.tsx

@@ -1,15 +1,15 @@
 import React, { Fragment } from 'react';
-import menuItems from './menuItems';
 import { styled } from '@mui/material';
 import NavGropus from './NavGroups';
 import { MegamenuStateProvider } from '@helpers/MegamenuStateProvider';
+import { NavMap } from '@datatypes/NavMap';
+import { useNavMapContext } from '@helpers/NavMapProvider';
 
 interface MegamenuSectionProps extends React.HTMLAttributes<HTMLSelectElement> {
-  children: React.ReactNode;
-  numberOfItems?: number;
+  children?: React.ReactNode;
 };
 
-const MegamenuSection = styled('section')<MegamenuSectionProps>(({ theme, numberOfItems }) => ({
+const MegamenuSection = styled('section')<MegamenuSectionProps>(({ theme }) => ({
   gridColumn: '1 / 25',
   gridRow: '3 / 19',
   zIndex: theme.Shadows.high.zIndex,
@@ -47,10 +47,11 @@ const MegamenuSection = styled('section')<MegamenuSectionProps>(({ theme, number
 }));
 
 const Megamenu = () => {
+  const { data } = useNavMapContext();
   return (
     <MegamenuSection>
       <MegamenuStateProvider>
-        {menuItems.map((item, index) => (
+        {data?.map((item, index) => (
           <Fragment key={index}>
             <NavGropus
               index={index}

src/containers/Chatak/index.tsx

@@ -10,18 +10,18 @@ const Chatak: React.FC<ChatakProps> = ({
   countDown = 1000,
   transitionTime = 1000,
 }) => {
-  const [data, setData] = React.useState<Darshan[]>();
-
+  const [data, setData] = React.useState<Darshan[]>({} as Darshan[]);
+
+  const fetchData = React.useCallback(async () => {
+    const response = await fetch('/api/website/bharat-darshan');
+    const data = await response.json();
+    setData(data);
+  }, []);
+
   React.useEffect(() => {
-    const fetchData = async () => {
-      const response = await fetch('/api/website/bharat-darshan');
-      const data = await response.json();
-      setData(data);
-    };
     fetchData();
-  }, []);
+  }, [fetchData]);
 
-  console.log(data);
   return (
     <div>Chatak</div>
   )

src/containers/Footer/index.tsx

@@ -7,7 +7,7 @@ const BlankTop = styled(Box)(({ theme }) => ({
   height: theme.Heights.header.default,
   width: '50%',
   marginTop: theme.Spaces.xs,
-  borderBottom: '1.5px solid ' + theme.palette.secondary.dark,
+  borderBottom: '3px solid ' + theme.palette.secondary.dark,
 }));
 
 const FooterBox = styled(Box)(({ theme }) => ({

src/datatypes/NavMap.d.ts

@@ -0,0 +1,10 @@
+export type NavItem = {
+  title: string;
+  link: string;
+};
+
+export type NavMap = {
+  title: string;
+  videoUrl: string;
+  items: NavItem[];
+};

src/helpers/NavMapProvider.tsx

@@ -0,0 +1,37 @@
+import { NavMap } from '@datatypes/NavMap';
+import React from 'react';
+
+interface NavMapContextValue {
+  data?: NavMap[];
+  fetchData: () => Promise<void>;
+}
+
+export const NavMapContext = React.createContext<NavMapContextValue>({
+  fetchData: async () => {},
+});
+
+interface NavMapProviderProps {
+  children: React.ReactNode;
+}
+
+export const NavMapProvider: React.FC<NavMapProviderProps> = ({ children }) => {
+  const [data, setData] = React.useState<NavMap[]>();
+
+  const fetchData = React.useCallback(async () => {
+    const response = await fetch('/api/website/navigation-map');
+    const data = await response.json();
+    setData(data);
+  }, []);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <NavMapContext.Provider value={{ data, fetchData }}>
+      {children}
+    </NavMapContext.Provider>
+  );
+};
+
+export const useNavMapContext = () => React.useContext(NavMapContext);

src/layouts/MainLayout.tsx

@@ -5,6 +5,7 @@ import Navbar from '@components/navigation/NavBar';
 import NavMenu from '@components/navigation/NavMenu';
 import { styled } from '@mui/material';
 import Footer from '@containers/Footer';
+import { NavMapProvider } from '@helpers/NavMapProvider';
 
 const StyledMain = styled('main')<MainLayoutProps>(({ theme }) => ({
   width: '100%',
@@ -13,14 +14,16 @@ const StyledMain = styled('main')<MainLayoutProps>(({ theme }) => ({
 
 const MainLayout: React.FC<MainLayoutProps> = ({ children, ...props }) => {
   return (
-    <NavigationMenuStateProvider>
-      <Navbar />
-      <NavMenu />
-      <StyledMain {...props}>
-        {children}
-      </StyledMain>
-      <Footer />
-    </NavigationMenuStateProvider>
+    <NavMapProvider>
+      <NavigationMenuStateProvider>
+        <Navbar />
+        <NavMenu />
+        <StyledMain {...props}>
+          {children}
+        </StyledMain>
+        <Footer />
+      </NavigationMenuStateProvider>
+    </NavMapProvider>
   )
 };