Добавление настроек в localStorage

FRONT/DEV/src/components/settings/Settings.tsx

@@ -53,32 +53,45 @@ const CloseBtn = styled.span`
 `
 
 export const Settings = ({onClose}: Props) => {
-    const {settings, activeSection, setActiveSection, initializeSettings} = useSettingsStore();
+    const {
+        settingsConfig,
+        settingsValues,
+        activeSection,
+        setActiveSection,
+        initializeSettings,
+        updateSetting
+    } = useSettingsStore();
+
+    const settingsBySection = useMemo(() => {
+        return settingsConfig.reduce((acc, setting) => {
+            if (!acc[setting.sectionId]) {
+                acc[setting.sectionId] = [];
+            }
+            acc[setting.sectionId].push({
+                ...setting,
+                value: settingsValues[setting.id] ?? setting.defaultValue
+            });
+            return acc;
+        }, {} as Record<string, Setting[]>);
+    }, [settingsConfig, settingsValues]);
+
+    const sections = Object.keys(settingsBySection);
 
     useEffect(() => {
         initializeSettings();
     }, [initializeSettings]);
 
-    const settingsBySection = useMemo(() => {
-        return settings.reduce((acc, setting) => {
-            if (!acc[setting.sectionId]) {
-                acc[setting.sectionId] = [];
-            }
-            acc[setting.sectionId].push(setting);
-            return acc;
-        }, {} as Record<string, Setting[]>);
-    }, [settings]);
-
-
-    const sections = Object.keys(settingsBySection);
-
-
     useEffect(() => {
         if (sections.length > 0 && !activeSection) {
             setActiveSection(sections[0]);
         }
     }, [sections, activeSection, setActiveSection]);
 
+    const handleSave = () => {
+        onClose();
+    };
+
+
     return (
         <ModalContainer style={{ height: '60vh', width: '50vw'}}>
             <ModalTitle>
@@ -104,8 +117,13 @@ export const Settings = ({onClose}: Props) => {
                 <SectionActive>
                     {activeSection && settingsBySection[activeSection] && (
                         <>
-                            {settingsBySection[activeSection].map((setting)=>(
-                                <SettingItem setting={setting} key={setting.id}/>
+                            {settingsBySection[activeSection].map((setting) => (
+                                <SettingItem
+                                    key={setting.id}
+                                    setting={setting}
+                                    value={settingsValues[setting.id] ?? setting.defaultValue}
+                                    onChange={(value) => updateSetting(setting.id, value)}
+                                />
                             ))}
                         </>
                     )}
@@ -117,7 +135,7 @@ export const Settings = ({onClose}: Props) => {
                     type="button"
                     size="small"
                     title='Сохранить'
-                    onClick={onClose}
+                    onClick={handleSave}
                 />
             </ButtonContainer>
         </ModalContainer>