mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved feedback when editing a short URL

Browse source
This commit is contained in:
Alejandro Celaya 2021-05-08 10:56:20 +02:00
parent b52120e0d3
commit 937876ce67
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/short-urls/CreateShortUrl.tsx
View file

@ -49,7 +49,11 @@ const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResul
saving={shortUrlCreationResult.saving} saving={shortUrlCreationResult.saving}
selectedServer={selectedServer} selectedServer={selectedServer}
mode={basicMode ? 'create-basic' : 'create'} mode={basicMode ? 'create-basic' : 'create'}
onSave={createShortUrl} onSave={async (data: ShortUrlData) => {
resetCreateShortUrl();
return createShortUrl(data);
}}
/> />
<CreateShortUrlResult <CreateShortUrlResult
{...shortUrlCreationResult} {...shortUrlCreationResult}

20
src/short-urls/EditShortUrl.tsx
View file

@ -11,6 +11,7 @@ import { parseQuery } from '../utils/helpers/query';
import Message from '../utils/Message'; import Message from '../utils/Message';
import { Result } from '../utils/Result'; import { Result } from '../utils/Result';
import { ShlinkApiError } from '../api/ShlinkApiError'; import { ShlinkApiError } from '../api/ShlinkApiError';
import { useToggle } from '../utils/helpers/hooks';
import { ShortUrlFormProps } from './ShortUrlForm'; import { ShortUrlFormProps } from './ShortUrlForm';
import { ShortUrlDetail } from './reducers/shortUrlDetail'; import { ShortUrlDetail } from './reducers/shortUrlDetail';
import { EditShortUrlData, ShortUrl, ShortUrlData } from './data'; import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
@ -62,6 +63,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
() => getInitialState(shortUrl, shortUrlCreationSettings), () => getInitialState(shortUrl, shortUrlCreationSettings),
[ shortUrl, shortUrlCreationSettings ], [ shortUrl, shortUrlCreationSettings ],
); );
const [ savingSucceeded,, isSuccessful, isNotSuccessful ] = useToggle();
useEffect(() => { useEffect(() => {
getShortUrlDetail(params.shortCode, domain); getShortUrlDetail(params.shortCode, domain);
@ -79,8 +81,6 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
); );
} }
const title = <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>;
return ( return (
<> <>
<header className="mb-3"> <header className="mb-3">
@ -89,7 +89,9 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}> <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
<FontAwesomeIcon icon={faArrowLeft} /> <FontAwesomeIcon icon={faArrowLeft} />
</Button> </Button>
<span className="text-center">{title}</span> <span className="text-center">
<small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>
</span>
<span /> <span />
</h2> </h2>
</Card> </Card>
@ -99,13 +101,23 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
saving={saving} saving={saving}
selectedServer={selectedServer} selectedServer={selectedServer}
mode="edit" mode="edit"
onSave={async (shortUrlData) => shortUrl && editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)} onSave={async (shortUrlData) => {
if (!shortUrl) {
return;
}
isNotSuccessful();
editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)
.then(isSuccessful)
.catch(isNotSuccessful);
}}
/> />
{savingError && ( {savingError && (
<Result type="error" className="mt-3"> <Result type="error" className="mt-3">
<ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" /> <ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
</Result> </Result>
)} )}
{savingSucceeded && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
</> </>
); );
}; };