loading settings component

app/client/web/package.json

@@ -5,8 +5,6 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "jest",
-    "test:watch": "yarn test --watch",
     "lint": "eslint .",
     "format": "prettier --write src",
     "lint:fix": "yarn lint --fix",
@@ -18,10 +16,7 @@
     "@mantine/hooks": "^7.11.2",
     "@tabler/core": "^1.0.0-beta20",
     "@tabler/icons-react": "^3.12.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
     "@types/jest": "29.0.3",
-    "@types/react": "18.3.3",
     "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "4.3.1",
     "databag-client-sdk": "^0.0.21",
@@ -29,7 +24,6 @@
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.26.0",
-    "react-test-renderer": "18.2.0",
     "redaxios": "^0.5.1",
     "ts-jest": "29.0.2",
     "ts-node": "10.9.1",
@@ -41,6 +35,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
+    "@types/react": "^18.3.5",
     "eslint": "9.x",
     "eslint-plugin-react": "^7.35.0",
     "globals": "^15.9.0",

app/client/web/src/app.spec.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { App } from '@/App'
-import { render, screen } from '@testing-library/react'
-
-it('Test', () => {
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-
-  render(<App />)
-})

app/client/web/src/session/Session.module.css

@@ -3,6 +3,12 @@
   width: 100%;
   height: 100%;
 
+  .screen {
+    width: 100%;
+    height: calc(100% - 48px);
+    background-color: #444444;
+  } 
+
   .tabs {
     position: absolute;
     bottom: 0;

app/client/web/src/session/Session.tsx

@@ -5,44 +5,50 @@ import { DisplayContext } from '../context/DisplayContext';
 import { ContextType } from '../context/ContextType'
 import classes from './Session.module.css'
 import { IconAddressBook, IconMessages, IconSettings } from '@tabler/icons-react'
+import { Settings } from '../settings/Settings';
 
 export function Session() {
   const [ tab, setTab ] = useState('channels');
   const app = useContext(AppContext) as ContextType
   const display = useContext(DisplayContext) as ContextType
 
-console.log(tab);
-
   return (
     <div className={classes.session}>
       { display.state.layout === 'small' && (
-        <div className={classes.tabs}>
-          { tab === 'channels' && (
-            <div className={classes.activeTabItem}><IconMessages className={classes.tabIcon} /></div>
-          )}
-          { tab !== 'channels' && (
-            <div className={classes.idleTabItem} onClick={() => setTab('channels')}><IconMessages className={classes.tabIcon} /></div>
-          )}
-          <div className={classes.tabDivider} />
-          { tab === 'contacts' && (
-            <div className={classes.activeTabItem}><IconAddressBook className={classes.tabIcon} /></div>
-          )}
-          { tab !== 'contacts' && (
-            <div className={classes.idleTabItem} onClick={() => setTab('contacts')}><IconAddressBook className={classes.tabIcon} /></div>
-          )}
-          <div className={classes.tabDivider} />
-          { tab === 'settings' && (
-            <div className={classes.activeTabItem}><IconSettings className={classes.tabIcon} /></div>
-          )}
-          { tab !== 'settings' && (
-            <div className={classes.idleTabItem} onClick={() => setTab('settings')}><IconSettings className={classes.tabIcon} /></div>
-          )}
-        </div>
+        <>
+          <div className={classes.screen}>
+            <Button onClick={app.actions.accountLogout}>Session Logout</Button>
+            { tab === 'settings' && (
+              <Settings />
+            )}
+          </div>
+          <div className={classes.tabs}>
+            { tab === 'channels' && (
+              <div className={classes.activeTabItem}><IconMessages className={classes.tabIcon} /></div>
+            )}
+            { tab !== 'channels' && (
+              <div className={classes.idleTabItem} onClick={() => setTab('channels')}><IconMessages className={classes.tabIcon} /></div>
+            )}
+            <div className={classes.tabDivider} />
+            { tab === 'contacts' && (
+              <div className={classes.activeTabItem}><IconAddressBook className={classes.tabIcon} /></div>
+            )}
+            { tab !== 'contacts' && (
+              <div className={classes.idleTabItem} onClick={() => setTab('contacts')}><IconAddressBook className={classes.tabIcon} /></div>
+            )}
+            <div className={classes.tabDivider} />
+            { tab === 'settings' && (
+              <div className={classes.activeTabItem}><IconSettings className={classes.tabIcon} /></div>
+            )}
+            { tab !== 'settings' && (
+              <div className={classes.idleTabItem} onClick={() => setTab('settings')}><IconSettings className={classes.tabIcon} /></div>
+            )}
+          </div>
+        </>
       )}
       { display.state.layout === 'large' && (
         <div>LARGE DISPLAY</div>
       )}
-      <Button onClick={app.actions.accountLogout}>Session Logout</Button>
     </div>
   );
 }

app/client/web/src/settings/Settings.tsx

@@ -1,4 +1,10 @@
+import { useSettings } from './useSettings.hook';
+
 export function Settings() {
-  return <></>
+  const { state, actions } = useSettings();
+
+  console.log(state);
+  
+  return <div>SETTINGS!!!</div>
 }
 

app/client/web/src/settings/useSettings.hook.ts

@@ -29,9 +29,13 @@ export function useSettings() {
 
   useEffect(() => {
     const { settings, identity } = getSession()
-    const setConfig = (config: Config) => { updateState({ config }) }
+    const setConfig = (config: Config) => {
+      updateState({ config }) 
+    }
     settings.addConfigListener(setConfig);
-    const setProfile = (profile: Profile) => { updateState({ profile }) }
+    const setProfile = (profile: Profile) => { 
+      updateState({ profile }) 
+    }
     identity.addProfileListener(setProfile)
     return () => { 
       settings.removeConfigListener(setConfig);