From 5e8cec389d12211e1477b83496e8cc2c77b0dbd0 Mon Sep 17 00:00:00 2001 From: Ricardo Costa Date: Sun, 12 May 2024 15:29:26 +0100 Subject: [PATCH] Implemented Saving Sidebar State with LocalStorage --- code/client/src/App.tsx | 2 +- .../components/sidebar/hooks/useSidebarState.ts | 17 ++++++++++++++++- .../workspace/components/DocumentPreview.tsx | 2 +- code/client/src/utils/localStorage.ts | 17 +++++++++++++++++ code/server/jest.config.js | 4 +--- .../src/ts/databases/ProductionDatabases.ts | 4 ++-- code/server/src/ts/databases/TestDatabases.ts | 4 ++-- .../{resources => workspaces}/memory/Memory.ts | 0 .../memory/MemoryResourcesDB.ts | 2 +- .../memory/MemoryWorkspacesDB.ts | 2 +- .../postgres/PostgresResourcesDB.ts | 2 +- .../postgres/PostgresWorkspacesDB.ts | 2 +- .../postgres/config.ts | 0 code/server/test/testServer.ts | 4 ++-- 14 files changed, 46 insertions(+), 16 deletions(-) create mode 100644 code/client/src/utils/localStorage.ts rename code/server/src/ts/databases/{resources => workspaces}/memory/Memory.ts (100%) rename code/server/src/ts/databases/{resources => workspaces}/memory/MemoryResourcesDB.ts (91%) rename code/server/src/ts/databases/{resources => workspaces}/memory/MemoryWorkspacesDB.ts (93%) rename code/server/src/ts/databases/{resources => workspaces}/postgres/PostgresResourcesDB.ts (96%) rename code/server/src/ts/databases/{resources => workspaces}/postgres/PostgresWorkspacesDB.ts (96%) rename code/server/src/ts/databases/{resources => workspaces}/postgres/config.ts (100%) diff --git a/code/client/src/App.tsx b/code/client/src/App.tsx index ac05cf49..092765d9 100644 --- a/code/client/src/App.tsx +++ b/code/client/src/App.tsx @@ -35,7 +35,7 @@ function App() { } /> diff --git a/code/client/src/ui/components/sidebar/hooks/useSidebarState.ts b/code/client/src/ui/components/sidebar/hooks/useSidebarState.ts index c9137c1c..ea326e47 100644 --- a/code/client/src/ui/components/sidebar/hooks/useSidebarState.ts +++ b/code/client/src/ui/components/sidebar/hooks/useSidebarState.ts @@ -1,10 +1,24 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import localStorage from '@/utils/localStorage'; function useSidebarState() { const [isOpen, setIsOpen] = useState(false); const [isLocked, setIsLocked] = useState(false); const [justClosed, setJustClosed] = useState(false); + useEffect(() => { + const sidebarState = localStorage.getItem('sidebarState'); + if (sidebarState !== null) { + setIsOpen(sidebarState); + setIsLocked(sidebarState); + } + }, []); + + useEffect(() => { + if (isOpen !== isLocked) return; + localStorage.setItem('sidebarState', isOpen); + }, [isOpen, isLocked]); + const handleMouseEnter = () => { if (justClosed) return; setIsOpen(true); @@ -14,6 +28,7 @@ function useSidebarState() { setIsLocked(!isLocked && isOpen); setIsOpen(!isLocked && !isOpen); setJustClosed(isLocked); + localStorage.setItem('sidebarState', isOpen); }; const handleMouseLeave = () => { diff --git a/code/client/src/ui/pages/workspace/components/DocumentPreview.tsx b/code/client/src/ui/pages/workspace/components/DocumentPreview.tsx index 26af7142..fa47ecb8 100644 --- a/code/client/src/ui/pages/workspace/components/DocumentPreview.tsx +++ b/code/client/src/ui/pages/workspace/components/DocumentPreview.tsx @@ -24,7 +24,7 @@ function DocumentPreview({ document, onDelete, onRename, onDuplicate }: Document ); return ( {DocumentView}} + item={isEditing ? DocumentView : {DocumentView}} onRename={() => setIsEditing(true)} onDuplicate={onDuplicate} onDelete={onDelete} diff --git a/code/client/src/utils/localStorage.ts b/code/client/src/utils/localStorage.ts new file mode 100644 index 00000000..52e8c7f5 --- /dev/null +++ b/code/client/src/utils/localStorage.ts @@ -0,0 +1,17 @@ +function setItem(key: string, value: any) { + localStorage.setItem(key, JSON.stringify(value)); +} + +function getItem(key: string) { + const item = localStorage.getItem(key); + if (!item) { + return null; + } + return JSON.parse(item); +} + +function removeItem(key: string) { + localStorage.removeItem(key); +} + +export default { setItem, getItem, removeItem }; diff --git a/code/server/jest.config.js b/code/server/jest.config.js index bc68ffe1..d232ef4e 100644 --- a/code/server/jest.config.js +++ b/code/server/jest.config.js @@ -7,11 +7,9 @@ module.exports = { transform: {}, moduleNameMapper: pathsToModuleNameMapper( { - /*Controllers*/ + '@/*': ['./*'], '@controllers/*': ['./src/ts/controllers/*'], - /*Databases*/ '@databases/*': ['./src/ts/databases/*'], - /*Others*/ '@src/*': ['./src/ts/*'], '@domain/*': ['./src/ts/domain/*'], '@services/*': ['./src/ts/services/*'], diff --git a/code/server/src/ts/databases/ProductionDatabases.ts b/code/server/src/ts/databases/ProductionDatabases.ts index 967a3793..fdf933da 100644 --- a/code/server/src/ts/databases/ProductionDatabases.ts +++ b/code/server/src/ts/databases/ProductionDatabases.ts @@ -1,5 +1,5 @@ -import { PostgresResourcesDB } from '@databases/resources/postgres/PostgresResourcesDB'; -import { PostgresWorkspacesDB } from '@databases/resources/postgres/PostgresWorkspacesDB'; +import { PostgresResourcesDB } from '@databases/workspaces/postgres/PostgresResourcesDB'; +import { PostgresWorkspacesDB } from '@databases/workspaces/postgres/PostgresWorkspacesDB'; import { DocumentsRepository, Databases, ResourcesRepository, WorkspacesRepository } from '@databases/types'; import { FirestoreDocumentsDB } from '@databases/documents/firestore/FirestoreDocumentsDB'; diff --git a/code/server/src/ts/databases/TestDatabases.ts b/code/server/src/ts/databases/TestDatabases.ts index 496b33a5..df628c30 100644 --- a/code/server/src/ts/databases/TestDatabases.ts +++ b/code/server/src/ts/databases/TestDatabases.ts @@ -1,6 +1,6 @@ import { DocumentsRepository, Databases, ResourcesRepository, WorkspacesRepository } from '@databases/types'; -import { MemoryResourcesDB } from '@databases/resources/memory/MemoryResourcesDB'; -import { MemoryWorkspacesDB } from '@databases/resources/memory/MemoryWorkspacesDB'; +import { MemoryResourcesDB } from '@databases/workspaces/memory/MemoryResourcesDB'; +import { MemoryWorkspacesDB } from '@databases/workspaces/memory/MemoryWorkspacesDB'; import { MemoryDocumentsDB } from '@databases/documents/memory/MemoryDocumentsDB'; export class TestDatabases implements Databases { diff --git a/code/server/src/ts/databases/resources/memory/Memory.ts b/code/server/src/ts/databases/workspaces/memory/Memory.ts similarity index 100% rename from code/server/src/ts/databases/resources/memory/Memory.ts rename to code/server/src/ts/databases/workspaces/memory/Memory.ts diff --git a/code/server/src/ts/databases/resources/memory/MemoryResourcesDB.ts b/code/server/src/ts/databases/workspaces/memory/MemoryResourcesDB.ts similarity index 91% rename from code/server/src/ts/databases/resources/memory/MemoryResourcesDB.ts rename to code/server/src/ts/databases/workspaces/memory/MemoryResourcesDB.ts index 7c89210f..10a58aed 100644 --- a/code/server/src/ts/databases/resources/memory/MemoryResourcesDB.ts +++ b/code/server/src/ts/databases/workspaces/memory/MemoryResourcesDB.ts @@ -1,6 +1,6 @@ import { ResourcesRepository } from '@databases/types'; import { ResourceType, WorkspaceResource } from '@notespace/shared/src/workspace/types/resource'; -import { memoryDB } from '@databases/resources/memory/Memory'; +import { memoryDB } from '@databases/workspaces/memory/Memory'; export class MemoryResourcesDB implements ResourcesRepository { async createResource(wid: string, name: string, type: ResourceType, parent?: string): Promise { diff --git a/code/server/src/ts/databases/resources/memory/MemoryWorkspacesDB.ts b/code/server/src/ts/databases/workspaces/memory/MemoryWorkspacesDB.ts similarity index 93% rename from code/server/src/ts/databases/resources/memory/MemoryWorkspacesDB.ts rename to code/server/src/ts/databases/workspaces/memory/MemoryWorkspacesDB.ts index 519515e3..0a85c91e 100644 --- a/code/server/src/ts/databases/resources/memory/MemoryWorkspacesDB.ts +++ b/code/server/src/ts/databases/workspaces/memory/MemoryWorkspacesDB.ts @@ -1,6 +1,6 @@ import { WorkspacesRepository } from '@databases/types'; import { WorkspaceMetaData } from '@notespace/shared/src/workspace/types/workspace'; -import { memoryDB } from '@databases/resources/memory/Memory'; +import { memoryDB } from '@databases/workspaces/memory/Memory'; import { WorkspaceResource } from '@notespace/shared/src/workspace/types/resource'; export class MemoryWorkspacesDB implements WorkspacesRepository { diff --git a/code/server/src/ts/databases/resources/postgres/PostgresResourcesDB.ts b/code/server/src/ts/databases/workspaces/postgres/PostgresResourcesDB.ts similarity index 96% rename from code/server/src/ts/databases/resources/postgres/PostgresResourcesDB.ts rename to code/server/src/ts/databases/workspaces/postgres/PostgresResourcesDB.ts index 81cc736c..11468400 100644 --- a/code/server/src/ts/databases/resources/postgres/PostgresResourcesDB.ts +++ b/code/server/src/ts/databases/workspaces/postgres/PostgresResourcesDB.ts @@ -1,8 +1,8 @@ import { ResourceType, WorkspaceResource } from '@notespace/shared/src/workspace/types/resource'; import { ResourcesRepository } from '@databases/types'; import { InvalidParameterError, NotFoundError } from '@domain/errors/errors'; -import sql from '@databases/resources/postgres/config'; import { isEmpty } from 'lodash'; +import sql from '@databases/workspaces/postgres/config'; export class PostgresResourcesDB implements ResourcesRepository { async createResource(wid: string, name: string, type: ResourceType, parent?: string): Promise { diff --git a/code/server/src/ts/databases/resources/postgres/PostgresWorkspacesDB.ts b/code/server/src/ts/databases/workspaces/postgres/PostgresWorkspacesDB.ts similarity index 96% rename from code/server/src/ts/databases/resources/postgres/PostgresWorkspacesDB.ts rename to code/server/src/ts/databases/workspaces/postgres/PostgresWorkspacesDB.ts index ee2c2557..7d249508 100644 --- a/code/server/src/ts/databases/resources/postgres/PostgresWorkspacesDB.ts +++ b/code/server/src/ts/databases/workspaces/postgres/PostgresWorkspacesDB.ts @@ -1,9 +1,9 @@ import { WorkspaceResource } from '@notespace/shared/src/workspace/types/resource'; import { WorkspaceMetaData } from '@notespace/shared/src/workspace/types/workspace'; import { NotFoundError } from '@domain/errors/errors'; -import sql from '@databases/resources/postgres/config'; import { WorkspacesRepository } from '@databases/types'; import { isEmpty } from 'lodash'; +import sql from '@databases/workspaces/postgres/config'; export class PostgresWorkspacesDB implements WorkspacesRepository { async createWorkspace(name: string): Promise { diff --git a/code/server/src/ts/databases/resources/postgres/config.ts b/code/server/src/ts/databases/workspaces/postgres/config.ts similarity index 100% rename from code/server/src/ts/databases/resources/postgres/config.ts rename to code/server/src/ts/databases/workspaces/postgres/config.ts diff --git a/code/server/test/testServer.ts b/code/server/test/testServer.ts index 59c75736..305b0908 100644 --- a/code/server/test/testServer.ts +++ b/code/server/test/testServer.ts @@ -3,11 +3,11 @@ import http = require('http'); import cors = require('cors'); import { Server } from 'socket.io'; import { DocumentsService } from '../src/ts/services/DocumentsService'; -import eventsInit from '../src/ts/controllers/ws/events'; -import router from '../src/ts/controllers/http/router'; import { Services } from '../src/ts/services/Services'; import { TestDatabases } from '../src/ts/databases/TestDatabases'; import config from '../src/ts/config'; +import eventsInit from '../src/ts/controllers/ws/events'; +import router from '../src/ts/controllers/http/router'; import initSocketEvents from '../src/ts/controllers/ws/initSocketEvents'; function setup() {