fix: load references once app is initialized (#326)

* fix: load references once app is initialized

* chore: remove deprecated event

---------

Co-authored-by: Mathis Pierron <mathis.pierron@yld.io>

src/AppStartup.tsx

@@ -1,7 +1,9 @@
 import { invoke } from '@tauri-apps/api';
+import { useSetAtom } from 'jotai';
 import { useState } from 'react';
 
 import { App } from './application/App';
+import { loadReferencesAtom } from './atoms/referencesState';
 import { useAsyncEffect } from './hooks/useAsyncEffect';
 import { ensureProjectFileStructure } from './io/filesystem';
 import { noop } from './lib/noop';
@@ -14,6 +16,7 @@ interceptConsoleMessages(true, true, true);
 
 export function AppStartup() {
   const [initialized, setInitialized] = useState(false);
+  const loadReferences = useSetAtom(loadReferencesAtom);
 
   useAsyncEffect(
     async (isMounted) => {
@@ -30,6 +33,7 @@ export function AppStartup() {
 
       if (isMounted()) {
         setInitialized(true);
+        await loadReferences();
       }
     },
     noop,

src/application/App.tsx

@@ -4,7 +4,7 @@ import { MenuProvider } from 'kmenu';
 import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { VscChevronUp } from 'react-icons/vsc';
 import { ImperativePanelGroupHandle, ImperativePanelHandle, Panel, PanelGroup } from 'react-resizable-panels';
-import { useEffectOnce, useEventListener, useLocalStorage, useWindowSize } from 'usehooks-ts';
+import { useEventListener, useLocalStorage, useWindowSize } from 'usehooks-ts';
 
 import { PrimarySideBar, PrimarySideBarPane } from '../components/PrimarySideBar';
 import { VerticalResizeHandle } from '../components/VerticalResizeHandle';
@@ -26,8 +26,6 @@ export function App() {
   const size = useWindowSize();
   const [panelDimensions, setPanelDimensions] = useLocalStorage('refstudio.panels', { left: 400, right: 400 });
 
-  useEffectOnce(() => emitEvent('refstudio://references/load'));
-
   const handleLayoutUpdate = useDebouncedCallback(
     useCallback(
       ([leftPerc, , rightPerc]: number[]) => {

src/atoms/referencesState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'jotai';
+import { Atom, atom } from 'jotai';
 
-import { removeReferences, updateReference } from '../api/ingestion';
+import { getIngestedReferences, removeReferences, updateReference } from '../api/ingestion';
 import { deleteFile } from '../io/filesystem';
 import { isNonNullish } from '../lib/isNonNullish';
 import { ReferenceItem } from '../types/ReferenceItem';
@@ -10,11 +10,15 @@ import { buildEditorId } from './types/EditorData';
 
 type ReferencesState = Record<string, ReferenceItem>;
 
-/** INTERNAL ATOMS */
+// #####################################################################################
+// Internal Atoms
+// #####################################################################################
 // This is the internal representation of the references and is not exposed so that all business logic lives in this file to enable us to easily change the structure and/or switch to another state management library
 const referencesAtom = atom<ReferencesState>({});
 
-/** EXTERNAL ATOMS */
+// #####################################################################################
+// References API
+// #####################################################################################
 export const getReferencesAtom = atom((get) => Object.values(get(referencesAtom)));
 
 export const getDerivedReferenceAtom = (referenceId: string) =>
@@ -28,8 +32,27 @@ export const setReferencesAtom = atom(null, (_get, set, references: ReferenceIte
   set(referencesAtom, updatedReferences);
 });
 
+// #####################################################################################
+// References sync status (upload flow)
+// #####################################################################################
 export const referencesSyncInProgressAtom = atom<boolean>(false);
 
+// #####################################################################################
+// References initialization
+// #####################################################################################
+const referencesLoadedAtom = atom<boolean>(false);
+
+export const loadReferencesAtom = atom(null, async (_get, set) => {
+  const initialReferences = await getIngestedReferences();
+  set(setReferencesAtom, initialReferences);
+  set(referencesLoadedAtom, true);
+});
+
+export const areReferencesLoadedAtom: Atom<boolean> = referencesLoadedAtom;
+
+// #####################################################################################
+// Edit operations
+// #####################################################################################
 const removeReferenceAtom = atom(null, (get, set, id: string) => {
   const references = get(getReferencesAtom);
   const newReferences = references.filter((ref) => ref.id !== id);

src/events.ts

@@ -21,7 +21,6 @@ interface RefStudioEvents {
   // References actions
   'refstudio://references/ingestion/run': undefined;
   'refstudio://references/remove': { referenceIds: string[] };
-  'refstudio://references/load': undefined;
   // Explorer actions
   'refstudio://explorer/delete': { path: string };
   'refstudio://explorer/rename': { path: string; newName?: string };

src/features/references/footer/ReferencesFooterItems.tsx

@@ -2,13 +2,18 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { VscLibrary, VscRefresh } from 'react-icons/vsc';
 
 import { openReferencesAtom } from '../../../atoms/editorActions';
-import { getReferencesAtom, referencesSyncInProgressAtom } from '../../../atoms/referencesState';
+import {
+  areReferencesLoadedAtom,
+  getReferencesAtom,
+  referencesSyncInProgressAtom,
+} from '../../../atoms/referencesState';
 import { FooterItem } from '../../../components/footer/FooterItem';
 import { emitEvent } from '../../../events';
 import { useListenEvent } from '../../../hooks/useListenEvent';
 
 export function ReferencesFooterItems() {
   const syncInProgress = useAtomValue(referencesSyncInProgressAtom);
+  const areReferencesLoaded = useAtomValue(areReferencesLoadedAtom);
   const references = useAtomValue(getReferencesAtom);
   const openReferences = useSetAtom(openReferencesAtom);
 
@@ -17,6 +22,9 @@ export function ReferencesFooterItems() {
   return (
     <>
       {syncInProgress && <FooterItem icon={<VscRefresh className="animate-spin" />} text="References ingestion..." />}
+      {!areReferencesLoaded && (
+        <FooterItem icon={<VscRefresh className="animate-spin" />} text="Loading references..." />
+      )}
       <FooterItem
         icon={<VscLibrary />}
         text={`References: ${references.length}`}

src/features/references/footer/__tests__/ReferencesFooterItems.test.tsx

@@ -42,7 +42,7 @@ describe('ReferencesFooterItems component', () => {
 
   it(`should emit ${'refstudio://menu/references/open'} on click`, async () => {
     const { user } = setupWithJotaiProvider(<ReferencesFooterItems />);
-    await user.click(screen.getByRole('listitem'));
+    await user.click(screen.getAllByRole('listitem').pop()!);
     expect(vi.mocked(emitEvent)).toHaveBeenCalledWith('refstudio://menu/references/open');
   });
 

src/wrappers/EventsListener.tsx

@@ -12,7 +12,6 @@ import { useActiveEditorContentAtoms } from '../atoms/hooks/useActiveEditorConte
 import { removeReferencesAtom } from '../atoms/referencesState';
 import { PaneEditorId } from '../atoms/types/PaneGroup';
 import { emitEvent, RefStudioEventPayload } from '../events';
-import { useLoadReferencesListener } from '../features/references/eventListeners';
 import { useListenEvent } from '../hooks/useListenEvent';
 import { asyncNoop, noop } from '../lib/noop';
 import {
@@ -37,7 +36,6 @@ export function EventsListener({ children }: { children?: React.ReactNode }) {
   useListenEvent('refstudio://explorer/delete', useDeleteFileListener());
   // References
   useListenEvent('refstudio://references/remove', useRemoveReferencesListener());
-  useListenEvent('refstudio://references/load', useLoadReferencesListener());
   // Notifications
   useListenEvent('refstudio://notifications/new', useCreateNotificationListener());
   useListenEvent('refstudio://notifications/clear', useClearNotificationsListener());