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

Migrate CreateServer component to Typescript

Browse Source
This commit is contained in:
Alejandro Celaya
2020-08-22 17:58:44 +02:00
parent 2db85c2783
commit 7c67fa4149
7 changed files with 88 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/servers/CreateServer.tsx
View File

@@ -1,7 +1,9 @@
import React, { FC, useEffect } from 'react';
import { v4 as uuid } from 'uuid';
import { RouterProps } from 'react-router';
import classNames from 'classnames';
import NoMenuLayout from '../common/NoMenuLayout';
import { StateFlagTimeout } from '../utils/helpers/hooks';
import { ServerForm } from './helpers/ServerForm';
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
import { NewServerData, RegularServer } from './data';
@@ -14,10 +16,26 @@ interface CreateServerProps extends RouterProps {
resetSelectedServer: Function;
}
const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: Function) => (
const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => (
<div className="row">
<div className="col-md-10 offset-md-1">
<div
className={classNames('p-2 mt-3 text-white text-center', {
'bg-main': type === 'success',
'bg-danger': type === 'error',
})}
>
{children}
</div>
</div>
</div>
);
const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
{ createServer, history: { push }, resetSelectedServer }: CreateServerProps,
) => {
const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
const handleSubmit = (serverData: NewServerData) => {
const id = uuid();
@@ -32,19 +50,12 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
return (
<NoMenuLayout>
<ServerForm onSubmit={handleSubmit}>
<ImportServersBtn onImport={setServersImported} />
<ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
<button className="btn btn-outline-primary">Create server</button>
</ServerForm>
{serversImported && (
<div className="row create-server__import-success-msg">
<div className="col-md-10 offset-md-1">
<div className="p-2 mt-3 bg-main text-white text-center">
Servers properly imported. You can now select one from the list :)
</div>
</div>
</div>
)}
{serversImported && <Result type="success">Servers properly imported. You can now select one from the list :)</Result>}
{errorImporting && <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>}
</NoMenuLayout>
);
};