separate sort by and reverse

Clac4 · Feb 22, 2022 · 4455963 · 4455963
1 parent 8408ae7
commit 4455963
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 78 deletions.
diff --git a/client/src/components/AmountMissing.js b/client/src/components/AmountMissing.js
@@ -3,7 +3,7 @@ import getClientLocalTime from "../lib/getClientLocalTime";
 import { ReactComponent as Checkmark } from "../icons/AmountMissingIcon.svg";
 import SkeletonText from "../skeletons/SkeletonText";
 
-const AmountMissing = ({ data, shakeEpisodes, listLength, setSearchText, showSkeleton }) => {
+const AmountMissing = ({ data, showSkeleton }) => {
     if (showSkeleton) {
         return <SkeletonText />;
     }
@@ -29,18 +29,7 @@ const AmountMissing = ({ data, shakeEpisodes, listLength, setSearchText, showSke
     return (
         <>
             <p className={styles.AmountMissing}>
-                <span
-                    onClick={() => {
-                        if (listLength && listLength === data.missingEpisodes?.length) {
-                            shakeEpisodes();
-                        } else {
-                            setSearchText("");
-                        }
-                    }}
-                >
-                    {data.missingEpisodes?.length}
-                </span>{" "}
-                episodes are missing from Spotify.
+                <span>{data.missingEpisodes?.length}</span> episodes are missing from Spotify.
             </p>
             <div className={styles.LastChecked}>
                 <p>

diff --git a/client/src/components/AmountMissing.module.css b/client/src/components/AmountMissing.module.css
@@ -6,7 +6,6 @@
     color: var(--color-red);
     font-weight: 700;
     position: relative;
-    cursor: pointer;
 }
 
 .AmountMissing span:after {

diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -15,26 +15,13 @@ import Contact from "./Contact";
 function App() {
     const { data, error, isPending } = useFetch("/api/episodes");
     const minLoadingTimeElapsed = useMinLoadingTime(400);
-    const [searchText, setSearchText] = useState("");
     const [shouldShakeEps, setShouldShakeEps] = useState(false);
     const [episodesShown, setEpisodesShown] = useState([]);
 
     useEffect(() => {
         setEpisodesShown(data?.missingEpisodes || []);
     }, [data]);
 
-    useEffect(() => {
-        setEpisodesShown((episodesShown) => {
-            return episodesShown.filter((ep) =>
-                ep.full_name?.toLowerCase().includes(searchText.toLowerCase())
-            );
-        });
-    }, [searchText]);
-
-    const handleSearch = (e) => {
-        setSearchText(e.target.value);
-    };
-
     const shakeEpisodes = () => {
         setShouldShakeEps(true);
         setTimeout(() => {
@@ -54,18 +41,10 @@ function App() {
                     <Error error={error} />
                 ) : (
                     <>
-                        <AmountMissing
-                            setSearchText={setSearchText}
-                            data={data}
-                            shakeEpisodes={shakeEpisodes}
-                            listLength={episodesShown?.length}
-                            showSkeleton={showSkeleton}
-                        />
-
+                        <AmountMissing data={data} showSkeleton={showSkeleton} />
                         <Searchbox
-                            searchText={searchText}
                             episodesShown={episodesShown}
-                            handleSearch={handleSearch}
+                            setEpisodesShown={setEpisodesShown}
                             shakeEpisodes={shakeEpisodes}
                         />
                     </>

diff --git a/client/src/components/Searchbox.js b/client/src/components/Searchbox.js
@@ -3,9 +3,19 @@ import { useState } from "react";
 import styles from "./Searchbox.module.css";
 import { ReactComponent as SearchIcon } from "../icons/SearchboxIcon.svg";
 
-const Searchbox = ({ searchText, episodesShown, handleSearch, shakeEpisodes }) => {
+const Searchbox = ({ episodesShown, setEpisodesShown, shakeEpisodes }) => {
+    const [searchText, setSearchText] = useState("");
     const [placeholder, setPlaceholder] = useState("Search for episode or guest");
 
+    const handleSearch = (e) => {
+        setEpisodesShown((episodesShown) => {
+            return episodesShown.filter((ep) =>
+                ep.full_name?.toLowerCase().includes(e.target.value.toLowerCase())
+            );
+        });
+        setSearchText(e.target.value);
+    };
+
     const classesSearchIcon = classnames(styles.SearchIcon, {
         [styles.hoverCursor]: searchText,
     });

diff --git a/client/src/components/Sort.js b/client/src/components/Sort.js
@@ -1,17 +1,15 @@
-import { ReactComponent as Arrow } from "../icons/arrow.svg";
+import { ReactComponent as ArrowIcon } from "../icons/arrow.svg";
 import { useEffect, useState } from "react";
 import classnames from "classnames";
 import styles from "./Sort.module.css";
 
 const Sort = ({ setEpisodesShown }) => {
     const options = ["episode number", "date removed"];
     const [sortOption, setSortOption] = useState(options[0]);
-    const [reverse, setReverse] = useState(false);
 
     useEffect(() => {
         setEpisodesShown((episodesShown) => {
             return [...episodesShown].sort((a, b) => {
-                [a, b] = reverse ? [a, b] : [b, a];
                 switch (sortOption) {
                     case "episode number":
                         return a.episode_number - b.episode_number;
@@ -22,51 +20,70 @@ const Sort = ({ setEpisodesShown }) => {
                 }
             });
         });
-    }, [sortOption, setEpisodesShown, reverse]);
+    }, [sortOption, setEpisodesShown]);
 
     return (
         <div className={styles.sort}>
             {options.map((o, i) => {
-                return <Option option={o} key={o} index={i} />;
+                return (
+                    <Option
+                        option={o}
+                        key={o}
+                        index={i}
+                        sortOption={sortOption}
+                        setSortOption={setSortOption}
+                    />
+                );
             })}
-            <Arrow
-                onClick={() => setReverse((reverse) => !reverse)}
-                className={classnames(styles.icon, {
-                    [styles.iconReverse]: reverse,
-                })}
-            />
+            <Arrow setEpisodesShown={setEpisodesShown} />
         </div>
     );
+};
 
-    function Option({ option, index }) {
-        return (
-            <div
-                className={styles.option}
-                onClick={() => {
-                    setSortOption(option);
-                }}
+function Option({ option, index, setSortOption, sortOption }) {
+    return (
+        <div
+            className={styles.option}
+            onClick={() => {
+                setSortOption(option);
+            }}
+        >
+            <input
+                type="radio"
+                id={option + index}
+                name={option + " option"}
+                value={option}
+                className="sr-only"
+            />
+            <label
+                className={classnames(styles.label, {
+                    [styles.selected]: sortOption === option,
+                })}
+                htmlFor={option + index}
             >
-                <input
-                    type="radio"
-                    id={option + index}
-                    name={option + " option"}
-                    value={option}
-                    className="sr-only"
-                />
-                <label
-                    className={classnames(styles.label, {
-                        [styles.selected]: sortOption === option,
-                    })}
-                    htmlFor={option + index}
-                >
-                    {option
-                        .split(" ")
-                        .map((word) => word[0].toUpperCase() + word.slice(1))
-                        .join(" ")}
-                </label>
-            </div>
-        );
-    }
-};
+                {option
+                    .split(" ")
+                    .map((word) => word[0].toUpperCase() + word.slice(1))
+                    .join(" ")}
+            </label>
+        </div>
+    );
+}
+
+function Arrow({ setEpisodesShown }) {
+    const [reverse, setReverse] = useState(false);
+
+    return (
+        <ArrowIcon
+            onClick={() => {
+                setEpisodesShown((episodesShown) => [...episodesShown].reverse());
+                setReverse((reverse) => !reverse);
+            }}
+            className={classnames(styles.icon, {
+                [styles.iconReverse]: reverse,
+            })}
+        />
+    );
+}
 
 export default Sort;