forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-12 02:23:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created new section to manage servers

Browse Source
This commit is contained in:
Alejandro Celaya
2021-10-17 19:13:06 +02:00
parent 002f280364
commit 7f4263966e
19 changed files with 249 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/servers/CreateServer.tsx
View File

@@ -1,30 +1,35 @@
import { FC } from 'react';
import { v4 as uuid } from 'uuid';
import { RouterProps } from 'react-router';
import { Button } from 'reactstrap';
import { Result } from '../utils/Result';
import NoMenuLayout from '../common/NoMenuLayout';
import { StateFlagTimeout } from '../utils/helpers/hooks';
import { ServerForm } from './helpers/ServerForm';
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
import { ServerData, ServerWithId } from './data';
import { ServerData, ServersMap, ServerWithId } from './data';
import './CreateServer.scss';
const SHOW_IMPORT_MSG_TIME = 4000;
interface CreateServerProps extends RouterProps {
createServer: (server: ServerWithId) => void;
servers: ServersMap;
}
const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
<Result type={type}>
{type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
{type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
</Result>
<div className="mt-3">
<Result type={type}>
{type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
{type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
</Result>
</div>
);
const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
{ createServer, history: { push } }: CreateServerProps,
{ servers, createServer, history: { push } }: CreateServerProps,
) => {
const hasServers = !!Object.keys(servers).length;
const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
const handleSubmit = (serverData: ServerData) => {
@@ -37,16 +42,13 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
return (
<NoMenuLayout>
<ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
<ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
<button className="btn btn-outline-primary">Create server</button>
{!hasServers &&
<ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
<Button outline color="primary" className="ml-2">Create server</Button>
</ServerForm>
{(serversImported || errorImporting) && (
<div className="mt-3">
{serversImported && <ImportResult type="success" />}
{errorImporting && <ImportResult type="error" />}
</div>
)}
{serversImported && <ImportResult type="success" />}
{errorImporting && <ImportResult type="error" />}
</NoMenuLayout>
);
};