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 ( <>
- {title ? title : 'title'} - {media ? {title} : ''} - {video ? : ''} -

{body}

+ {title ? title : '[untitled]'} + {media ? {title} : ''} + {video ? : ''} + {body ?

{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

); -} \ No newline at end of file +} + +// 1643381811730 +// 1643381153 \ No newline at end of file diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js index 48ba589..b391a99 100644 --- a/src/features/sidebar/Sidebar.js +++ b/src/features/sidebar/Sidebar.js @@ -1,15 +1,17 @@ import React, { useRef, useState } from "react"; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { selectAllSubs } from "../reddit/redditSlice"; import './Sidebar.css'; export default function Sidebar({isCollapsed}) { + const dispatch = useDispatch(); const allSubs = useSelector(selectAllSubs); let arrayOfSubs = Object.keys(allSubs); const [subs, setSubs] = useState(arrayOfSubs); const [searchSubs, setSearchSubs] = useState(''); + const [selected, setSelected] = useState('none selected'); const searchWindowStyle = useRef('search-inactive'); // this ref allows us to access and modify the class of the search window container from another part of the render function @@ -24,6 +26,11 @@ export default function Sidebar({isCollapsed}) { } } + const handleClick = (e) => { + let selectedSub = e.target.id; + setSelected(selectedSub); + } + return ( <>
{/* Is collapsed is passed from the parent component, and is mutable within the navbar */} @@ -31,13 +38,13 @@ export default function Sidebar({isCollapsed}) { subs.map((sub) => { // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property return (
- {/* This button will dispatch an action to change the state of this specific subreddit */} -

{sub}

+ {}} checked> +
) }) } - +

Search Results for: {searchSubs}