From 8ecfe57661578ca6057594f39ba1826d1594291d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julian=20T=C3=B6lle?= Date: Sat, 25 Jun 2022 17:17:06 +0200 Subject: [PATCH] refactor(frontend): hook for checking that user is logged in --- frontend/src/components/LoginSuccess.tsx | 5 +++-- frontend/src/components/RecentListens.tsx | 9 +++------ frontend/src/components/ReportListens.tsx | 9 +++------ frontend/src/components/ReportTopAlbums.tsx | 9 +++------ frontend/src/components/ReportTopArtists.tsx | 9 +++------ frontend/src/components/ReportTopGenres.tsx | 9 +++------ frontend/src/components/ReportTopTracks.tsx | 9 +++------ frontend/src/hooks/use-auth-protection.tsx | 16 ++++++++++++++++ 8 files changed, 37 insertions(+), 38 deletions(-) create mode 100644 frontend/src/hooks/use-auth-protection.tsx diff --git a/frontend/src/components/LoginSuccess.tsx b/frontend/src/components/LoginSuccess.tsx index 63f0227..d46ae63 100644 --- a/frontend/src/components/LoginSuccess.tsx +++ b/frontend/src/components/LoginSuccess.tsx @@ -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 ; + useNavigate()("/", { replace: false }); + return null; }; diff --git a/frontend/src/components/RecentListens.tsx b/frontend/src/components/RecentListens.tsx index 79f15fc..5e427b0 100644 --- a/frontend/src/components/RecentListens.tsx +++ b/frontend/src/components/RecentListens.tsx @@ -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 ; - } + requireUser(); return (
diff --git a/frontend/src/components/ReportListens.tsx b/frontend/src/components/ReportListens.tsx index bd09496..221bc8b 100644 --- a/frontend/src/components/ReportListens.tsx +++ b/frontend/src/components/ReportListens.tsx @@ -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 ; - } + requireUser(); return (
diff --git a/frontend/src/components/ReportTopAlbums.tsx b/frontend/src/components/ReportTopAlbums.tsx index c91556a..5248b21 100644 --- a/frontend/src/components/ReportTopAlbums.tsx +++ b/frontend/src/components/ReportTopAlbums.tsx @@ -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({ 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 ; - } + requireUser(); return (
diff --git a/frontend/src/components/ReportTopArtists.tsx b/frontend/src/components/ReportTopArtists.tsx index 5869087..917e592 100644 --- a/frontend/src/components/ReportTopArtists.tsx +++ b/frontend/src/components/ReportTopArtists.tsx @@ -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({ 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 ; - } + requireUser(); return (
diff --git a/frontend/src/components/ReportTopGenres.tsx b/frontend/src/components/ReportTopGenres.tsx index 3ece089..e8f17ed 100644 --- a/frontend/src/components/ReportTopGenres.tsx +++ b/frontend/src/components/ReportTopGenres.tsx @@ -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({ timePreset: TimePreset.LAST_90_DAYS, @@ -32,9 +31,7 @@ export const ReportTopGenres: React.FC = () => { const reportHasItems = !isLoading && topGenres.length !== 0; - if (!user) { - return ; - } + requireUser(); const maxCount = getMaxCount(topGenres); diff --git a/frontend/src/components/ReportTopTracks.tsx b/frontend/src/components/ReportTopTracks.tsx index 8bc71a0..9f50d6a 100644 --- a/frontend/src/components/ReportTopTracks.tsx +++ b/frontend/src/components/ReportTopTracks.tsx @@ -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({ timePreset: TimePreset.LAST_90_DAYS, @@ -29,9 +28,7 @@ export const ReportTopTracks: React.FC = () => { const reportHasItems = !isLoading && topTracks.length !== 0; - if (!user) { - return ; - } + requireUser(); const maxCount = getMaxCount(topTracks); diff --git a/frontend/src/hooks/use-auth-protection.tsx b/frontend/src/hooks/use-auth-protection.tsx new file mode 100644 index 0000000..a30b075 --- /dev/null +++ b/frontend/src/hooks/use-auth-protection.tsx @@ -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 }; +}