Merge pull request #8 from innocuous-symmetry/media-edge-cases

handling for more errors, new favicon

_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-minimal

src/App.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import './App.css';
 import Navbar from './features/navbar/Navbar';
-import Post from './features/posts/Post';
 import Feed from './features/posts/Feed';
 
 function App() {

src/features/discussion/Discussion.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, /* useSelector */ } from 'react-redux';
 import { unwrapResult } from '@reduxjs/toolkit';
-import { fetchComments, isPending } from '../posts/postsSlice';
+import { fetchComments } from '../posts/postsSlice';
 import { v4 } from 'uuid';
 
 export default function Discussion({permalink, isVisible}) {
@@ -9,12 +9,8 @@ export default function Discussion({permalink, isVisible}) {
     const [data, setData] = useState(null);
     const dispatch = useDispatch();
 
-    const isLoading = useSelector(isPending);
-
     const formattedLink = permalink.substring(0,(permalink.length-1));
 
-    let deps = [isVisible, data, setData, thread, setThread, formattedLink, dispatch];
-
     useEffect(() => {
         let isActive = true;
         if (isActive) {

src/features/sidebar/Sidebar.js

@@ -1,18 +1,16 @@
 import React, { useRef, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector, /* useDispatch */ } from "react-redux";
 import { selectAllSubs } from "../reddit/redditSlice";
 import { v4 } from 'uuid';
 import SidebarItem from "./SidebarItem";
 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 [subs, setSubs] = useState(arrayOfSubs);    // this piece of state to be used to modify state based on a dispatched action
+    const [searchSubs, setSearchSubs] = useState('');    // from  sidebaritems when the visibility of a sub is toggled on/off
 
     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
 
@@ -31,8 +29,8 @@ export default function Sidebar({isCollapsed}) {
         <>
                     {/* 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
+            {       // arrayOfSubs will become subs from useState on implementation of useState
+                arrayOfSubs.map((sub) => {             // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property
                     return (
                         <SidebarItem sub={sub} key={v4()}/>
                     )

src/features/sidebar/SidebarItem.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { updateSubVisibility } from "../reddit/redditSlice";
+import React, { useState } from "react";
+// import { useDispatch } from "react-redux";
+// import { updateSubVisibility } from "../reddit/redditSlice";
 
 export default function SidebarItem({sub}) {
-    const [visible, setVisible] = useState('hide');
-    const dispatch = useDispatch();
+    const [visible, setVisible] = useState('hide');     // dispatch will be used to dispatch updateSubVisibility on change in state
+    // const dispatch = useDispatch();                  // this will likely be within a useEffect hook
 
     const handleClick = () => {
         if (visible === 'hide') {