Dynamic dashboard Enhancements (PalisadoesFoundation#979)

* Dynamic Organization Dashboard * Dynamic Organization Dashboard * refined organization dashboard * Update src/utils/handleLatestFeed.ts Co-authored-by: Noble Mittal <[email protected]> * fixed inconsistent casing * fixed org dashboard test * fixed org dashboard test * revert previous commit * final changes * final changes --------- Co-authored-by: Noble Mittal <[email protected]>
kanhaiya04 · Nov 14, 2023 · 516e472 · 516e472
1 parent 17230b4
commit 516e472
Show file tree

Hide file tree

Showing 13 changed files with 232 additions and 120 deletions.
diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
@@ -567,6 +567,7 @@ export const ORGANIZATION_POST_LIST = gql`
         lastName
         email
       }
+      createdAt
     }
   }
 `;
@@ -594,7 +595,7 @@ export const ORGANIZATION_POST_CONNECTION_LIST = gql`
           lastName
           email
         }
-        pinned
+        createdAt
         likeCount
         commentCount
         comments {
@@ -611,7 +612,6 @@ export const ORGANIZATION_POST_CONNECTION_LIST = gql`
           }
           text
         }
-        createdAt
         likedBy {
           _id
           firstName

diff --git a/src/assets/svgs/date.svg b/src/assets/svgs/date.svg
diff --git a/src/assets/svgs/location.svg b/src/assets/svgs/location.svg
diff --git a/src/assets/svgs/user.svg b/src/assets/svgs/user.svg
diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css
@@ -45,3 +45,16 @@
   font-size: 0.9rem;
   color: var(--bs-secondary);
 }
+
+.cardItem .creator {
+  font-size: 1rem;
+  color: rgb(33, 208, 21);
+}
+
+.rightCard {
+  display: flex;
+  gap: 5px;
+  min-width: 170px;
+  justify-content: center;
+  flex-direction: column;
+}
diff --git a/src/components/OrganizationDashCards/CardItem.test.tsx b/src/components/OrganizationDashCards/CardItem.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import CardItem from './CardItem';
 import type { InterfaceCardItem } from './CardItem';
