400 navbar link underline (#430)

* Export fetchUserRegistrations from api * At end boolean to handle active styles at nav link * Add keys to maps, add end prop to mapped alerts and update events link
lexicongovernance · Apr 30, 2024 · 0e567ab · 0e567ab
1 parent dd91abb
commit 0e567ab
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
@@ -1,5 +1,6 @@
 export { default as deleteComment } from './deleteComment';
 export { default as deleteLike } from './deleteLike';
+export { default as fetchAlerts } from './fetchAlerts';
 export { default as fetchCommentLikes } from './fetchCommentLikes';
 export { default as fetchComments } from './fetchComments';
 export { default as fetchCycle } from './fetchCycle';
@@ -17,6 +18,7 @@ export { default as fetchRegistrations } from './fetchRegistrations';
 export { default as fetchUserAttributes } from './fetchUserAttributes';
 export { default as fetchUserData } from './fetchUserData';
 export { default as fetchUserGroups } from './fetchUserGroups';
+export { default as fetchUserRegistrations } from './fetchUserRegistrations';
 export { default as fetchUserVotes } from './fetchUserVotes';
 export { default as logout } from './logout';
 export { default as postComment } from './postComment';
@@ -28,5 +30,4 @@ export { default as postUserToGroups } from './postUserToGroups';
 export { default as postVotes } from './postVotes';
 export { default as putRegistration } from './putRegistration';
 export { default as updateUserData } from './updateUserData';
-export { default as fetchAlerts } from './fetchAlerts';
 export * from './types';
diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
@@ -10,7 +10,7 @@ import { useAppStore } from '../../store';
 import header from '../../data/header';
 
 // API
-import { fetchAlerts, logout } from 'api';
+import { fetchAlerts, fetchEvents, fetchUserRegistrations, logout } from 'api';
 
 // Hooks
 import useUser from '../../hooks/useUser';
@@ -38,7 +38,6 @@ import {
   LogoTextContainer,
   ThemeButton,
 } from './Header.styled';
-import fetchUserRegistrations from 'api/src/fetchUserRegistrations';
 
 function Header() {
   const queryClient = useQueryClient();
@@ -69,6 +68,12 @@ function Header() {
     enabled: !!user,
   });
 
+  const { data: events } = useQuery({
+    queryKey: ['events'],
+    queryFn: () => fetchEvents(),
+    enabled: !!user,
+  });
+
   const [isBurgerMenuOpen, setIsBurgerMenuOpen] = useState(false);
 
   return (
@@ -96,13 +101,18 @@ function Header() {
                           return (
                             alert.link &&
                             alert.title && (
-                              <NavButton to={alert.link} $color="secondary">
+                              <NavButton
+                                key={alert.title + 1}
+                                to={alert.link}
+                                $color="secondary"
+                                end
+                              >
                                 {alert.title}
                               </NavButton>
                             )
                           );
                         })}
-                      <NavButton to="/events" $color="secondary">
+                      <NavButton to={`/events/${events?.[0].id}/cycles`} $color="secondary">
                         Agenda
                       </NavButton>
                     </>
@@ -141,13 +151,13 @@ function Header() {
                           return (
                             alert.link &&
                             alert.title && (
-                              <NavButton to={alert.link} $color="secondary">
+                              <NavButton key={alert.title + 1} to={alert.link} $color="secondary">
                                 {alert.title}
                               </NavButton>
                             )
                           );
                         })}
-                      <NavButton to="/events" $color="secondary">
+                      <NavButton to={`/events/${events?.[0].id}/cycles`} $color="secondary">
                         Agenda
                       </NavButton>
                     </>

diff --git a/packages/berlin/src/components/nav-button/NavButton.tsx b/packages/berlin/src/components/nav-button/NavButton.tsx
@@ -6,11 +6,12 @@ type NavButtonProps = {
   $color?: 'primary' | 'secondary';
   children: React.ReactNode;
   onClick?: () => void;
+  end?: boolean;
 };
 
-function NavButton({ to, children, $color = 'primary', onClick }: NavButtonProps) {
+function NavButton({ to, children, end, $color = 'primary', onClick }: NavButtonProps) {
   return (
-    <StyledNavLink to={to} tabIndex={-1}>
+    <StyledNavLink to={to} tabIndex={-1} end={end}>
       <Button onClick={onClick} $color={$color}>
         {children}
       </Button>