Fixed Error on redirect to EventDashboard (Admin) (#1972)

* Fix routing issue for EventManagement * Update tests * Remove unnecessary change in INSTALLATION.md * Remove changes
PalisadoesFoundation · May 8, 2024 · ba5255a · ba5255a
1 parent 0632235
commit ba5255a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -127,7 +127,10 @@ function app(): JSX.Element {
             <Route path="/orgpeople/:orgId" element={<OrganizationPeople />} />
             <Route path="/member/:orgId" element={<MemberDetail />} />
             <Route path="/orgevents/:orgId" element={<OrganizationEvents />} />
-
+            <Route
+              path="/event/:orgId/:eventId"
+              element={<EventManagement />}
+            />
             <Route
               path="/orgactionitems/:orgId"
               element={<OrganizationActionItems />}
@@ -164,7 +167,7 @@ function app(): JSX.Element {
             <Route path="/user/events/:orgId" element={<Events />} />
             <Route element={<EventDashboardScreen />}>
               <Route
-                path="/event/:orgId/:eventId"
+                path="/user/event/:orgId/:eventId"
                 element={<EventManagement />}
               />
             </Route>

diff --git a/src/components/EventDashboardScreen/EventDashboardScreen.tsx b/src/components/EventDashboardScreen/EventDashboardScreen.tsx
@@ -9,13 +9,13 @@ import type { TargetsType } from 'state/reducers/routesReducer';
 import styles from './EventDashboardScreen.module.css';
 import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
 import useLocalStorage from 'utils/useLocalstorage';
-const { getItem } = useLocalStorage();
 
 const EventDashboardScreen = (): JSX.Element => {
+  const { getItem } = useLocalStorage();
   const isLoggedIn = getItem('IsLoggedIn');
   const adminFor = getItem('AdminFor');
   const location = useLocation();
-  const titleKey: string | undefined = map[location.pathname.split('/')[1]];
+  const titleKey: string | undefined = map[location.pathname.split('/')[2]];
   const { t } = useTranslation('translation', { keyPrefix: titleKey });
   const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
   const { orgId } = useParams();

diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx
@@ -68,7 +68,14 @@ const renderEventListCard = (
                   path="/event/:orgId/"
                   element={<EventListCard {...props} />}
                 />
-                <Route path="/event/:orgId/:eventId" element={<></>} />
+                <Route
+                  path="/event/:orgId/:eventId"
+                  element={<div>Event Dashboard (Admin)</div>}
+                />
+                <Route
+                  path="/user/event/:orgId/:eventId"
+                  element={<div>Event Dashboard (User)</div>}
+                />
               </Routes>
             </I18nextProvider>
           </LocalizationProvider>
@@ -287,7 +294,7 @@ describe('Testing Event List Card', () => {
     });
   });
 
-  test('Should navigate to event dashboard when clicked', async () => {
+  test('Should navigate to event dashboard when clicked (For Admin)', async () => {
     renderEventListCard(props[1]);
 
     userEvent.click(screen.getByTestId('card'));
@@ -300,6 +307,25 @@ describe('Testing Event List Card', () => {
 
     await waitFor(() => {
       expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+      expect(screen.queryByText('Event Dashboard (Admin)')).toBeInTheDocument();
+    });
+  });
+
+  test('Should navigate to event dashboard when clicked (For User)', async () => {
+    setItem('userId', '123');
+    renderEventListCard(props[2]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('showEventDashboardBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('showEventDashboardBtn'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+      expect(screen.queryByText('Event Dashboard (User)')).toBeInTheDocument();
     });
   });
 

diff --git a/src/components/EventListCard/EventListCardModals.tsx b/src/components/EventListCard/EventListCardModals.tsx
@@ -322,7 +322,7 @@ function EventListCardModals({
     (registrant) => registrant._id === userId,
   );
   const [registerEventMutation] = useMutation(REGISTER_EVENT);
-  const [isRegistered, setIsRegistered] = React.useState(isInitiallyRegistered);
+  const [isRegistered, setIsRegistered] = useState(isInitiallyRegistered);
 
   const registerEventHandler = async (): Promise<void> => {
     if (!isRegistered) {
@@ -352,7 +352,9 @@ function EventListCardModals({
   };
 
   const openEventDashboard = (): void => {
-    navigate(`/event/${orgId}/${eventListCardProps.id}`);
+    const userPath = eventListCardProps.userRole === Role.USER ? 'user/' : '';
+    console.log(`/${userPath}event/${orgId}/${eventListCardProps.id}`);
+    navigate(`/${userPath}event/${orgId}/${eventListCardProps.id}`);
   };
 
   const popover = (