FE Settings integration

backend/internal/models/settings.go

@@ -13,7 +13,7 @@ type UserSettings struct {
 
 type Settings struct {
 	UserID   int          `json:"userId" validate:"required,min=1"`
-	Settings UserSettings `json:"settings" validate:"required,dive"`
+	Settings UserSettings `json:"settings" validate:"required"`
 }
 
 var validate = validator.New()

frontend/src/App.js

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { GeistProvider, CssBaseline, Page } from '@geist-ui/core';
 import Header from './components/Header';
 import MainContent from './components/MainContent';
 import useFileManagement from './hooks/useFileManagement';
+import { fetchUserSettings } from './services/api';
 import './App.scss';
 
 function App() {
   const [themeType, setThemeType] = useState('light');
+  const [userId, setUserId] = useState(1);
   const {
     content,
     files,
@@ -19,6 +21,19 @@ function App() {
     handleSave,
   } = useFileManagement();
 
+  useEffect(() => {
+    const loadUserSettings = async () => {
+      try {
+        const settings = await fetchUserSettings(userId);
+        setThemeType(settings.settings.theme);
+      } catch (error) {
+        console.error('Failed to load user settings:', error);
+      }
+    };
+
+    loadUserSettings();
+  }, [userId]);
+
   const toggleTheme = () => {
     setThemeType(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
   };

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 = () => {
+  const handleSubmit = async () => {
-    onSettingsChange({ fontSize, autoSave });
+    try {
-    onClose();
+      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>

frontend/src/services/api.js

@@ -41,3 +41,35 @@ export const saveFileContent = async (filePath, content) => {
   
     return await response.text();
   };
+
+  export const fetchUserSettings = async (userId) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/settings?userId=${userId}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch user settings');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Error fetching user settings:', error);
+        throw error;
+    }
+};
+
+export const saveUserSettings = async (settings) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/settings`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(settings),
+        });
+        if (!response.ok) {
+            throw new Error('Failed to save user settings');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Error saving user settings:', error);
+        throw error;
+    }
+};