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 ;