vzcode 0.25.0 → 0.27.0

package/src/client/useActions.ts

@@ -0,0 +1,93 @@
+import { useCallback } from 'react';
+import { ThemeLabel } from './themes';
+import { FileId, Username } from '../types';
+import { TabState, VZAction } from './vzReducer';
+
+// This is a custom hook that returns a set of functions
+// that can be used to dispatch actions to the reducer.
+export const useActions = (
+  dispatch: (action: VZAction) => void,
+) => {
+  const setActiveFileId = useCallback(
+    (activeFileId: FileId) => {
+      dispatch({
+        type: 'set_active_file_id',
+        activeFileId,
+      });
+    },
+    [dispatch],
+  );
+
+  const openTab = useCallback(
+    (tabState: TabState): void => {
+      dispatch({
+        type: 'open_tab',
+        fileId: tabState.fileId,
+        isTransient: tabState.isTransient,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeTabs = useCallback(
+    (fileIdsToClose: Array<FileId>) => {
+      dispatch({
+        type: 'close_tabs',
+        fileIdsToClose,
+      });
+    },
+    [dispatch],
+  );
+
+  const setTheme = useCallback(
+    (themeLabel: ThemeLabel) => {
+      dispatch({
+        type: 'set_theme',
+        themeLabel: themeLabel,
+      });
+    },
+    [dispatch],
+  );
+
+  // True to show the settings modal.
+  const setIsSettingsOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_settings_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeSettings = useCallback(() => {
+    setIsSettingsOpen(false);
+  }, [setIsSettingsOpen]);
+
+  const editorNoLongerWantsFocus = useCallback(() => {
+    dispatch({
+      type: 'editor_no_longer_wants_focus',
+    });
+  }, [dispatch]);
+
+  const setUsername = useCallback(
+    (username: Username) => {
+      dispatch({
+        type: 'set_username',
+        username,
+      });
+    },
+    [dispatch],
+  );
+
+  return {
+    setActiveFileId,
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsSettingsOpen,
+    closeSettings,
+    editorNoLongerWantsFocus,
+    setUsername,
+  };
+};

package/src/client/useEditorCache.ts

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
 import { FileId } from '../types';
+import { EditorView } from 'codemirror';
 
 export type EditorCacheValue = {
-  editor: any;
+  editor: EditorView;
   themeCompartment: any;
 };
 

package/src/client/useFileCRUD.ts

@@ -0,0 +1,103 @@
+import { useCallback } from 'react';
+import {
+  FileId,
+  FileTreePath,
+  VZCodeContent,
+} from '../types';
+import { randomId } from '../randomId';
+
+// CRUD operations for files and directories
+// CRUD = Create, Read, Update, Delete
+export const useFileCRUD = ({
+  submitOperation,
+  closeTabs,
+  openTab,
+}: {
+  submitOperation: (
+    operation: (document: VZCodeContent) => VZCodeContent,
+  ) => void;
+  closeTabs: (idsToDelete: Array<FileId>) => void;
+  openTab: ({
+    fileId,
+    isTransient,
+  }: {
+    fileId: FileId;
+    isTransient: boolean;
+  }) => void;
+}) => {
+  // Create a new file
+  const createFile = useCallback(() => {
+    // TODO use Bootstrap modals not native prompts
+    // See https://github.com/vizhub-core/vzcode/issues/252
+    const name = prompt('Enter new file name');
+    if (name) {
+      const fileId: FileId = randomId();
+      submitOperation((document: VZCodeContent) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [fileId]: { name, text: '' },
+        },
+      }));
+      // When a new file is created, open it in a new tab
+      // and focus the editor on it.
+      openTab({ fileId, isTransient: false });
+    }
+  }, [submitOperation]);
+
+  // Called when a file in the sidebar is renamed.
+  const renameFile = useCallback(
+    (fileId: FileId, newName: string) => {
+      submitOperation((document: VZCodeContent) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [fileId]: {
+            ...document.files[fileId],
+            name: newName,
+          },
+        },
+      }));
+    },
+    [submitOperation],
+  );
+
+  // Deletes a file
+  const deleteFile = useCallback(
+    (fileId: FileId) => {
+      closeTabs([fileId]);
+      submitOperation((document) => {
+        const updatedFiles = { ...document.files };
+        delete updatedFiles[fileId];
+        return { ...document, files: updatedFiles };
+      });
+    },
+    [submitOperation, closeTabs],
+  );
+
+  // Deletes a directory and all files within it
+  const deleteDirectory = useCallback(
+    (path: FileTreePath) => {
+      const tabsToClose: Array<FileId> = [];
+      submitOperation((document: VZCodeContent) => {
+        const updatedFiles = { ...document.files };
+        for (const key in updatedFiles) {
+          if (updatedFiles[key].name.includes(path)) {
+            tabsToClose.push(key);
+            delete updatedFiles[key];
+          }
+        }
+        return { ...document, files: updatedFiles };
+      });
+      closeTabs(tabsToClose);
+    },
+    [submitOperation, closeTabs],
+  );
+
+  return {
+    createFile,
+    renameFile,
+    deleteFile,
+    deleteDirectory,
+  };
+};

