diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index 02be93928e..f2342f0db8 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -58,7 +58,9 @@ function advertisementEntry({ {name} diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx index 9ad0e7cf2d..beb7f07206 100644 --- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx +++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx @@ -132,9 +132,7 @@ const leftDrawerOrg = ({ )}
- - Good {organization.name} - + {organization.name} {organization.location} diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.module.css b/src/components/UserPortal/PromotedPost/PromotedPost.module.css new file mode 100644 index 0000000000..cdc13e621b --- /dev/null +++ b/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; +} diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.tsx new file mode 100644 index 0000000000..10c85030b6 --- /dev/null +++ b/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 ( + <> + + +
+ + {'Promoted Content'} +
+
+ + {props.title} + {props.title} + {props.image && ( + + )} + +
+ + ); +} diff --git a/src/screens/UserPortal/Home/Home.tsx b/src/screens/UserPortal/Home/Home.tsx index b657fc0c02..2cdad8b979 100644 --- a/src/screens/UserPortal/Home/Home.tsx +++ b/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 ( <> @@ -184,6 +208,21 @@ export default function home(): JSX.Element {
+ {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) => ( + + ))} {loadingPosts ? (
Loading...