Skip to content

Commit

Permalink
Added thumbnail and repost featurs
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdulsittar
abdulsittar committed Jul 29, 2024
1 parent fed1f10 commit 9b77b37
Show file tree
Hide file tree
Showing 652 changed files with 15,672 additions and 103,741 deletions.
6 changes: 3 additions & 3 deletions client/build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"files": {
"main.css": "/static/css/main.aaf7e6ed.css",
"main.js": "/static/js/main.14bdaefa.js",
"main.js": "/static/js/main.351fffb5.js",
"index.html": "/index.html",
"main.aaf7e6ed.css.map": "/static/css/main.aaf7e6ed.css.map",
"main.14bdaefa.js.map": "/static/js/main.14bdaefa.js.map"
"main.351fffb5.js.map": "/static/js/main.351fffb5.js.map"
},
"entrypoints": [
"static/css/main.aaf7e6ed.css",
"static/js/main.14bdaefa.js"
"static/js/main.351fffb5.js"
]
}
2 changes: 1 addition & 1 deletion client/build/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="stylesheet" href="/assets/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><title>Twin of Online Social Networks</title><script defer="defer" src="/static/js/main.14bdaefa.js"></script><link href="/static/css/main.aaf7e6ed.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="stylesheet" href="/assets/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><title>Twin of Online Social Networks</title><script defer="defer" src="/static/js/main.351fffb5.js"></script><link href="/static/css/main.aaf7e6ed.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
2 changes: 1 addition & 1 deletion client/node_modules/.cache/.eslintcache
View file

Large diffs are not rendered by default.

92 changes: 68 additions & 24 deletions client/src/components/post/Post.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { COLORS } from "../values/colors";
import linkifyit from 'linkify-it';
import { Write_something, comments } from '../../constants';
import './post.css';
//import User from "../../../../server/models/User";