package/src/client/useOpenDirectories.ts

@@ -17,6 +17,7 @@ import { useState, useCallback } from 'react';
 
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
+// TODO move this into reducer
 export const useOpenDirectories = () => {
   // The set of open directories by path/
   const [openDirectories, setOpenDirectories] = useState<
@@ -30,14 +31,31 @@ export const useOpenDirectories = () => {
       [openDirectories],
     );
 
-  // Toggle whether a directory is open.
+  /**
+   * Toggles the state of a directory (open/close).
+   * If the directory is currently open, it will close it.
+   * If it's closed, it will open it.
+   */
   const toggleDirectory = useCallback(
-    (path) => {
-      const newOpenDirectories = new Set(openDirectories);
-      newOpenDirectories[
-        isDirectoryOpen(path) ? 'delete' : 'add'
-      ](path);
-      setOpenDirectories(newOpenDirectories);
+    (directoryPath: string) => {
+      // Create a copy of the currently open directories
+      const updatedOpenDirectories = new Set(
+        openDirectories,
+      );
+
+      // Check if the directory is currently open
+      const directoryIsOpen =
+        isDirectoryOpen(directoryPath);
+
+      // Toggle the directory's state
+      if (directoryIsOpen) {
+        updatedOpenDirectories.delete(directoryPath);
+      } else {
+        updatedOpenDirectories.add(directoryPath);
+      }
+
+      // Update the state with the modified set of open directories
+      setOpenDirectories(updatedOpenDirectories);
     },
     [openDirectories, isDirectoryOpen],
   );

package/src/client/useSubmitOperation.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { ShareDBDoc, VZCodeContent } from '../types';
+import { diff } from './diff';
+
+// A helper function to submit diff-based operations to ShareDB
+export const useSubmitOperation = (
+  shareDBDoc: ShareDBDoc<VZCodeContent>,
+): ((
+  next: (content: VZCodeContent) => VZCodeContent,
+) => void) => {
+  const submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void = useCallback(
+    (next) => {
+      const content: VZCodeContent = shareDBDoc.data;
+      const op = diff(content, next(content));
+      if (op && shareDBDoc) {
+        shareDBDoc.submitOp(op);
+      }
+    },
+    [shareDBDoc],
+  );
+
+  return submitOperation;
+};

package/src/client/usernameLocalStorage.ts

@@ -0,0 +1,43 @@
+// This module deals with storing and accessing the
+
+import { useEffect, useRef } from 'react';
+import { Username } from '../types';
+
+const localStoragePropertyName = 'vzCodeUsername';
+
+const initialUsernameDefault = 'Anonymous';
+
+// Gets the username from local storage.
+export const useInitialUsername = (): Username => {
+  let initialUsername: Username = initialUsernameDefault;
+
+  // If we're in the browser,
+  if (typeof window !== 'undefined') {
+    //check localStorage for a previously stored width.
+    const initialUsernameFromLocalStorage: string | null =
+      window.localStorage.getItem(localStoragePropertyName);
+
+    // If there is a previously stored width,
+    if (initialUsernameFromLocalStorage !== null) {
+      // use it as the initial width.
+      initialUsername = initialUsernameFromLocalStorage;
+    }
+  } else {
+    // If we're not in the browser, use the default initial width.
+  }
+  return initialUsername;
+};
+
+// Stores the username to local storage.
+export const usePersistUsername = (username: Username) => {
+  const previousUsername = useRef<Username>(username);
+  useEffect(() => {
+    if (previousUsername.current !== username) {
+      previousUsername.current = username;
+      window.localStorage.setItem(
+        'vzCodeUsername',
+        username,
+      );
+    }
+  }, [username]);
+};

package/src/client/vzReducer/closeTabReducer.test.ts

@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest';
+import { closeTabsReducer } from './closeTabsReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('closeTabsReducer', () => {
+  it('Closes an existing tab', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file1'],
+    };
+
+    const stateWithTabs = {
+      ...initialState,
+      tabList: [{ fileId: 'file1', isTransient: false }],
+      activeFileId: 'file1',
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(0);
+    expect(newState.activeFileId).toBeNull();
+  });
+
+  it('Keeps other tabs open', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file2'],
+    };
+    const stateWithTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+      ],
+      activeFileId: 'file1',
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(1);
+    expect(newState.tabList[0].fileId).toBe('file1');
+    expect(newState.activeFileId).toBe('file1');
+  });
+
+  it('Activates previous tab after closing an active tab', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file2'],
+    };
+    const stateWithTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+        { fileId: 'file3', isTransient: false },
+      ],
+      activeFileId: 'file2',
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(2);
+    expect(newState.activeFileId).toBe('file1'); // should switch to the previous tab
+  });
+
+  it('Does not modify the state if closing non-existing tabs', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file4'],
+    };
+    const stateWithTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+        { fileId: 'file3', isTransient: false },
+      ],
+      activeFileId: 'file2',
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    expect(newState).toEqual(stateWithTabs);
+  });
+
+  it('Closes a tab that is not currently active', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+        { fileId: 'file3', isTransient: false },
+      ],
+      activeFileId: 'file3',
+    };
+
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file2'],
+    };
+
+    const newState = closeTabsReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(2);
+    expect(newState.activeFileId).toBe('file3'); // remains unchanged
+  });
+
+  it('Closes the first tab out of many, when it is active', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+        { fileId: 'file3', isTransient: false },
+      ],
+      activeFileId: 'file1',
+    };
+
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file1'],
+    };
+
+    const newState = closeTabsReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(2);
+    expect(newState.activeFileId).toBe('file2'); // switches to the next available tab
+  });
+
+  it('Closes multiple tabs at once', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+        { fileId: 'file3', isTransient: false },
+      ],
+      activeFileId: 'file2',
+    };
+
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file1', 'file2'],
+    };
+
+    const newState = closeTabsReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(1);
+    expect(newState.activeFileId).toBe('file3'); // switches to the next available tab
+  });
+});

