initial config redux state implemented

This works to properly save, fetch, and update the config from the file. All settings modules properly save and update.

nodemon.json

@@ -2,7 +2,7 @@
     "watch": [ 
       "src/main.ts", 
       "src/preload.ts", 
-      "src/app/*"
+      "src/electron/*"
     ],
     "exec": "webpack --config ./webpack.electron.js && electron .",
     "ext": "ts"

src/app/Context/Config.tsx

@@ -235,13 +235,4 @@ const useGlobalState = () => {
 };
 
 
-// const useGlobalDispatch = () => {
-//     const context = React.useContext(GlobalDispatchContext);
-//     if (context === undefined) {
-//         throw new Error(
-//             "useGlobalDispatch must be used within a GlobalContextProvider"
-//         );
-//     }
-//     return context;
-// };
 export { ConfigContext, ConfigProvider, useGlobalState }

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

@@ -1,32 +1,30 @@
 import React, { useEffect, useState } from "react";
 import { TextField } from '@material-ui/core';
-import { useAppDispatch, useAppSelector } from '@/app/redux/hooks';
-import { storeEditingProfileData, setEditingProfile } from "@/app/redux/configSlice";
+import { useAppSelector } from '@/app/redux/hooks';
+import {configPaths } from "@/app/redux/configSlice";
+
+import { updateNestedEditingProfile } from "@/app/redux/configActions";
 
 
 const ProfileNameEditor = () => {
     const profile = useAppSelector(state => state.config.editingProfile)
-    const dispatch = useAppDispatch();
-    const [editingProfile, updateEditingProfile] = useState(profile)
+    const [name, updateName] = useState('')
 
     const handleChange = (e: any) => {
-
-        const tempProfile = {...profile, name: e.target.value}
-        updateEditingProfile(tempProfile)
-        dispatch(setEditingProfile(tempProfile))
-        dispatch(storeEditingProfileData())
+        updateName(e.target.value)
+        updateNestedEditingProfile(e.target.value, configPaths.name)
     }
 
     useEffect(() => {
-        updateEditingProfile(profile)
+        updateName(profile.name)
     }, [profile])
 
     return (
         <TextField
             id="ProfileName"
             label="Profile Name"
             name="ProfileName"
-            value={editingProfile.name}
+            value={name}
             onChange={handleChange}
             className="settings-left"
             style={{

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

@@ -41,6 +41,7 @@ const ProfileSwitcher = () => {
             const styles = (p === currentProfileId) ? { backgroundColor: 'lightBlue' } : {};
             return (
                 <MenuItem 
+                    key={p}
                     onClick={() => { 
                         updateCurrentProfileId(p);
                         dispatch(setConfig({...config, current: p}))

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

@@ -1,53 +1,51 @@
-import React, { useEffect } from 'react';
-import dotProp from 'dot-prop';
+import React, { useEffect, useState } from 'react';
 
-import {TextField, Button, InputLabel, FormControl, MenuItem, Select} from '@material-ui/core';
+import {  useAppSelector } from '@/app/redux/hooks';
+import {  configPaths } from '@/app/redux/configSlice'
+import { updateReservedFundsArray, updateNestedEditingProfile } from '@/app/redux/configActions';
 
-import { useGlobalState } from '@/app/Context/Config';
-import {Type_ApiKeys, Type_Profile} from '@/types/config'
+import { TextField, Button, InputLabel, FormControl, MenuItem, Select } from '@material-ui/core';
 
-
-const ApiSettings = () => {
-    const { state: { updateApiData, apiData }, currentProfile, actions: { fetchAccountsForRequiredFunds } } = useGlobalState();
-
-
-    const updateKeys = (profile: Type_Profile) => {
-        if (dotProp.has(profile, 'apis.threeC'))
-            return profile.apis.threeC
-        return { key: '', secret: '', mode: 'real' }
-    }
+import { Type_ApiKeys, Type_Profile, Type_ReservedFunds } from '@/types/config'
 
 
+const ApiSettings = () => {
+    const profile = useAppSelector(state => state.config.editingProfile);
+    const reservedFunds = useAppSelector(state => state.config.reservedFunds);
+    const [apiData, updateApiData] = useState(() => ({ key: "", mode: "", secret: "" }))
 
     useEffect(() => {
-        updateApiData(updateKeys(currentProfile));
-    }, [currentProfile]);
+        updateApiData(profile.apis.threeC)
+    }, [profile])
 
     const handleChange = (e: any) => {
-        if(!e.target.name) {
-            console.debug('Failed to change API setting due to blank name')
+        const validKeys = ["key", 'secret', 'mode']
+
+        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
         }
+        updateApiData((prevState) => {
+            let newState = { ...prevState }
+            //@ts-ignore
+            newState[e.target.name as keyof Type_Profile] = e.target.value
 
-        const validKeys = ['key', 'secret', 'mode']
-        updateApiData((prevState: Type_ApiKeys) => {
-            let newState = {...prevState}
-
-            if(!validKeys.includes(e.target.name)) return prevState
-
-            newState[e.target.name as keyof Type_ApiKeys] = e.target.value
+            updateNestedEditingProfile(newState, configPaths.apis.threeC.main)
             return newState
         })
+    }
 
+    const handleUpdatingReservedFunds = (reservedFunds: Type_ReservedFunds[]) => {
+        updateNestedEditingProfile(reservedFunds, configPaths.statSettings.reservedFunds)
     }
 
 
     return (
         <div className=" flex-column settings-child">
             <h2 className="text-center ">API Settings</h2>
             <p className="subText">This app requires "Bots read", "Smart trades read", and "Accounts read" within 3commas.</p>
-            <div className=" flex-row" style={{paddingBottom: "25px"}} >
+            <div className=" flex-row" style={{ paddingBottom: "25px" }} >
                 <TextField
                     id="key"
                     label="Key"
@@ -74,8 +72,8 @@ const ApiSettings = () => {
                 />
             </div>
 
-            <div className=" flex-row" style={{paddingBottom: "25px"}} >
-                <FormControl   style={{marginRight: "15px",flexBasis: "50%"}}>
+            <div className=" flex-row" style={{ paddingBottom: "25px" }} >
+                <FormControl style={{ marginRight: "15px", flexBasis: "50%" }}>
                     <InputLabel id="mode-label">Mode</InputLabel>
                     <Select
                         labelId="mode-label"
@@ -101,7 +99,7 @@ const ApiSettings = () => {
                         let secret = apiData.secret
                         let mode = apiData.mode
                         try {
-                            await fetchAccountsForRequiredFunds(key, secret, mode)
+                            await updateReservedFundsArray(key, secret, mode, handleUpdatingReservedFunds, reservedFunds)
                         } catch (error) {
                             alert('there was an error testing the API keys. Check the console for more information.')
                         }
@@ -115,8 +113,8 @@ const ApiSettings = () => {
                     margin: "auto",
                     borderRight: 'none',
                     width: '150px'
-                    }}
-                >
+                }}
+            >
                 Test API Keys
             </Button>
 

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

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 
-import { useGlobalState } from '@/app/Context/Config';
+import { useAppSelector } from '@/app/redux/hooks';
+import { configPaths } from '@/app/redux/configSlice'
+import { updateNestedEditingProfile } from '@/app/redux/configActions';
 
 import {
     FormControl,
@@ -66,20 +68,20 @@ const currencyArray: Type_currency[] = [
 
 const CurrencySelector = () => {
 
-    const state = useGlobalState()
+    const profile = useAppSelector(state => state.config.editingProfile);
+    const [currency, updateCurrency] = useState(() => [''])
+
+    useEffect(() => {
+        if(profile.general.defaultCurrency) updateCurrency(profile.general.defaultCurrency)
+
+    }, [profile])
 
-    const { state: { currency, updateCurrency } } = state
 
     const onChange = (e: any) => {
         updateCurrency([...e.target.value])
-        // console.log(`Changing the default currency from ${config.general.defaultCurrency} to ${e.target.value}`)
-    }
-
-    const returnCurrencyValues = (currencyData: Type_currency[], currencyArray: string[]) => {
-        return currencyData.filter(e => currencyArray.includes(e.value)).map(e => e.name).join(', ')
+        updateNestedEditingProfile([...e.target.value], configPaths.general.defaultCurrency)
     }
 
-
     return (
 
         <FormControl style={{width: "100%"}}>
@@ -91,14 +93,10 @@ const CurrencySelector = () => {
                 value={currency}
                 onChange={onChange}
                 input={<Input />}
-                // style={{width: "100%"}}
-                // @ts-ignore
-                renderValue={() => (currency.length > 0) ? returnCurrencyValues(currencyArray, currency) : ""}
+                renderValue={() => (currency.length > 0) ? currency.join(', ') : ""}
                 MenuProps={MenuProps}
                 style={{padding: "10px 0 10px 0", marginLeft: "10px"}}
             >
-                {/* Need to think through All because it's now a selector. */}
-                {/* <MenuItem value=""></MenuItem> */}
 
                 {currencyArray.map((c) => (
                     <MenuItem value={c.value} key={c.value}>