diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index 34807d96..6744e127 100644 --- a/src/servers/CreateServer.tsx +++ b/src/servers/CreateServer.tsx @@ -1,7 +1,7 @@ import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit'; import { Result, useToggle } from '@shlinkio/shlink-frontend-kit'; import type { FC } from 'react'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Button } from 'reactstrap'; import { NoMenuLayout } from '../common/NoMenuLayout'; @@ -50,26 +50,23 @@ const CreateServer: FCWithDeps = ({ servers createServers([{ ...theServerData, id }]); navigate(`/server/${id}`); }, [createServers, navigate]); - - useEffect(() => { - if (!serverData) { - return; - } + const onSubmit = useCallback((newServerData: ServerData) => { + setServerData(newServerData); const serverExists = Object.values(servers).some( - ({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey, + ({ url, apiKey }) => newServerData.url === url && newServerData.apiKey === apiKey, ); if (serverExists) { toggleConfirmModal(); } else { - saveNewServer(serverData); + saveNewServer(newServerData); } - }, [saveNewServer, serverData, servers, toggleConfirmModal]); + }, [saveNewServer, servers, toggleConfirmModal]); return ( - Add new server} onSubmit={setServerData}> + Add new server} onSubmit={onSubmit}> {!hasServers && ( )} diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx index 5b38cc73..571f5c68 100644 --- a/src/servers/ManageServers.tsx +++ b/src/servers/ManageServers.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit'; import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit'; import type { FC } from 'react'; -import { useEffect, useState } from 'react'; +import { useMemo, useState } from 'react'; import { Link } from 'react-router-dom'; import { Button, Row } from 'reactstrap'; import { NoMenuLayout } from '../common/NoMenuLayout'; @@ -34,26 +34,23 @@ const ManageServers: FCWithDeps = ({ serv useTimeoutToggle, ManageServersRow, } = useDependencies(ManageServers); - const allServers = Object.values(servers); - const [serversList, setServersList] = useState(allServers); - const filterServers = (searchTerm: string) => setServersList( - allServers.filter(({ name, url }) => `${name} ${url}`.toLowerCase().match(searchTerm.toLowerCase())), + const [searchTerm, setSearchTerm] = useState(''); + const allServers = useMemo(() => Object.values(servers), [servers]); + const filteredServers = useMemo( + () => allServers.filter(({ name, url }) => `${name} ${url}`.toLowerCase().match(searchTerm.toLowerCase())), + [allServers, searchTerm], ); - const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect); + const hasAutoConnect = allServers.some(({ autoConnect }) => !!autoConnect); const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME); - useEffect(() => { - setServersList(Object.values(servers)); - }, [servers]); - return ( - +
Import servers - {allServers.length > 0 && ( + {filteredServers.length > 0 && ( @@ -77,8 +74,8 @@ const ManageServers: FCWithDeps = ({ serv - {!serversList.length && No servers found.} - {serversList.map((server) => ( + {!filteredServers.length && No servers found.} + {filteredServers.map((server) => ( ))} diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx index eb76dec0..a1b8b53f 100644 --- a/src/servers/helpers/ServerForm.tsx +++ b/src/servers/helpers/ServerForm.tsx @@ -1,6 +1,6 @@ import { InputFormGroup, SimpleCard } from '@shlinkio/shlink-frontend-kit'; import type { FC, PropsWithChildren, ReactNode } from 'react'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { handleEventPreventingDefault } from '../../utils/utils'; import type { ServerData } from '../data'; @@ -11,19 +11,11 @@ type ServerFormProps = PropsWithChildren<{ }>; export const ServerForm: FC = ({ onSubmit, initialValues, children, title }) => { - const [name, setName] = useState(''); - const [url, setUrl] = useState(''); - const [apiKey, setApiKey] = useState(''); + const [name, setName] = useState(initialValues?.name ?? ''); + const [url, setUrl] = useState(initialValues?.url ?? ''); + const [apiKey, setApiKey] = useState(initialValues?.apiKey ?? ''); const handleSubmit = handleEventPreventingDefault(() => onSubmit({ name, url, apiKey })); - useEffect(() => { - if (initialValues) { - setName(initialValues.name); - setUrl(initialValues.url); - setApiKey(initialValues.apiKey); - } - }, [initialValues]); - return (