Showing advertisements in the User end app

src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx

@@ -58,7 +58,9 @@ function advertisementEntry({
             <Card>
               <Card.Img
                 variant="top"
-                src={'https://avatars.githubusercontent.com/u/65951872?v=4'}
+                src={
+                  'https://i.pinimg.com/736x/f0/68/da/f068daf5f23f74ada84537bcb70c7e4b.jpg'
+                }
               />
               <Card.Body>
                 <Card.Title>{name}</Card.Title>

src/components/LeftDrawerOrg/LeftDrawerOrg.tsx

@@ -132,9 +132,7 @@ const leftDrawerOrg = ({
                 )}
               </div>
               <div className={styles.profileText}>
-                <span className={styles.primaryText}>
-                  Good {organization.name}
-                </span>
+                <span className={styles.primaryText}>{organization.name}</span>
                 <span className={styles.secondaryText}>
                   {organization.location}
                 </span>

src/components/UserPortal/PromotedPost/PromotedPost.module.css

@@ -0,0 +1,56 @@
+.cardActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+}
+
+.cardActionBtn {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  color: black;
+}
+
+.cardActionBtn:hover {
+  background-color: ghostwhite;
+  border: none;
+  color: black !important;
+}
+
+.imageContainer {
+  max-width: 100%;
+}
+
+.cardHeader {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  color: #50c878;
+}
+
+.creatorNameModal {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modalActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+  margin: 5px 0px;
+}
+
+.textModal {
+  margin-top: 10px;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+  color: white;
+  cursor: pointer;
+}

src/components/UserPortal/PromotedPost/PromotedPost.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Card } from 'react-bootstrap';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import styles from './PromotedPost.module.css';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import StarPurple500Icon from '@mui/icons-material/StarPurple500';
+interface InterfacePostCardProps {
+  id: string;
+  image: string;
+  title: string;
+}
+export default function promotedPost(
+  props: InterfacePostCardProps
+): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'postCard',
+  });
+
+  const userId = localStorage.getItem('userId');
+  return (
+    <>
+      <Card className="my-3">
+        <Card.Header>
+          <div className={`${styles.cardHeader}`}>
+            <StarPurple500Icon />
+            {'Promoted Content'}
+          </div>
+        </Card.Header>
+        <Card.Body>
+          <Card.Title>{props.title}</Card.Title>
+          <Card.Text>{props.title}</Card.Text>
+          {props.image && (
+            <img src={props.image} className={styles.imageContainer} />
+          )}
+        </Card.Body>
+      </Card>
+    </>
+  );
+}

src/screens/UserPortal/Home/Home.tsx

@@ -11,13 +11,17 @@ import getOrganizationId from 'utils/getOrganizationId';
 import SendIcon from '@mui/icons-material/Send';
 import PostCard from 'components/UserPortal/PostCard/PostCard';
 import { useMutation, useQuery } from '@apollo/client';
-import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+import {
+  ADVERTISEMENTS_GET,
+  ORGANIZATION_POST_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
 import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
 import { errorHandler } from 'utils/errorHandler';
 import { useTranslation } from 'react-i18next';
 import convertToBase64 from 'utils/convertToBase64';
 import { toast } from 'react-toastify';
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import PromotedPost from 'components/UserPortal/PromotedPost/PromotedPost';
 
 interface InterfacePostCardProps {
   id: string;
@@ -60,11 +64,25 @@ export default function home(): JSX.Element {
   const [posts, setPosts] = React.useState([]);
   const [postContent, setPostContent] = React.useState('');
   const [postImage, setPostImage] = React.useState('');
+  const currentOrgId = window.location.href.split('/id=')[1] + '';
+  const [adContent, setAdContent] = React.useState([]);
 
   const navbarProps = {
     currentPage: 'home',
   };
-
+  const {
+    data: promotedPostsData,
+    refetch: promotedPostsRefetch,
+    loading: promotedPostsLoading,
+  } = useQuery(ADVERTISEMENTS_GET);
+  console.log(
+    currentOrgId,
+    promotedPostsData,
+    adContent.filter((ad: any) => ad.orgId == currentOrgId),
+    adContent
+      .filter((ad: any) => ad.orgId == currentOrgId)
+      .filter((ad: any) => new Date(ad.endDate) > new Date())
+  );
   const {
     data,
     refetch,
@@ -116,6 +134,12 @@ export default function home(): JSX.Element {
     }
   }, [data]);
 
+  React.useEffect(() => {
+    if (promotedPostsData) {
+      setAdContent(promotedPostsData.getAdvertisements);
+    }
+  }, [data]);
+
   return (
     <>
       <OrganizationNavbar {...navbarProps} />
@@ -184,6 +208,21 @@ export default function home(): JSX.Element {
               </Link>
             </div>
           </div>
+          {adContent
+            .filter((ad: any) => ad.orgId == currentOrgId)
+            .filter((ad: any) => new Date(ad.endDate) > new Date()).length == 0
+            ? ''
+            : adContent
+                .filter((ad: any) => ad.orgId == currentOrgId)
+                .filter((ad: any) => new Date(ad.endDate) > new Date())
+                .map((post: any) => (
+                  <PromotedPost
+                    key={post.id}
+                    id={post.id}
+                    image={post.link}
+                    title={post.name}
+                  />
+                ))}
           {loadingPosts ? (
             <div className={`d-flex flex-row justify-content-center`}>
               <HourglassBottomIcon /> <span>Loading...</span>