MCSS-92: added sponsor page with new react hooks (#94)

Author: eruditeme

api/client.ts

@@ -7,12 +7,7 @@ import {
   UseQueryOptions,
 } from '@tanstack/react-query';
 
-import {
-  APITemplate,
-  ClientQueries,
-  InferHandlerInput,
-  QueryPaths,
-} from './types';
+import { APITemplate, ClientQueries, InferHandlerInput, QueryPaths } from './types';
 
 const validateApiError = () => {
   return (apiError: any) => {

api/schema.ts

@@ -1,30 +1,13 @@
 import { CategoryResponse, DataAttributes } from '../types';
-import { APIResponseAcademic } from '../types/Academics';
 import { APIResponseBlog } from '../types/Blogs';
 import { APIResponseEvent } from '../types/Events';
 import { MemberResponse } from '../types/Members';
-import { APIResponsePartner } from '../types/Partners';
+import { APIResponseSponsor } from '../types/Sponsors';
 
 import { CustomFetch } from './useFetch';
 
-const academics = (customFetch: CustomFetch) =>
-  ({
-    academicCategoriesList: async () => {
-      const res = await customFetch('CMS', 'academic-categories');
-      return res.data as DataAttributes<CategoryResponse>;
-    },
-    academicsList: async () => {
-      const res = await customFetch('CMS', 'academics?populate=*');
-      return res.data as APIResponseAcademic;
-    },
-  });
-
 const blogs = (customFetch: CustomFetch) =>
   ({
-    blogCategoriesList: async () => {
-      const res = await customFetch('CMS', 'blog-categories');
-      return res.data as DataAttributes<CategoryResponse>;
-    },
     blogsList: async () => {
       const res = await customFetch('CMS', 'blogs?populate=*');
       return res.data as APIResponseBlog;
@@ -33,43 +16,33 @@ const blogs = (customFetch: CustomFetch) =>
 
 const events = (customFetch: CustomFetch) =>
   ({
-    eventCategoriesList: async () => {
-      const res = await customFetch('CMS', 'event-categories');
-      return res.data as DataAttributes<CategoryResponse>;
-    },
     eventsList: async () => {
       const res = await customFetch('CMS', 'events?populate=*');
       return res.data as APIResponseEvent;
     },
   } as const);
 
-const members = (customFetch: CustomFetch) =>
-  ({
-    membersList: async () => {
-      const res = await customFetch('CMS', 'team-members?populate=*');
-      return res.data as DataAttributes<MemberResponse>;
-    },
-  });
+const members = (customFetch: CustomFetch) => ({
+  membersList: async () => {
+    const res = await customFetch('CMS', 'team-members?populate=*');
+    return res.data as DataAttributes<MemberResponse>;
+  },
+});
 
-const partners = (customFetch: CustomFetch) =>
+const sponsors = (customFetch: CustomFetch) =>
   ({
-    partnerCategoriesList: async () => {
-      const res = await customFetch('CMS', 'partner-categories');
-      return res.data as DataAttributes<CategoryResponse>;
+    sponsorsList: async () => {
+      const res = await customFetch('CMS', 'sponsors?populate=*');
+      return res.data as APIResponseSponsor;
     },
-    partnersList: async () => {
-      const res = await customFetch('CMS', 'partners?populate=*');
-      return res.data as APIResponsePartner;
-    },
-  });
+  } as const);
 
 const config = (customFetch: CustomFetch) =>
   ({
-    ...academics(customFetch),
     ...blogs(customFetch),
     ...events(customFetch),
     ...members(customFetch),
-    ...partners(customFetch),
+    ...sponsors(customFetch),
   } as const);
 
 export default config;

components/Academics/AcademicHighlightSection.tsx

@@ -15,6 +15,7 @@ import { getAllEvents } from '@store/eventSlice';
 import { useAppDispatch, useAppSelector } from '@store/hooks';
 import { useIsMobile } from '@utils/hooks';
 import classNames from 'classnames';
+import useSponsors from 'hooks/useSponsors';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import _ from 'underscore';
@@ -40,15 +41,23 @@ const NavBar: FC = () => {
   const router = useRouter();
   const { events } = useAppSelector((state) => state.events);
   const { blogs } = useAppSelector((state) => state.blogs);
+  const { data: sponsors } = useSponsors();
   const links = [
     { label: 'Events', href: '/Events' },
     { label: 'Blogs', href: '/Blogs' },
+    { label: 'Sponsors', href: '/Sponsors' },
   ];
-  const searchBarWhiteList = ['/Events', '/Blogs'];
+  const searchBarWhiteList = ['/Events', '/Blogs', '/Sponsors'];
   const partialRouteMatch = searchBarWhiteList.some((route) => router.pathname.includes(route));
   const options = [
     ...Object.entries(events).map(([id, { title }]) => ({ label: `Event: ${title}`, value: id })),
     ...Object.entries(blogs).map(([id, { title }]) => ({ label: `Blog: ${title}`, value: id })),
+    ...(sponsors?.data
+      ? Object.entries(sponsors.data).map(([, { id, attributes }]) => ({
+        label: `Sponsors: ${attributes.title}`,
+        value: id.toString(),
+      }))
+      : []),
   ];
 
   useEffect(() => {
@@ -107,6 +116,8 @@ const NavBar: FC = () => {
                 router.push(`/Events/${selectedOption.value}`);
               } else if (selectedOption?.label.includes('Blog:')) {
                 router.push(`/Blogs/${selectedOption.value}`);
+              } else if (selectedOption?.label.includes('Sponsors:')) {
+                router.push(`/Sponsors/${selectedOption.value}`);
               }
             }}
             options={options}