function Post({onScrolling, post, classes, isDetail }) {
const [comments, setComments] = useState([]);
Expand All @@ -42,6 +43,10 @@ function Post({onScrolling, post, classes, isDetail }) {
const [isDislikedByOne, setIsDislikedByOne] = useState(false);

const [repost, setRepost] = useState(post.reposts? post.reposts.length: 0);
const [repostUser, setRepostUser] = useState({});
const [repostId, setRepostId] = useState(post.reposts[post.reposts? post.reposts.length: 0]);


const [rank, setRank] = useState(parseFloat(post.rank.toFixed(2)));//useState(post.reposts? post.reposts.length: 0);

const [isReposted, setIsReposted] = useState(false);
Expand All @@ -62,7 +67,6 @@ function Post({onScrolling, post, classes, isDetail }) {
const [thumbnail, setThumbnail] = useState('');
var cover = true;



const { user: currentUser } = useContext(AuthContext);
const PF = process.env.REACT_APP_PUBLIC_FOLDER;
Expand All @@ -72,6 +76,7 @@ function Post({onScrolling, post, classes, isDetail }) {

useEffect(() => {
const handleFetchThumbnail = async () => {
console.log(post.thumb);
try {
const response = await axios.post('/posts/fetch-thumbnail', { urls : post.thumb });
setThumbnail(response.data.thumbnail);
Expand Down Expand Up @@ -147,9 +152,20 @@ function Post({onScrolling, post, classes, isDetail }) {
const res = await axios.get(`/users?userId=${post.userId}`, {headers: { 'auth-token': token }})
setUser(res.data);
};

const fetchLastRepost = async () => {
console.log("repostId")
console.log(post.reposts[post.reposts.length-1])
const res = await axios.get(`/users?userId=${post.reposts[post.reposts.length-1]}`, {headers: { 'auth-token': token }})
setRepostUser(res.data);
};

//console.log(post.comments.length)
fetchUser();
}, [])
if(post.reposts.length > 0){
fetchLastRepost();
}
}, []);

useEffect(() => {
const handleClickOutside = (event) => {
Expand Down Expand Up @@ -382,41 +398,69 @@ function Post({onScrolling, post, classes, isDetail }) {

return (
<InView as="div" onChange={(inView, entry) => handleViewedChange(inView, post)}>
<div className={classes.post} style={{margin: isDetail && "5px 0"}} >
<div className={classes.postWrapper}>
<div className={classes.postTop}>
<div className={classes.post} style={{margin: isDetail && "5px 0", background: repost>0 ? "#F5F5F5" : "#ffffff"}} >
<div className={classes.postWrapper} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>

<div className={classes.postTop} style={{ background: repost>0 ? "#ffffff" : "#ffffff" }}>
{(repost > 0)?
<div className={classes.postTopLeft}>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} to={isDetail? `/profile/${user.username}`: `/profile/${user.username}` }>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} to={isDetail? `/profile/${repostUser.username}`: `/profile/${repostUser.username}` }>
<img src={repostUser.profilePicture ? PF + repostUser.profilePicture : PF + 'person/noAvatar.png'} alt="" className={classes.postProfileImg} />
</Link>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} to={isDetail? `/profile/${repostUser.username}`: `/profile/${repostUser.username}`}>
<span className={classes.postUsername}>{repostUser.username}</span>
</Link>
<span className={classes.postDate}>{format(repostUser.createdAt)}</span>
<span className={classes.postDate} style={{margin: '0px 0px 0px 20px',}}>{" Reposted by: "+ repost}</span>



</div>: <div></div>}
{ (repost > 0)?
<div className={classes.postTopRight}>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} onClick={repostHandler}>

{ (isMobileDevice && isTabletDevice) ? <Stack direction="row" spacing={2}>
<Button variant="contained" endIcon={<SendIcon />}> Repost </Button></Stack> :<ArrowForwardIcon /> } </Link></div>: <div></div>}

</div>

<div className={classes.postTop} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>

<div className={classes.postTopLeft} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<Link style={{textDecoration: 'none', color: COLORS.textColor, background: repost>0 ? "#F5F5F5" : "#ffffff"}} to={isDetail? `/profile/${user.username}`: `/profile/${user.username}` }>
<img src={user.profilePicture ? PF + user.profilePicture : PF + 'person/noAvatar.png'} alt="" className={classes.postProfileImg} />
</Link>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} to={isDetail? `/profile/${user.username}`: `/profile/${user.username}`}>
<Link style={{textDecoration: 'none', color: COLORS.textColor, background: repost>0 ? "#F5F5F5" : "#ffffff"}} to={isDetail? `/profile/${user.username}`: `/profile/${user.username}`}>
<span className={classes.postUsername}>
{user.username}
</span>
</Link>
<span className={classes.postDate}>{format(post.createdAt)}</span>
<span className={classes.postDate} style={{margin: '0px 0px 0px 20px',}}>{" Reposted by: "+ repost}</span>
<span className={classes.postDate} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>{format(post.createdAt)}</span>
{/*<span className={classes.postDate} style={{margin: '0px 0px 0px 20px',}}>{" Reposted by: "+ repost}</span>*/}
</div>
{ (!isDetail)?
<div className={classes.postTopRight}>

{ (repost < 1)?
<div className={classes.postTopRight} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} onClick={repostHandler}>

{ (isMobileDevice && isTabletDevice) ? <Stack direction="row" spacing={2}>
<Button variant="contained" endIcon={<SendIcon />}> Repost </Button></Stack> :<ArrowForwardIcon /> } </Link></div>: <div></div>
}

</div>
<div className={classes.postCenter}>

<div className={classes.postCenter} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<Linkify componentDecorator={(decoratedHref, decoratedText, key) => (<a target="blank" rel="noopener noreferrer" href={decoratedHref} key={key} > {decoratedText} </a>)}>
<div className={classes.postText} >
<div className={classes.postText} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
{!isDetail && post?.desc.length > 250?
<div className={classes.postText} >{post?.desc.substring(0, 100) }
<div className={classes.postText} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>{post?.desc.substring(0, 100) }
<Link to={{pathname:`/postdetail/${user.username}`, state:{myObj: post}}}>"...Read more"</Link>
</div>
:
post?.desc}
{thumbnail && (
<div>
<div style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<img src={thumbnail} alt="Thumbnail" style={{ width: '200px' }} />
</div>
)}
Expand All @@ -425,33 +469,33 @@ function Post({onScrolling, post, classes, isDetail }) {


</div>
<div className={classes.postBottom}>
<div className={classes.postBottomLeft}>
<div className={classes.postBottom} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<div className={classes.postBottomLeft} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<img src={`${PF}clike.png`} alt="" className={classes.likeIcon} onClick={likeHandler} />
<span className={classes.postLikeCounter}>{like}</span>

<img src={`${PF}cdislike.png`} alt="" className={classes.likeIcon} onClick={dislikeHandler} />
<span className={classes.postDislikeCounter}>{dislike}</span>

</div>
<div className={classes.postBottomRight}>
<div className={classes.postBottomRight} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<Link style={{textDecoration: 'none', color: COLORS.textColor}} to={{pathname:`/postdetail/${user.username}`, state:{myObj: post}}}> <div className={classes.postCommentText} >{comments.length} {"Kommentare"}</div></Link>
</div>
</div>
<div ref={ref} className={classes.commentsWrapper} style={{ display: isVisible ? "block" : "none" }}>
<div ref={ref} className={classes.commentsWrapper} style={{ display: isVisible ? "block" : "none", background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<hr className={classes.shareHr} />

<div className={classes.txtnButtonRight}>
<div className={classes.txtnButtonRight} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
<CardHeader
avatar={<Avatar className={classes.smallAvatar} src={user.profilePicture? PF + user.profilePicture: PF + "person/noAvatar.png"} />}
title={<InputEmoji className={classes.shareInput} style={{ fontSize: "15", height: "40px" }} shouldReturn={true} value={inputValue} onChange={handleChange} onEnter={onEnterSubmitHandler} placeholder={Write_something} />}
className={classes.cardHeader}/>
avatar={<Avatar className={classes.smallAvatar} src={user.profilePicture? PF + user.profilePicture: PF + "person/noAvatar.png"} style={{ background: repost>0 ? "#ffffff" : "#ffffff" }} />}
title={<InputEmoji className={classes.shareInput} style={{ fontSize: "15", height: "40px", background: repost>0 ? "#ffffff" : "#ffffff" }} shouldReturn={true} value={inputValue} onChange={handleChange} onEnter={onEnterSubmitHandler} placeholder={Write_something} />}
className={classes.cardHeader} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}/>

<form class = "form">
<SendIcon className={classes.sendButton2} style={{ display:"flex", margin:"0px 20px"}} type="submit" onClick={submitHandler}/>
</form>
</div>
<div className={classes.commentTop}>
<div className={classes.commentTop} style={{ background: repost>0 ? "#F5F5F5" : "#ffffff" }}>
{comments.slice(0).reverse().map((item, i) => {
console.log(i);
console.log(item._id);
Expand Down
16 changes: 8 additions & 8 deletions docker-compose.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ services:

client:
build: ./client
image: cli-image-v1
container_name: cli-v1
image: cli-image-v2
container_name: cli-v2
networks:
- mern-network-v1
- mern-network-v2
#depends_on:
# - server
working_dir: /app
Expand All @@ -20,16 +20,16 @@ services:
server:
build: ./server
restart: always
image: ser-image-v1
container_name: cser-v1
image: ser-image-v2
container_name: cser-v2
working_dir: /app
#volumes:
# - ./server:/app
# - ./client/build:/app/client/build
ports:
- "1077:1077"
networks:
- mern-network-v1
- mern-network-v2
depends_on:
- client
- mongo
Expand All @@ -41,12 +41,12 @@ services:
ports:
- "27017:27017"
networks:
- mern-network-v1
- mern-network-v2
#volumes:
# - /home/adbuls/TWON-Production/Social-App/mongo-data:/data/db

networks:
mern-network-v1:
mern-network-v2:
driver: bridge

#volumes:
Expand Down
Loading

0 comments on commit 9b77b37

Please sign in to comment.