Use apiClient factory to dynamically resolved different values at runtime

shlink-web-component/domains/helpers/DomainDropdown.tsx

@@ -19,8 +19,6 @@ interface DomainDropdownProps {
 
 export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedirects }) => {
   const [isModalOpen, toggleModal] = useToggle();
-  const { isDefault } = domain;
-  const canBeEdited = !isDefault;
   const withVisits = useFeature('domainVisits');
   const routesPrefix = useRoutesPrefix();
 
@@ -34,7 +32,7 @@ export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedi
           <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
         </DropdownItem>
       )}
-      <DropdownItem disabled={!canBeEdited} onClick={!canBeEdited ? undefined : toggleModal}>
+      <DropdownItem onClick={toggleModal}>
         <FontAwesomeIcon fixedWidth icon={editIcon} /> Edit redirects
       </DropdownItem>
 

shlink-web-component/domains/reducers/domainRedirects.ts

@@ -1,5 +1,5 @@
-import { createAsyncThunk } from '../../../src/utils/helpers/redux';
 import type { ShlinkApiClient, ShlinkDomainRedirects } from '../../api-contract';
+import { createAsyncThunk } from '../../utils/redux';
 
 const EDIT_DOMAIN_REDIRECTS = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS';
 
@@ -9,10 +9,11 @@ export interface EditDomainRedirects {
 }
 
 export const editDomainRedirects = (
-  apiClient: ShlinkApiClient,
+  apiClientFactory: () => ShlinkApiClient,
 ) => createAsyncThunk(
   EDIT_DOMAIN_REDIRECTS,
   async ({ domain, redirects: providedRedirects }: EditDomainRedirects): Promise<EditDomainRedirects> => {
+    const apiClient = apiClientFactory();
     const redirects = await apiClient.editDomainRedirects({ domain, ...providedRedirects });
     return { domain, redirects };
   },

shlink-web-component/domains/reducers/domainsList.ts

@@ -1,8 +1,8 @@
 import type { AsyncThunk, SliceCaseReducers } from '@reduxjs/toolkit';
 import { createAction, createSlice } from '@reduxjs/toolkit';
-import { createAsyncThunk } from '../../../src/utils/helpers/redux';
 import type { ProblemDetailsError, ShlinkApiClient, ShlinkDomainRedirects } from '../../api-contract';
 import { parseApiError } from '../../api-contract/utils';
+import { createAsyncThunk } from '../../utils/redux';
 import type { Domain, DomainStatus } from '../data';
 import type { EditDomainRedirects } from './domainRedirects';
 
@@ -41,11 +41,11 @@ export const replaceStatusOnDomain = (domain: string, status: DomainStatus) =>
   (d: Domain): Domain => (d.domain !== domain ? d : { ...d, status });
 
 export const domainsListReducerCreator = (
-  apiClient: ShlinkApiClient,
+  apiClientFactory: () => ShlinkApiClient,
   editDomainRedirects: AsyncThunk<EditDomainRedirects, any, any>,
 ) => {
   const listDomains = createAsyncThunk(`${REDUCER_PREFIX}/listDomains`, async (): Promise<ListDomains> => {
-    const { data, defaultRedirects } = await apiClient.listDomains();
+    const { data, defaultRedirects } = await apiClientFactory().listDomains();
 
     return {
       domains: data.map((domain): Domain => ({ ...domain, status: 'validating' })),
@@ -57,7 +57,7 @@ export const domainsListReducerCreator = (
     `${REDUCER_PREFIX}/checkDomainHealth`,
     async (domain: string): Promise<ValidateDomain> => {
       try {
-        const { status } = await apiClient.health(domain);
+        const { status } = await apiClientFactory().health(domain);
         return { domain, status: status === 'pass' ? 'valid' : 'invalid' };
       } catch (e) {
         return { domain, status: 'invalid' };

shlink-web-component/domains/services/provideServices.ts

@@ -21,7 +21,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory(
     'domainsListReducerCreator',
     domainsListReducerCreator,
-    'apiClient',
+    'apiClientFactory',
     'editDomainRedirects',
   );
   bottle.serviceFactory('domainsListReducer', prop('reducer'), 'domainsListReducerCreator');
@@ -29,6 +29,6 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Actions
   bottle.serviceFactory('listDomains', prop('listDomains'), 'domainsListReducerCreator');
   bottle.serviceFactory('filterDomains', prop('filterDomains'), 'domainsListReducerCreator');
-  bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'apiClient');
+  bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'apiClientFactory');
   bottle.serviceFactory('checkDomainHealth', prop('checkDomainHealth'), 'domainsListReducerCreator');
 };