vzcode 0.26.0 → 0.28.0

package/src/client/useActions.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { ThemeLabel } from './themes';
-import { FileId } from '../types';
-import { VZAction } from './vzReducer';
+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.
@@ -19,20 +19,21 @@ export const useActions = (
   );
 
   const openTab = useCallback(
-    (fileId: FileId) => {
+    (tabState: TabState): void => {
       dispatch({
         type: 'open_tab',
-        fileId,
+        fileId: tabState.fileId,
+        isTransient: tabState.isTransient,
       });
     },
     [dispatch],
   );
 
   const closeTabs = useCallback(
-    (idsToDelete: Array<FileId>) => {
+    (fileIdsToClose: Array<FileId>) => {
       dispatch({
         type: 'close_tabs',
-        idsToDelete,
+        fileIdsToClose,
       });
     },
     [dispatch],
@@ -63,6 +64,22 @@ export const useActions = (
     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,
@@ -70,5 +87,7 @@ export const useActions = (
     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

@@ -1,5 +1,9 @@
 import { useCallback } from 'react';
-import { FileId, VZCodeContent } from '../types';
+import {
+  FileId,
+  FileTreePath,
+  VZCodeContent,
+} from '../types';
 import { randomId } from '../randomId';
 
 // CRUD operations for files and directories
@@ -7,6 +11,19 @@ import { randomId } from '../randomId';
 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(() => {
@@ -14,20 +31,24 @@ export const useFileCRUD = ({
     // 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,
-          [randomId()]: { name, text: '' },
+          [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 handleRenameFileClick = useCallback(
+  const renameFile = useCallback(
     (fileId: FileId, newName: string) => {
-      submitOperation((document) => ({
+      submitOperation((document: VZCodeContent) => ({
         ...document,
         files: {
           ...document.files,
@@ -56,7 +77,7 @@ export const useFileCRUD = ({
 
   // Deletes a directory and all files within it
   const deleteDirectory = useCallback(
-    (path: FileId) => {
+    (path: FileTreePath) => {
       const tabsToClose: Array<FileId> = [];
       submitOperation((document: VZCodeContent) => {
         const updatedFiles = { ...document.files };
@@ -73,29 +94,10 @@ export const useFileCRUD = ({
     [submitOperation, closeTabs],
   );
 
-  // Generic delete function that calls either deleteFile or deleteDirectory
-  // TODO consider if there is a cleaner way to do this
-  //  - Ideally we would have a separate function for deleting files and directories
-  //  - When we click the delete button, we should be able to tell if it is a file or directory
-  const handleDeleteClick = useCallback(
-    (key: string) => {
-      // Regex to identify if the key is a file path or a file id.
-      if (/^[0-9]*$/.test(key)) {
-        if (key.length == 8) {
-          deleteFile(key);
-        } else {
-          deleteDirectory(key);
-        }
-      } else {
-        deleteDirectory(key);
-      }
-    },
-    [deleteFile, deleteDirectory],
-  );
-
   return {
     createFile,
-    handleRenameFileClick,
-    handleDeleteClick,
+    renameFile,
+    deleteFile,
+    deleteDirectory,
   };
 };

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;

package/src/client/vzReducer/index.ts

@@ -0,0 +1,107 @@
+import { FileId, Username } from '../../types';
+import { ThemeLabel } from '../themes';
+import { closeTabsReducer } from './closeTabsReducer';
+import { openTabReducer } from './openTabReducer';
+import { setActiveFileIdReducer } from './setActiveFileIdReducer';
+import { setIsSettingsOpenReducer } from './setIsSettingsOpenReducer';
+import { setThemeReducer } from './setThemeReducer';
+import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
+import { setUsernameReducer } from './setUsernameReducer';
+
+export { createInitialState } from './createInitialState';
+
+// The shape of the state managed by the reducer.
+export type VZState = {
+  // The list of open tabs.
+  tabList: Array<TabState>;
+
+  // The ID of the file that is currently active.
+  // Invariant: `activeFileId` is always in `tabList`.
+  activeFileId: FileId | null;
+
+  // The theme that is currently active.
+  theme: ThemeLabel;
+
+  // True to show the settings modal.
+  isSettingsOpen: boolean;
+
+  // True if the editor should focus on the next render.
+  editorWantsFocus: boolean;
+
+  // The username of the current user.
+  username: Username;
+};
+
+// The shape of the actions that can be dispatched to the reducer.
+export type VZAction =
+  // `set_active_file_id`
+  //  * Sets the active file ID.
+  | { type: 'set_active_file_id'; activeFileId: FileId }
+
+  // `open_tab`
+  //  * Opens a tab.
+  //  * Also serves to change an already open transient tab to persistent.
+  | {
+      type: 'open_tab';
+      fileId: FileId;
+      isTransient: boolean;
+    }
+
+  // `close_tabs`
+  //  * Closes a set of tabs.
+  | { type: 'close_tabs'; fileIdsToClose: Array<FileId> }
+
+  // `set_theme`
+  //  * Sets the theme.
+  | { type: 'set_theme'; themeLabel: ThemeLabel }
+
+  // `set_is_settings_open`
+  //  * Sets whether the settings modal is open.
+  | { type: 'set_is_settings_open'; value: boolean }
+
+  // `editor_no_longer_wants_focus`
+  //  * Sets `editorWantsFocus` to `false`.
+  | { type: 'editor_no_longer_wants_focus' }
+
+  // `set_username`
+  //  * Sets the username.
+  | { type: 'set_username'; username: Username };
+
+// Representation of an open tab.
+export type TabState = {
+  // `fileId`
+  // The ID of the file that the tab represents.
+  fileId: FileId;
+
+  // `isTransient`
+  // Represents whether the tab is temporary or persistent.
+  //  * `true` if the tab is temporary, meaning its text
+  //    appears as italic, and it will be automatically
+  //    closed when the user switches to another file.
+  //    If `true` and the tab is opened, the editor will not focus.
+  //  * `false` if the tab is persistent, meaning its text
+  //    appears as normal, and it will not be automatically
+  //    closed when the user switches to another file.
+  //    If `false` and the tab is opened, the editor will focus.
+  isTransient: boolean;
+};
+
+const reducers = [
+  setActiveFileIdReducer,
+  openTabReducer,
+  closeTabsReducer,
+  setThemeReducer,
+  setIsSettingsOpenReducer,
+  editorNoLongerWantsFocusReducer,
+  setUsernameReducer,
+];
+
+export const vzReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  reducers.reduce(
+    (currentState, currentReducer) =>
+      currentReducer(currentState, action),
+    state,
+  );