Change api: alerts to navLinks (#706)

* Update api

* Fix export

* Update header with new api

* Fix api path

* Add api for event navlinks and general navlinks

* Update header

* Fix requested changes

packages/api/src/fetchEventNavLinks.ts

@@ -0,0 +1,25 @@
+import { ApiRequest, GetNavLinksResponse } from './types';
+
+export async function fetchEventNavLinks({
+  serverUrl,
+  eventId,
+}: ApiRequest<{ eventId: string }>): Promise<GetNavLinksResponse | null> {
+  try {
+    const response = await fetch(`${serverUrl}/api/events/${eventId}/nav-links`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP Error! Status: ${response.status}`);
+    }
+
+    const navLinks = (await response.json()) as { data: GetNavLinksResponse };
+    return navLinks.data;
+  } catch (error) {
+    console.error('Error fetching event nav links:', error);
+    return null;
+  }
+}

packages/api/src/fetchNavLinks.ts

@@ -0,0 +1,24 @@
+import { ApiRequest, GetNavLinksResponse } from './types';
+
+export async function fetchNavLinks({
+  serverUrl,
+}: ApiRequest<unknown>): Promise<GetNavLinksResponse | null> {
+  try {
+    const response = await fetch(`${serverUrl}/api/nav-links`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP Error! Status: ${response.status}`);
+    }
+
+    const navLinks = (await response.json()) as { data: GetNavLinksResponse };
+    return navLinks.data;
+  } catch (error) {
+    console.error('Error fetching nav links:', error);
+    return null;
+  }
+}

packages/api/src/index.ts

@@ -1,41 +1,42 @@
 export * from './deleteComment';
 export * from './deleteLike';
 export * from './deleteUsersToGroups';
-export * from './fetchAlerts';
 export * from './fetchCommentLikes';
 export * from './fetchComments';
 export * from './fetchCycle';
 export * from './fetchCycles';
 export * from './fetchEvent';
 export * from './fetchEventCycles';
+export * from './fetchEventGroupCategories';
+export * from './fetchEventNavLinks';
 export * from './fetchEvents';
-export * from './fetchQuestionStatistics';
-export * from './fetchQuestionFunding';
 export * from './fetchGroupCategories';
 export * from './fetchGroupMembers';
 export * from './fetchGroupRegistrations';
 export * from './fetchGroups';
+export * from './fetchNavLinks';
 export * from './fetchOption';
 export * from './fetchOptionUsers';
+export * from './fetchQuestionFunding';
+export * from './fetchQuestionStatistics';
 export * from './fetchRegistrationData';
 export * from './fetchRegistrationFields';
 export * from './fetchRegistrations';
 export * from './fetchUser';
 export * from './fetchUserAttributes';
+export * from './fetchUserOptions';
 export * from './fetchUserRegistrations';
 export * from './fetchUsersToGroups';
 export * from './fetchUserVotes';
 export * from './logout';
 export * from './postComment';
 export * from './postGroup';
 export * from './postLike';
-export * from './postVerify';
 export * from './postRegistration';
 export * from './postUsersToGroups';
+export * from './postVerify';
 export * from './postVotes';
 export * from './putRegistration';
 export * from './putUser';
 export * from './putUsersToGroups';
-export * from './fetchEventGroupCategories';
-export * from './fetchUserOptions';
 export * from './types';

packages/api/src/types/Alerts.ts → packages/api/src/types/NavLinks.ts

@@ -1,4 +1,4 @@
-export type Alert = {
+export type NavLink = {
   id: string;
   createdAt: Date;
   updatedAt: Date;
@@ -10,4 +10,4 @@ export type Alert = {
   title: string;
 };
 
-export type GetAlertsResponse = Alert[];
+export type GetNavLinksResponse = NavLink[];

packages/api/src/types/index.ts

@@ -1,4 +1,4 @@
-export * from './Alerts';
+export * from './NavLinks';
 export * from './Comments';
 export * from './Cycles';
 export * from './Events';

packages/berlin/src/components/header/Header.tsx

@@ -9,10 +9,17 @@ import {
 import useUser from '@/hooks/useUser';
 import { useAppStore } from '@/store';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { fetchAlerts, fetchEvents, fetchUserRegistrations, GetUserResponse, logout } from 'api';
+import {
+  fetchEventNavLinks,
+  fetchEvents,
+  fetchNavLinks,
+  fetchUserRegistrations,
+  GetUserResponse,
+  logout,
+} from 'api';
 import { Menu, User } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useParams } from 'react-router-dom';
 import Icon from '../icon';
 import ThemeToggler from '../theme-toggler';
 import { useNavigate } from 'react-router-dom';
@@ -71,6 +78,8 @@ export default function NewHeader() {
 }
 
 const HeaderLinks = ({ user }: { user: GetUserResponse }) => {
+  const { eventId } = useParams();
+
   const { data: events } = useQuery({
     queryKey: ['events'],
     queryFn: () => fetchEvents({ serverUrl: import.meta.env.VITE_SERVER_URL }),
@@ -87,13 +96,22 @@ const HeaderLinks = ({ user }: { user: GetUserResponse }) => {
     enabled: !!user,
   });
 
-  const { data: alerts } = useQuery({
-    queryKey: ['alerts'],
-    queryFn: () => fetchAlerts({ serverUrl: import.meta.env.VITE_SERVER_URL }),
+  const { data: navLinks } = useQuery({
+    queryKey: ['navLinks'],
+    queryFn: () => fetchNavLinks({ serverUrl: import.meta.env.VITE_SERVER_URL }),
     enabled: !!user,
     refetchInterval: 10000,
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: eventNavLinks } = useQuery({
+    queryKey: ['eventNavLinks'],
+    queryFn: () =>
+      fetchEventNavLinks({ serverUrl: import.meta.env.VITE_SERVER_URL, eventId: eventId || '' }),
+    enabled: !!user && !!eventId,
+    refetchInterval: 10000,
+  });
+
   const links = useMemo(() => {
     const baseLinks = [
       {
@@ -108,18 +126,18 @@ const HeaderLinks = ({ user }: { user: GetUserResponse }) => {
 
     if (
       registrationsData?.some((registration) => registration.status === 'APPROVED') &&
-      alerts &&
-      alerts.length > 0
+      navLinks &&
+      navLinks.length > 0
     ) {
-      const alertsLinks = alerts.map((alert) => ({
-        title: alert.title,
-        link: alert.link || '',
+      const additionalNavLinks = navLinks.map((eventNavLink) => ({
+        title: eventNavLink.title,
+        link: eventNavLink.link || '',
       }));
-      return [...baseLinks, ...alertsLinks];
+      return [...baseLinks, ...additionalNavLinks];
     }
 
     return baseLinks;
-  }, [events, registrationsData, alerts]);
+  }, [events, registrationsData, navLinks]);
 
   return links.map(({ title, link }) => (
     <NavigationMenuItem key={title}>