From 8c6c8f182319e7a1dce7f150ec9aa1f9474f4f41 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Thu, 27 Jan 2022 18:43:48 -0600 Subject: [PATCH 1/8] Set theme jekyll-theme-minimal --- _config.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 _config.yml diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..2f7efbe --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-minimal \ No newline at end of file -- 2.49.1 From 7d6e24c4a2c20098d08ce4aeab7f51f60d11e489 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 28 Jan 2022 08:25:29 -0600 Subject: [PATCH 2/8] post sorting algorithm fixed --- src/features/posts/Feed.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index 621560e..ae79e20 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -69,9 +69,21 @@ export default function Feed() { } }; - extractedPosts = extractedPosts.sort((x,y) => x.created_utc > y.created_utc); // sorts posts by sort time (to do: fix this) + console.log(extractedPosts); - let newFeed = extractedPosts.map((post) => { + const comparePosts = (a,b) => { + if (a.data.created_utc > b.data.created_utc) { + return -1; + } else if (a.data.created_utc < b.data.created_utc) { + return 1; + } else { + return 0; + } + } + + let sortedPosts = extractedPosts.sort(comparePosts); + + let newFeed = sortedPosts.map((post) => { return ( Date: Fri, 28 Jan 2022 08:26:12 -0600 Subject: [PATCH 3/8] documentation --- src/features/posts/Feed.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index ae79e20..e613730 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -69,9 +69,7 @@ export default function Feed() { } }; - console.log(extractedPosts); - - const comparePosts = (a,b) => { + const comparePosts = (a,b) => { // sorting function: compares time posted within each object in array if (a.data.created_utc > b.data.created_utc) { return -1; } else if (a.data.created_utc < b.data.created_utc) { @@ -81,7 +79,7 @@ export default function Feed() { } } - let sortedPosts = extractedPosts.sort(comparePosts); + let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function let newFeed = sortedPosts.map((post) => { return ( -- 2.49.1 From cbef00d541c0c9175aeb1adb6534cc40b9d101cd Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 28 Jan 2022 08:34:59 -0600 Subject: [PATCH 4/8] planning for edge cases --- src/features/posts/Feed.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index e613730..8ab987e 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -81,6 +81,8 @@ export default function Feed() { let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function + console.log(sortedPosts); + let newFeed = sortedPosts.map((post) => { return ( ); }) -- 2.49.1 From c18ae73d133b6c1bbe90ef7965cfebe2a9e5c2e9 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 28 Jan 2022 09:03:17 -0600 Subject: [PATCH 5/8] date parsed from unix timestamp --- src/features/posts/Feed.js | 6 ++-- src/features/posts/Post.css | 3 +- src/features/posts/Post.js | 57 ++++++++++++++++++--------------- src/features/sidebar/Sidebar.js | 15 ++++++--- 4 files changed, 49 insertions(+), 32 deletions(-) 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}

-- 2.49.1 From e0db57c8db9bab504d25ca5b05f9d201a8268a23 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 28 Jan 2022 09:03:51 -0600 Subject: [PATCH 6/8] documentation --- src/features/posts/Post.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index 5cab780..addf7c4 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -5,7 +5,7 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media const limit = 300; const [body, setBody] = useState(selftext); - const postDate = new Date(time * 1000); + const postDate = new Date(time * 1000); // handles conversion from unix timestamp to local time and date strings const localTime = postDate.toLocaleTimeString(); const localDate = postDate.toLocaleDateString(); @@ -47,7 +47,4 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
); -} - -// 1643381811730 -// 1643381153 \ No newline at end of file +} \ No newline at end of file -- 2.49.1 From 480b9c984bb893f55f362de81b93322b24e40657 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 28 Jan 2022 09:08:00 -0600 Subject: [PATCH 7/8] legibility --- src/features/posts/Post.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index addf7c4..e0d715f 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -34,16 +34,31 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media return ( <>
- {title ? title : '[untitled]'} - {media ? {title} : ''} - {video ? : ''} - {body ?

{body}

: ''} + + {title ? + {title} + :

[untitled]

} + + {media ? {title} : ''} + + {video ? + + : ''} + + {body ? +

{body}

+ : ''} +
- {subreddit ? 'r/' + subreddit : ''} + + {subreddit ? 'r/' + subreddit : ''} + +

{author ? 'u/' + author : 'u/username'}

posted at {time ? (localTime + ' on ' + localDate) : '...?'}

{comments ? comments : 'no'} comments

