added features

AdityaRaimec22 · Apr 2, 2024 · 2579838 · 2579838
1 parent 0fd8403
commit 2579838
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 4 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -659,7 +659,9 @@
     "membershipRequests": "Membership requests",
     "adminForEvents": "Admin for events",
     "addedAsAdmin": "User is added as admin.",
-    "talawaApiUnavailable": "Talawa-API service is unavailable. Kindly check your network connection and wait for a while."
+    "talawaApiUnavailable": "Talawa-API service is unavailable. Kindly check your network connection and wait for a while.",
+    "noEventInvites": "No Event Invites Found.",
+    "viewAll":"View All"
   },
   "userLogin": {
     "login": "Login",

diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
@@ -244,7 +244,7 @@ export const GET_EVENT_ATTENDEE = gql`
       _id
     }
   }
-`
+`;
 
 export const EVENT_CHECKINS = gql`
   query eventCheckIns($id: ID!) {
@@ -335,6 +335,15 @@ export const ORGANIZATIONS_LIST = gql`
   }
 `;
 
+//Query to get all the event invites for an user.
+export const GET_EVENT_INVITES = gql`
+  query ExampleQuery($eventId: ID!) {
+    getEventAttendeesByEventId(eventId: $eventId) {
+      userId
+    }
+  }
+`;
+
 // Query to take the Members of a particular organization
 export const MEMBERS_LIST = gql`
   query Organizations($id: ID!) {

diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
@@ -1,14 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useMutation, useQuery } from '@apollo/client';
+import { ApolloError, useMutation, useQuery } from '@apollo/client';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import UserUpdate from 'components/UserUpdate/UserUpdate';
-import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { GET_EVENT_INVITES, USER_DETAILS } from 'GraphQl/Queries/Queries';
 import styles from './MemberDetail.module.css';
 import { languages } from 'utils/languages';
+import CardItem from 'components/OrganizationDashCards/CardItem';
+import CardItemLoading from 'components/OrganizationDashCards/CardItemLoading';
 import {
   ADD_ADMIN_MUTATION,
   UPDATE_USERTYPE_MUTATION,
@@ -18,11 +20,21 @@ import { errorHandler } from 'utils/errorHandler';
 import Loader from 'components/Loader/Loader';
 import useLocalStorage from 'utils/useLocalstorage';
 import Avatar from 'components/Avatar/Avatar';
+import { Card } from 'react-bootstrap';
+import { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 
 type MemberDetailProps = {
   id?: string; // This is the userId
 };
 
+interface requestType {
+  _id: string;
+  user: {
+    firstName: string;
+    lastName: string;
+  }
+}
+
 const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'memberDetail',
@@ -42,6 +54,20 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
   const [adda] = useMutation(ADD_ADMIN_MUTATION);
   const [updateUserType] = useMutation(UPDATE_USERTYPE_MUTATION);
 
+  const {
+    data,
+    loading: loadingOrgData,
+    error: errorOrg,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationsListObject[];
+    };
+    loading: boolean;
+    error?: ApolloError;
+  } = useQuery(GET_EVENT_INVITES, {
+    variables: { id: currentUrl },
+  });
+
   useEffect(() => {
     // check component is mounted or not
     return () => {
@@ -311,6 +337,53 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                       </div>
                     </div>
                   </Col>
+                  <Col xl={4}>
+                    <Card border="0" className="rounded-4">
+                       <div className={styles.cardHeader}>
+                          <div className={styles.cardTitle}>{t('membershipRequests')}</div>
+                        </div>       
+                    </Card>
+                  </Col>
+                  <Col xl={4}>
+          <Card border="0" className="rounded-4">
+            <div className={styles.cardHeader}>
+              <div className={styles.cardTitle}>{t('membershipRequests')}</div>
+              <Button
+                size="sm"
+                variant="light"
+                data-testid="viewAllMembershipRequests"
+                onClick={(): void => {
+                  toast.success('Coming soon!');
+                }}
+              >
+                {t('viewAll')}
+              </Button>
+            </div>
+            <Card.Body className={styles.cardBody}>
+              {loadingOrgData ? (
+                [...Array(4)].map((_, index) => {
+                  return <CardItemLoading key={index} />;
+                })
+              ) : data?.organizations[0].membershipRequests.length == 0 ? (
+                <div className={styles.emptyContainer}>
+                  <h6>{t('noMembershipRequests')}</h6>
+                </div>
+              ) : (
+                data?.organizations[0]?.membershipRequests
+                  .slice(0, 8)
+                  .map((request: requestType) => {
+                    return (
+                      <CardItem
+                        type="MembershipRequest"
+                        key={request._id}
+                        title={`${request.user.firstName} ${request.user.lastName}`}
+                      />
+                    );
+                  })
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
                 </Row>
               </section>
             </div>