Fix dashboard items (#1007)

* Dashboard items are working now. * added variables for links -fix dashboard items * Added variables for links -fix dashboard items. * made the changes as said * Removed : string from variable assignment. * remove repititive code and resolved falling tests * Fix repeating code and falling tests. * Resolved some more falling tests * write test for missed lines
PalisadoesFoundation · Nov 11, 2023 · 57baf75 · 57baf75
1 parent 5e4730a
commit 57baf75
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 13 deletions.
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
@@ -5560,7 +5560,7 @@ fieldset:disabled .btn {
   box-shadow: var(--bs-toast-box-shadow);
   border-radius: var(--bs-toast-border-radius);
 }
-.toast.showing {
+.showing {
   opacity: 0;
 }
 .toast:not(.show) {

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
@@ -80,6 +80,21 @@ describe('Organisation Dashboard Page', () => {
 
     // Checking if membership requests are rendered
     expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+
+    const peopleBtn = screen.getByText('Members');
+    const adminBtn = screen.getByText('Admins');
+    const postBtn = screen.getAllByText('Posts');
+    const eventBtn = screen.getAllByText('Events');
+    const blockUserBtn = screen.getByText('Blocked Users');
+    const requestBtn = screen.getByText('Requests');
+    userEvent.click(peopleBtn);
+    userEvent.click(adminBtn);
+    userEvent.click(postBtn[0]);
+    userEvent.click(eventBtn[0]);
+    userEvent.click(postBtn[1]);
+    userEvent.click(eventBtn[1]);
+    userEvent.click(blockUserBtn);
+    userEvent.click(requestBtn);
   });
 
   test('Testing buttons and checking empty events, posts and membership requests', async () => {

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -33,6 +33,12 @@ function organizationDashboard(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'dashboard' });
   document.title = t('title');
   const currentUrl = window.location.href.split('=')[1];
+  const peopleLink = `/orgpeople/id=${currentUrl}`;
+  const postsLink = `/orgpost/id=${currentUrl}`;
+  const eventsLink = `/orgevents/id=${currentUrl}`;
+  const blockUserLink = `/blockuser/id=${currentUrl}`;
+  const requestLink = '/requests';
+
   const history = useHistory();
   const [upcomingEvents, setUpcomingEvents] = useState<
     InterfaceQueryOrganizationEventListItem[]
@@ -110,21 +116,45 @@ function organizationDashboard(): JSX.Element {
               </Row>
             ) : (
               <Row style={{ display: 'flex' }}>
-                <Col xs={6} sm={4} className="mb-4">
+                <Col
+                  xs={6}
+                  sm={4}
+                  role="button"
+                  className="mb-4"
+                  onClick={(): void => {
+                    history.push(peopleLink);
+                  }}
+                >
                   <DashBoardCard
                     count={data?.organizations[0].members?.length}
                     title={t('members')}
                     icon={<UsersIcon fill="var(--bs-primary)" />}
                   />
                 </Col>
-                <Col xs={6} sm={4} className="mb-4">
+                <Col
+                  xs={6}
+                  sm={4}
+                  role="button"
+                  className="mb-4"
+                  onClick={(): void => {
+                    history.push(peopleLink);
+                  }}
+                >
                   <DashBoardCard
                     count={data?.organizations[0].admins?.length}
                     title={t('admins')}
                     icon={<AdminsIcon fill="var(--bs-primary)" />}
                   />
                 </Col>
-                <Col xs={6} sm={4} className="mb-4">
+                <Col
+                  xs={6}
+                  sm={4}
+                  role="button"
+                  className="mb-4"
+                  onClick={(): void => {
+                    history.push(postsLink);
+                  }}
+                >
                   <DashBoardCard
                     count={
                       postData?.postsByOrganizationConnection?.edges.length
@@ -133,21 +163,45 @@ function organizationDashboard(): JSX.Element {
                     icon={<PostsIcon fill="var(--bs-primary)" />}
                   />
                 </Col>
-                <Col xs={6} sm={4} className="mb-4">
+                <Col
+                  xs={6}
+                  sm={4}
+                  role="button"
+                  className="mb-4"
+                  onClick={(): void => {
+                    history.push(eventsLink);
+                  }}
+                >
                   <DashBoardCard
                     count={eventData?.eventsByOrganizationConnection.length}
                     title={t('events')}
                     icon={<EventsIcon fill="var(--bs-primary)" />}
                   />
                 </Col>
-                <Col xs={6} sm={4} className="mb-4">
+                <Col
+                  xs={6}
+                  sm={4}
+                  role="button"
+                  className="mb-4"
+                  onClick={(): void => {
+                    history.push(blockUserLink);
+                  }}
+                >
                   <DashBoardCard
                     count={data?.organizations[0].blockedUsers?.length}
                     title={t('blockedUsers')}
                     icon={<BlockedUsersIcon fill="var(--bs-primary)" />}
                   />
                 </Col>
-                <Col xs={6} sm={4} className="mb-4">
+                <Col
+                  xs={6}
+                  sm={4}
+                  role="button"
+                  className="mb-4"
+                  onClick={(): void => {
+                    history.push(requestLink);
+                  }}
+                >
                   <DashBoardCard
                     count={data?.organizations[0].membershipRequests?.length}
                     title={t('requests')}
@@ -167,9 +221,7 @@ function organizationDashboard(): JSX.Element {
                       size="sm"
                       variant="light"
                       data-testid="viewAllEvents"
-                      onClick={(): void =>
-                        history.push(`/orgevents/id=${currentUrl}`)
-                      }
+                      onClick={(): void => history.push(eventsLink)}
                     >
                       {t('viewAll')}
                     </Button>
@@ -209,9 +261,7 @@ function organizationDashboard(): JSX.Element {
                       size="sm"
                       variant="light"
                       data-testid="viewAllPosts"
-                      onClick={(): void =>
-                        history.push(`/orgpost/id=${currentUrl}`)
-                      }
+                      onClick={(): void => history.push(postsLink)}
                     >
                       {t('viewAll')}
                     </Button>