Last checked: {lastCheckedString} ago
{latestChange.old_duration_string}
>{latestChange.new_duration_string}
Has been changed {restOfChanges.length} {!episode.isOriginalLength && "more"}{" "} time {restOfChanges.length === 1 ? "" : "s"} previously.
{old_duration_string} > {new_duration_string}
);
};
export default Coffee;
================================================
FILE: client/src/components/Coffee.module.css
================================================
.Coffee {
position: fixed;
top: 3.65rem;
left: 36rem;
font-weight: 500;
font-size: 16px;
cursor: pointer;
}
.CoffeeLogo {
max-height: 30px;
}
@media (max-width: 1350px) {
.Coffee {
left: 24rem;
position: absolute;
}
}
@media (max-width: 750px) {
.Coffee {
top: 1.65rem;
left: 21rem;
}
}
@media (max-width: 380px) {
.Coffee {
top: 1.5rem;
left: 15rem;
}
}
================================================
FILE: client/src/components/Contact.jsx
================================================
import styles from "./Contact.module.css";
import EmailIcon from "../icons/email.svg";
const Contact = () => {
return (
contact me
This website automatically detects episodes of{" "}
The Joe Rogan Experience
podcast{" "}
{" "}
that are currently not available on the Spotify platform by comparing the official
Spotify API with a database of all episodes ever released. It also detects if episodes
have been shortened in duration.
{episodes.length} result {episodes.length != 1 && "s"} found
)} ); }; export default Searchbox; ================================================ FILE: client/src/components/Searchbox.module.css ================================================ .Searchbox { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-grey-secondary); border-radius: 1.6rem; padding: 0 1.5rem; width: 23.3rem; height: 4.6rem; transition: background-color 0.35s; position: relative; } .Searchbox:focus-within { background-color: var(--color-black-secondary); } input { flex: 1; background-color: transparent; border: none; font-size: var(--font-size-small); outline: none; color: var(--color-grey-secondary); caret-color: var(--color-white); font-family: var(--font-family-primary); } input::-webkit-input-placeholder { position: absolute; color: var(--color-grey-secondary); opacity: 1; font-family: var(--font-family-primary); font-size: 1.2rem; transform: translateY(-12%); cursor: text; transition: all 0.15s ease-out; } .searchResult { color: var(--color-grey-secondary); font-size: 1.2rem; margin-top: 1rem; margin-left: 1.5rem; } .SearchIcon.hoverCursor { cursor: pointer; } ================================================ FILE: client/src/components/Sort.jsx ================================================ import { useEffect } from "react"; import Arrow from "../icons/arrow.svg"; import { useState } from "react"; import classnames from "classnames"; import styles from "./Sort.module.css"; import Disclosure from "./Disclosure"; import Chavron from "../icons/chavron.svg"; const options = { removed: ["episode number", "date removed"], shortened: ["episode number", "date shortened"], }; const initialState = { name: "episode number", reverse: false }; const Sort = ({ setEpisodes, episodes, listShown }) => { const [open, setOpen] = useState(false); const [selected, setSelected] = useState(initialState); useEffect(() => { setSelected(initialState); }, [listShown]); const handleSort = (option, isReversed) => { let nulls; let nonNulls; if (option === "date shortened") { nulls = []; nonNulls = nonNulls = episodes.sort((a, b) => { [a, b] = isReversed ? [a, b] : [b, a]; return a.changes[0].date.ms - b.changes[0].date.ms; }); } else if (option === "date removed") { nulls = episodes.filter((ep) => !ep.date); nonNulls = episodes .filter((ep) => ep.date) .sort((a, b) => { [a, b] = isReversed ? [a, b] : [b, a]; return a.date.ms - b.date.ms; }); // episode number } else { nulls = episodes.filter((ep) => !ep.episode_number); nonNulls = episodes .filter((ep) => ep.episode_number) .sort((a, b) => { [a, b] = isReversed ? [a, b] : [b, a]; return a.episode_number - b.episode_number; }); } setEpisodes([...nonNulls, ...nulls]); }; const disclosureId = "sort-by-toggle"; const optionsWrapperId = "sort-by-content"; return (