Fixes PalisadoesFoundation#1514 redesign the Posts screen for the tal…

…awa user portal
gauravsingh94 · Mar 9, 2024 · 3b0b003 · 3b0b003
1 parent 6c45a9b
commit 3b0b003
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 14 deletions.
diff --git a/src/components/UserPortal/PostCard/PostCard.module.css b/src/components/UserPortal/PostCard/PostCard.module.css
@@ -22,6 +22,15 @@
   border-radius: 50%;
 }
 
+.profileNotPresent {
+  width: 28px;
+  height: 28px;
+  margin-right: 12px;
+  background-color: rgba(49, 187, 107, 0.12);
+  font-weight: 600;
+  border-radius: 50%;
+}
+
 .user {
   display: flex;
   font-weight: 600;
@@ -32,6 +41,12 @@
   min-height: 200px;
 }
 
+.imgNotPresent {
+  background-color: rgba(49, 187, 107, 0.12);
+  width: 100%;
+  min-height: 200px;
+}
+
 .icons {
   display: flex;
   align-items: baseline;

diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as ReportIcon } from 'assets/svgs/report.svg';
 import { ReactComponent as SharePostIcon } from 'assets/svgs/sharePost.svg';
 
 import styles from './PostCard.module.css';
+import { NumericLiteral } from 'typescript';
 interface InterfacePostCardProps {
   id: string;
   creator: {
@@ -31,15 +32,30 @@ export default function postCard(props: InterfacePostCardProps): JSX.Element {
     setMenuOpen(!isMenuOpen);
   };
 
+  const formatDate = (dateString: number): string => {
+    const date = new Date(dateString);
+    const day = date.getDate();
+    const month = date.toLocaleString('default', { month: 'long' });
+    const year = date.getFullYear();
+
+    return `${day} ${month} ${year}`;
+  };
+
   return (
     <>
       <Card className={`${styles.cardStyle}`}>
         <div className={`${styles.cardAuthorSection}`}>
           <div className={`${styles.user}`}>
-            <img
-              src={props.creator.image}
-              className={`${styles.profile}`}
-            ></img>
+            {props.creator.image && (
+              <img
+                src={props.creator.image}
+                className={`${styles.profile}`}
+              ></img>
+            )}
+            {!props.creator.image && (
+              <div className={`${styles.profileNotPresent}`}></div>
+            )}
+
             <span>
               {props.creator.firstName} {props.creator.lastName}
             </span>
@@ -79,11 +95,12 @@ export default function postCard(props: InterfacePostCardProps): JSX.Element {
         </div>
         {/* image */}
         {props.image && <img src={props.image} className={`${styles.img}`} />}
+        {!props.image && <div className={`${styles.imgNotPresent}`}></div>}
         <div className={`${styles.postCardContent}`}>
           <span className={`${styles.postHeading}`}>{props.title}</span>
           <div>
             <span className={`${styles.postedOnText}`}>Posted On: </span>
-            <span>{props.createdAt}</span>
+            <span>{formatDate(props.createdAt)}</span>
           </div>
           <span className={`${styles.postMessage}`}>{props.text}</span>
           <div className={`${styles.buttonContainer}`}>

diff --git a/src/screens/UserPortal/Home/Home.module.css b/src/screens/UserPortal/Home/Home.module.css
@@ -146,7 +146,7 @@
   align-items: center;
   position: absolute;
   right: 1%;
-  top: 20%;
+  top: 28%;
   transform: translateY(-50%);
 }
 

diff --git a/src/screens/UserPortal/Home/Home.tsx b/src/screens/UserPortal/Home/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, ReactElement } from 'react';
+import React, { useRef, ReactElement, useEffect } from 'react';
 import type { ChangeEvent } from 'react';
 import { Button, Card, Form, InputGroup, Modal } from 'react-bootstrap';
 import styles from './Home.module.css';
@@ -79,6 +79,12 @@ export default function home(): JSX.Element {
   const [postContent, setPostContent] = React.useState('');
   const [postImage, setPostImage] = React.useState('');
   const [adContent, setAdContent] = React.useState([]);
+  const [hasPinnedPost, setHasPinnedPost] = React.useState(false);
+
+  useEffect(() => {
+    const hasPinned = posts.some((post) => post.pinned === true);
+    setHasPinnedPost(hasPinned);
+  });
 
   const carouselRef = useRef<HTMLDivElement>(null);
 
@@ -215,7 +221,7 @@ export default function home(): JSX.Element {
           ) : (
             <div className={`${styles.pinnedPosts}`} ref={carouselRef}>
               {posts
-                .filter((post) => post.pinned === false)
+                .filter((post) => post.pinned === true)
                 .map((post: any) => {
                   const allLikes: any = [];
                   post.likedBy.forEach((value: any) => {
@@ -271,12 +277,14 @@ export default function home(): JSX.Element {
 
                   return <PostCard key={post._id} {...cardProps} />;
                 })}
-              <Button
-                className={`${styles.rightScrollButton}`}
-                onClick={handleScrollRight}
-              >
-                <RightScrollIcon />
-              </Button>
+              {hasPinnedPost && (
+                <Button
+                  className={`${styles.rightScrollButton}`}
+                  onClick={handleScrollRight}
+                >
+                  <RightScrollIcon />
+                </Button>
+              )}
             </div>
           )}