feat: added desc to cards

src/GraphQl/Queries/Queries.ts

@@ -86,6 +86,7 @@ export const ORGANIZATION_CONNECTION_LIST = gql`
         sortingCode
         state
       }
+      description
     }
   }
 `;

src/components/OrgListCard/OrgListCard.module.css

@@ -1,7 +1,7 @@
 .orgCard {
   background-color: var(--bs-white);
   margin: 0.5rem;
-  height: calc(120px + 2rem);
+  height: calc(140px + 2rem);
   padding: 1rem;
   border-radius: 8px;
   outline: 1px solid var(--bs-gray-200);

src/components/OrgListCard/OrgListCard.test.tsx

@@ -60,6 +60,7 @@ const props: InterfaceOrgListCardProps = {
       firstName: 'John',
       lastName: 'Doe',
     },
+    description: 'this is a sample description',
   },
 };
 

src/components/OrgListCard/OrgListCard.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import styles from './OrgListCard.module.css';
 import { useHistory } from 'react-router-dom';
 import type { InterfaceOrgConnectionInfoType } from 'utils/interfaces';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import { useQuery } from '@apollo/client';
 import { Tooltip } from '@mui/material';
@@ -15,7 +14,8 @@ export interface InterfaceOrgListCardProps {
 }
 
 function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
-  const { _id, admins, image, address, members, name } = props.data;
+  const { _id, admins, image, address, members, name, description } =
+    props.data;
 
   const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
     variables: {
@@ -60,23 +60,35 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
             <Tooltip title={name} placement="top-end">
               <h4 className={styles.orgName}>{name}</h4>
             </Tooltip>
+            {description && (
+              <div>
+                <h6>
+                  About Us:{' '}
+                  <span title={description}>
+                    {description.length > 55
+                      ? description.substring(0, 55) + '...'
+                      : description}
+                  </span>
+                </h6>
+              </div>
+            )}
             {address && address.city && (
               <div>
                 <h6 className="text-secondary">
-                  <LocationOnIcon fontSize="inherit" className="fs-5" />
-                  <span className="address-line">{address.city}, </span>
-                  <span className="address-line">{address.state}</span>
-                  <br />
-                  <LocationOnIcon fontSize="inherit" className="fs-5" />
-                  <span className="address-line">{address.postalCode}, </span>
+                <span className="address-line">
+                    {address.city}
+                    {address.postalCode ? ', ' + address.postalCode : ''}
+                  </span>
+                  <span className="address-line">
+                    {address.state ? ', ' + address.state : ''}
+                  </span>
+                  <br/>
                   <span className="address-line">{address.countryCode}</span>
                 </h6>
               </div>
             )}
             <h6>
               {t('admins')}: <span>{admins.length}</span>
-            </h6>
-            <h6>
               {t('members')}: <span>{members.length}</span>
             </h6>
           </div>

src/screens/OrgList/OrgListMocks.ts

@@ -60,6 +60,7 @@ const organizations: InterfaceOrgConnectionInfoType[] = [
       sortingCode: 'ABC-123',
       state: 'Kingston Parish',
     },
+    description: 'this is a sample description',
   },
 ];
 
@@ -94,6 +95,7 @@ for (let x = 0; x < 100; x++) {
       sortingCode: 'ABC-123',
       state: 'Kingston Parish',
     },
+    description: 'sample description',
   });
 }
 

src/screens/Users/UsersMocks.ts

@@ -223,6 +223,7 @@ export const MOCKS = [
               sortingCode: 'ABC-123',
               state: 'Kingston Parish',
             },
+            description: 'this is a sample description',
           },
         ],
       },
@@ -382,6 +383,7 @@ export const MOCKS2 = [
               sortingCode: 'ABC-123',
               state: 'Kingston Parish',
             },
+            description: 'this is a sample description',
           },
         ],
       },

src/utils/interfaces.ts

@@ -30,6 +30,7 @@ export interface InterfaceOrgConnectionInfoType {
   }[];
   createdAt: string;
   address: InterfaceAddress;
+  description: string;
 }
 export interface InterfaceOrgConnectionType {
   organizationsConnection: InterfaceOrgConnectionInfoType[];