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

Added error/loading handling to edit short URL

Browse source
This commit is contained in:
Alejandro Celaya 2021-03-27 10:27:46 +01:00
parent d5e20f445d
commit ca670d810d
2 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,11 +10,13 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
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';
import { ShortUrlEdition } from './reducers/shortUrlEdition';
interface EditShortUrlConnectProps extends RouteComponentProps<{ shortCode: string }> { interface EditShortUrlConnectProps extends RouteComponentProps<{ shortCode: string }> {
settings: Settings; settings: Settings;
selectedServer: SelectedServer; selectedServer: SelectedServer;
shortUrlDetail: ShortUrlDetail; shortUrlDetail: ShortUrlDetail;
shortUrlEdition: ShortUrlEdition;
getShortUrlDetail: (shortCode: string, domain: OptionalString) => void; getShortUrlDetail: (shortCode: string, domain: OptionalString) => void;
editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>; editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>;
} }
@ -45,9 +47,11 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
selectedServer, selectedServer,
shortUrlDetail, shortUrlDetail,
getShortUrlDetail, getShortUrlDetail,
shortUrlEdition,
editShortUrl, editShortUrl,
}: EditShortUrlConnectProps) => { }: EditShortUrlConnectProps) => {
const { loading, error, errorData, shortUrl } = shortUrlDetail; const { loading, error, errorData, shortUrl } = shortUrlDetail;
const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
const { domain } = parseQuery<{ domain?: string }>(search); const { domain } = parseQuery<{ domain?: string }>(search);
useEffect(() => { useEffect(() => {
@ -69,10 +73,16 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
return ( return (
<ShortUrlForm <ShortUrlForm
initialState={getInitialState(shortUrl, shortUrlCreationSettings)} initialState={getInitialState(shortUrl, shortUrlCreationSettings)}
saving={false} saving={saving}
selectedServer={selectedServer} selectedServer={selectedServer}
mode="edit" mode="edit"
onSave={async (shortUrlData) => shortUrl && editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)} onSave={async (shortUrlData) => shortUrl && editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)}
/> >
{savingError && (
<Result type="error" className="mt-3">
<ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
</Result>
)}
</ShortUrlForm>
); );
}; };

8
src/short-urls/services/provideServices.ts
View file

@ -57,10 +57,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
); );
bottle.serviceFactory('EditShortUrl', EditShortUrl, 'ShortUrlForm'); bottle.serviceFactory('EditShortUrl', EditShortUrl, 'ShortUrlForm');
bottle.decorator( bottle.decorator('EditShortUrl', connect(
'EditShortUrl', [ 'shortUrlDetail', 'shortUrlEdition', 'selectedServer', 'settings' ],
connect([ 'shortUrlDetail', 'selectedServer', 'settings' ], [ 'getShortUrlDetail', 'editShortUrl' ]), [ 'getShortUrlDetail', 'editShortUrl' ],
); ));
bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal); bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
bottle.decorator('DeleteShortUrlModal', connect([ 'shortUrlDeletion' ], [ 'deleteShortUrl', 'resetDeleteShortUrl' ])); bottle.decorator('DeleteShortUrlModal', connect([ 'shortUrlDeletion' ], [ 'deleteShortUrl', 'resetDeleteShortUrl' ]));