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 {
+export type ShortUrlCreation = {
-  result?: ShortUrl;
+  saving: false;
-  saving: boolean;
+  saved: false;
-  saved: boolean;
+  error: false;
-  error: boolean;
+} | {
+  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,

test/short-urls/helpers/CreateShortUrlResult.test.tsx

@@ -4,34 +4,39 @@ import { CreateShortUrlResult as createResult } from '../../../src/short-urls/he
 import { ShortUrl } from '../../../src/short-urls/data';
 import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
+import { ShortUrlCreation } from '../../../src/short-urls/reducers/shortUrlCreation';
 
 describe('<CreateShortUrlResult />', () => {
   const copyToClipboard = jest.fn();
   const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
   const CreateShortUrlResult = createResult(useTimeoutToggle);
-  const setUp = (result?: ShortUrl, error = false) => renderWithEvents(
+  const setUp = (creation: ShortUrlCreation) => renderWithEvents(
-    <CreateShortUrlResult resetCreateShortUrl={() => {}} creation={{ result, saving: false, error, saved: false }} />,
+    <CreateShortUrlResult resetCreateShortUrl={() => {}} creation={creation} />,
   );
 
   afterEach(jest.clearAllMocks);
 
   it('renders an error when error is true', () => {
-    setUp(Mock.all<ShortUrl>(), true);
+    setUp({ error: true, saved: false, saving: false });
     expect(screen.getByText('An error occurred while creating the URL :(')).toBeInTheDocument();
   });
 
-  it('renders nothing when no result is provided', () => {
+  it.each([[true], [false]])('renders nothing when not saved yet', (saving) => {
-    const { container } = setUp();
+    const { container } = setUp({ error: false, saved: false, saving });
     expect(container.firstChild).toBeNull();
   });
 
   it('renders a result message when result is provided', () => {
-    setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
+    setUp(
+      { result: Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }), saving: false, saved: true, error: false },
+    );
     expect(screen.getByText(/The short URL is/)).toHaveTextContent('Great! The short URL is https://doma.in/abc123');
   });
 
   it('Invokes tooltip timeout when copy to clipboard button is clicked', async () => {
-    const { user } = setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
+    const { user } = setUp(
+      { result: Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }), saving: false, saved: true, error: false },
+    );
 
     expect(copyToClipboard).not.toHaveBeenCalled();
     await user.click(screen.getByRole('button'));