diff --git a/frontend/src/routes/accolade.jsx b/frontend/src/routes/accolade.jsx
index 261f71cb..9fb8fe77 100644
--- a/frontend/src/routes/accolade.jsx
+++ b/frontend/src/routes/accolade.jsx
@@ -2,17 +2,16 @@ import { mdiArrowLeft, mdiArrowRight, mdiLink, mdiViewGridPlus } from "@mdi/js";
import Icon from "@mdi/react";
import { useEffect, useMemo, useState } from "react";
import { Badge, Button, Card, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link, useParams, useSearchParams } from "react-router";
import VertItem from "../components/vertitem.jsx";
import { useRetrieveAccoladeQuery, useRetrieveAvermentQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity, portraitProvider, rarities, relativeImageUrl } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function Accolade() {
- const dispatch = useDispatch();
const { slugdata: accolade } = useParams();
const vibe = useSelector((data) => data.area.vibe);
@@ -101,14 +100,7 @@ export default function Accolade() {
}
}, [pageCall, awardees, pagePoll, setPageCall]);
- // Show or Hide LoadNote
- useEffect(() => {
- if (progress) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [progress, dispatch]);
+ useLoadingState(progress);
if (haveError) {
return ;
diff --git a/frontend/src/routes/accolist.jsx b/frontend/src/routes/accolist.jsx
index 32305cdb..dc41fc50 100644
--- a/frontend/src/routes/accolist.jsx
+++ b/frontend/src/routes/accolist.jsx
@@ -1,30 +1,21 @@
import { mdiHistory } from "@mdi/js";
import Icon from "@mdi/react";
-import { useEffect } from "react";
import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link } from "react-router";
import AccoItem from "../components/accoitem.jsx";
import Grouping from "../components/grouping.jsx";
import { useRetrieveAccoListQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function AccoList() {
- const dispatch = useDispatch();
const { data: list, isLoading, error } = useRetrieveAccoListQuery();
const vibe = useSelector((data) => data.area.vibe);
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/category.jsx b/frontend/src/routes/category.jsx
index bd18d6ad..0f6b56ee 100644
--- a/frontend/src/routes/category.jsx
+++ b/frontend/src/routes/category.jsx
@@ -1,31 +1,22 @@
import { mdiViewGridPlus } from "@mdi/js";
import Icon from "@mdi/react";
-import { useEffect } from "react";
import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link, useParams } from "react-router";
import AccoItem from "../components/accoitem.jsx";
import Grouping from "../components/grouping.jsx";
import { useRetrieveCategoryQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function Category() {
- const dispatch = useDispatch();
const { slugdata: category } = useParams();
const { data: list, isLoading, error } = useRetrieveCategoryQuery(category);
const vibe = useSelector((data) => data.area.vibe);
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/findpage.jsx b/frontend/src/routes/findpage.jsx
index 5952c888..cb547359 100644
--- a/frontend/src/routes/findpage.jsx
+++ b/frontend/src/routes/findpage.jsx
@@ -1,28 +1,19 @@
-import { useEffect } from "react";
import { Badge, Card, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { useParams } from "react-router";
import VertItem from "../components/vertitem.jsx";
import { useRetrieveDiscoverQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity, portraitProvider } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function FindPage() {
- const dispatch = useDispatch();
const { slugdata: findtext } = useParams();
const { data: dict, isLoading, error } = useRetrieveDiscoverQuery(findtext, { skip: false });
const vibe = useSelector((data) => data.area.vibe);
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (findtext.length < 4) {
return ;
diff --git a/frontend/src/routes/homepage.jsx b/frontend/src/routes/homepage.jsx
index 8fab8c8b..706b9f4b 100644
--- a/frontend/src/routes/homepage.jsx
+++ b/frontend/src/routes/homepage.jsx
@@ -10,21 +10,19 @@ import {
import Icon from "@mdi/react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
-import { useEffect } from "react";
import { Button, Card, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router";
import VertItem from "../components/vertitem.jsx";
import { useRetrieveAccoListQuery, useRetrieveGrantingQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { generateIdentity, portraitProvider } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
dayjs.extend(relativeTime);
export default function Homepage() {
- const dispatch = useDispatch();
const navigate = useNavigate();
const { data: granting, isLoading: isGrantingLoading, error: grantingError } = useRetrieveGrantingQuery();
const { data: accolade, isLoading: isAccoladeLoading, error: accoladeError } = useRetrieveAccoListQuery();
@@ -40,14 +38,7 @@ export default function Homepage() {
}
};
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/identity.jsx b/frontend/src/routes/identity.jsx
index 41b491a2..b230704e 100644
--- a/frontend/src/routes/identity.jsx
+++ b/frontend/src/routes/identity.jsx
@@ -1,19 +1,17 @@
import { mdiHistory, mdiSend } from "@mdi/js";
import Icon from "@mdi/react";
-import { useEffect } from "react";
import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link, useParams } from "react-router";
import AccoItem from "../components/accoitem.jsx";
import Grouping from "../components/grouping.jsx";
import { useRetrieveIdentityQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity, portraitProvider } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function Identity() {
- const dispatch = useDispatch();
const { slugdata: identity } = useParams();
const vibe = useSelector((data) => data.area.vibe);
const authUser = useSelector((data) => data.auth.user);
@@ -26,14 +24,7 @@ export default function Identity() {
skip: !identity,
});
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/rankings.jsx b/frontend/src/routes/rankings.jsx
index 37d86699..4d9607d0 100644
--- a/frontend/src/routes/rankings.jsx
+++ b/frontend/src/routes/rankings.jsx
@@ -1,13 +1,13 @@
import { mdiCalendarCheck, mdiCalendarHeart, mdiCalendarMonth, mdiCalendarRange, mdiCalendarWeek } from "@mdi/js";
import Icon from "@mdi/react";
-import { useEffect } from "react";
import { Badge, Button, Card, Form, ListGroup } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { Link, useLocation, useNavigate, useParams } from "react-router";
import VertItem from "../components/vertitem.jsx";
import { useRetrieveRankingsQuery } from "../features/call.js";
-import { hideLoad, keepDate, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
+import { keepDate } from "../features/part.js";
import { generateIdentity, portraitProvider } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
@@ -50,14 +50,7 @@ export default function Rankings() {
const { data: dict, isLoading, error } = useRetrieveRankingsQuery(params, { skip: false });
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/rarities.jsx b/frontend/src/routes/rarities.jsx
index a91dccee..42a10624 100644
--- a/frontend/src/routes/rarities.jsx
+++ b/frontend/src/routes/rarities.jsx
@@ -1,29 +1,20 @@
-import { useEffect } from "react";
import { Button, Card, Image, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link, useParams } from "react-router";
import AccoItem from "../components/accoitem.jsx";
import Grouping from "../components/grouping.jsx";
import { useRetrieveRaritiesQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity, obtainRarityText, rareColors, rarities } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function Rarities() {
- const dispatch = useDispatch();
const { slugdata: rareunit } = useParams();
const { data: list, isLoading, error } = useRetrieveRaritiesQuery(rareunit);
const vibe = useSelector((data) => data.area.vibe);
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/recently.jsx b/frontend/src/routes/recently.jsx
index c8dbdd2e..3335db3a 100644
--- a/frontend/src/routes/recently.jsx
+++ b/frontend/src/routes/recently.jsx
@@ -1,30 +1,21 @@
import { mdiViewGridPlus } from "@mdi/js";
import Icon from "@mdi/react";
-import { useEffect } from "react";
import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link } from "react-router";
import AccoItem from "../components/accoitem.jsx";
import Grouping from "../components/grouping.jsx";
import { useRetrieveAccoListQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function Recently() {
- const dispatch = useDispatch();
const { data: list, isLoading, error } = useRetrieveAccoListQuery();
const vibe = useSelector((data) => data.area.vibe);
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;
diff --git a/frontend/src/routes/userpast.jsx b/frontend/src/routes/userpast.jsx
index e9f597e4..c00543ce 100644
--- a/frontend/src/routes/userpast.jsx
+++ b/frontend/src/routes/userpast.jsx
@@ -1,18 +1,16 @@
import { mdiBookAccount, mdiSend } from "@mdi/js";
import Icon from "@mdi/react";
-import { useEffect } from "react";
import { Badge, Button, Card, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
import { Link, useParams } from "react-router";
import VertItem from "../components/vertitem.jsx";
import { useRetrieveIdentityQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
import { formatTime, generateIdentity, portraitProvider } from "../features/util.js";
import Mistaken from "./mistaken.jsx";
export default function UserPast() {
- const dispatch = useDispatch();
const { slugdata: identity } = useParams();
const vibe = useSelector((data) => data.area.vibe);
const authUser = useSelector((data) => data.auth.user);
@@ -25,14 +23,7 @@ export default function UserPast() {
skip: !identity,
});
- // Show or Hide LoadNote
- useEffect(() => {
- if (isLoading) {
- dispatch(showLoad());
- } else {
- dispatch(hideLoad());
- }
- }, [isLoading, dispatch]);
+ useLoadingState(isLoading);
if (error) {
return ;