From fbfbd1ed30da490512815a75898c5a4333e56d35 Mon Sep 17 00:00:00 2001 From: HenB13 Date: Wed, 16 Feb 2022 20:48:16 +0100 Subject: [PATCH] replace conditional render with null returns --- client/src/components/AmountMissing.js | 18 +++++-- client/src/components/App.css | 12 ----- client/src/components/App.js | 56 ++++++++------------- client/src/components/Episode.js | 2 +- client/src/components/EpisodeList.js | 15 ++++-- client/src/components/Error.js | 13 +++++ client/src/components/Error.module.css | 11 ++++ client/src/components/ScrollButton.js | 6 +-- client/src/components/Searchbox.js | 5 +- client/src/{ => hooks}/useFetch.js | 2 +- client/src/{ => hooks}/useMinLoadingTime.js | 8 +-- client/src/{ => hooks}/useScroll.js | 0 12 files changed, 81 insertions(+), 67 deletions(-) create mode 100644 client/src/components/Error.js create mode 100644 client/src/components/Error.module.css rename client/src/{ => hooks}/useFetch.js (96%) rename client/src/{ => hooks}/useMinLoadingTime.js (60%) rename client/src/{ => hooks}/useScroll.js (100%) diff --git a/client/src/components/AmountMissing.js b/client/src/components/AmountMissing.js index cc37951..d292675 100644 --- a/client/src/components/AmountMissing.js +++ b/client/src/components/AmountMissing.js @@ -1,10 +1,15 @@ import styles from "./AmountMissing.module.css"; 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 }) => { + if (!data) { + return null; + } -const AmountMissing = ({ data, shakeEpisodes, listLength, setSearchText }) => { const now = Date.now(); - const lastChecked = data?.lastChecked?.miliseconds; + const lastChecked = data.lastChecked?.miliseconds; const lastCheckedMinutes = lastChecked ? Math.floor((new Date(now) - new Date(lastChecked)) / 60000) : 0; @@ -16,19 +21,24 @@ const AmountMissing = ({ data, shakeEpisodes, listLength, setSearchText }) => { : `${lastCheckedMinutes} minute${lastCheckedMinutes != 1 ? "s" : ""} ago`; const dateTime = getClientLocalTime(lastChecked, "yyyy-MM-dd HH:mm:ss.sss"); + + if (showSkeleton) { + return ; + } + return ( <>

{ - if (listLength === data.missingEpisodes.length) { + if (listLength && listLength === data.missingEpisodes?.length) { shakeEpisodes(); } else { setSearchText(""); } }} > - {data.missingEpisodes.length} + {data.missingEpisodes?.length} {" "} episodes are missing from Spotify.

diff --git a/client/src/components/App.css b/client/src/components/App.css index 510717e..21bab98 100644 --- a/client/src/components/App.css +++ b/client/src/components/App.css @@ -15,18 +15,6 @@ margin: 11rem 0rem 9rem 56vw; } -.error { - display: flex; - align-items: center; - font-size: var(--font-size-medium); -} - -.error-icon { - margin-right: 1rem; - width: 2.4rem; - height: 2.4rem; -} - @media (max-width: 1700px) { .left { left: 20rem; diff --git a/client/src/components/App.js b/client/src/components/App.js index 45797c3..50a2c1f 100644 --- a/client/src/components/App.js +++ b/client/src/components/App.js @@ -1,8 +1,8 @@ import "./App.css"; import { useState } from "react"; -// import { useState, useEffect, useRef } from "react"; -import useFetch from "../useFetch"; -import useMinLoadingTime from "../useMinLoadingTime"; +import useFetch from "../hooks/useFetch"; +import useMinLoadingTime from "../hooks/useMinLoadingTime"; +import Error from "./Error"; import Github from "./Github"; import Header from "./Header"; import AmountMissing from "./AmountMissing"; @@ -10,13 +10,10 @@ import EpisodeList from "./EpisodeList"; import Searchbox from "./Searchbox"; import ScrollButton from "./ScrollButton"; import Contact from "./Contact"; -import SkeletonList from "../skeletons/SkeletonList"; -import SkeletonText from "../skeletons/SkeletonText"; -import { ReactComponent as AlertIcon } from "../icons/alertIcon.svg"; function App() { const { data, error, isPending } = useFetch("/api/episodes"); - const minLoadingTime = useMinLoadingTime(400); + const minLoadingTimeElapsed = useMinLoadingTime(400); const [searchText, setSearchText] = useState(""); const [shouldShakeEps, setShouldShakeEps] = useState(false); @@ -35,7 +32,7 @@ function App() { }, 1000); }; - const showSkeleton = isPending || !minLoadingTime; + const showSkeleton = isPending || !minLoadingTimeElapsed; return (
@@ -44,24 +41,17 @@ function App() {
{error ? ( -
- - {error} -
+ ) : ( <> - {showSkeleton ? ( - - ) : ( - data && ( - - ) - )} + + - {showSkeleton ? ( - - ) : ( - episodesShown && ( - - ) - )} - + diff --git a/client/src/components/Episode.js b/client/src/components/Episode.js index 1a1f1d6..5236e41 100644 --- a/client/src/components/Episode.js +++ b/client/src/components/Episode.js @@ -2,7 +2,6 @@ import styles from "./Episode.module.css"; import { differenceInDays, parseISO } from "date-fns"; import getClientLocalTime from "../lib/getClientLocalTime"; -// Days since removed to get labeled as "new" const NEWLY_REMOVED_THRESHOLD = 14; const Episode = ({ number, name, removedDate }) => { @@ -31,6 +30,7 @@ const Episode = ({ number, name, removedDate }) => { const RemovedDetails = ({ removedDate }) => { const dateTimeValue = getClientLocalTime(removedDate, "yyyy-MM-dd"); const removedDateString = getClientLocalTime(removedDate, "PPP"); + return ( <> diff --git a/client/src/components/EpisodeList.js b/client/src/components/EpisodeList.js index 41be5c2..29e1ea1 100644 --- a/client/src/components/EpisodeList.js +++ b/client/src/components/EpisodeList.js @@ -1,26 +1,31 @@ +import React from "react"; import classnames from "classnames"; import styles from "./EpisodeList.module.css"; import Episode from "./Episode"; +import SkeletonList from "../skeletons/SkeletonList"; -const EpisodeList = ({ episodesShown, shouldShake }) => { +const EpisodeList = ({ episodesShown, shouldShake, showSkeleton }) => { const classesEpList = classnames(styles.EpisodeList, { shake: shouldShake, }); + if (showSkeleton) { + return ; + } + return (
    - {episodesShown.map(({ episode_number, full_name, date_removed }, i) => ( - <> + {episodesShown?.map(({ episode_number, full_name, date_removed }, i) => ( + {i === 0 && } {i !== episodesShown.length - 1 && } - + ))}
); diff --git a/client/src/components/Error.js b/client/src/components/Error.js new file mode 100644 index 0000000..043c366 --- /dev/null +++ b/client/src/components/Error.js @@ -0,0 +1,13 @@ +import { ReactComponent as AlertIcon } from "../icons/alertIcon.svg"; +import styles from "./Error.module.css"; + +const Error = ({ error }) => { + return ( +
+ + {error} +
+ ); +}; + +export default Error; diff --git a/client/src/components/Error.module.css b/client/src/components/Error.module.css new file mode 100644 index 0000000..d68dfe3 --- /dev/null +++ b/client/src/components/Error.module.css @@ -0,0 +1,11 @@ +.error { + display: flex; + align-items: center; + font-size: var(--font-size-medium); +} + +.icon { + margin-right: 1rem; + width: 2.4rem; + height: 2.4rem; +} diff --git a/client/src/components/ScrollButton.js b/client/src/components/ScrollButton.js index ec17188..8e252b4 100644 --- a/client/src/components/ScrollButton.js +++ b/client/src/components/ScrollButton.js @@ -2,17 +2,17 @@ import TextTransition, { presets } from "react-text-transition"; import classnames from "classnames"; import { useEffect } from "react"; import { ReactComponent as ArrowDown } from "../icons/ScrollButtonIcon.svg"; -import useScroll from "../useScroll"; +import useScroll from "../hooks/useScroll"; import styles from "./ScrollButton.module.css"; -const ScrollButton = ({ dataPending, minLoadingTime, episodesShown }) => { +const ScrollButton = ({ dataPending, minLoadingTimeElapsed, episodesShown }) => { const { scrollTarget, scrollable, setScrollable } = useScroll(); useEffect(() => { setScrollable(document.body.clientHeight > window.innerHeight); }, [episodesShown, setScrollable]); - const hidden = !scrollable || dataPending || !minLoadingTime; + const hidden = !scrollable || dataPending || !minLoadingTimeElapsed; return (
diff --git a/client/src/useFetch.js b/client/src/hooks/useFetch.js similarity index 96% rename from client/src/useFetch.js rename to client/src/hooks/useFetch.js index 1aa2cd5..e45fb26 100644 --- a/client/src/useFetch.js +++ b/client/src/hooks/useFetch.js @@ -7,7 +7,7 @@ const useFetch = (url) => { useEffect(() => { const abortCont = new AbortController(); - + console.log("use effect hook fetch ran"); fetch(url, { signal: abortCont.signal }) .then((res) => { if (!res.ok) { diff --git a/client/src/useMinLoadingTime.js b/client/src/hooks/useMinLoadingTime.js similarity index 60% rename from client/src/useMinLoadingTime.js rename to client/src/hooks/useMinLoadingTime.js index 079792e..d4df696 100644 --- a/client/src/useMinLoadingTime.js +++ b/client/src/hooks/useMinLoadingTime.js @@ -1,13 +1,13 @@ import { useState, useEffect } from "react"; const useMinLoadingTime = (minTime) => { - const [minTimeElapsed, setMinTimeElapsed] = useState(true); + const [minLoadingTimeElapsed, setMinLoadingTimeElapsed] = useState(true); useEffect(() => { - setMinTimeElapsed(false); + setMinLoadingTimeElapsed(false); const timer = setTimeout(() => { - setMinTimeElapsed(true); + setMinLoadingTimeElapsed(true); }, minTime); return () => { @@ -15,7 +15,7 @@ const useMinLoadingTime = (minTime) => { }; }, [minTime]); - return minTimeElapsed; + return minLoadingTimeElapsed; }; export default useMinLoadingTime; diff --git a/client/src/useScroll.js b/client/src/hooks/useScroll.js similarity index 100% rename from client/src/useScroll.js rename to client/src/hooks/useScroll.js