Skip to content

Commit

Permalink
replace conditional render with null returns
Browse files Browse the repository at this point in the history
henb13 committed Feb 16, 2022
1 parent 1560b15 commit fbfbd1e
Showing 12 changed files with 81 additions and 67 deletions.
18 changes: 14 additions & 4 deletions client/src/components/AmountMissing.js
Original file line number Diff line number Diff line change
@@ -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 <SkeletonText />;
}

return (
<>
<p className={styles.AmountMissing}>
<span
onClick={() => {
if (listLength === data.missingEpisodes.length) {
if (listLength && listLength === data.missingEpisodes?.length) {
shakeEpisodes();
} else {
setSearchText("");
}
}}
>
{data.missingEpisodes.length}
{data.missingEpisodes?.length}
</span>{" "}
episodes are missing from Spotify.
</p>
12 changes: 0 additions & 12 deletions client/src/components/App.css
Original file line number Diff line number Diff line change
@@ -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;
56 changes: 20 additions & 36 deletions client/src/components/App.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
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";
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 (
<div className="App">
@@ -44,24 +41,17 @@ function App() {
<Header />
<Contact />
{error ? (
<div className="error">
<AlertIcon className="error-icon" />
{error}
</div>
<Error error={error} />
) : (
<>
{showSkeleton ? (
<SkeletonText />
) : (
data && (
<AmountMissing
setSearchText={setSearchText}
data={data}
shakeEpisodes={shakeEpisodes}
listLength={episodesShown.length}
/>
)
)}
<AmountMissing
setSearchText={setSearchText}
data={data}
shakeEpisodes={shakeEpisodes}
listLength={episodesShown?.length}
showSkeleton={showSkeleton}
/>

<Searchbox
searchText={searchText}
episodesShown={episodesShown}
@@ -74,20 +64,14 @@ function App() {

{!error && (
<section className="right">
{showSkeleton ? (
<SkeletonList />
) : (
episodesShown && (
<EpisodeList
episodesShown={episodesShown}
shouldShake={shouldShakeEps}
/>
)
)}

<EpisodeList
episodesShown={episodesShown}
shouldShake={shouldShakeEps}
showSkeleton={showSkeleton}
/>
<ScrollButton
dataPending={isPending}
minLoadingTime={minLoadingTime}
minLoadingTimeElapsed={minLoadingTimeElapsed}
episodesShown={episodesShown}
/>
</section>
2 changes: 1 addition & 1 deletion client/src/components/Episode.js
Original file line number Diff line number Diff line change
@@ -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 (
<>
<span className={styles.removed}>
15 changes: 10 additions & 5 deletions client/src/components/EpisodeList.js
Original file line number Diff line number Diff line change
@@ -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 <SkeletonList />;
}

return (
<ul className={classesEpList}>
{episodesShown.map(({ episode_number, full_name, date_removed }, i) => (
<>
{episodesShown?.map(({ episode_number, full_name, date_removed }, i) => (
<React.Fragment key={full_name + episode_number}>
{i === 0 && <Border />}

<Episode
number={episode_number}
name={full_name}
removedDate={date_removed}
key={full_name + episode_number}
/>
{i !== episodesShown.length - 1 && <Border />}
</>
</React.Fragment>
))}
</ul>
);
13 changes: 13 additions & 0 deletions client/src/components/Error.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { ReactComponent as AlertIcon } from "../icons/alertIcon.svg";
import styles from "./Error.module.css";

const Error = ({ error }) => {
return (
<div className={styles.error}>
<AlertIcon className={styles.icon} />
{error}
</div>
);
};

export default Error;
11 changes: 11 additions & 0 deletions client/src/components/Error.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 3 additions & 3 deletions client/src/components/ScrollButton.js
Original file line number Diff line number Diff line change
@@ -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 (
<button
5 changes: 4 additions & 1 deletion client/src/components/Searchbox.js
Original file line number Diff line number Diff line change
@@ -33,7 +33,10 @@ const Searchbox = ({ searchText, episodesShown, handleSearch, shakeEpisodes }) =
className={classesSearchIcon}
title="search-icon"
onClick={() => {
if (searchText !== "") shakeEpisodes();
if (searchText !== "") {
shakeEpisodes();
navigator.vibrate();
}
}}
/>
</div>
2 changes: 1 addition & 1 deletion client/src/useFetch.js → client/src/hooks/useFetch.js
Original file line number Diff line number Diff line change
@@ -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) {
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
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 () => {
clearTimeout(timer);
};
}, [minTime]);

return minTimeElapsed;
return minLoadingTimeElapsed;
};

export default useMinLoadingTime;
File renamed without changes.

0 comments on commit fbfbd1e

Please sign in to comment.