apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(frontend): hook for checking that user is logged in

Browse source
This commit is contained in:
Julian Tölle 2022-06-25 17:17:06 +02:00
parent be38c383ef
commit 8ecfe57661
8 changed files with 37 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/LoginSuccess.tsx
View file

@ -1,6 +1,7 @@
import React from "react";
import { Navigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
export const LoginSuccess: React.FC = () => {
return <Navigate to="/" replace />;
useNavigate()("/", { replace: false });
return null;
};

9
frontend/src/components/RecentListens.tsx
View file

@ -1,16 +1,15 @@
import { format, formatDistanceToNow } from "date-fns";
import React, { useEffect, useMemo, useState } from "react";
import { Navigate } from "react-router-dom";
import { Listen } from "../api/entities/listen";
import { useRecentListens } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { useAuthProtection } from "../hooks/use-auth-protection";
import { ReloadIcon } from "../icons/Reload";
import { getPaginationItems } from "../util/getPaginationItems";
const LISTENS_PER_PAGE = 15;
export const RecentListens: React.FC = () => {
const { user } = useAuth();
const { requireUser } = useAuthProtection();
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
@ -26,9 +25,7 @@ export const RecentListens: React.FC = () => {
}
}, [totalPages, paginationMeta]);
if (!user) {
return <Navigate to="/" replace />;
}
requireUser();
return (
<div className="md:flex md:justify-center p-4">

9
frontend/src/components/ReportListens.tsx
View file

@ -1,6 +1,5 @@
import { format, getTime } from "date-fns";
import React, { useMemo, useState } from "react";
import { Navigate } from "react-router-dom";
import {
Area,
AreaChart,
@ -16,11 +15,11 @@ import { ListenReportOptions } from "../api/entities/listen-report-options";
import { TimeOptions } from "../api/entities/time-options";
import { TimePreset } from "../api/entities/time-preset.enum";
import { useListensReport } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { useAuthProtection } from "../hooks/use-auth-protection";
import { ReportTimeOptions } from "./ReportTimeOptions";
export const ReportListens: React.FC = () => {
const { user } = useAuth();
const { requireUser } = useAuthProtection();
const [timeFrame, setTimeFrame] = useState<"day" | "week" | "month" | "year">(
"day"
@ -41,9 +40,7 @@ export const ReportListens: React.FC = () => {
const reportHasItems = !isLoading && report.length !== 0;
if (!user) {
return <Navigate to="/" replace />;
}
requireUser();
return (
<div className="md:flex md:justify-center p-4">

9
frontend/src/components/ReportTopAlbums.tsx
View file

@ -1,16 +1,15 @@
import React, { useMemo, useState } from "react";
import { Navigate } from "react-router-dom";
import { Album } from "../api/entities/album";
import { TimeOptions } from "../api/entities/time-options";
import { TimePreset } from "../api/entities/time-preset.enum";
import { useTopAlbums } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { useAuthProtection } from "../hooks/use-auth-protection";
import { getMaxCount } from "../util/getMaxCount";
import { ReportTimeOptions } from "./ReportTimeOptions";
import { TopListItem } from "./TopListItem";
export const ReportTopAlbums: React.FC = () => {
const { user } = useAuth();
const { requireUser } = useAuthProtection();
const [timeOptions, setTimeOptions] = useState<TimeOptions>({
timePreset: TimePreset.LAST_90_DAYS,
@ -30,9 +29,7 @@ export const ReportTopAlbums: React.FC = () => {
const reportHasItems = !isLoading && topAlbums.length !== 0;
const maxCount = getMaxCount(topAlbums);
if (!user) {
return <Navigate to="/" replace />;
}
requireUser();
return (
<div className="md:flex md:justify-center p-4">

9
frontend/src/components/ReportTopArtists.tsx
View file

@ -1,15 +1,14 @@
import React, { useMemo, useState } from "react";
import { Navigate } from "react-router-dom";
import { TimeOptions } from "../api/entities/time-options";
import { TimePreset } from "../api/entities/time-preset.enum";
import { useTopArtists } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { useAuthProtection } from "../hooks/use-auth-protection";
import { getMaxCount } from "../util/getMaxCount";
import { ReportTimeOptions } from "./ReportTimeOptions";
import { TopListItem } from "./TopListItem";
export const ReportTopArtists: React.FC = () => {
const { user } = useAuth();
const { requireUser } = useAuthProtection();
const [timeOptions, setTimeOptions] = useState<TimeOptions>({
timePreset: TimePreset.LAST_90_DAYS,
@ -29,9 +28,7 @@ export const ReportTopArtists: React.FC = () => {
const reportHasItems = !isLoading && topArtists.length !== 0;
const maxCount = getMaxCount(topArtists);
if (!user) {
return <Navigate to="/" replace />;
}
requireUser();
return (
<div className="md:flex md:justify-center p-4">

9
frontend/src/components/ReportTopGenres.tsx
View file

@ -1,19 +1,18 @@
import React, { useMemo, useState } from "react";
import { Navigate } from "react-router-dom";
import { Artist } from "../api/entities/artist";
import { Genre } from "../api/entities/genre";
import { TimeOptions } from "../api/entities/time-options";
import { TimePreset } from "../api/entities/time-preset.enum";
import { TopArtistsItem } from "../api/entities/top-artists-item";
import { useTopGenres } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { useAuthProtection } from "../hooks/use-auth-protection";
import { capitalizeString } from "../util/capitalizeString";
import { getMaxCount } from "../util/getMaxCount";
import { ReportTimeOptions } from "./ReportTimeOptions";
import { TopListItem } from "./TopListItem";
export const ReportTopGenres: React.FC = () => {
const { user } = useAuth();
const { requireUser } = useAuthProtection();
const [timeOptions, setTimeOptions] = useState<TimeOptions>({
timePreset: TimePreset.LAST_90_DAYS,
@ -32,9 +31,7 @@ export const ReportTopGenres: React.FC = () => {
const reportHasItems = !isLoading && topGenres.length !== 0;
if (!user) {
return <Navigate to="/" replace />;
}
requireUser();
const maxCount = getMaxCount(topGenres);

9
frontend/src/components/ReportTopTracks.tsx
View file

@ -1,16 +1,15 @@
import React, { useMemo, useState } from "react";
import { Navigate } from "react-router-dom";
import { TimeOptions } from "../api/entities/time-options";
import { TimePreset } from "../api/entities/time-preset.enum";
import { Track } from "../api/entities/track";
import { useTopTracks } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { useAuthProtection } from "../hooks/use-auth-protection";
import { getMaxCount } from "../util/getMaxCount";
import { ReportTimeOptions } from "./ReportTimeOptions";
import { TopListItem } from "./TopListItem";
export const ReportTopTracks: React.FC = () => {
const { user } = useAuth();
const { requireUser } = useAuthProtection();
const [timeOptions, setTimeOptions] = useState<TimeOptions>({
timePreset: TimePreset.LAST_90_DAYS,
@ -29,9 +28,7 @@ export const ReportTopTracks: React.FC = () => {
const reportHasItems = !isLoading && topTracks.length !== 0;
if (!user) {
return <Navigate to="/" replace />;
}
requireUser();
const maxCount = getMaxCount(topTracks);

16
frontend/src/hooks/use-auth-protection.tsx Normal file
View file

@ -0,0 +1,16 @@
import { useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "./use-auth";
export function useAuthProtection() {
const { user } = useAuth();
const navigate = useNavigate();
const requireUser = useCallback(async () => {
if (!user) {
navigate("/");
}
}, [user, navigate]);
return { requireUser };
}