chore: axios base query with retry; error handling; qr-code scan

src/components/config-scan.button.tsx

@@ -4,9 +4,10 @@ import { useNavigate } from 'react-router-dom';
 
 export default function ConfigScanButton() {
   const navigate = useNavigate();
-  const scanConfigAndPersist = useCallback(() => {
-    navigate('/config/scan');
-  }, [navigate]);
+  const scanConfigAndPersist = useCallback(
+    () => navigate('/config/scan'),
+    [navigate]
+  );
 
   return (
     <Button fullWidth onClick={scanConfigAndPersist} color="primary">

src/components/config.qr-code.tsx

@@ -1,11 +1,11 @@
-import { urlConfigSelector, useAppSelector, useFetchConfigUrl } from '../store';
+import { selectConfigUrl, useAppSelector, useFetchConfigUrl } from '@store';
 import { Loading } from 'react-daisyui';
 import QRCode from 'react-qr-code';
 import { useEffect } from 'react';
 
 export default function ConfigQrCode() {
   const getUrl = useFetchConfigUrl();
-  const url = useAppSelector(urlConfigSelector);
+  const url = useAppSelector(selectConfigUrl);
   useEffect(() => getUrl(), [getUrl]);
   return (
     <figure>

src/main.tsx

@@ -1,41 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from './app.tsx';
-import * as Sentry from '@sentry/react';
-import { I18nextProvider } from 'react-i18next';
-import i18n from './i18n';
 import './index.scss';
-import { Provider } from 'react-redux';
-import { store } from '@store';
 import { isElectron, setupLogging } from '@shared';
-
-Sentry.init({
-  dsn: 'https://9fd06d22381ef360013d83b6b0c8375e@o4507214219313152.ingest.de.sentry.io/4507214225801296',
-  integrations: [
-    Sentry.browserTracingIntegration(),
-    Sentry.replayIntegration(),
-  ],
-  // Performance Monitoring
-  tracesSampleRate: 1.0, //  Capture 100% of the transactions
-  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-  tracePropagationTargets: ['localhost', /^https:\/\/localhost:\d+\/api/],
-  // Session Replay
-  replaysSessionSampleRate: 0.1,
-  replaysOnErrorSampleRate: 1.0,
-});
+import { bootstrap } from '@shared/app.tsx';
 
 if (isElectron) {
-  setupLogging();
+  setupLogging().then(() => {
+    bootstrap();
+  });
+} else {
+  bootstrap();
 }
-
-const rootElement = document.getElementById('root') as HTMLElement;
-const root = ReactDOM.createRoot(rootElement);
-root.render(
-  <React.StrictMode>
-    <I18nextProvider i18n={i18n}>
-      <Provider store={store}>
-        <App />
-      </Provider>
-    </I18nextProvider>
-  </React.StrictMode>
-);

src/screens/app-config.screen.tsx

@@ -1,10 +1,7 @@
-import React, { lazy, useEffect } from 'react';
+import React, { lazy } from 'react';
 import { t } from 'i18next';
 import { Card } from 'react-daisyui';
-import { useNavigate } from 'react-router-dom';
-import { isElectron } from '../shared/constants.ts';
-import { useSelector } from 'react-redux';
-import { selectConfigUrl } from '@store';
+import { isElectron } from '@shared';
 
 const ConfigQrCode = lazy(() => import('../components/config.qr-code'));
 const ConfigScanButton = lazy(() => import('../components/config-scan.button'));
@@ -13,15 +10,6 @@ const ToListScanButton = lazy(
 );
 
 export const Component: React.FC = () => {
-  const navigate = useNavigate();
-
-  const checkConfig = useSelector(selectConfigUrl);
-
-  useEffect(() => {
-    if (checkConfig) {
-      navigate('/scans');
-    }
-  }, [checkConfig, navigate]);
   return (
     <div className="flex justify-center h-[100vh] items-center p-4">
       <Card className="max-w-sm border-0 sm:border-2 sm:bg-base-200">

src/screens/scan-config.screen.tsx

@@ -25,8 +25,9 @@ export const Component: React.FC = () => {
     for (const { rawValue, format } of detectedCodes) {
       if (['qr_code', 'rm_qr_code', 'micro_qr_code'].includes(format)) {
         const config = JSON.parse(rawValue) as Record<string, string>;
+        console.log({ config });
         dispatch(setUrlConfig(config.url));
-        navigate('..');
+        navigate('/scans');
       }
     }
   };

src/shared/app.tsx

@@ -0,0 +1,37 @@
+import * as Sentry from '@sentry/react';
+import ReactDOM from 'react-dom/client';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '@i18n';
+import { Provider } from 'react-redux';
+import { store } from '@store';
+import { App } from '../app.tsx';
+
+export function bootstrap() {
+  Sentry.init({
+    dsn: 'https://9fd06d22381ef360013d83b6b0c8375e@o4507214219313152.ingest.de.sentry.io/4507214225801296',
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration(),
+    ],
+    // Performance Monitoring
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: ['localhost', /^https:\/\/localhost:\d+\/api/],
+    // Session Replay
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+  });
+
+  const rootElement = document.getElementById('root') as HTMLElement;
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <React.StrictMode>
+      <I18nextProvider i18n={i18n}>
+        <Provider store={store}>
+          <App />
+        </Provider>
+      </I18nextProvider>
+    </React.StrictMode>
+  );
+}

src/store/selectors.ts

@@ -7,5 +7,5 @@ export const selectNotification = createSelector(
 );
 export const selectConfigUrl = createSelector(
   (ro: RootState) => ro.config,
-  ({ url }) => url
+  ({ url, loading }) => (loading ? undefined : url)
 );

src/store/slices/config.slice.ts

@@ -1,51 +1,42 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { isElectron } from '@shared';
 import { fetchConfigUrl } from '@store/thunks';
 
 export interface ConfigState {
   url?: string;
-  locked: boolean;
+  loading: boolean;
 }
 
 const initialState = {
-  url: isElectron ? '' : undefined,
-  locked: isElectron,
+  url: undefined,
+  loading: true,
 } satisfies ConfigState as ConfigState;
 
 const configSlice = createSlice({
   name: 'config',
   initialState,
   reducers: {
     clear(state) {
-      if (state.locked) {
-        return;
-      }
-
       delete state.url;
     },
     url(state, action: PayloadAction<string>) {
-      if (state.locked) {
-        return;
-      }
-
       state.url = action.payload;
     },
   },
   extraReducers: (builder) => {
     // Add reducers for additional action types here, and handle loading state as needed
-    builder.addCase(fetchConfigUrl.fulfilled, (state, action) => {
-      if (state.locked) {
-        return;
-      }
-      // Add user to the state array
-      state.url = action.payload;
-    });
+    builder
+      .addCase(fetchConfigUrl.fulfilled, (state, action) => {
+        // Add user to the state array
+        state.url = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchConfigUrl.pending, (state) => {
+        // Add user to the state array
+        state.loading = true;
+      });
   },
 });
 
 export const { clear: clearConfig, url: setUrlConfig } = configSlice.actions;
 
 export const reducerConfig = configSlice.reducer;
-
-export const urlConfigSelector = ({ config }: { config: ConfigState }) =>
-  JSON.stringify(config);