date parsed from unix timestamp

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 (
         <>

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 {

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 (
         <>
         <div className="post-body">
-            <a className="title" href={`https://reddit.com${permalink}`}>{title ? title : 'title'}</a>
-            {media ?     <img alt={title} src={media} />                           : ''}
-            {video ?     <video controls type="video/mp4" src={video}></video>     : ''}
-            <p className="post-text">{body}</p>
+            <a className="title" href={`https://reddit.com${permalink}`}>{title ? title       : '[untitled]'}</a>
+            {media ?     <img alt={title} src={media} />                                      : ''}
+            {video ?     <video controls type="video/mp4" src={video}></video>                : ''}
+            {body ?      <p onMouseover={handleHover} onMouseOut={handleMouseOut}>{body}</p>  : ''}
             <div className="post-metadata">
-                <p>{subreddit ? 'r/' + subreddit : ''}</p>
+                <a href={`https://www.reddit.com${permalink}`}>{subreddit ? 'r/' + subreddit  : ''}</a>
                 <p className="user">{author ? 'u/' + author : 'u/username'}</p>
-                <p className="time-posted">posted at {time ? time : '...?'}</p>
+                <p className="time-posted">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
                 <p className="num-comments">{comments ? comments : 'no'} comments</p>
             </div>
         </div>
         </>
     );
-}
+}
+
+// 1643381811730
+// 1643381153

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 (
         <>
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>  {/* 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 (
                         <div className="individual-sub">
-                            <button className="toggle-sub-active">X</button>    {/* This button will dispatch an action to change the state of this specific subreddit */}
-                            <p>{sub}</p>
+                            <input type="checkbox" id={sub} htmlFor={sub} onChange={()=>{}} checked></input>
+                            <label htmlFor={sub}>{sub}</label>
                         </div>
                     )
                 })
             }
-            <input className="search-sub-input" type="text" onChange={handleChange} placeholder="Search Subs to Add"></input>
+            <input className="search-sub-input" type="text" onChange={handleClick} placeholder="Search Subs to Add"></input>
         </div>
         <div className={searchWindowStyle.current}>
             <h2>Search Results for: {searchSubs}</h2>