Skip to content

Commit

Permalink
Minor improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
jcraigk committed Nov 15, 2024
1 parent 81fe257 commit e624995
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 97 deletions.
23 changes: 7 additions & 16 deletions app/javascript/components/EraShows.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { authFetch } from "./helpers/utils";
import React, { useState, useEffect } from "react";
import { useLoaderData, Link } from "react-router-dom";
import React, { useEffect, useState } from "react";
import { useLoaderData, Link, useOutletContext } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import LayoutWrapper from "./layout/LayoutWrapper";
import Shows from "./Shows";
Expand All @@ -25,8 +25,7 @@ export const eraShowsLoader = async ({ params }) => {

const EraShows = () => {
const { shows: initialShows, year } = useLoaderData();
const [viewMode, setViewMode] = useState("grid");
const [sortOption, setSortOption] = useState("desc");
const { viewMode, setViewMode, sortOption, setSortOption } = useOutletContext();
const [yearsData, setYearsData] = useState(null);

const sortedShows = [...initialShows].sort((a, b) => {
Expand All @@ -51,19 +50,11 @@ const EraShows = () => {
fetchYearsData();
}, []);

const handleViewModeChange = (mode) => {
setViewMode(mode);
};

const handleSortOptionChange = (option) => {
setSortOption(option);
};

const renderViewToggleButtons = () => (
<div className="view-toggle buttons has-addons">
<button
className={`button ${viewMode === "list" ? "is-selected" : ""}`}
onClick={() => handleViewModeChange("list")}
onClick={() => setViewMode("list")}
disabled={viewMode === "list"}
>
<span className="icon">
Expand All @@ -72,7 +63,7 @@ const EraShows = () => {
</button>
<button
className={`button ${viewMode === "grid" ? "is-selected" : ""}`}
onClick={() => handleViewModeChange("grid")}
onClick={() => setViewMode("grid")}
disabled={viewMode === "grid"}
>
<span className="icon">
Expand All @@ -86,7 +77,7 @@ const EraShows = () => {
<div className="view-toggle buttons has-addons">
<button
className={`button ${sortOption === "desc" ? "is-selected" : ""}`}
onClick={() => handleSortOptionChange("desc")}
onClick={() => setSortOption("desc")}
disabled={sortOption === "desc"}
>
<span className="icon">
Expand All @@ -95,7 +86,7 @@ const EraShows = () => {
</button>
<button
className={`button ${sortOption === "asc" ? "is-selected" : ""}`}
onClick={() => handleSortOptionChange("asc")}
onClick={() => setSortOption("asc")}
disabled={sortOption === "asc"}
>
<span className="icon">
Expand Down
89 changes: 41 additions & 48 deletions app/javascript/components/Eras.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export const erasLoader = async () => {
return erasData;
};

import React, { useState } from "react";
import { Link, useLoaderData } from "react-router-dom";
import React from "react";
import { Link, useLoaderData, useOutletContext } from "react-router-dom";
import { formatNumber } from "./helpers/utils";
import LayoutWrapper from "./layout/LayoutWrapper";
import MobileApps from "./pages/MobileApps";
Expand All @@ -33,21 +33,17 @@ import { faList, faTh, faSortAmountDown, faSortAmountUp } from "@fortawesome/fre

const Eras = () => {
const eras = useLoaderData();
const [viewMode, setViewMode] = useState("grid");
const [sortOption, setSortOption] = useState("desc");
const { viewMode, setViewMode, sortOption, setSortOption } = useOutletContext();

const totalShows = Object.keys(eras).reduce((sum, era) => sum + eras[era].total_shows, 0);
const totalDurationMs = Object.keys(eras).reduce((sum, era) => sum + eras[era].total_duration, 0);
const totalHours = Math.round(totalDurationMs / (1000 * 60 * 60));

const handleViewModeChange = (mode) => setViewMode(mode);
const handleSortOptionChange = (option) => setSortOption(option);

const renderViewToggleButtons = () => (
<div className="view-toggle buttons has-addons">
<button
className={`button ${viewMode === "list" ? "is-selected" : ""}`}
onClick={() => handleViewModeChange("list")}
onClick={() => setViewMode("list")}
disabled={viewMode === "list"}
>
<span className="icon">
Expand All @@ -56,7 +52,7 @@ const Eras = () => {
</button>
<button
className={`button ${viewMode === "grid" ? "is-selected" : ""}`}
onClick={() => handleViewModeChange("grid")}
onClick={() => setViewMode("grid")}
disabled={viewMode === "grid"}
>
<span className="icon">
Expand All @@ -70,7 +66,7 @@ const Eras = () => {
<div className="view-toggle buttons has-addons">
<button
className={`button ${sortOption === "desc" ? "is-selected" : ""}`}
onClick={() => handleSortOptionChange("desc")}
onClick={() => setSortOption("desc")}
disabled={sortOption === "desc"}
>
<span className="icon">
Expand All @@ -79,7 +75,7 @@ const Eras = () => {
</button>
<button
className={`button ${sortOption === "asc" ? "is-selected" : ""}`}
onClick={() => handleSortOptionChange("asc")}
onClick={() => setSortOption("asc")}
disabled={sortOption === "asc"}
>
<span className="icon">
Expand Down Expand Up @@ -127,59 +123,56 @@ const Eras = () => {
LIVE PHISH
<span className="hidden-phone"> AUDIO STREAMS</span>
</p>
<p className="hidden-mobile">🍩 {formatNumber(totalShows)} shows</p>
<p className="hidden-mobile mb-4">🎵 {formatNumber(totalHours)} hours of music</p>
<p className="hidden-mobile mb-4">
{formatNumber(totalShows)} shows • {formatNumber(totalHours)} hours of music
</p>

<div className="buttons mb-0">
{renderViewToggleButtons()}
{renderSortButtons()}
</div>

<MobileApps className="mt-5" />

<div className="hidden-mobile">
<p className="has-text-weight-bold mb-2 mt-3 project-open-source">This project is open source</p>
<p className="has-text-weight-bold mb-2 mt-5">This project is open source</p>
<GitHubButton className="mr-2" />
<DiscordButton />
</div>

<p className="has-text-weight-bold mb-2 mt-5">Download mobile app</p>
<MobileApps />
</div>
);

return (
<>
<LayoutWrapper sidebarContent={sidebarContent}>
<div className="display-phone-only">
{renderViewToggleButtons()}
{renderSortButtons()}
</div>
<LayoutWrapper sidebarContent={sidebarContent}>
<div className="display-phone-only">
{renderViewToggleButtons()}
{renderSortButtons()}
</div>

<div>
{Object.keys(eras)
.sort((a, b) => (sortOption === "asc" ? a.localeCompare(b) : b.localeCompare(a)))
.map((era) => (
<React.Fragment key={era}>
<div className="section-title">
<div className="title-left">{era} Era</div>
<span className="detail-right">{formatNumber(eras[era].total_shows, "show")}</span>
</div>
<ul className={`${viewMode === "grid" ? "grid-view" : ""} ${viewMode === "grid" && eras[era].periods.length < 3 ? "limited-width" : ""}`}>
{eras[era].periods
.sort((a, b) =>
sortOption === "asc" ? a.period.localeCompare(b.period) : b.period.localeCompare(a.period)
)
.map((periodData) =>
viewMode === "list" ? renderListItem(periodData) : renderGridItem(periodData)
)}
</ul>
</React.Fragment>
)
)}
</div>
</LayoutWrapper>
</>
<div>
{Object.keys(eras)
.sort((a, b) => (sortOption === "asc" ? a.localeCompare(b) : b.localeCompare(a)))
.map((era) => (
<React.Fragment key={era}>
<div className="section-title">
<div className="title-left">{era} Era</div>
<span className="detail-right">{formatNumber(eras[era].total_shows, "show")}</span>
</div>
<ul className={`${viewMode === "grid" ? "grid-view" : ""} ${viewMode === "grid" && eras[era].periods.length < 3 ? "limited-width" : ""}`}>
{eras[era].periods
.sort((a, b) =>
sortOption === "asc" ? a.period.localeCompare(b.period) : b.period.localeCompare(a.period)
)
.map((periodData) =>
viewMode === "list" ? renderListItem(periodData) : renderGridItem(periodData)
)}
</ul>
</React.Fragment>
))}
</div>
</LayoutWrapper>
);
};

export default Eras;


66 changes: 35 additions & 31 deletions app/javascript/components/layout/Layout.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useRef, useState, useEffect } from "react";
import { Outlet, useNavigate, useNavigation, ScrollRestoration} from "react-router-dom";
import { Outlet, useNavigate, useNavigation, ScrollRestoration } from "react-router-dom";
import Navbar from "./Navbar";
import Loader from "../controls/Loader";
import Player from "../controls/Player";
Expand Down Expand Up @@ -28,6 +28,7 @@ const Layout = ({ props }) => {
const [draftPlaylistMeta, setDraftPlaylistMeta] = useState(initialDraftPlaylistMeta);
const [isDraftPlaylistSaved, setIsDraftPlaylistSaved] = useState(false);
const [activeTrack, setActiveTrack] = useState(null);
const [viewMode, setViewMode] = useState("grid"); // Add viewMode state here
const audioRef = useRef(null);
const { setNotice, setAlert } = useFeedback();

Expand All @@ -43,7 +44,6 @@ const Layout = ({ props }) => {
usernameUpdatedAt: props.usernameUpdatedAt,
email: props.email,
}, "Google login successful");
// Attempt login from jwt stored locally
} else {
let jwt = "";
let username = "";
Expand All @@ -60,7 +60,7 @@ const Layout = ({ props }) => {
if (jwt && username && email) {
setUser({ jwt, username, usernameUpdatedAt, email });
} else {
setUser('anonymous');
setUser("anonymous");
}
}
}, []);
Expand All @@ -87,7 +87,7 @@ const Layout = ({ props }) => {
localStorage.removeItem("usernameUpdatedAt");
localStorage.removeItem("email");
}
navigate("/")
navigate("/");
setUser("anonymous");
setNotice("Logged out successfully");
};
Expand Down Expand Up @@ -124,34 +124,38 @@ const Layout = ({ props }) => {
return (
<>
<ScrollRestoration />
{navigation.state === 'loading' && <Loader />}
{navigation.state === "loading" && <Loader />}
<Navbar user={user} handleLogout={handleLogout} />
<main className={activeTrack ? 'with-player' : ''}>
<Outlet context={{
...props,
user,
setUser,
handleLogin,
handleLogout,
activePlaylist,
setActivePlaylist,
customPlaylist,
setCustomPlaylist,
draftPlaylist,
setDraftPlaylist,
draftPlaylistMeta,
setDraftPlaylistMeta,
resetDraftPlaylist,
isDraftPlaylistSaved,
setIsDraftPlaylistSaved,
activeTrack,
playTrack,
audioRef,
openAppModal,
closeAppModal,
openDraftPlaylistModal,
closeDraftPlaylistModal,
}} />
<main className={activeTrack ? "with-player" : ""}>
<Outlet
context={{
...props,
user,
setUser,
handleLogin,
handleLogout,
activePlaylist,
setActivePlaylist,
customPlaylist,
setCustomPlaylist,
draftPlaylist,
setDraftPlaylist,
draftPlaylistMeta,
setDraftPlaylistMeta,
resetDraftPlaylist,
isDraftPlaylistSaved,
setIsDraftPlaylistSaved,
activeTrack,
playTrack,
audioRef,
openAppModal,
closeAppModal,
openDraftPlaylistModal,
closeDraftPlaylistModal,
viewMode,
setViewMode,
}}
/>
</main>
<Player
activePlaylist={activePlaylist}
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/stylesheets/content.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ main {
background-color: rgba($header-gray, 0.7);
padding: 1rem;
flex: 0 0 16rem;
border-radius: 5px;
border-radius: $radius;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
max-height: fit-content;
z-index: 2;
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/stylesheets/navbar.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
}

.dropdown-menu {
border-radius: 5px !important;
border-radius: $radius !important;

.icon {
margin-right: 0.5rem;
Expand Down

0 comments on commit e624995

Please sign in to comment.