package/src/client/vzReducer/closeTabsReducer.ts

@@ -0,0 +1,68 @@
+import { TabState, VZAction, VZState } from '.';
+import { FileId } from '../../types';
+
+export const closeTabsReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'close_tabs') {
+    return state;
+  }
+
+  const newTabList: Array<TabState> = state.tabList.filter(
+    (tabState) =>
+      !action.fileIdsToClose.includes(tabState.fileId),
+  );
+
+  // If the active tab wasn't closed, keep it active.
+  if (
+    !action.fileIdsToClose.includes(state.activeFileId!)
+  ) {
+    return {
+      ...state,
+      tabList: newTabList,
+    };
+  }
+
+  const originalIndex = state.tabList.findIndex(
+    (tabState) => tabState.fileId === state.activeFileId,
+  );
+
+  let newActiveFileId: FileId | null = null;
+
+  // Try getting the previous available tab first.
+  for (let i = originalIndex - 1; i >= 0; i--) {
+    if (
+      !action.fileIdsToClose.includes(
+        state.tabList[i].fileId,
+      )
+    ) {
+      newActiveFileId = state.tabList[i].fileId;
+      break;
+    }
+  }
+
+  // If no previous tab available, get the next available one.
+  if (!newActiveFileId) {
+    for (
+      let i = originalIndex + 1;
+      i < state.tabList.length;
+      i++
+    ) {
+      if (
+        !action.fileIdsToClose.includes(
+          state.tabList[i].fileId,
+        )
+      ) {
+        newActiveFileId = state.tabList[i].fileId;
+        break;
+      }
+    }
+  }
+
+  return {
+    ...state,
+    tabList: newTabList,
+    activeFileId: newActiveFileId,
+  };
+};

package/src/client/vzReducer/createInitialState.ts

@@ -0,0 +1,19 @@
+import { VZState } from '.';
+import { ThemeLabel } from '../themes';
+
+export const createInitialState = ({
+  defaultTheme,
+  initialUsername,
+}: {
+  defaultTheme: ThemeLabel;
+  initialUsername?: string;
+}): VZState => ({
+  tabList: [],
+  activeFileId: null,
+  theme: defaultTheme,
+  isSettingsOpen: false,
+  editorWantsFocus: false,
+
+  // TODO unify this with App.tsx
+  username: initialUsername || 'Anonymous',
+});

package/src/client/vzReducer/editorNoLongerWantsFocusReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const editorNoLongerWantsFocusReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'editor_no_longer_wants_focus'
+    ? { ...state, editorWantsFocus: false }
+    : state;