From af3b8ab3deb0440deac7369b5149471e7fee1326 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Mon, 7 Oct 2024 19:23:15 +0200
Subject: [PATCH] Memoize Settings

---
 frontend/src/components/ContentView.js   |  2 --
 frontend/src/components/FileTree.js      | 26 ++++++++------------
 frontend/src/contexts/SettingsContext.js | 30 +++++++++++++++++-------
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/ContentView.js b/frontend/src/components/ContentView.js
index c0eb55d..833c74b 100644
--- a/frontend/src/components/ContentView.js
+++ b/frontend/src/components/ContentView.js
@@ -44,8 +44,6 @@ const ContentView = ({
     );
   }
 
-  console.log('ContentView content', content);
-
   return activeTab === 'source' ? (
     <Editor
       content={content}
diff --git a/frontend/src/components/FileTree.js b/frontend/src/components/FileTree.js
index 5f15573..682da34 100644
--- a/frontend/src/components/FileTree.js
+++ b/frontend/src/components/FileTree.js
@@ -1,33 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Tree } from '@geist-ui/core';
 import { File, Folder, Image } from '@geist-ui/icons';
 import { isImageFile } from '../utils/fileHelpers';
 
-const FileTree = ({ files, selectedFile, handleFileSelect }) => {
+const FileTree = ({ files, handleFileSelect }) => {
   if (files.length === 0) {
     return <div>No files to display</div>;
   }
 
-  const renderLabel = (node) => {
-    const path = node.extra;
-    return (
-      <span style={{ color: path === selectedFile ? '#0070f3' : 'inherit' }}>
-        {node.name}
-      </span>
-    );
-  };
-
-  const renderIcon = ({ type, name }) => {
-    if (type === 'directory') return <Folder />;
-    return isImageFile(name) ? <Image /> : <File />;
-  };
+  const renderIcon = useMemo(
+    () =>
+      ({ type, name }) => {
+        if (type === 'directory') return <Folder />;
+        return isImageFile(name) ? <Image /> : <File />;
+      },
+    []
+  );
 
   return (
     <Tree
       value={files}
       onClick={(filePath) => handleFileSelect(filePath)}
       renderIcon={renderIcon}
-      renderLabel={renderLabel}
     />
   );
 };
diff --git a/frontend/src/contexts/SettingsContext.js b/frontend/src/contexts/SettingsContext.js
index 255c755..3267649 100644
--- a/frontend/src/contexts/SettingsContext.js
+++ b/frontend/src/contexts/SettingsContext.js
@@ -1,12 +1,16 @@
-import React, { createContext, useState, useContext, useEffect } from 'react';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
 import { fetchUserSettings, saveUserSettings } from '../services/api';
 import { DEFAULT_SETTINGS } from '../utils/constants';
 
 const SettingsContext = createContext();
 
-export const useSettings = () => {
-  return useContext(SettingsContext);
-};
+export const useSettings = () => useContext(SettingsContext);
 
 export const SettingsProvider = ({ children }) => {
   const [settings, setSettings] = useState(DEFAULT_SETTINGS);
@@ -15,7 +19,7 @@ export const SettingsProvider = ({ children }) => {
   useEffect(() => {
     const loadSettings = async () => {
       try {
-        const userSettings = await fetchUserSettings(1); // Assuming user ID 1 for now
+        const userSettings = await fetchUserSettings(1);
         setSettings(userSettings.settings);
       } catch (error) {
         console.error('Failed to load user settings:', error);
@@ -30,7 +34,7 @@ export const SettingsProvider = ({ children }) => {
   const updateSettings = async (newSettings) => {
     try {
       await saveUserSettings({
-        userId: 1, // Assuming user ID 1 for now
+        userId: 1,
         settings: newSettings,
       });
       setSettings(newSettings);
@@ -47,10 +51,18 @@ export const SettingsProvider = ({ children }) => {
     }));
   };
 
+  const contextValue = useMemo(
+    () => ({
+      settings,
+      updateSettings,
+      updateTheme,
+      loading,
+    }),
+    [settings, loading]
+  );
+
   return (
-    <SettingsContext.Provider
-      value={{ settings, updateSettings, updateTheme, loading }}
-    >
+    <SettingsContext.Provider value={contextValue}>
       {children}
     </SettingsContext.Provider>
   );