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}
selectedServer={selectedServer}
mode={basicMode ? 'create-basic' : 'create'}
onSave={createShortUrl}
onSave={async (data: ShortUrlData) => {
resetCreateShortUrl();
return createShortUrl(data);
}}
/>
<CreateShortUrlResult
{...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 { Result } from '../utils/Result';
import { ShlinkApiError } from '../api/ShlinkApiError';
import { useToggle } from '../utils/helpers/hooks';
import { ShortUrlFormProps } from './ShortUrlForm';
import { ShortUrlDetail } from './reducers/shortUrlDetail';
import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
@ -62,6 +63,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
() => getInitialState(shortUrl, shortUrlCreationSettings),
[ shortUrl, shortUrlCreationSettings ],
);
const [ savingSucceeded,, isSuccessful, isNotSuccessful ] = useToggle();
useEffect(() => {
getShortUrlDetail(params.shortCode, domain);
@ -79,8 +81,6 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
);
}
const title = <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>;
return (
<>
<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}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
<span className="text-center">{title}</span>
<span className="text-center">
<small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>
</span>
<span />
</h2>
</Card>
@ -99,13 +101,23 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
saving={saving}
selectedServer={selectedServer}
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 && (
<Result type="error" className="mt-3">
<ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
</Result>
)}
{savingSucceeded && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
</>
);
};