Implemented state machine for short URL creation

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -20,7 +20,7 @@ export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
   { creation, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps,
 ) => {
   const [showCopyTooltip, setShowCopyTooltip] = useTimeoutToggle();
-  const { error, errorData, result } = creation;
+  const { error, saved } = creation;
 
   useEffect(() => {
     resetCreateShortUrl();
@@ -30,16 +30,16 @@ export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
     return (
       <Result type="error" className="mt-3">
         {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
-        <ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while creating the URL :(" />
+        <ShlinkApiError errorData={creation.errorData} fallbackMessage="An error occurred while creating the URL :(" />
       </Result>
     );
   }
 
-  if (!result) {
+  if (!saved) {
     return null;
   }
 
-  const { shortUrl } = result;
+  const { shortUrl } = creation.result;
 
   return (
     <Result type="success" className="mt-3">

src/short-urls/reducers/shortUrlCreation.ts

@@ -7,13 +7,25 @@ import { ProblemDetailsError } from '../../api/types/errors';
 
 export const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
 
-export interface ShortUrlCreation {
-  result?: ShortUrl;
-  saving: boolean;
-  saved: boolean;
-  error: boolean;
+export type ShortUrlCreation = {
+  saving: false;
+  saved: false;
+  error: false;
+} | {
+  saving: true;
+  saved: false;
+  error: false;
+} | {
+  saving: false;
+  saved: false;
+  error: true;
   errorData?: ProblemDetailsError;
-}
+} | {
+  result: ShortUrl;
+  saving: false;
+  saved: true;
+  error: false;
+};
 
 export type CreateShortUrlAction = PayloadAction<ShortUrl>;
 
@@ -31,15 +43,15 @@ export const shortUrlCreationReducerCreator = (buildShlinkApiClient: ShlinkApiCl
 
   const { reducer, actions } = createSlice({
     name: 'shortUrlCreationReducer',
-    initialState,
+    initialState: initialState as ShortUrlCreation, // Without this casting it infers type ShortUrlCreationWaiting
     reducers: {
       resetCreateShortUrl: () => initialState,
     },
     extraReducers: (builder) => {
-      builder.addCase(createShortUrl.pending, (state) => ({ ...state, saving: true, saved: false, error: false }));
+      builder.addCase(createShortUrl.pending, () => ({ saving: true, saved: false, error: false }));
       builder.addCase(
         createShortUrl.rejected,
-        (state, { error }) => ({ ...state, saving: false, saved: false, error: true, errorData: parseApiError(error) }),
+        (_, { error }) => ({ saving: false, saved: false, error: true, errorData: parseApiError(error) }),
       );
       builder.addCase(
         createShortUrl.fulfilled,