From 9807cc7997fc5d9ac077aebe18df2991e3c4185d Mon Sep 17 00:00:00 2001 From: Daniel Einars Date: Mon, 18 Jul 2022 23:31:34 +0200 Subject: [PATCH] fixed the rendering loop within the component Signed-off-by: Daniel Einars --- src/App.tsx | 108 +++++++++--------- .../facedashboard/FaceComponent.tsx | 4 +- src/components/settings/SortableItem.tsx | 2 +- src/containers/login.tsx | 27 ++--- src/layouts/PrivateRoute.tsx | 11 +- src/layouts/albums/AlbumAutoGalleryView.tsx | 6 +- src/layouts/login/LoginPage.tsx | 16 ++- src/layouts/photos/TimestampPhotos.tsx | 13 +-- src/store/store.ts | 3 + 9 files changed, 87 insertions(+), 103 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 04f9aa134..e8e0e7260 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import { AppShell, ColorScheme, ColorSchemeProvider, MantineProvider } from "@ma import { NotificationsProvider } from "@mantine/notifications"; import React, { useState } from "react"; import { Cookies, CookiesProvider } from "react-cookie"; -import { Route, Routes } from "react-router-dom"; +import { Route, Routes, useLocation } from "react-router-dom"; import "semantic-ui-css/semantic.min.css"; import "./App.css"; @@ -14,7 +14,7 @@ import { TopMenuPublic } from "./components/menubars/TopMenuPublic"; import { CountStats } from "./components/statistics"; import { Login } from "./containers/login"; import "./i18n"; -import { ProtectedRoute } from "./layouts/PrivateRoute"; +import { ProtectedRoutes } from "./layouts/PrivateRoute"; import { SearchView } from "./layouts/SearchView"; import { AlbumAuto } from "./layouts/albums/AlbumAuto"; import { AlbumPeople } from "./layouts/albums/AlbumPeople"; @@ -43,25 +43,29 @@ import { AdminPage } from "./layouts/settings/AdminPage"; import { Library } from "./layouts/settings/Library"; import { Profile } from "./layouts/settings/Profile"; import { Settings } from "./layouts/settings/Settings"; +import { selectIsAuthenticated } from "./store/auth/authSelectors"; import { useAppSelector } from "./store/store"; const noMenubarPaths = ["/signup", "/login"]; export function App() { const cookies = new Cookies(); + const showSidebar = useAppSelector(store => store.ui.showSidebar); + const isAuth = useAppSelector(selectIsAuthenticated); const [colorScheme, setColorScheme] = useState( cookies.get("mantine-color-scheme") ? cookies.get("mantine-color-scheme") : "light" ); - const toggleColorScheme = value => { + + function toggleColorScheme(value) { const nextColorScheme = value || (colorScheme === "dark" ? "light" : "dark"); cookies.set("mantine-color-scheme", nextColorScheme); setColorScheme(nextColorScheme); - }; - const showSidebar = useAppSelector(store => store.ui.showSidebar); - const location = useAppSelector(store => store.router.location); - const auth = useAppSelector(store => store.auth); + } + + const { pathname } = useLocation(); + // @ts-ignore - const showMenubar = location.pathname && !noMenubarPaths.includes(location.pathname); + const showMenubar = pathname && !noMenubarPaths.includes(pathname); return ( @@ -71,10 +75,8 @@ export function App() { : :
- } - header={showMenubar ? auth.access ? : :
} + navbar={showMenubar && showSidebar ? isAuth ? : :
} + header={showMenubar ? isAuth ? : :
} footer={} styles={theme => ({ main: { @@ -83,55 +85,51 @@ export function App() { })} > - } /> - - } /> - - } /> - - } /> - - } /> - }> + } /> + } /> + } /> + } /> + } /> + }> } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> {/* TODO Rewrite using react-router-v6 */} - } /> + } /> {/* TODO Rewrite using react-router-v6 */} - } /> + } /> {/* TODO Rewrite using react-router-v6 */} - {/* } /> */} - } /> - } /> - } /> + {/* } /> */} + } /> + } /> + } /> {/* TODO Rewrite using react-router-v6 */} - {/* } /> */} + {/* } /> */} {/* /!* TODO Rewrite using react-router-v6 *!/ */} - {/* /!* } /> *!/ */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + {/* /!* } /> *!/ */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> diff --git a/src/components/facedashboard/FaceComponent.tsx b/src/components/facedashboard/FaceComponent.tsx index bed6db61c..dda47b39e 100644 --- a/src/components/facedashboard/FaceComponent.tsx +++ b/src/components/facedashboard/FaceComponent.tsx @@ -48,7 +48,7 @@ export function FaceComponent(props: Props) {
("settings.confidencepercentage", { percentage: (props.cell.person_label_probability * 100).toFixed(1), })} position="bottom" @@ -94,7 +94,7 @@ export function FaceComponent(props: Props) {
("settings.confidencepercentage", { percentage: (props.cell.person_label_probability * 100).toFixed(1), })} position="bottom" diff --git a/src/components/settings/SortableItem.tsx b/src/components/settings/SortableItem.tsx index 9dd717eb5..b96f83344 100644 --- a/src/components/settings/SortableItem.tsx +++ b/src/components/settings/SortableItem.tsx @@ -37,7 +37,7 @@ export function SortableItem({ item, addItem, addItemFunction, removeItemFunctio
  • {t(`rules.${prop[0]}`, { rule: prop[1] })}
    • ) : (
  • - {prop[0]}: {prop[1]} + {prop[0] as string}: {prop[1] as string}
    • ) )} diff --git a/src/containers/login.tsx b/src/containers/login.tsx index 5fe7e3828..2be2e2e39 100644 --- a/src/containers/login.tsx +++ b/src/containers/login.tsx @@ -1,10 +1,8 @@ import React, { useEffect } from "react"; -import { Navigate, useLocation } from "react-router-dom"; import { fetchUserList } from "../actions/utilActions"; import { FirstTimeSetupPage } from "../layouts/login/FirstTimeSetupPage"; import { LoginPage } from "../layouts/login/LoginPage"; -import { selectIsAuthenticated } from "../store/auth/authSelectors"; import { useAppDispatch, useAppSelector } from "../store/store"; export interface LocationState { @@ -14,9 +12,6 @@ export interface LocationState { } export function Login(): JSX.Element { - const isAuthenticated = useAppSelector(selectIsAuthenticated); - const location = useLocation(); - const { userList, fetchedUserList } = useAppSelector(state => state.util); const dispatch = useAppDispatch(); @@ -24,21 +19,13 @@ export function Login(): JSX.Element { dispatch(fetchUserList()); }, [dispatch]); - // if (isAuthenticated) { - // if (location.state) { - // // return ; - // return ; - // } - // return ; - // } - - // if (fetchedUserList && userList.length === 0) { - // return ( - //
    - // - //
    - // ); - // } + if (fetchedUserList && userList.length === 0) { + return ( +
    + +
    + ); + } return (
    diff --git a/src/layouts/PrivateRoute.tsx b/src/layouts/PrivateRoute.tsx index 4ca71872f..15faaaea1 100644 --- a/src/layouts/PrivateRoute.tsx +++ b/src/layouts/PrivateRoute.tsx @@ -1,15 +1,12 @@ import React from "react"; -import { Navigate, Outlet } from "react-router-dom"; +import { Navigate, Outlet, useLocation } from "react-router-dom"; import { selectIsAuthenticated } from "../store/auth/authSelectors"; import { useAppSelector } from "../store/store"; -export function ProtectedRoute() { +export function ProtectedRoutes() { const isAuth = useAppSelector(selectIsAuthenticated); + const { pathname } = useLocation(); - if (!isAuth) { - return ; - } - - return ; + return isAuth ? : ; } diff --git a/src/layouts/albums/AlbumAutoGalleryView.tsx b/src/layouts/albums/AlbumAutoGalleryView.tsx index 8c4b21418..c67b6eac5 100644 --- a/src/layouts/albums/AlbumAutoGalleryView.tsx +++ b/src/layouts/albums/AlbumAutoGalleryView.tsx @@ -4,7 +4,7 @@ import _ from "lodash"; import moment from "moment"; import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { Calendar, Map2, SettingsAutomation, Users } from "tabler-icons-react"; +import { Calendar, Map2, SettingsAutomation, Users } from "tabler-icons-react"; import { fetchAlbumsAutoGalleries } from "../../actions/albumsActions"; import { fetchPhotoDetail } from "../../actions/photosActions"; @@ -143,7 +143,9 @@ export const AlbumAutoGalleryView = (props: Props) => {
    {`Day ${i + 1} - ${moment(v[0]).format("MMMM Do YYYY")}`} - {_.uniq(locations).map(e => ({ key: e, content: e }))} + + <>{_.uniq(locations).map(e => ({ key: e, content: e }))} +
    diff --git a/src/layouts/login/LoginPage.tsx b/src/layouts/login/LoginPage.tsx index da364a801..c46e0b0c2 100644 --- a/src/layouts/login/LoginPage.tsx +++ b/src/layouts/login/LoginPage.tsx @@ -14,7 +14,7 @@ import { useForm } from "@mantine/form"; import type { FormEvent } from "react"; import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import { Lock, User } from "tabler-icons-react"; import { fetchSiteSettings } from "../../actions/utilActions"; @@ -31,9 +31,13 @@ export function LoginPage(): JSX.Element { const dark = colorScheme === "dark"; const dispatch = useAppDispatch(); const { t } = useTranslation(); + const location = useLocation(); + console.info("location: ", location); + // @ts-ignore + const from = location.state?.from || "/"; const siteSettings = useAppSelector(selectSiteSettings); - const [login, { isSuccess, isLoading }] = useLoginMutation(); + const [login, { isLoading }] = useLoginMutation(); const form = useForm({ initialValues: { username: "", @@ -46,19 +50,13 @@ export function LoginPage(): JSX.Element { fetchSiteSettings(dispatch); }, [dispatch]); - useEffect(() => { - if (isSuccess) { - navigate("/"); - } - }, [navigate, isSuccess]); - function onSubmit(event: FormEvent): void { event.preventDefault(); void login({ username: form.values.username.toLowerCase(), password: form.values.password }); } if (isAuth) { - navigate("/"); + navigate(from); } return (
    state.photos as PhotosState); const dispatch = useAppDispatch(); const { t } = useTranslation(); - const [group, setGroup] = useState({} as fetchedGroup); + const [group, setGroup] = useState({} as IFetchedGroup); useEffect(() => { if (group.id && group.page) { fetchAlbumDate(dispatch, { @@ -26,13 +25,13 @@ export function TimestampPhotos() { photosetType: PhotosetType.TIMESTAMP, }); } - }, [group.id, group.page]); + }, [dispatch, group.id, group.page]); useEffect(() => { if (fetchedPhotosetType !== PhotosetType.TIMESTAMP) { fetchAlbumDateList(dispatch, { photosetType: PhotosetType.TIMESTAMP }); } - }, [dispatch]); // Only run on first render + }, [dispatch]); const getAlbums = (visibleGroups: any) => { visibleGroups.forEach((group: any) => { diff --git a/src/store/store.ts b/src/store/store.ts index 9992b4ae4..73dadec44 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -23,6 +23,9 @@ import { worker } from "./worker/workerSlice"; const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ history: createBrowserHistory(), + reduxTravelling: true, + showHistoryAction: true, + savePreviousLocations: 100, }); export const store = configureStore({