Fix GraphQL Queries related to OrganizationDashboard.jsx

src/GraphQl/Queries/Queries.ts

@@ -384,9 +384,97 @@ export const EVENT_FEEDBACKS = gql`
 `;
 
 // Query to take the Organization with data
+
+export const GET_ORGANIZATION_POSTS_COUNT_PG = gql`
+  query getOrganizationPostsCount($id: String!) {
+    organization(input: { id: $id }) {
+      id
+      postsCount
+    }
+  }
+`;
+
+export const GET_ORGANIZATION_MEMBERS_PG = gql`
+  query GetOrganizationMembers($id: String!, $first: Int, $after: String) {
+    organization(input: { id: $id }) {
+      members(first: $first, after: $after) {
+        edges {
+          node {
+            id
+            role
+          }
+          cursor
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`;
+
+export const GET_ORGANIZATION_EVENTS_PG = gql`
+  query GetOrganizationEvents($id: String!, $first: Int, $after: String) {
+    organization(input: { id: $id }) {
+      events(first: $first, after: $after) {
+        edges {
+          node {
+            id
+            name
+            description
+            startAt
+            endAt
+            creator {
+              id
+              name
+            }
+          }
+          cursor
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`;
+
+export const GET_ORGANIZATION_POSTS_PG = gql`
+  query GetOrganizationPosts($id: String!, $first: Int) {
+    organization(input: { id: $id }) {
+      posts(first: $first) {
+        edges {
+          node {
+            id
+            caption
+            createdAt
+            creator {
+              id
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const GET_ORGANIZATION_DATA_PG = gql`
+  query getOrganizationData($id: String!) {
+    organization(input: { id: $id }) {
+      id
+      avatarURL
+      name
+      city
+    }
+  }
+`;
+
 export const ORGANIZATIONS_LIST = gql`
   query Organizations($id: ID!) {
-    organizations(id: $id) {
+    organization(id: $id) {
       _id
       image
       creator {

src/components/Avatar/Avatar.tsx

@@ -4,7 +4,7 @@ import { initials } from '@dicebear/collection';
 import styles from 'components/Avatar/Avatar.module.css';
 
 interface InterfaceAvatarProps {
-  name: string;
+  name?: string;
   alt?: string;
   size?: number;
   containerStyle?: string;

src/components/LeftDrawerOrg/LeftDrawerOrg.tsx

@@ -1,14 +1,13 @@
 import { useQuery } from '@apollo/client';
 import { WarningAmberOutlined } from '@mui/icons-material';
-import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import { GET_ORGANIZATION_DATA_PG } from 'GraphQl/Queries/Queries';
 import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
 import IconComponent from 'components/IconComponent/IconComponent';
 import React, { useEffect, useMemo, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { NavLink, useLocation } from 'react-router-dom';
 import type { TargetsType } from 'state/reducers/routesReducer';
-import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
 import TalawaLogo from 'assets/svgs/talawa.svg?react';
 import styles from './../../style/app.module.css'; // Import the global CSS file
@@ -53,18 +52,8 @@ const leftDrawerOrg = ({
   };
   const [isProfilePage, setIsProfilePage] = useState(false);
   const [showDropdown, setShowDropdown] = useState(false);
-  const [organization, setOrganization] = useState<
-    InterfaceQueryOrganizationsListObject | undefined
-  >(undefined);
-  const {
-    data,
-    loading,
-  }: {
-    data:
-      | { organizations: InterfaceQueryOrganizationsListObject[] }
-      | undefined;
-    loading: boolean;
-  } = useQuery(ORGANIZATIONS_LIST, {
+  // const [organization, setOrganization] = useState<InterfaceOrganizationPg>();
+  const { data, loading } = useQuery(GET_ORGANIZATION_DATA_PG, {
     variables: { id: orgId },
   });
 
@@ -89,17 +78,17 @@ const leftDrawerOrg = ({
   }, [location, userId]);
 
   // Set organization data when query data is available
-  useEffect(() => {
-    let isMounted = true;
-    if (data && isMounted) {
-      setOrganization(data?.organizations[0]);
-    } else {
-      setOrganization(undefined);
-    }
-    return () => {
-      isMounted = false;
-    };
-  }, [data]);
+  // useEffect(() => {
+  //   let isMounted = true;
+  //   if (data && isMounted) {
+  //     setOrganization(data?.organization);
+  //   } else {
+  //     setOrganization(undefined);
+  //   }
+  //   return () => {
+  //     isMounted = false;
+  //   };
+  // }, [data]);
   /**
    * Handles link click to hide the drawer on smaller screens.
    */
@@ -136,7 +125,7 @@ const leftDrawerOrg = ({
               className={`${styles.profileContainer} shimmer`}
               data-testid="orgBtn"
             />
-          ) : organization == undefined ? (
+          ) : data == undefined ? (
             !isProfilePage && (
               <button
                 className={`${styles.profileContainer} ${styles.bgDanger} text-start text-white`}
@@ -151,20 +140,25 @@ const leftDrawerOrg = ({
           ) : (
             <button className={styles.profileContainer} data-testid="OrgBtn">
               <div className={styles.imageContainer}>
-                {organization.image ? (
-                  <img src={organization.image} alt={`profile picture`} />
+                {data.organization?.avatarURL ? (
+                  <img
+                    src={data.organization?.avatarURL}
+                    alt={`profile picture`}
+                  />
                 ) : (
                   <Avatar
-                    name={organization.name}
+                    name={data.organization?.name}
                     containerStyle={styles.avatarContainer}
                     alt={'Dummy Organization Picture'}
                   />
                 )}
               </div>
               <div className={styles.profileText}>
-                <span className={styles.primaryText}>{organization.name}</span>
+                <span className={styles.primaryText}>
+                  {data.organization?.name}
+                </span>
                 <span className={styles.secondaryText}>
-                  {organization.address.city}
+                  {data.organization?.city}
                 </span>
               </div>
               <AngleRightIcon fill={'var(--bs-secondary)'} />

src/components/OrgListCard/OrgListCard.tsx

@@ -7,6 +7,7 @@ import styles from '../../style/app.module.css';
 import type { InterfaceOrgInfoTypePG } from 'utils/interfaces';
 import { Tooltip } from '@mui/material';
 import Avatar from 'components/Avatar/Avatar';
+import { useNavigate } from 'react-router-dom';
 
 /**
  * Props for the OrgListCard component
@@ -26,8 +27,9 @@ export interface InterfaceOrgListCardPropsPG {
  * @returns JSX.Element representing an organization list card
  */
 function OrgListCard({
-  data: { avatarURL, addressLine1, name, description, members },
+  data: { id, avatarURL, addressLine1, name, description, members },
 }: InterfaceOrgListCardPropsPG): JSX.Element {
+  const navigate = useNavigate();
   // Query to check if the organization is a sample organization
   // const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
   //   variables: {
@@ -37,9 +39,9 @@ function OrgListCard({
 
   // Handle click event to navigate to the organization dashboard
   function handleClick(): void {
-    // const url = '/orgdash/' + id;
-    // Dont change the below two lines
-    // navigate(url);
+    const url = `/orgdash/${id}`;
+    // // Dont change the below two lines
+    navigate(url);
   }
 
   const { t } = useTranslation('translation', {

src/components/OrganizationDashCards/CardItem.tsx

@@ -18,10 +18,8 @@ export interface InterfaceCardItem {
   startdate?: string;
   enddate?: string;
   creator?: {
-    _id: string;
-    firstName: string;
-    lastName: string;
-    email: string;
+    id: string | number;
+    name: string;
   };
   location?: string;
 }
@@ -67,9 +65,7 @@ const CardItem = (props: InterfaceCardItem): JSX.Element => {
                 height={20}
               />{' '}
               {'  '}
-              <a>
-                {creator.firstName} {creator.lastName}
-              </a>
+              <a>{creator.name}</a>
             </small>
           )}
 

src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx

@@ -1,18 +1,19 @@
-import { useQuery } from '@apollo/client';
-import { WarningAmberOutlined } from '@mui/icons-material';
-import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+// import { useQuery } from '@apollo/client';
+// import { WarningAmberOutlined } from '@mui/icons-material';
+// import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
 import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
 import IconComponent from 'components/IconComponent/IconComponent';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+// import React, { useEffect, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 import type { TargetsType } from 'state/reducers/routesReducer';
-import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
-import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
+// import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
+// import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
 import TalawaLogo from 'assets/svgs/talawa.svg?react';
 import styles from '../../../style/app.module.css';
-import Avatar from 'components/Avatar/Avatar';
+// import Avatar from 'components/Avatar/Avatar';
 import ProfileCard from 'components/ProfileCard/ProfileCard';
 import SignOut from './../../SignOut/SignOut';
 
@@ -41,7 +42,7 @@ export interface InterfaceUserSidebarOrgProps {
 
 const UserSidebarOrg = ({
   targets,
-  orgId,
+  // orgId,
   hideDrawer,
   setHideDrawer,
 }: InterfaceUserSidebarOrgProps): JSX.Element => {
@@ -53,32 +54,32 @@ const UserSidebarOrg = ({
   const [showDropdown, setShowDropdown] = React.useState(false);
 
   // State for organization data
-  const [organization, setOrganization] =
-    useState<InterfaceQueryOrganizationsListObject>();
+  // const [organization, setOrganization] =
+  // useState<InterfaceQueryOrganizationsListObject>();
 
   // Query to fetch organization data
-  const {
-    data,
-    loading,
-  }: {
-    data:
-      | { organizations: InterfaceQueryOrganizationsListObject[] }
-      | undefined;
-    loading: boolean;
-  } = useQuery(ORGANIZATIONS_LIST, {
-    variables: { id: orgId },
-  });
+  // const {
+  //   data,
+  //   loading,
+  // }: {
+  //   data:
+  //     | { organizations: InterfaceQueryOrganizationsListObject[] }
+  //     | undefined;
+  //   loading: boolean;
+  // } = useQuery(ORGANIZATIONS_LIST, {
+  //   variables: { id: orgId },
+  // });
 
   // Set organization data once the query is complete
-  useEffect(() => {
-    let isMounted = true;
-    if (data && isMounted) {
-      setOrganization(data?.organizations[0]);
-    }
-    return () => {
-      isMounted = false;
-    };
-  }, [data]);
+  // useEffect(() => {
+  //   let isMounted = true;
+  //   if (data && isMounted) {
+  //     setOrganization(data?.organizations[0]);
+  //   }
+  //   return () => {
+  //     isMounted = false;
+  //   };
+  // }, [data]);
 
   /**
    * Handles click events on navigation links.
@@ -109,7 +110,7 @@ const UserSidebarOrg = ({
         </div>
 
         {/* Organization Section */}
-        <div className={styles.organizationContainer}>
+        {/* <div className={styles.organizationContainer}>
           {loading ? (
             <>
               <button
@@ -150,7 +151,7 @@ const UserSidebarOrg = ({
               <AngleRightIcon fill={'var(--bs-secondary)'} />
             </button>
           )}
-        </div>
+        </div> */}
 
         {/* Options List */}
         <h5 className={styles.titleHeader}>{tCommon('menu')}</h5>