fix data sync

Author: yujonglee

apps/desktop/src/components/editor-area/index.tsx

@@ -25,10 +25,6 @@ export default function EditorArea({
   editable: boolean;
   sessionId: string;
 }) {
-  const { ongoingSessionStatus } = useOngoingSession((s) => ({
-    ongoingSessionStatus: s.status,
-  }));
-
   const showRaw = useSession(sessionId, (s) => s.showRaw);
 
   const [rawContent, setRawContent] = useSession(sessionId, (s) => [
@@ -44,7 +40,6 @@ export default function EditorArea({
 
   const sessionStore = useSession(sessionId, (s) => ({
     session: s.session,
-    refresh: s.refresh,
   }));
 
   const editorRef = useRef<{ editor: TiptapEditor | null }>(null);
@@ -53,10 +48,6 @@ export default function EditorArea({
     [sessionId, showRaw],
   );
 
-  useEffect(() => {
-    sessionStore.refresh();
-  }, [sessionStore.refresh, ongoingSessionStatus]);
-
   const enhance = useEnhanceMutation({
     sessionId,
     rawContent,

apps/desktop/src/components/editor-area/note-header/index.tsx

@@ -15,14 +15,11 @@ interface NoteHeaderProps {
 }
 
 export function NoteHeader({ onNavigateToEditor, editable, sessionId, hashtags = [] }: NoteHeaderProps) {
-  const sessionStore = useSession(sessionId, (s) => ({
-    session: s.session,
-    updateTitle: s.updateTitle,
-    persistSession: s.persistSession,
-  }));
+  const updateTitle = useSession(sessionId, (s) => s.updateTitle);
+  const sessionTitle = useSession(sessionId, (s) => s.session.title);
 
   const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    sessionStore.updateTitle(e.target.value);
+    updateTitle(e.target.value);
   };
 
   const noteMatch = useMatch({ from: "/app/note/$id", shouldThrow: false });
@@ -34,7 +31,7 @@ export function NoteHeader({ onNavigateToEditor, editable, sessionId, hashtags =
       <div className="flex-1 space-y-1">
         <TitleInput
           editable={editable}
-          value={sessionStore.session.title}
+          value={sessionTitle}
           onChange={handleTitleChange}
           onNavigateToEditor={onNavigateToEditor}
         />

apps/desktop/src/routes/app.new.tsx

@@ -40,7 +40,7 @@ export const Route = createFileRoute("/app/new")({
         insert(session);
 
         await queryClient.invalidateQueries({
-          queryKey: ["event-session", calendarEventId],
+          predicate: (query) => query.queryKey.some((key) => (typeof key === "string") && key.includes("session")),
         });
       } else {
         const session = await dbCommands.upsertSession({

packages/utils/src/stores/ongoing-session.ts

@@ -68,7 +68,7 @@ export const createOngoingSessionStore = (sessionsStore: ReturnType<typeof creat
       });
     },
     stop: () => {
-      const { sessionId, channel } = get();
+      const { channel, sessionId } = get();
 
       if (channel) {
         listenerCommands.unsubscribe(channel);
@@ -77,11 +77,14 @@ export const createOngoingSessionStore = (sessionsStore: ReturnType<typeof creat
       listenerCommands.stopSession().then(() => {
         set(initialState);
 
-        // session stored in sessionStore become stale during ongoing-session. Refresh it here.
-        if (sessionId) {
-          const sessionStore = sessionsStore.getState().sessions[sessionId];
-          sessionStore.getState().refresh();
-        }
+        // We need refresh since session in store is now stale.
+        // setTimeout is needed because of debounce.
+        setTimeout(() => {
+          if (sessionId) {
+            const sessionStore = sessionsStore.getState().sessions[sessionId];
+            sessionStore.getState().refresh();
+          }
+        }, 1500);
       });
     },
     pause: () => {
@@ -90,11 +93,14 @@ export const createOngoingSessionStore = (sessionsStore: ReturnType<typeof creat
       listenerCommands.pauseSession().then(() => {
         set({ status: "running_paused" });
 
-        // session stored in sessionStore become stale during ongoing-session. Refresh it here.
-        if (sessionId) {
-          const sessionStore = sessionsStore.getState().sessions[sessionId];
-          sessionStore.getState().refresh();
-        }
+        // We need refresh since session in store is now stale.
+        // setTimeout is needed because of debounce.
+        setTimeout(() => {
+          if (sessionId) {
+            const sessionStore = sessionsStore.getState().sessions[sessionId];
+            sessionStore.getState().refresh();
+          }
+        }, 1500);
       });
     },
     resume: () => {

packages/utils/src/stores/session.ts

@@ -69,7 +69,15 @@ export const createSessionStore = (session: Session) => {
       });
     },
     persistSession: async (session?: Session, force?: boolean) => {
-      const item = session ?? get().session;
+      const { session: { id } } = get();
+      const sessionFromDB = await dbCommands.getSession({ id });
+
+      // TODO: this is temp solution.
+      const item: Session = {
+        ...(session ?? get().session),
+        conversations: sessionFromDB?.conversations ?? [],
+      };
+
       const fn = force
         ? dbCommands.upsertSession
         : pDebounce((v: Session) => dbCommands.upsertSession(v), 50);