+import dayjs from 'dayjs';
 
 describe('Testing the Organization Card', () => {
   test('should render props and text elements For event card', () => {
@@ -14,7 +15,9 @@ describe('Testing the Organization Card', () => {
     render(<CardItem {...props} />);
 
     expect(screen.getByText(/Event Title/i)).toBeInTheDocument();
-    expect(screen.getByText(/03-09-2023/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
+    ).toBeInTheDocument();
   });
 
   test('Should render props and text elements for Post card', () => {
@@ -27,7 +30,9 @@ describe('Testing the Organization Card', () => {
     render(<CardItem {...props} />);
 
     expect(screen.getByText(/Post Title/i)).toBeInTheDocument();
-    expect(screen.getByText(/03-09-2023/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
+    ).toBeInTheDocument();
   });
 
   test('Should render props and text elements for Membership Request card', () => {

diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
 import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
+import { ReactComponent as MarkerIcon } from 'assets/svgs/location.svg';
+import { ReactComponent as DateIcon } from 'assets/svgs/date.svg';
+import { ReactComponent as UserIcon } from 'assets/svgs/user.svg';
 import dayjs from 'dayjs';
 import styles from './CardItem.module.css';
 import { PersonAddAlt1Rounded } from '@mui/icons-material';
@@ -9,10 +12,12 @@ export interface InterfaceCardItem {
   type: 'Event' | 'Post' | 'MembershipRequest';
   title: string;
   time?: string;
+  creator?: any;
+  location?: string;
 }
 
 const cardItem = (props: InterfaceCardItem): JSX.Element => {
-  const { type, title, time } = props;
+  const { creator, type, title, time, location } = props;
   return (
     <>
       <div className={`${styles.cardItem} border-bottom`}>
@@ -33,13 +38,48 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
           )}
         </div>
         <span className={styles.title}>{`${title}`}</span>
-        {time ? (
-          <span className={styles.time}>
-            {dayjs(time).format('DD-MM-YYYY')}
-          </span>
-        ) : (
-          ''
-        )}
+
+        <div className={styles.rightCard}>
+          {creator && (
+            <small className={styles.creator}>
+              <UserIcon
+                title="Post Creator"
+                fill="var(--bs-primary)"
+                width={20}
+                height={20}
+              />{' '}
+              {'  '}
+              <a>
+                {creator.firstName} {creator.lastName}
+              </a>
+            </small>
+          )}
+
+          {location && (
+            <span className={styles.location}>
+              <MarkerIcon
+                title="Event Location"
+                fill="var(--bs-primary)"
+                width={20}
+                height={20}
+              />{' '}
+              {location}
+            </span>
+          )}
+          {time && (
+            <span className={styles.time}>
+              {type === 'Event' && (
+                <DateIcon
+                  title="Event Date"
+                  fill="#4cd964"
+                  width={20}
+                  height={20}
+                />
+              )}{' '}
+              {dayjs(time).format('MMM D, YYYY')}
+            </span>
+          )}
+        </div>
       </div>
     </>
   );

diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx
@@ -33,7 +33,7 @@ const MOCKS = [
             {
               _id: '6411e53835d7ba2344a78e21',
               title: 'postone',
-              text: 'THis is the frist post',
+              text: 'This is the first post',
               imageUrl: null,
               videoUrl: null,
               createdAt: '2023-08-24T09:26:56.524+00:00',
@@ -52,7 +52,7 @@ const MOCKS = [
             {
               _id: '6411e54835d7ba2344a78e29',
               title: 'posttwo',
-              text: 'THis is the post two',
+              text: 'Tis is the post two',
               imageUrl: null,
               videoUrl: null,
               createdAt: '2023-08-24T09:26:56.524+00:00',
@@ -133,7 +133,7 @@ describe('Organisation Post Page', () => {
     expect(dataQuery1).toEqual({
       _id: '6411e53835d7ba2344a78e21',
       title: 'postone',
-      text: 'THis is the frist post',
+      text: 'This is the first post',
       imageUrl: null,
       videoUrl: null,
       createdAt: '2023-08-24T09:26:56.524+00:00',

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
@@ -11,7 +11,6 @@ import { StaticMockLink } from 'utils/StaticMockLink';
 import OrganizationDashboard from './OrganizationDashboard';
 import { EMPTY_MOCKS, ERROR_MOCKS, MOCKS } from './OrganizationDashboardMocks';
 import i18nForTest from 'utils/i18nForTest';
-import dayjs from 'dayjs';
 import { toast } from 'react-toastify';
 import userEvent from '@testing-library/user-event';
 
@@ -75,17 +74,9 @@ describe('Organisation Dashboard Page', () => {
     expect(screen.getByText('Upcoming Events')).toBeInTheDocument();
     expect(screen.getByText('Latest Posts')).toBeInTheDocument();
     expect(screen.getByText('Membership requests')).toBeInTheDocument();
-    expect(screen.getAllByText('View All')).toHaveLength(3);
-    // Checking if events are rendered
-    expect(screen.getByText('Event 1')).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        `${dayjs(new Date()).add(1, 'day').format('DD-MM-YYYY')}`
-      )
-    ).toBeInTheDocument();
 
     // Checking if posts are rendered
-    expect(screen.getByText('Post 1')).toBeInTheDocument();
+    expect(screen.getByText('Post 15')).toBeInTheDocument();
 
     // Checking if membership requests are rendered
     expect(screen.getByText('Jane Doe')).toBeInTheDocument();

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -7,8 +7,8 @@ import { useTranslation } from 'react-i18next';
 
 import {
   ORGANIZATIONS_LIST,
-  ORGANIZATION_EVENT_LIST,
-  ORGANIZATION_POST_LIST,
+  ORGANIZATION_POST_CONNECTION_LIST,
+  ORGANIZATION_EVENT_CONNECTION_LIST,
 } from 'GraphQl/Queries/Queries';
 import { ReactComponent as AdminsIcon } from 'assets/svgs/admin.svg';
 import { ReactComponent as BlockedUsersIcon } from 'assets/svgs/blockedUser.svg';
@@ -22,7 +22,6 @@ import CardItem from 'components/OrganizationDashCards/CardItem';
 import type { ApolloError } from '@apollo/client';
 import type {
   InterfaceQueryOrganizationEventListItem,
-  InterfaceQueryOrganizationPostListItem,
   InterfaceQueryOrganizationsListObject,
 } from 'utils/interfaces';
 import { toast } from 'react-toastify';
@@ -57,15 +56,7 @@ function organizationDashboard(): JSX.Element {
     data: postData,
     loading: loadingPost,
     error: errorPost,
-  }: {
-    data:
-      | {
-          postsByOrganization: InterfaceQueryOrganizationPostListItem[];
-        }
-      | undefined;
-    loading: boolean;
-    error?: ApolloError;
-  } = useQuery(ORGANIZATION_POST_LIST, {
+  } = useQuery(ORGANIZATION_POST_CONNECTION_LIST, {
     variables: { id: currentUrl },
   });
 
@@ -74,22 +65,20 @@ function organizationDashboard(): JSX.Element {
     loading: loadingEvent,
     error: errorEvent,
   }: {
-    data:
-      | {
-          eventsByOrganization: InterfaceQueryOrganizationEventListItem[];
-        }
-      | undefined;
+    data: any;
     loading: boolean;
     error?: ApolloError;
-  } = useQuery(ORGANIZATION_EVENT_LIST, {
-    variables: { id: currentUrl },
+  } = useQuery(ORGANIZATION_EVENT_CONNECTION_LIST, {
+    variables: {
+      organization_id: currentUrl,
+    },
   });
 
   // UseEffect to update upcomingEvents array
   useEffect(() => {
-    if (eventData && eventData?.eventsByOrganization.length > 0) {
+    if (eventData && eventData?.eventsByOrganizationConnection.length > 0) {
       const tempUpcomingEvents: InterfaceQueryOrganizationEventListItem[] = [];
-      eventData?.eventsByOrganization.map((event) => {
+      eventData?.eventsByOrganizationConnection.map((event: any) => {
         const startDate = new Date(event.startDate);
         const now = new Date();
         if (startDate > now) {
@@ -98,11 +87,12 @@ function organizationDashboard(): JSX.Element {
       });
       setUpcomingEvents(tempUpcomingEvents);
     }
-  }, [eventData?.eventsByOrganization]);
+  }, [eventData?.eventsByOrganizationConnection]);
 
   if (errorOrg || errorPost || errorEvent) {
     window.location.replace('/orglist');
   }
+
   return (
     <>
       <OrganizationScreen screenName="Dashboard" title={t('title')}>
@@ -136,14 +126,16 @@ function organizationDashboard(): JSX.Element {
                 </Col>
                 <Col xs={6} sm={4} className="mb-4">
                   <DashBoardCard
-                    count={postData?.postsByOrganization?.length}
+                    count={
+                      postData?.postsByOrganizationConnection?.edges.length
+                    }
                     title={t('posts')}
                     icon={<PostsIcon fill="var(--bs-primary)" />}
                   />
                 </Col>
                 <Col xs={6} sm={4} className="mb-4">
                   <DashBoardCard
-                    count={eventData?.eventsByOrganization?.length}
+                    count={eventData?.eventsByOrganizationConnection.length}
                     title={t('events')}
                     icon={<EventsIcon fill="var(--bs-primary)" />}
                   />
@@ -192,16 +184,19 @@ function organizationDashboard(): JSX.Element {
                         <h6>{t('noUpcomingEvents')}</h6>
                       </div>
                     ) : (
-                      upcomingEvents.slice(0, 5).map((event) => {
-                        return (
-                          <CardItem
-                            type="Event"
-                            key={event._id}
-                            time={event.startDate}
-                            title={event.title}
-                          />
-                        );
-                      })
+                      upcomingEvents.map(
+                        (event: InterfaceQueryOrganizationEventListItem) => {
+                          return (
+                            <CardItem
+                              type="Event"
+                              key={event._id}
+                              time={event.startDate}
+                              title={event.title}
+                              location={event.location}
+                            />
+                          );
+                        }
+                      )
                     )}
                   </Card.Body>
                 </Card>
@@ -226,20 +221,27 @@ function organizationDashboard(): JSX.Element {
                       [...Array(4)].map((_, index) => {
                         return <CardItemLoading key={index} />;
                       })
-                    ) : postData?.postsByOrganization?.length == 0 ? (
+                    ) : postData?.postsByOrganizationConnection.edges.length ==
+                      0 ? (
+                      /* eslint-disable */
                       <div className={styles.emptyContainer}>
                         <h6>{t('noPostsPresent')}</h6>
                       </div>
                     ) : (
-                      postData?.postsByOrganization.slice(0, 5).map((post) => {
-                        return (
-                          <CardItem
-                            type="Post"
-                            key={post._id}
-                            title={post.title}
-                          />
-                        );
-                      })
+                      /* eslint-enable */
+                      postData?.postsByOrganizationConnection.edges
+                        .slice(0, 5)
+                        .map((post: any) => {
+                          return (
+                            <CardItem
+                              type="Post"
+                              key={post._id}
+                              title={post.title}
+                              time={post.createdAt}
+                              creator={post.creator}
+                            />
+                          );
+                        })
                     )}
                   </Card.Body>
                 </Card>