+
); -- 2.49.1 From 2e3a318125d3fd65e61a8f094b1ee496266cf998 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 28 Jan 2022 10:11:29 -0600 Subject: [PATCH 8/8] sidebar checkboxes dispatch visibility change --- src/features/posts/Feed.js | 3 ++- src/features/posts/Post.js | 4 ++-- src/features/posts/postsSlice.js | 3 +-- src/features/reddit/redditSlice.js | 16 +++++++++++++--- src/features/sidebar/Sidebar.js | 12 ++++-------- src/features/sidebar/SidebarItem.js | 23 +++++++++++++++++++++++ 6 files changed, 45 insertions(+), 16 deletions(-) create mode 100644 src/features/sidebar/SidebarItem.js diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index 5e6e57a..0fd42a7 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import { fetchBySub } from "./postsSlice"; import { selectAllSubs } from "../reddit/redditSlice"; import { useSelector, useDispatch } from "react-redux"; +import { updatePosts } from "./postsSlice"; import { v4 } from "uuid"; import Post from "./Post"; @@ -28,7 +29,7 @@ export default function Feed() { if (subArray) { prepareData(); } - }, [setEndpoints]); + }, [setEndpoints, subs]); diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index e0d715f..a5a1ef0 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -46,7 +46,7 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media : ''} {body ? -

{body}

+

{body}

: ''}
@@ -58,7 +58,7 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media

posted at {time ? (localTime + ' on ' + localDate) : '...?'}

{comments ? comments : 'no'} comments

- + ); diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js index e5edaae..2ef0e54 100644 --- a/src/features/posts/postsSlice.js +++ b/src/features/posts/postsSlice.js @@ -52,5 +52,4 @@ export const postsSlice = createSlice({ export default postsSlice.reducer; export const selectPosts = state => state.postsSlice.posts; export const { filterPosts, updatePosts } = postsSlice.actions; -// exports also includes fetchBySub (takes argument of a sub) -// exports also includes fetchFromAll (takes argument of an array of subs) \ No newline at end of file +// exports also includes fetchBySub (takes argument of a sub) \ No newline at end of file diff --git a/src/features/reddit/redditSlice.js b/src/features/reddit/redditSlice.js index 6ea3ab4..adc9cba 100644 --- a/src/features/reddit/redditSlice.js +++ b/src/features/reddit/redditSlice.js @@ -64,9 +64,8 @@ export const redditSlice = createSlice({ }, }, reducers: { - updateSubVisibility(state,action) { - // reads state of buttons in Sidebar component to determine whether each is active - // connects with post rendering, filtering out posts belonging to inactive subreddits + updateSubVisibility(state,action) { // receives a subreddit name as action.payload + state.subreddits[action.payload].isSelected = !state.subreddits[action.payload].isSelected; } }, extraReducers: {}, @@ -74,4 +73,15 @@ export const redditSlice = createSlice({ export default redditSlice.reducer; export const selectAllSubs = state => state.redditSlice.subreddits; +export const selectActiveSubs = state => { + let activeSubs = []; + for (let it in state.redditSlice.subreddits) { + if (it.isSelected) { + activeSubs.push(it); + } else { + continue; + } + } + return activeSubs; +} export const { updateSubVisibility } = redditSlice.actions; \ No newline at end of file diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js index b391a99..0bb5e8e 100644 --- a/src/features/sidebar/Sidebar.js +++ b/src/features/sidebar/Sidebar.js @@ -1,6 +1,7 @@ import React, { useRef, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { selectAllSubs } from "../reddit/redditSlice"; +import SidebarItem from "./SidebarItem"; import './Sidebar.css'; export default function Sidebar({isCollapsed}) { @@ -11,7 +12,6 @@ export default function Sidebar({isCollapsed}) { 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 @@ -27,8 +27,7 @@ export default function Sidebar({isCollapsed}) { } const handleClick = (e) => { - let selectedSub = e.target.id; - setSelected(selectedSub); + } return ( @@ -37,14 +36,11 @@ 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 ( -
- {}} checked> - -
+ ) }) } - +

Search Results for: {searchSubs}

diff --git a/src/features/sidebar/SidebarItem.js b/src/features/sidebar/SidebarItem.js new file mode 100644 index 0000000..3d0ba87 --- /dev/null +++ b/src/features/sidebar/SidebarItem.js @@ -0,0 +1,23 @@ +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { updateSubVisibility, selectAllSubs } from "../reddit/redditSlice"; + +export default function SidebarItem({sub, isChecked}) { + const [checked, setChecked] = useState(isChecked); + const dispatch = useDispatch(); + const allSubs = useSelector(selectAllSubs); + + const handleClick = () => { + setChecked(!checked); + dispatch(updateSubVisibility(sub)); + } + + console.log(allSubs); + + return ( +
+ + +
+ ); +} \ No newline at end of file -- 2.49.1