src/App.css

@@ -1,27 +1,122 @@
+/*****
+* Order of contents:
+*
+* Google fonts import
+* Universal styles
+* Navbar styles
+* Sidebar styles
+* Feed styles
+*****/
+
+/* Google Fonts imports: */
+
+@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Indie+Flower&family=Open+Sans&display=swap');
+
+
+/* Universal page styling */
+
 .App {
   display: flex;
   flex-direction: column;
+  background-color: #FFE9F3;
   align-items: center;
   margin: 0;
   padding: 0;
 }
 
-.navbar {
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: baseline;
-  width: 100%;
-  height: 5rem;
-  border-bottom: 1px solid black;
+.loading-message {
+  color:rgb(111, 30, 151);
+  font-family: 'Indie Flower', sans-serif;
+  height: 100vh;
 }
 
-.navbar > * {
-  padding: 0 2rem;
+/* Navbar */
+
+.navbar {
+  display: inline-flex;
+  position: fixed;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 5rem;
+  background-color: rgb(111, 30, 151);
+  border-bottom: 1px solid black;
+  z-index: 9;
 }
 
+.nav-title {
+  display: inline-flex;
+  color: orchid;
+  padding-left: 1.5rem;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.nav-searchbar {
+  display: inline-flex;
+  position: relative;
+  color: darkorchid;
+  padding-left: 0.7rem;
+  border-radius: 8px;
+  right: 5rem;
+  height: 40%;
+  width: 35rem;
+}
+
+.nav-searchbar::placeholder {
+  color: darkorchid;
+}
+
+/* Sidebar */
+
+.sidebar-button {
+  border: transparent;
+  background-color: orchid;
+  text-align: center;
+  height: 3.5rem;
+  border-radius: 15px;
+  margin-right: 1rem;
+  width: 6rem;
+}
+
+.sidebar-button:active {
+  background-color: darkorchid;
+  transition: background-color 35ms linear;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 12rem;
+  position: fixed;
+  background-color: black;
+  color: white;
+  right: 0;
+  top: 5rem;
+  padding: 1.5rem;
+  transition: right 0.6s ease-out;
+  z-index: 9;
+}
+
+.sidebar-hidden {
+  display: flex;
+  flex-direction: column;
+  width: 12rem;
+  position: fixed;
+  background-color: black;
+  color: white;
+  right: -15rem;
+  top: 5rem;
+  padding: 1.5rem;
+  transition: right 0.6s ease-out;
+}
+
+/* Feed */
+
 .content-container {
   display: inline-flex;
+  position: relative;
+  top: 5rem;
   flex-direction: row;
 }
 
@@ -36,30 +131,4 @@
   display: hidden;
   flex-direction: column;
   align-items: center;
-}
-
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  width: 12rem;
-  position: fixed;
-  background-color: black;
-  color: white;
-  right: 0;
-  top: 5rem;
-  padding: 1.5rem;
-  transition: right 0.6s ease-out;
-}
-
-.sidebar-hidden {
-  display: flex;
-  flex-direction: column;
-  width: 12rem;
-  position: fixed;
-  background-color: black;
-  color: white;
-  right: -15rem;
-  top: 5rem;
-  padding: 1.5rem;
-  transition: right 0.6s ease-out;
 }

src/features/discussion/Discussion.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { unwrapResult } from '@reduxjs/toolkit';
 import { fetchComments, isPending } from '../posts/postsSlice';
+import { v4 } from 'uuid';
 
 export default function Discussion({permalink, isVisible}) {
     const [thread, setThread] = useState(null);
@@ -12,6 +13,8 @@ export default function Discussion({permalink, isVisible}) {
 
     const formattedLink = permalink.substring(0,(permalink.length-1));
 
+    let deps = [isVisible, data, setData, thread, setThread, formattedLink, dispatch];
+
     useEffect(() => {
         let isActive = true;
         if (isActive) {
@@ -21,32 +24,67 @@ export default function Discussion({permalink, isVisible}) {
                 .then((result) => setData(result));
             }
         }
+
         return () => {
             isActive = false;
         }
-    }, [isVisible, thread, formattedLink, dispatch]);
+
+    }, [dispatch, formattedLink, isVisible, setData]);
+
+    // if (data) {
+    //     let commentData = data[1];
+    //     let commentArray = commentData.data.children;
+
+    //     let toExport = [];
+    //     for (let comment of commentArray) {
+    //         toExport.push(
+    //             <div className="indiv-comment" key={v4()}>
+    //                 <p>{'u/' + comment.data.author}</p>
+    //                 <p>{comment.data.body}</p>
+    //             </div>
+    //         );
+    //     }
+
+    //     setThread(toExport);
+    // }
 
     useEffect(() => {
         if (data) {
             let commentData = data[1];
-            console.log(commentData);
+            let comments = commentData.data.children;
 
-            let commentArray = commentData.data.children;
-            console.log(commentArray);
+            const getReplies = (comment) => {
+                if (comment.data.replies) {
+                    console.log(comment.data.replies.data.children);
+                    console.log(comment.data.replies.data.children[0].data.author)
 
-            let toExport = [];
-            for (let comment of commentArray) {
-                toExport.push(
-                    <>
-                    <p>{'u/' + comment.data.author}</p>
-                    <p>{comment.data.body}</p>
-                    </>
-                );
+                    return (
+                        <>
+                        <p>THIS IS A REPLY:</p>
+                        <p>Nested {comment.data.replies.data.children[0].data.depth} layers deep</p>
+                        <p>{comment.data.replies.data.children[0].data.is_submitter ? 'OP posted' : ''}</p>
+                        <p>u/{comment.data.replies.data.children[0].data.author}</p>
+                        <p>{comment.data.replies.data.children[0].data.body}</p>
+                        </>
+                    )
+                } else {
+                    return;
+                }
             }
 
-            setThread(toExport);
+            console.log(data);
+
+            setThread(comments.map((comment) => {
+                return (
+                    <div className="indiv-comment" key={v4()}>
+                        <p>u/{comment.data.author}</p>
+                        <p>{comment.data.body}</p>
+                        {getReplies(comment)}
+                    </div>
+                )
+            }))
         }
-    }, [data, thread]);
+    }, [data, setThread]);
 
     return (
         <div className="discussion-thread">

src/features/navbar/Navbar.js

@@ -12,9 +12,9 @@ export default function Navbar() {
     return (
         <>
         <div className="navbar">
-            <h1>Reddit but it's all cats</h1>
+            <h1 className="nav-title">Reddit, but it's all cats</h1>
             <SearchBar />
-            <button onClick={handleCollapse}>Sidebar</button>
+            <button className="sidebar-button" onClick={handleCollapse}>Sidebar</button>
         </div>
         <div className="sidebar-container">
             <Sidebar isCollapsed={collapsed} />

src/features/posts/Feed.js

@@ -114,7 +114,7 @@ export default function Feed() {
 
     return (
         <>
-        {feed ? feed : <h1>Loading cats for you...</h1>}
+        {feed ? feed : <h1 className="loading-message">Loading cats for you...</h1>}
         </>
     );
 }

src/features/posts/Post.css

@@ -1,39 +1,81 @@
+/* Universal styling */
+
 .post-body {
     display: inline-flex;
     flex-direction: column;
     width: 75%;
-    padding: 2rem;
-    border: 1px solid black;
+    padding: 1rem 2rem;
+    border-radius: 10px;
+    background-color: #bbd8d3;
     margin: 3rem 0;
 }
 
-.image-placeholder {
-    display: inline-flex;
-    background-color: grey;
-    width: 30%;
-    height: 15rem;
-}
+/* Title */
 
 .title {
     font-size: 2rem;
+    color:darkorchid;
+    text-decoration: none;
+    margin-bottom: 1rem;
 }
 
+.title:visited {
+    color: orchid;
+}
+
+/* Media */
+
 img, video {
     max-height: 45rem;
     object-fit: contain;
 }
 
+/* Metadata */
+
 .post-metadata {
     display: inline-flex;
+    margin-top: 1rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid gray;
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
 }
 
+.post-metadata * {
+    background-color:rgb(250, 206, 248);
+    border-color: transparent;
+    text-decoration: none;
+    border-radius: 8px;
+    padding: 5px 8px;
+}
+
 .post-text {
     font-size: 1.2rem;
 }
 
+.post-subreddit {
+    color: rgb(111, 30, 151);
+}
+
+.post-subreddit:visited {
+    color: orchid;
+}
+
+.num-comments {
+    display: inline-flex;
+    background-color: rgb(250, 206, 248);
+    border-color: transparent;
+    border-radius: 8px;
+    padding: 5px 8px;
+}
+
+.num-comments:active {
+    background-color: darkorchid;
+}
+
+/* Handles comment styles on toggle */
+
 .comments-visible {
     display: flex;
     flex-direction: column;

src/features/posts/Post.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
-import { fetchComments } from "./postsSlice";
 import Discussion from "../discussion/Discussion";
 import './Post.css';
 
@@ -87,13 +86,15 @@ export default function Post({data, key}) {
             : ''}
 
             <div className="post-metadata">
-                <a href={`https://www.reddit.com${permalink}`}>
+                <p className="user">{author ? 'u/' + author : 'u/username'}</p>
+                <a className="post-subreddit" href={`https://www.reddit.com/r/${subreddit}`}>
                     {subreddit ? 'r/' + subreddit  : ''}
                 </a>
-                
-                <p className="user">{author ? 'u/' + author : 'u/username'}</p>
+                {ups ? <p>{ups} upvotes</p> : null}
                 <p className="time-posted">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
-                <button className="num-comments" onClick={handleClick}>{comments ? visible + comments : 'no'} comments</button>
+                <button className="num-comments" onClick={handleClick}>
+                    {comments ? visible + comments + ' comments' : 'no comments'}
+                </button>
             </div>
 
             <div className={commentStyle}>

src/features/searchBar/searchBar.js

@@ -18,7 +18,7 @@ export default function SearchBar() {
 
     return (
         <>
-        <input type="text" className="searchbar" placeholder="Search posts" value={term ? term : ''} onChange={handleChange} />
+        <input type="text" className="nav-searchbar" placeholder="Search posts" value={term ? term : ''} onChange={handleChange} />
         </>
     );
 }

src/features/sidebar/Sidebar.js

@@ -29,7 +29,8 @@ export default function Sidebar({isCollapsed}) {
 
     return (
         <>
-        <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>  {/* Is collapsed is passed from the parent component, and is mutable within the navbar */}
+                    {/* isCollapsed is passed from the parent component, and is mutable within the navbar */}
+        <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
             {
                 subs.map((sub) => {             // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property
                     return (
@@ -39,6 +40,8 @@ export default function Sidebar({isCollapsed}) {
             }
             <input className="search-sub-input" type="text" onChange={handleChange} placeholder="Search Subs to Add"></input>
         </div>
+
+        {/* displays subreddit search results */}
         <div className={searchWindowStyle.current}>
             <h2>Search Results for: {searchSubs}</h2>
             <p>(results here)</p>