Fixed #1266 Bug Report When a new post is added, the latest pos…

src/components/OrganizationDashCards/CardItem.module.css

@@ -2,13 +2,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 0.75rem 0;
+  background-color: #f1f3f68f;
+  border-radius: 8px;
+  padding: 15px;
+  margin-top: 20px;
 }
 
 .cardItem .iconWrapper {
   position: relative;
-  height: 40px;
-  width: 40px;
+  height: 52px;
+  width: 52px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,7 +25,7 @@
   bottom: 0;
   left: 0;
   opacity: 0.12;
-  border-radius: 50%;
+  border-radius: 4px;
 }
 
 .cardItem .iconWrapper .dangerOverlay {
@@ -33,22 +36,30 @@
   bottom: 0;
   left: 0;
   opacity: 0.12;
-  border-radius: 50%;
+  border-radius: 4px;
 }
 
 .cardItem .title {
-  font-size: 1rem;
+  font-size: 15px;
+  font-weight: 600;
   flex: 1;
+  margin-right: 0.3rem;
+  word-wrap: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
 
 .cardItem .time {
-  font-size: 0.9rem;
-  color: var(--bs-secondary);
+  font-size: 0.8rem;
+  font-weight: 300;
+  color: #808080;
 }
 
 .cardItem .creator {
-  font-size: 1rem;
-  color: rgb(33, 208, 21);
+  font-size: 0.8rem;
+  color: black;
 }
 
 .rightCard {
@@ -58,3 +69,9 @@
   justify-content: center;
   flex-direction: column;
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  max-width: 85%;
+}

src/components/OrganizationDashCards/CardItem.test.tsx

@@ -17,7 +17,7 @@ describe('Testing the Organization Card', () => {
 
     expect(screen.getByText(/Event Title/i)).toBeInTheDocument();
     expect(
-      screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
+      screen.getByText(dayjs(props.time).format('D MMM YYYY'))
     ).toBeInTheDocument();
     expect(screen.getByText(/Event Location/i)).toBeInTheDocument();
   });
@@ -40,7 +40,7 @@ describe('Testing the Organization Card', () => {
 
     expect(screen.getByText(/Post Title/i)).toBeInTheDocument();
     expect(
-      screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
+      screen.getByText(dayjs(props.time).format('D MMM YYYY'))
     ).toBeInTheDocument();
     expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
   });

src/components/OrganizationDashCards/CardItem.tsx

@@ -2,8 +2,6 @@ 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';
@@ -37,48 +35,37 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
             )
           )}
         </div>
-        <span className={styles.title}>{`${title}`}</span>
+        <div className={styles.content}>
+          <span className={styles.title}>{`${title}`}</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>
-          )}
+          <div className={styles.rightCard}>
+            {time && (
+              <span className={styles.time}>
+                <span>Posted on: </span>
+                {dayjs(time).format('D MMM YYYY')}
+              </span>
+            )}
+            {creator && (
+              <small className={styles.creator}>
+                <span>Author: </span>
+                <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"
+            {location && (
+              <span className={styles.location}>
+                <MarkerIcon
+                  title="Event Location"
+                  fill="var(--bs-primary)"
                   width={20}
                   height={20}
-                />
-              )}{' '}
-              {dayjs(time).format('MMM D, YYYY')}
-            </span>
-          )}
+                />{' '}
+                {location}
+              </span>
+            )}
+          </div>
         </div>
       </div>
     </>

src/screens/OrganizationDashboard/OrganizationDashboard.module.css

@@ -22,3 +22,11 @@
   justify-content: center;
   align-items: center;
 }
+
+.BottomRow {
+  margin-top: 30px;
+}
+
+.memeberShipCard {
+  height: 150px;
+}

src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx

@@ -78,7 +78,6 @@ describe('Organisation Dashboard Page', () => {
     // Checking if posts are rendered
     expect(screen.getByText('Post 15')).toBeInTheDocument();
 
-    // Checking if membership requests are rendered
     expect(screen.getByText('Jane Doe')).toBeInTheDocument();
 
     const peopleBtn = screen.getByText('Members');
@@ -147,4 +146,77 @@ describe('Organisation Dashboard Page', () => {
     await wait();
     expect(window.location).toBeAt('/orglist');
   });
+
+  test('Testing empty membership requests and upcoming events with populated posts', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrganizationDashboard />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      );
+    });
+
+    await wait();
+
+    const viewMSBtn = screen.getByTestId('viewAllMembershipRequests');
+
+    fireEvent.click(viewMSBtn);
+    expect(toast.success).toBeCalledWith('Coming soon!');
+
+    expect(
+      screen.getByText(/No Membership requests present/i)
+    ).toBeInTheDocument();
+    expect(screen.getByText(/No Upcoming Events/i)).toBeInTheDocument();
+    expect(screen.queryByText(/No Posts Present/i)).toBeInTheDocument();
+  });
+
+  test('Testing error scenario redirects to orglist page', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link3}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrganizationDashboard />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      );
+    });
+
+    await wait();
+
+    expect(window.location.pathname).toBe('/orglist');
+  });
+
+  test('Clicking viewAllMembershipRequests triggers toast.success', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link1}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrganizationDashboard />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      );
+    });
+
+    await wait();
+
+    const viewMSBtn = screen.getByTestId('viewAllMembershipRequests');
+    fireEvent.click(viewMSBtn);
+
+    // Ensure that toast.success is called with 'Coming soon!'
+    expect(toast.success).toBeCalledWith('Coming soon!');
+  });
 });