mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve useEffect usage in App component, to have the right dependencies

Browse source
This commit is contained in:
Alejandro Celaya 2023-09-02 11:33:57 +02:00
parent 1ef96662a3
commit 4298893960
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/App.tsx
View file

@ -1,7 +1,7 @@
import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit'; import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
import classNames from 'classnames'; import classNames from 'classnames';
import type { FC } from 'react'; import type { FC } from 'react';
import { useEffect } from 'react'; import { useEffect, useRef } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom'; import { Route, Routes, useLocation } from 'react-router-dom';
import { AppUpdateBanner } from '../common/AppUpdateBanner'; import { AppUpdateBanner } from '../common/AppUpdateBanner';
import { NotFound } from '../common/NotFound'; import { NotFound } from '../common/NotFound';
@ -29,16 +29,20 @@ export const App = (
ShlinkVersionsContainer: FC, ShlinkVersionsContainer: FC,
) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => { ) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
const location = useLocation(); const location = useLocation();
const initialServers = useRef(servers);
const isHome = location.pathname === '/'; const isHome = location.pathname === '/';
useEffect(() => { useEffect(() => {
// On first load, try to fetch the remote servers if the list is empty // Try to fetch the remote servers if the list is empty at first
if (Object.keys(servers).length === 0) { // We use a ref because we don't care if the servers list becomes empty later
if (Object.keys(initialServers.current).length === 0) {
fetchServers(); fetchServers();
} }
}, [fetchServers]);
useEffect(() => {
changeThemeInMarkup(settings.ui?.theme ?? 'light'); changeThemeInMarkup(settings.ui?.theme ?? 'light');
}, []); }, [settings.ui?.theme]);
return ( return (
<div className="container-fluid app-container"> <div className="container-fluid app-container">

4
src/settings/UserInterfaceSettings.tsx
View file

@ -1,7 +1,7 @@
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'; import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { Theme } from '@shlinkio/shlink-frontend-kit'; import type { Theme } from '@shlinkio/shlink-frontend-kit';
import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit'; import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
import type { FC } from 'react'; import type { FC } from 'react';
import type { AppSettings, UiSettings } from './reducers/settings'; import type { AppSettings, UiSettings } from './reducers/settings';
import './UserInterfaceSettings.scss'; import './UserInterfaceSettings.scss';
@ -18,9 +18,7 @@ export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }
checked={ui?.theme === 'dark'} checked={ui?.theme === 'dark'}
onChange={(useDarkTheme) => { onChange={(useDarkTheme) => {
const theme: Theme = useDarkTheme ? 'dark' : 'light'; const theme: Theme = useDarkTheme ? 'dark' : 'light';
setUiSettings({ ...ui, theme }); setUiSettings({ ...ui, theme });
changeThemeInMarkup(theme);
}} }}
> >
Use dark theme. Use dark theme.