Added settings redux state with editing profile state

.vscode/settings.json

@@ -2,7 +2,8 @@
     "git.ignoreLimitWarning": true,
     "liveServer.settings.port": 5501,
     "cSpell.words": [
-        "preload"
+        "preload",
+        "uuidv"
     ],
     "typescript.tsdk": "node_modules/typescript/lib"
 }

src/app/Components/Selectors/index.ts

@@ -1,10 +1,8 @@
 import AccountSelector from "./AccountSelector";
 import AllCurrencySelector from "./AllCurrencySelector";
-import CurrencySelector from "./CurrencySelector";
 
 export {
     AccountSelector,
-    AllCurrencySelector,
-    CurrencySelector
+    AllCurrencySelector
 }
 

src/app/Features/Profiles/Components/ProfileNameEditor.tsx

@@ -1,25 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { TextField } from '@mui/material';
+import { useAppSelector, useAppDispatch } from '@/app/redux/hooks';
+import { configPaths } from "@/app/redux/globalFunctions";
+import { updateEditProfileByPath } from "@/app/Pages/Settings/Redux/settingsSlice";
 
-import type {defaultTempProfile} from '@/app/Pages/Settings/Settings'
-
-const ProfileNameEditor = ({tempProfile, updateTempProfile}: {tempProfile: typeof defaultTempProfile, updateTempProfile: CallableFunction}) => {
-
-
+const ProfileNameEditor = () => {
+    const { name } = useAppSelector(state => state.settings.editingProfile);
+    const dispatch = useAppDispatch()
     const handleChange = (e: any) => {
-        updateTempProfile((prevState: typeof defaultTempProfile) => {
-            let newState = { ...prevState }
-            newState.name = e.target.value
-            return newState
-        })
+        dispatch(updateEditProfileByPath({ data: e.target.value, path: configPaths.name }))
     }
 
     return (
         <TextField
             id="ProfileName"
             label="Profile Name"
             name="ProfileName"
-            value={tempProfile.name}
+            value={name}
             onChange={handleChange}
             className="settings-left"
             style={{

src/app/Pages/Settings/Components/ApiSettings.tsx

@@ -1,38 +1,38 @@
-import React, { useEffect, useState } from 'react';
-
-import { updateReservedFundsArray, updateNestedCurrentProfile } from '@/app/redux/configActions';
+import React from 'react';
+import { useAppSelector, useAppDispatch } from '@/app/redux/hooks';
+import { updateReservedFundsArray } from '@/app/redux/configActions';
+import { configPaths } from "@/app/redux/globalFunctions";
+import { updateEditProfileByPath } from "@/app/Pages/Settings/Redux/settingsSlice";
 
 import { TextField, Button, InputLabel, FormControl, MenuItem, Select } from '@mui/material';
 
-import { Type_ReservedFunds } from '@/types/config'
-import type {defaultTempProfile} from '@/app/Pages/Settings/Settings'
+import { Type_ReservedFunds } from '@/types/config';
 
-const ApiSettings = ({tempProfile, updateTempProfile}: {tempProfile: typeof defaultTempProfile, updateTempProfile: CallableFunction}) => {
+const validKeys = ["key", 'secret', 'mode'];
 
+const ApiSettings = () => {
+
+    const editingProfile = useAppSelector(state => state.settings.editingProfile);
+    const threeC = editingProfile.apis.threeC
+    const dispatch = useAppDispatch();
 
-    const handleChange = (e: any) => {
-        const validKeys = ["key", 'secret', 'mode']
 
+    const handleChange = (e: any) => {
         if (!e.target.name || !validKeys.includes(e.target.name)) {
             console.debug('Failed to change API setting due to invalid config path.')
             console.debug(e)
             return
         }
-        updateTempProfile((prevState: typeof defaultTempProfile) => {
-            let newState = { ...prevState }
 
-            //@ts-ignore
-            newState[e.target.name as keyof typeof prevState] = e.target.value
-            return newState
-        })
+        const updateData = {...threeC}
+
+        //@ts-ignore
+        updateData[e.target.name] = e.target.value
+        dispatch(updateEditProfileByPath({ data: updateData, path: configPaths.apis.threeC.main}))
     }
 
     const handleUpdatingReservedFunds = (reservedFunds: Type_ReservedFunds[]) => {
-        updateTempProfile((prevState: typeof defaultTempProfile) => {
-            let newState = { ...prevState }
-            newState.reservedFunds = reservedFunds
-            return newState
-        })
+        dispatch(updateEditProfileByPath({ data: reservedFunds, path: configPaths.statSettings.reservedFunds}));
     }
 
 
@@ -45,7 +45,7 @@ const ApiSettings = ({tempProfile, updateTempProfile}: {tempProfile: typeof defa
                     id="key"
                     label="Key"
                     name="key"
-                    value={tempProfile.key}
+                    value={threeC.key}
                     onChange={handleChange}
                     className="settings-left"
                     style={{
@@ -57,7 +57,7 @@ const ApiSettings = ({tempProfile, updateTempProfile}: {tempProfile: typeof defa
                     id="secret"
                     label="Secret"
                     name="secret"
-                    value={tempProfile.secret}
+                    value={threeC.secret}
                     onChange={handleChange}
                     type="password"
                     style={{
@@ -75,7 +75,7 @@ const ApiSettings = ({tempProfile, updateTempProfile}: {tempProfile: typeof defa
                         id="mode"
                         name="mode"
                         label="Mode"
-                        value={tempProfile.mode}
+                        value={threeC.mode}
                         onChange={handleChange}
                         style={{
                             marginRight: '15px'
@@ -92,12 +92,11 @@ const ApiSettings = ({tempProfile, updateTempProfile}: {tempProfile: typeof defa
                 disableElevation
                 onClick={
                     async () => {
-                        // @ts-ignore
-                        let key = tempProfile.key
-                        let secret = tempProfile.secret
-                        let mode = tempProfile.mode
+                        let key = threeC.key
+                        let secret = threeC.secret
+                        let mode = threeC.mode
                         try {
-                            const reservedFunds = await updateReservedFundsArray(key, secret, mode, tempProfile.reservedFunds)
+                            const reservedFunds = await updateReservedFundsArray(key, secret, mode, editingProfile.statSettings.reservedFunds)
                             handleUpdatingReservedFunds(reservedFunds ?? [])
                         } catch (error) {
                             alert('there was an error testing the API keys. Check the console for more information.')

src/app/Components/Selectors/CurrencySelector.tsx → src/app/Pages/Settings/Components/CurrencySelector.tsx

@@ -1,16 +1,13 @@
 import React, { useState, useEffect } from 'react';
+import { formatCurrency, supportedCurrencies } from '@/utils/granularity';
 
-import { formatCurrency, supportedCurrencies } from '@/utils/granularity'
-
-import {
-    FormControl,
-    InputLabel,
-    MenuItem,
-    Select,
-    ListItemText,
-    Checkbox,
-    Input,
-    ListSubheader
+import { useAppSelector, useAppDispatch } from '@/app/redux/hooks';
+import { configPaths } from "@/app/redux/globalFunctions";
+import { updateEditProfileByPath } from "@/app/Pages/Settings/Redux/settingsSlice";
+
+import { 
+    FormControl, InputLabel, MenuItem, Select,
+    ListItemText, Checkbox, ListSubheader
 } from '@mui/material';
 
 const returnCurrencyMenuItems = (currencyArray: typeof supportedCurrencies) => {
@@ -33,17 +30,11 @@ const returnCurrencyMenuItems = (currencyArray: typeof supportedCurrencies) => {
 
 }
 
-import type { defaultTempProfile } from '@/app/Pages/Settings/Settings'
-
-const CurrencySelector = ({ tempProfile, updateTempProfile }: { tempProfile: typeof defaultTempProfile, updateTempProfile: CallableFunction }) => {
-
-
-    const updateTempCurrency = (newCurrency: any[]) => {
-        updateTempProfile((prevState: typeof defaultTempProfile) => {
-            let newState = { ...prevState }
-            newState.defaultCurrency = newCurrency
-            return newState
-        })
+const CurrencySelector = () => {
+    const defaultCurrency = useAppSelector(state => state.settings.editingProfile.general.defaultCurrency);
+    const dispatch = useAppDispatch()
+    const handleChange = (data: any) => {
+        dispatch(updateEditProfileByPath({ data, path: configPaths.general.defaultCurrency }))
     }
 
     const { usd, crypto } = returnCurrencyMenuItems(supportedCurrencies)
@@ -58,16 +49,16 @@ const CurrencySelector = ({ tempProfile, updateTempProfile }: { tempProfile: typ
         if (isUSD) {
             const isAllUsd = e.target.value.every((v: string) => usdNames.includes(v));
             if (!isAllUsd) {
-                updateTempCurrency([])
+                handleChange([])
                 return alert('Warning. You cannot mix currencies that are not USD based.')
             }
-            updateTempCurrency([...e.target.value])
+            handleChange([...e.target.value])
             return
         }
 
         // selecting only the last value so there are not multiple crypto currencies selected at a time.
         const selected = (e.target.value.length > 1) ? [e.target.value.pop()] : [...e.target.value];
-        updateTempCurrency(selected)
+        handleChange(selected)
     }
 
     const [open, setOpen] = useState(false);
@@ -83,9 +74,9 @@ const CurrencySelector = ({ tempProfile, updateTempProfile }: { tempProfile: typ
                 id="currency"
                 name="currency"
                 label="Stat / Metric Currency"
-                value={tempProfile.defaultCurrency}
+                value={defaultCurrency}
                 onChange={onChange}
-                renderValue={() => (tempProfile.defaultCurrency.length > 0) ? tempProfile.defaultCurrency.join(', ') : ""}
+                renderValue={() => (defaultCurrency.length > 0) ? defaultCurrency.join(', ') : ""}
                 style={{
                     marginRight: '15px',
                     width: '100%'
@@ -100,7 +91,9 @@ const CurrencySelector = ({ tempProfile, updateTempProfile }: { tempProfile: typ
                 {usd.map(c => {
                     return (
                         <MenuItem value={c.value} key={c.value}>
-                            <Checkbox checked={tempProfile.defaultCurrency.indexOf(c.value as keyof typeof supportedCurrencies) > - 1} />
+
+                            {/* @ts-ignore */}
+                            <Checkbox checked={defaultCurrency.indexOf(c.value) > - 1} />
                             <ListItemText primary={c.value + ` (${c.name})`} />
                         </MenuItem>
                     )

src/app/Pages/Settings/Components/Index.tsx

@@ -1,9 +1,8 @@
 import ApiSettings from "./ApiSettings";
-import CurrencySelector from "@/app/Components/Selectors/CurrencySelector";
 import ReservedBankroll from "./ReservedBankroll";
 import SaveDeleteButtons from "./SaveDeleteButtons";
 import StartDatePicker from "./StartDatePicker";
-
+import CurrencySelector from "./CurrencySelector";
 
 export {
     ApiSettings,

src/app/Pages/Settings/Components/ReservedBankroll.tsx

@@ -3,26 +3,29 @@ import { Switch } from '@mui/material';
 
 import { CustomTable, Settings_EditableCell } from '@/app/Components/DataTable/Index';
 const EditableCell = Settings_EditableCell;
-import { Type_ReservedFunds } from '@/types/config';
+// import { Type_ReservedFunds } from '@/types/config';
+import { useAppSelector, useAppDispatch } from '@/app/redux/hooks';
+import { configPaths } from "@/app/redux/globalFunctions";
+import { updateEditProfileByPath } from "@/app/Pages/Settings/Redux/settingsSlice";
 
 
+// import type { defaultTempProfile } from '@/app/Pages/Settings/Settings'
+const ReservedBankroll = () => {
 
-import type { defaultTempProfile } from '@/app/Pages/Settings/Settings'
-const ReservedBankroll = ({ tempProfile, updateTempProfile }: { tempProfile: typeof defaultTempProfile, updateTempProfile: CallableFunction }) => {
+  const reservedFunds = useAppSelector(state => state.settings.editingProfile.statSettings.reservedFunds);
+  const dispatch = useAppDispatch()
+  const handleChange = (data: any) => {
+    dispatch(updateEditProfileByPath({ data, path: configPaths.statSettings.reservedFunds }))
+  }
 
-  const [reservedFunds, updateReservedFunds] = useState<Type_ReservedFunds[]>(() => tempProfile.reservedFunds)
+  const [localReservedFunds, updateLocalReservedFunds ] = useState(() => reservedFunds)
 
   useEffect(() => {
-    if(tempProfile.reservedFunds != reservedFunds) updateReservedFunds(tempProfile.reservedFunds)
-  }, [tempProfile.reservedFunds])
+    handleChange(localReservedFunds);
+  }, [localReservedFunds]);
 
   useEffect(() => {
-    updateTempProfile((prevState: typeof defaultTempProfile) => {
-      let newState = { ...prevState }
-      newState.reservedFunds = reservedFunds
-      return newState
-    })
-
+    updateLocalReservedFunds(reservedFunds);
   }, [reservedFunds])
 
 
@@ -55,31 +58,24 @@ const ReservedBankroll = ({ tempProfile, updateTempProfile }: { tempProfile: typ
 
 
   const handleOnOff = (e: any) => {
-
-    updateReservedFunds(prevState => (
-      prevState.map(row => {
-        let newRow = { ...row }
-        if (e.target.name == newRow.id) {
-          newRow.is_enabled = !newRow.is_enabled
-        }
-        return newRow
-      })
-    ))
+    updateLocalReservedFunds( prevState => prevState.map(row => {
+      let newRow = { ...row }
+      if (e.target.name == newRow.id) newRow.is_enabled = !newRow.is_enabled
+      return newRow
+    })
+    );
   }
 
   const handleEditCellChangeCommitted = (id: number, column: string, value: string) => {
-
-    updateReservedFunds(prevState => (
-      prevState.map(row => {
-        const newRow = { ...row }
-        if (id == newRow.id) {
-          //@ts-ignore
-          newRow[column] = value
-
-        }
-        return newRow
-      })
-    ))
+    updateLocalReservedFunds( prevState => prevState.map(row => {
+      const newRow = { ...row }
+      if (id == newRow.id) {
+        //@ts-ignore
+        newRow[column] = value
+      }
+      return newRow
+    })
+    )
   }
 
   return (