From 5f8835ecbae7e2783e575d1682becb65e0c983c7 Mon Sep 17 00:00:00 2001
From: j4k0xb <55899582+j4k0xb@users.noreply.github.com>
Date: Mon, 20 May 2024 03:05:48 +0200
Subject: [PATCH] fix: sync sessions state

---
 apps/playground/src/App.tsx             |  3 ++-
 apps/playground/src/components/Menu.tsx |  6 +++---
 apps/playground/src/indexeddb.ts        | 19 +++++++++++--------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx
index c80c285f..949ad038 100644
--- a/apps/playground/src/App.tsx
+++ b/apps/playground/src/App.tsx
@@ -16,7 +16,7 @@ import ProgressBar from './components/ProgressBar';
 import Sidebar from './components/Sidebar';
 import Tab from './components/Tab';
 import { DeobfuscateContextProvider } from './context/DeobfuscateContext';
-import { saveModels, type SavedModel } from './indexeddb';
+import { useSessions, type SavedModel } from './indexeddb';
 import { debounce } from './utils/debounce';
 import type { DeobfuscateResult } from './webcrack.worker';
 
@@ -29,6 +29,7 @@ export const [settings, setSettings] = createStore({
 });
 
 function App() {
+  const { saveModels } = useSessions();
   const [untitledCounter, setUntitledCounter] = createSignal(1);
   const [models, setModels] = createSignal<monaco.editor.ITextModel[]>([
     monaco.editor.createModel(
diff --git a/apps/playground/src/components/Menu.tsx b/apps/playground/src/components/Menu.tsx
index 76c51822..ef3a64e2 100644
--- a/apps/playground/src/components/Menu.tsx
+++ b/apps/playground/src/components/Menu.tsx
@@ -1,6 +1,6 @@
-import { For, createResource } from 'solid-js';
+import { For } from 'solid-js';
 import { useTheme } from '../hooks/useTheme';
-import { loadSessions, type SavedModel } from '../indexeddb';
+import { useSessions, type SavedModel } from '../indexeddb';
 
 interface Props {
   onFileOpen?: (content: string) => void;
@@ -8,8 +8,8 @@ interface Props {
 }
 
 export default function Menu(props: Props) {
+  const { sessions } = useSessions();
   const [theme, setTheme] = useTheme();
-  const [sessions] = createResource(loadSessions);
 
   function openFile() {
     const input = document.createElement('input');
diff --git a/apps/playground/src/indexeddb.ts b/apps/playground/src/indexeddb.ts
index 3fa7dfbf..4f7b468e 100644
--- a/apps/playground/src/indexeddb.ts
+++ b/apps/playground/src/indexeddb.ts
@@ -1,5 +1,6 @@
 import { openDB, type DBSchema } from 'idb';
 import type * as monaco from 'monaco-editor';
+import { createSignal } from 'solid-js';
 
 const SESSION_ID = Math.random().toString(36).slice(2);
 const MAX_SESSIONS = 10;
@@ -31,8 +32,14 @@ async function initDB() {
   });
 }
 
-export async function saveModels(models: monaco.editor.ITextModel[]) {
-  console.log('Saving models...', models.length);
+const [sessions, setSessions] = createSignal<Session[]>([]);
+loadSessions().then(setSessions).catch(console.error);
+
+export function useSessions() {
+  return { sessions, saveModels };
+}
+
+async function saveModels(models: monaco.editor.ITextModel[]) {
   const db = await initDB();
   await db.put('sessions', {
     id: SESSION_ID,
@@ -48,14 +55,10 @@ export async function saveModels(models: monaco.editor.ITextModel[]) {
   if (sessions.length > MAX_SESSIONS) {
     await db.delete('sessions', sessions[0].id);
   }
+  setSessions(sessions.slice(0, 10));
 }
 
-export async function clearSavedModels() {
-  const db = await initDB();
-  await db.clear('sessions');
-}
-
-export async function loadSessions(): Promise<Session[]> {
+async function loadSessions(): Promise<Session[]> {
   const db = await initDB();
   const sessions = await db.getAll('sessions');
   sessions.sort((a, b) => b.timestamp - a.timestamp);