FE Settings integration

frontend/src/components/Settings.js

@@ -1,13 +1,30 @@
 import React, { useState } from 'react';
 import { Modal, Text, Toggle, Tooltip, Spacer, useTheme } from '@geist-ui/core';
+import { saveUserSettings } from '../services/api';
 
-const Settings = ({ visible, onClose, currentTheme, onThemeChange, onSettingsChange }) => {
+const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
   const theme = useTheme();
   const [autoSave, setAutoSave] = useState(false);
+  const userId = 1;
 
-  const handleSubmit = () => {
-    onSettingsChange({ fontSize, autoSave });
-    onClose();
+  const handleSubmit = async () => {
+    try {
+      await saveUserSettings({
+        userId: userId,
+        settings: {
+          theme: currentTheme,
+          autoSave: autoSave
+        }
+      });
+      onClose();
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      // You might want to show an error message to the user here
+    }
+  };
+
+  const handleThemeChange = () => {
+    onThemeChange();
   };
 
   const disabledMessage = "This feature is not yet implemented";
@@ -22,7 +39,7 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange, onSettingsCha
             <Text>Dark Mode</Text>
             <Toggle 
               checked={currentTheme === 'dark'}
-              onChange={() => onThemeChange()}
+              onChange={handleThemeChange}
             />
           </div>
         </div>