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

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 <Navigate to="/" replace />;
+  useNavigate()("/", { replace: false });
+  return null;
 };

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) {
+  requireUser();
-    return <Navigate to="/" replace />;
-  }
 
   return (
     <div className="md:flex md:justify-center p-4">

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) {
+  requireUser();
-    return <Navigate to="/" replace />;
-  }
 
   return (
     <div className="md:flex md:justify-center p-4">

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<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) {
+  requireUser();
-    return <Navigate to="/" replace />;
-  }
 
   return (
     <div className="md:flex md:justify-center p-4">

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<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) {
+  requireUser();
-    return <Navigate to="/" replace />;
-  }
 
   return (
     <div className="md:flex md:justify-center p-4">

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<TimeOptions>({
     timePreset: TimePreset.LAST_90_DAYS,
@@ -32,9 +31,7 @@ export const ReportTopGenres: React.FC = () => {
 
   const reportHasItems = !isLoading && topGenres.length !== 0;
 
-  if (!user) {
+  requireUser();
-    return <Navigate to="/" replace />;
-  }
 
   const maxCount = getMaxCount(topGenres);
 

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<TimeOptions>({
     timePreset: TimePreset.LAST_90_DAYS,
@@ -29,9 +28,7 @@ export const ReportTopTracks: React.FC = () => {
 
   const reportHasItems = !isLoading && topTracks.length !== 0;
 
-  if (!user) {
+  requireUser();
-    return <Navigate to="/" replace />;
-  }
 
   const maxCount = getMaxCount(topTracks);
 

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 };
+}