diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index 8ab987e..5e6e57a 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -106,13 +106,15 @@ export default function Feed() { } - mapPosts(); + if (isActive) { + mapPosts(); + } return () => { isActive = false; } - }, [data, setFeed]) + }, [data, setFeed]); return ( <> diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index 5d29457..e603e2e 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -14,7 +14,7 @@ height: 15rem; } -a { +.title { font-size: 2rem; } @@ -27,6 +27,7 @@ img, video { display: inline-flex; flex-direction: row; justify-content: space-between; + align-items: baseline; } .post-text { diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index 1e67c95..5cab780 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -4,43 +4,50 @@ import './Post.css'; export default function Post({title,author,subreddit,ups,comments,time,key,media,permalink,selftext,video}) { const limit = 300; const [body, setBody] = useState(selftext); + + const postDate = new Date(time * 1000); + const localTime = postDate.toLocaleTimeString(); + const localDate = postDate.toLocaleDateString(); - // useEffect(() => { - // if (selftext.length === 0) { // in the case that the post body is empty, it does not include an ellipsis on mouseout - // return; - // } else if (selftext.length > limit) { - // setBody(selftext.substring(0,limit) + '...'); - // } else { - // return; - // } - // }, [setBody, selftext]); + useEffect(() => { + if (selftext.length === 0) { // in the case that the post body is empty, it does not include an ellipsis on mouseout + return; + } else if (selftext.length > limit) { + setBody(selftext.substring(0,limit) + '...'); + } else { + return; + } + }, [setBody, selftext]); - // const handleHover = () => { - // setBody(selftext); - // } + const handleHover = () => { + setBody(selftext); + } - // const handleMouseOut = () => { - // if (selftext.length === 0) { // ...and then doesn't add it in after a mouseover/out - // return; - // } + const handleMouseOut = () => { + if (selftext.length === 0) { // ...and then doesn't add it in after a mouseover/out + return; + } - // setBody(selftext.substring(0,limit) + '...'); - // } + setBody(selftext.substring(0,limit) + '...'); + } return ( <>
{body}
+ {title ? title : '[untitled]'} + {media ?{body}
: ''}{subreddit ? 'r/' + subreddit : ''}
+ {subreddit ? 'r/' + subreddit : ''}{author ? 'u/' + author : 'u/username'}
-posted at {time ? time : '...?'}
+posted at {time ? (localTime + ' on ' + localDate) : '...?'}
{comments ? comments : 'no'} comments
{sub}
+ {}} checked> +