code cleanup

Author: yorek

client-v2/src/components/messages/UpsertSample.tsx

@@ -20,7 +20,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm, Controller } from "react-hook-form";
 
 import Styles from "./UpsertSample.style";
-import { createSampleAsync, updateSampleAsync, searchSamplesAsync, getLatestSamplesAsync, getAllSamplesAsync, getTotalSamplesAsync, resetCreateState, resetUpdateState, getSampleDetailsAsync, resetSampleDetailsState } from "../../store/slices/SearchSlice";
+import { upsertSampleAsync, searchSamplesAsync, getLatestSamplesAsync, getAllSamplesAsync, getTotalSamplesAsync, resetUpsertState, getSampleDetailsAsync, resetSampleDetailsState } from "../../store/slices/SearchSlice";
 import { AppDispatch, RootState } from "../../store/store";
 import { useDispatch, useSelector } from "react-redux";
 import { Record } from "../../types/Record";
@@ -43,25 +43,19 @@ const UpsertSample = (props: UpsertProps) => {
     const classes = Styles();
 
     useEffect(() => {
-        const createSucceeded = search.createSample.status === 'succeeded';
-        const updateSucceeded = search.updateSample.status === 'succeeded';
+        const upsertSucceeded = search.upsertSample.status === 'succeeded';
 
-        if (createSucceeded || updateSucceeded) {
+        if (upsertSucceeded) {
             setOpen(false);
 
-            // Reset the states immediately to prevent infinite loop
-            if (createSucceeded) {
-                dispatch(resetCreateState());
-            }
-            if (updateSucceeded) {
-                dispatch(resetUpdateState());
-            }
+            // Reset the state immediately to prevent infinite loop
+            dispatch(resetUpsertState());
 
             // Refresh the search results based on current state
             const urlParams = new URLSearchParams(window.location.search);
             const qParam = urlParams.get('q');
 
-            // Update total samples count
+            // Update total samples count (only needed for create operations, but getTotalSamplesAsync will get the correct count regardless)
             dispatch(getTotalSamplesAsync());
 
             // Small delay to ensure operations are processed
@@ -77,7 +71,7 @@ const UpsertSample = (props: UpsertProps) => {
                 }
             }, 100);
         }
-    }, [search.createSample.status, search.updateSample.status, setOpen, dispatch]);
+    }, [search.upsertSample.status, setOpen, dispatch]);
 
     // form validation hook
     const validationSchema = Yup.object().shape({
@@ -168,11 +162,10 @@ const UpsertSample = (props: UpsertProps) => {
             const values = getValues();
             // upsert
             const record = new Record(values.name, values.url, values.description, values.notes ?? '', values.details);
-            if (isEditMode && editSample) {
-                dispatch(updateSampleAsync(JSON.stringify(record)));
-            } else {
-                dispatch(createSampleAsync(JSON.stringify(record)));
-            }
+            dispatch(upsertSampleAsync({ 
+                payload: JSON.stringify(record), 
+                isCreate: !isEditMode 
+            }));
             reset();
         }
         if (target === 'cancel') {
@@ -192,21 +185,21 @@ const UpsertSample = (props: UpsertProps) => {
                 <DialogBody>
                         <DialogTitle>{isEditMode ? 'Edit Item' : 'New Item'}</DialogTitle>
                         <DialogContent className={classes.content}>
-                            {(search.createSample.status === 'failed' || search.updateSample.status === 'failed' || 
+                            {(search.upsertSample.status === 'failed' || 
                               (isEditMode && search.sampleDetails.status === 'failed')) &&
                                 <>
                                 <p className={classes.error}>Failed to {
                                     isEditMode && search.sampleDetails.status === 'failed' ? 'load sample details' :
-                                    isEditMode ? 'update' : 'create'
+                                    search.upsertSample.isCreate ? 'create' : 'update'
                                 } the sample. Please try again.</p>
                                 <code>{
                                     isEditMode && search.sampleDetails.status === 'failed' ? search.sampleDetails.error :
-                                    isEditMode ? search.updateSample.error : search.createSample.error
+                                    search.upsertSample.error
                                 }</code>                            
                                 </>
                             }
-                            {(search.createSample.status === 'loading' || search.updateSample.status === 'loading') &&
-                                <Field validationMessage={`${isEditMode ? 'Updating' : 'Creating'} item, please wait ...`} validationState="none">
+                            {search.upsertSample.status === 'loading' &&
+                                <Field validationMessage={`${search.upsertSample.isCreate ? 'Creating' : 'Updating'} item, please wait ...`} validationState="none">
                                     <ProgressBar />
                                 </Field>
                             }
@@ -215,8 +208,8 @@ const UpsertSample = (props: UpsertProps) => {
                                     <ProgressBar />
                                 </Field>
                             }
-                            {(search.createSample.status === 'succeeded' || search.updateSample.status === 'succeeded') &&
-                                <p>Record {isEditMode ? 'updated' : 'created'}.</p>
+                            {search.upsertSample.status === 'succeeded' &&
+                                <p>Record {search.upsertSample.isCreate ? 'created' : 'updated'}.</p>
                             }
                             <Field
                                 required

client-v2/src/store/slices/SearchSlice.ts

@@ -1,15 +1,15 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import { HttpClient, getDataAPIUrl } from '../../utils/httpClient';
+import { HttpClient } from '../../utils/httpClient';
 import SearchState from './SearchState';
 import Sample from '../../types/Sample';
+import { RootState } from '../store';
 
 // Define the delay function
 const delay = (ms: number | undefined) => new Promise(resolve => setTimeout(resolve, ms));
 
 // async search total samples
 export const getTotalSamplesAsync = createAsyncThunk<number>('search/getTotalSamples', async () => {
-  const response = await HttpClient.get(`${getDataAPIUrl()}countSamples`, {
-    withCredentials: false,
+  const response = await HttpClient.get(`./api/countSamples`, {
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json',
@@ -20,8 +20,7 @@ export const getTotalSamplesAsync = createAsyncThunk<number>('search/getTotalSam
 
 // async list all samples
 export const getAllSamplesAsync = createAsyncThunk<Sample[]>('search/getAllSamplesAsync', async () => {
-  const response = await HttpClient.get(`${getDataAPIUrl()}samples`, {
-    withCredentials: false,
+  const response = await HttpClient.get(`./api/samples`, {
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json',
@@ -32,8 +31,7 @@ export const getAllSamplesAsync = createAsyncThunk<Sample[]>('search/getAllSampl
 
 // async list latest samples
 export const getLatestSamplesAsync = createAsyncThunk<Sample[]>('search/getLatestSamples', async () => {
-  const response = await HttpClient.get(`${getDataAPIUrl()}latestSamples`, {
-    withCredentials: false,
+  const response = await HttpClient.get(`./api/latestSamples`, {
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json',
@@ -44,8 +42,7 @@ export const getLatestSamplesAsync = createAsyncThunk<Sample[]>('search/getLates
 
 // async search specific samples
 export const searchSamplesAsync = createAsyncThunk<Sample[], string>('search/searchSamplesAsync', async (query: string) => {
-  const response = await HttpClient.get(`${getDataAPIUrl()}findSamples?text=${query}`, {
-    withCredentials: false,
+  const response = await HttpClient.get(`./api/findSamples?text=${query}`, {
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json',
@@ -55,15 +52,23 @@ export const searchSamplesAsync = createAsyncThunk<Sample[], string>('search/sea
 });
 
 // delete a sample
-export const deleteSampleAsync = createAsyncThunk<number, string>('search/deleteSampleAsync', async (id: string) => {
+export const deleteSampleAsync = createAsyncThunk<number, string, { state: RootState }>('search/deleteSampleAsync', async (id: string, { getState }) => {
+  const state = getState();
+  const isAdmin = state.user.isAdmin;
+  
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+  };
+  
+  if (isAdmin) {
+    headers['X-MS-API-ROLE'] = 'admin';
+  }
+
   await delay(1000).then(async () => { // for better user experience
-    await HttpClient.delete(`${getDataAPIUrl()}deleteSample`, {
+    await HttpClient.delete(`./api/deleteSample`, {
       data: { id: id, url: null },
-      withCredentials: false,
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      }
+      headers
     });
 
   });
@@ -72,8 +77,7 @@ export const deleteSampleAsync = createAsyncThunk<number, string>('search/delete
 
 // get the details
 export const getSampleDetailsAsync = createAsyncThunk<Sample, string>('search/getSampleDetailsAsync', async (id: string) => {
-  const response = await HttpClient.post(`${getDataAPIUrl()}sampleDetails`, { id: id, url: null }, {
-    // withCredentials: false,
+  const response = await HttpClient.post(`./api/sampleDetails`, { id: id, url: null }, {
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json',
@@ -83,28 +87,28 @@ export const getSampleDetailsAsync = createAsyncThunk<Sample, string>('search/ge
   return JSON.parse(sample);
 });
 
-// create a sample
-export const createSampleAsync = createAsyncThunk<number, string>('search/createSampleAsync', async (payload: string) => {
-  const response = await HttpClient.post(`${getDataAPIUrl()}createSample`, { payload: payload }, {
-    // withCredentials: false,
-    headers: {
-      'Content-Type': 'application/json',
-      'Accept': 'application/json',
-    }
-  });
-  return response.data;
-});
+// upsert a sample (create or update)
+export const upsertSampleAsync = createAsyncThunk<
+  { id: number; isCreate: boolean }, 
+  { payload: string; isCreate: boolean },
+  { state: RootState }
+>('search/upsertSampleAsync', async ({ payload, isCreate }, { getState }) => {
+  const state = getState();
+  const isAdmin = state.user.isAdmin;
+  
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+  };
+  
+  if (isAdmin) {
+    headers['X-MS-API-ROLE'] = 'admin';
+  }
 
-// update a sample
-export const updateSampleAsync = createAsyncThunk<number, string>('search/updateSampleAsync', async (payload:string) => {
-  const response = await HttpClient.post(`${getDataAPIUrl()}createSample`, { payload: payload }, {
-    // withCredentials: false,
-    headers: {
-      'Content-Type': 'application/json',
-      'Accept': 'application/json',
-    }
+  const response = await HttpClient.post(`./api/upsertSample`, { payload: payload }, {
+    headers
   });
-  return response.data;
+  return { id: response.data, isCreate };
 });
 
 
@@ -128,15 +132,11 @@ const initialState: SearchState = {
     error: undefined,
     sample: undefined
   },
-  createSample: {
-    status: 'idle', 
-    error: undefined,
-    id: 0
-  },
-  updateSample: {
+  upsertSample: {
     status: 'idle',
     error: undefined,
-    id: 0
+    id: 0,
+    isCreate: false
   }
 };
 
@@ -150,11 +150,8 @@ const SearchSlice = createSlice({
     resetDeleteState: (state) => {
       state.delete = initialState.delete;
     },
-    resetUpdateState: (state) => {
-      state.updateSample = initialState.updateSample;
-    },
-    resetCreateState: (state) => {
-      state.createSample = initialState.createSample;
+    resetUpsertState: (state) => {
+      state.upsertSample = initialState.upsertSample;
     },
     resetSampleDetailsState: (state) => {
       state.sampleDetails = initialState.sampleDetails;
@@ -238,35 +235,33 @@ const SearchSlice = createSlice({
         state.sampleDetails.status = 'failed';
         state.sampleDetails.error = action.error.message;
       })
-      // create sample
-      .addCase(createSampleAsync.pending, (state) => {
-        state.createSample.status = 'loading'
+      // upsert sample (create or update)
+      .addCase(upsertSampleAsync.pending, (state) => {
+        state.upsertSample.status = 'loading';
       })
-      .addCase(createSampleAsync.fulfilled, (state, action) => {
-        state.createSample.status = 'succeeded';
-        state.createSample.id = action.payload;
-        // recount the total samples
-        state.totalSamples.total = state.totalSamples.total + 1;
+      .addCase(upsertSampleAsync.fulfilled, (state, action) => {
+        state.upsertSample.status = 'succeeded';
+        state.upsertSample.id = action.payload.id;
+        state.upsertSample.isCreate = action.payload.isCreate;
+        // increment total samples count only if it's a create operation
+        if (action.payload.isCreate) {
+          state.totalSamples.total = state.totalSamples.total + 1;
+        }
       })
-      .addCase(createSampleAsync.rejected, (state, action) => {
-        state.createSample.status = 'failed';
-        state.createSample.error = action.error.message;
-      })
-      // update sample
-      .addCase(updateSampleAsync.pending, (state) => {
-        state.updateSample.status = 'loading';
-      })
-      .addCase(updateSampleAsync.fulfilled, (state, action) => {
-        state.updateSample.status = 'succeeded';
-        state.updateSample.id = action.payload;
-      })
-      .addCase(updateSampleAsync.rejected, (state, action) => {
-        state.updateSample.status = 'failed';
-        state.updateSample.error = action.error.message;
+      .addCase(upsertSampleAsync.rejected, (state, action) => {
+        state.upsertSample.status = 'failed';
+        state.upsertSample.error = action.error.message;
       })
       ;
   }
 });
 
-export const { resetSearchState, resetDeleteState, resetUpdateState, resetCreateState, resetSampleDetailsState } = SearchSlice.actions;
+export const { resetSearchState, resetDeleteState, resetUpsertState, resetSampleDetailsState } = SearchSlice.actions;
+
+// Backward compatibility exports
+export const createSampleAsync = (payload: string) => upsertSampleAsync({ payload, isCreate: true });
+export const updateSampleAsync = (payload: string) => upsertSampleAsync({ payload, isCreate: false });
+export const resetCreateState = resetUpsertState;
+export const resetUpdateState = resetUpsertState;
+
 export default SearchSlice;

client-v2/src/store/slices/SearchState.ts

@@ -20,14 +20,10 @@ export default interface SearchState {
         error: string | undefined;
         sample: Sample | undefined;
     },
-    createSample: {
-        status: 'idle' | 'loading' | 'succeeded' | 'failed';
-        error: string | undefined;
-        id: number;
-    },
-    updateSample: {
+    upsertSample: {
         status: 'idle' | 'loading' | 'succeeded' | 'failed';
         error: string | undefined;
         id: number;
+        isCreate: boolean;
     }
 }

client-v2/src/store/slices/UserSlice.ts

@@ -3,13 +3,10 @@ import UserState from "./UserState";
 import sha256 from "crypto-js/sha256";
 import { HttpClient } from "../../utils/httpClient";
 import { User } from "../../types/User";
-import { stat } from "fs";
-import { isDataView } from "util/types";
 
 // retrieve the current user and verify if it is authenticated
 export const getUserAsync = createAsyncThunk<User>('user/getUserAsync', async () => {
     const response = await HttpClient.get(`/.auth/me`, {
-      withCredentials: false,
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',

client-v2/src/utils/httpClient.ts

@@ -103,13 +103,6 @@ export class HttpClient {
   }
 }
 
-function getDataAPIUrl() {
-  if (import.meta.env.VITE_API_URL) {
-    return import.meta.env.VITE_API_URL;
-  }
-  return './api/';
-}
-
 // Export the retry function for custom use cases
-export { getDataAPIUrl, withRetry, DEFAULT_RETRY_CONFIG };
+export { withRetry, DEFAULT_RETRY_CONFIG };
 export type { RetryConfig };