vzcode 0.26.0 → 0.28.0

package/src/client/PresenceNotifications/PresenceNotifications.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest';
+import {
+  extractTimestampFromId,
+  shouldShowNotification,
+  handleJoin,
+  handleLeave,
+} from '.';
+
+describe('extractTimestampFromId', () => {
+  it('Extracts a timestamp from a given ID', () => {
+    const id = 'abcd-xyz';
+    const timestamp = extractTimestampFromId(id);
+    expect(timestamp).toBe(parseInt('abcd', 36));
+  });
+});
+
+describe('shouldShowNotification', () => {
+  it('Returns true if remote presence timestamp is greater than local', () => {
+    const remoteId = 'abcd-xyz';
+    const localId = 'aaa-xyz';
+    const result = shouldShowNotification(
+      remoteId,
+      localId,
+    );
+    expect(result).toBe(true);
+  });
+
+  it('Returns false if remote presence timestamp is not greater than local', () => {
+    const remoteId = 'aaa-xyz';
+    const localId = 'abcd-xyz';
+    const result = shouldShowNotification(
+      remoteId,
+      localId,
+    );
+    expect(result).toBe(false);
+  });
+});
+
+describe('handleJoin', () => {
+  it('Adds a new user if not already present', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = { current: new Map() };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleJoin(
+      presenceId,
+      username,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(1);
+    expect(notifications[0].user).toBe(username);
+    expect(notifications[0].join).toBe(true);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      true,
+    );
+  });
+
+  it('Updates username if user already present', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = {
+      current: new Map([[presenceId, 'Doe']]),
+    };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleJoin(
+      presenceId,
+      username,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(0);
+    expect(alreadyJoined.current.get(presenceId)).toBe(
+      username,
+    );
+  });
+});
+
+describe('handleLeave', () => {
+  it('Removes an existing user', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = {
+      current: new Map([[presenceId, username]]),
+    };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleLeave(
+      presenceId,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(1);
+    expect(notifications[0].user).toBe(username);
+    expect(notifications[0].join).toBe(false);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      false,
+    );
+  });
+
+  it('Does nothing if user not present', () => {
+    const presenceId = 'abcd-xyz';
+    const alreadyJoined = { current: new Map() };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleLeave(
+      presenceId,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(0);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      false,
+    );
+  });
+});

package/src/client/PresenceNotifications/index.tsx

@@ -1,143 +1,158 @@
 import { useState, useEffect, useRef } from 'react';
+import { PresenceId, Username } from '../../types';
 import './style.scss';
 
-type PresenceId = string;
-
-// A presence notification is a message that is displayed when a user joins or leaves a session.
-// It has the following properties:
-// - `user` is the username of the user who joined or left the session.
-// - `join` is a boolean value that indicates whether the user joined or left the session.
-//   - `true` means user has joined the session.
-//   - `false` means user has left the session.
 type PresenceNotification = {
-  user: string;
+  user: Username;
   join: boolean;
   presenceId: PresenceId;
 };
 
+export const extractTimestampFromId = (
+  id: string,
+): number => {
+  const [timestampPart] = id.split('-');
+  return parseInt(timestampPart, 36);
+};
+
+export const shouldShowNotification = (
+  remotePresenceId: PresenceId,
+  localPresenceId: PresenceId,
+): boolean => {
+  const remotePresenceTimestamp = extractTimestampFromId(
+    remotePresenceId,
+  );
+  const localPresenceTimestamp =
+    extractTimestampFromId(localPresenceId);
+  return remotePresenceTimestamp > localPresenceTimestamp;
+};
+
+export const handleJoin = (
+  presenceId: PresenceId,
+  username: Username,
+  alreadyJoined: React.MutableRefObject<
+    Map<PresenceId, Username>
+  >,
+  setPresenceNotifications: any,
+) => {
+  if (!alreadyJoined.current.has(presenceId)) {
+    alreadyJoined.current.set(presenceId, username);
+    setPresenceNotifications(
+      (prev: PresenceNotification[]) => [
+        ...prev,
+        { user: username, join: true, presenceId },
+      ],
+    );
+  } else {
+    alreadyJoined.current.set(presenceId, username); // Update in case username changed
+  }
+};
+
+export const handleLeave = (
+  presenceId: PresenceId,
+  alreadyJoined: React.MutableRefObject<
+    Map<PresenceId, Username>
+  >,
+  setPresenceNotifications: any,
+) => {
+  const user = alreadyJoined.current.get(presenceId);
+  if (user) {
+    alreadyJoined.current.delete(presenceId);
+    setPresenceNotifications(
+      (prev: PresenceNotification[]) => [
+        ...prev,
+        { user, join: false, presenceId },
+      ],
+    );
+  }
+};
+
 export const PresenceNotifications = ({
   docPresence,
+  localPresence,
 }: {
   docPresence?: any;
+  localPresence?: any;
 }) => {
+  // `presenceNotifications`:
+  // - State variable containing a list of user presence notifications.
+  // - Each notification indicates if a user has joined or left a session.
   const [presenceNotifications, setPresenceNotifications] =
-    useState<Array<PresenceNotification>>([]);
+    useState<PresenceNotification[]>([]);
 
-  // const [presenceIds, setPresenceIds] = useState<
-  //   Array<any>
-  // >([]);
-  const alreadyJoinedPresenceIds = useRef<Set<PresenceId>>(
-    new Set(),
+  // `alreadyJoined`:
+  // - Ref (persistent across re-renders) containing a Map.
+  // - Map's key: `PresenceId` (unique identifier for user's presence).
+  // - Map's value: `Username` of the associated user.
+  // - Tracks users who have joined the session and their possible username changes.
+  const alreadyJoined = useRef<Map<PresenceId, Username>>(
+    new Map(),
   );
 
   useEffect(() => {
-    // console.log('useEffect triggered.');
     if (docPresence) {
-      // See https://share.github.io/sharedb/presence
-      docPresence.on('receive', (presenceId, update) => {
-        // Reason for notifications appearing on every cursor movement:
-        //  code doesn't check if a notification about a user joining was previously sent
-
-        // Attempted solutions:
-        //  - create an array called presenceIds that keeps track of the presences that join and leave
-        //      - if presenceId is in presenceIds: local user was already alerted that a remote user joined
-        //      - if presenceId is not in presenceIds: local user needs to be notified about a new user
-        //      - problems:
-        //          - the array is always empty inside useEffect (array works outside of useEffect)
-        //              - causes check to fail
-        //  - check docPresence.remotePresences, which keeps track of all the remote presences on the doc
-        //      - see https://share.github.io/sharedb/api/presence
-        //      - if presenceId is in docPresence.remotePresences: local user was already alerted that a remote user joined
-        //      - if presenceId is not in docPresence.remotePresences: local user needs to be notified about a new user
-        //      - problems:
-        //          - useEffects is called when docPresence changes (in some cases, it's when the remote presence changes)
-        //          - remotePresences already has the remote presence in the array, so check fails
-        //      - could add another property to presence (true: already notified, false: need to be notified)
-        //          - doesn't seem like an ideal solution
-
-        // console.log('docPresence:', docPresence);
-        // console.log('docPresence remotePresences:', docPresence.remotePresences);
-        // console.log('check for presence:', docPresence.remotePresences[presenceId]);
-
-        // TODO figure out how to get username from `presenceId`.
-        const user = 'someone';
-
-        // `true` means user has joined the session.
-        // `false` means user has left the session.
+      const handleReceive = (
+        presenceId: PresenceId,
+        update: any,
+      ) => {
         const join = update !== null;
-
-        // Figure out if we have ever seen this user before.
-
-        // if (join && docPresence.remotePresences[presenceId] === undefined){
-        if (join) {
-          if (
-            !alreadyJoinedPresenceIds.current.has(
+        if (
+          shouldShowNotification(
+            presenceId,
+            localPresence.presenceId,
+          )
+        ) {
+          if (join) {
+            const username =
+              docPresence.remotePresences[presenceId]
+                ?.username;
+            handleJoin(
               presenceId,
-            )
-          ) {
-            alreadyJoinedPresenceIds.current.add(
+              username,
+              alreadyJoined,
+              setPresenceNotifications,
+            );
+          } else {
+            handleLeave(
               presenceId,
+              alreadyJoined,
+              setPresenceNotifications,
             );
-            setPresenceNotifications((prev) => [
-              ...prev,
-              { user, join, presenceId },
-            ]);
-
-            // Remove it after 5 seconds.
-            setTimeout(() => {
-              setPresenceNotifications((prev) =>
-                prev.filter(
-                  (notification) =>
-                    notification.presenceId !==
-                      presenceId &&
-                    notification.join !== join,
-                ),
-              );
-            }, 5000);
           }
-        } else if (!join) {
-          setPresenceNotifications((prev) => [
-            ...prev,
-            { user, join, presenceId },
-          ]);
 
-          // Remove it after 5 seconds.
-          // TODO clean up this duplication.
-          setTimeout(() => {
+          const timeoutId = setTimeout(() => {
             setPresenceNotifications((prev) =>
-              prev.filter(
-                (notification) =>
-                  notification.presenceId !== presenceId &&
-                  notification.join !== join,
-              ),
+              prev.slice(1),
             );
           }, 5000);
+
+          return () => {
+            clearTimeout(timeoutId);
+          };
         }
-      });
-    }
-  }, [docPresence]);
+      };
 
-  // console.log(
-  //   'presenceNotifications',
-  //   presenceNotifications,
-  // );
-  // console.log(
-  //   'presenceIds',
-  //   presenceIds,
-  // );
+      docPresence.on('receive', handleReceive);
+      return () => {
+        docPresence.off('receive', handleReceive);
+      };
+    }
+  }, [docPresence, localPresence]);
 
   return presenceNotifications.length > 0 ? (
     <div className="vz-notification">
-      {presenceNotifications.map((notification, i) => {
-        const { user, join } = notification;
-        return (
-          <div key={i} className="vz-notification-item">
+      {presenceNotifications.map(
+        ({ user, join, presenceId }) => (
+          <div
+            key={presenceId}
+            className="vz-notification-item"
+          >
             {join
               ? `${user} has joined the session.`
               : `${user} has left the session.`}
           </div>
-        );
-      })}
+        ),
+      )}
     </div>
   ) : null;
 };

package/src/client/SplitPaneResizeContext.tsx

@@ -6,13 +6,6 @@ import {
   useEffect,
 } from 'react';
 
-export const SplitPaneResizeContext = createContext<{
-  codeEditorWidth: number;
-  moveSplitPane: (a: number) => void;
-  isDragging: boolean;
-  setIsDragging: (a: boolean) => void;
-}>(null);
-
 // The amount of time to wait idle before writing to localStorage.
 // This is to avoid writing to localStorage on every resize event.
 // MS = milliseconds
@@ -38,6 +31,18 @@ if (typeof window !== 'undefined') {
   // If we're not in the browser, use the default initial width.
 }
 
+export const SplitPaneResizeContext = createContext<{
+  codeEditorWidth: number;
+  moveSplitPane: (a: number) => void;
+  isDragging: boolean;
+  setIsDragging: (a: boolean) => void;
+}>({
+  codeEditorWidth: initialWidth,
+  moveSplitPane: () => {},
+  isDragging: false,
+  setIsDragging: () => {},
+});
+
 const add = (a: number, b: number) => a + b;
 
 export const SplitPaneResizeProvider = ({ children }) => {

package/src/client/TabList/Tab.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { FileId } from '../../types';
+import type { FileId } from '../../types';
+import type { TabState } from '../vzReducer';
 
 // Supports adding the file's containing folder to the tab name
 const fileNameSplit = (fileName: string) => {
@@ -12,14 +13,18 @@ const fileNameSplit = (fileName: string) => {
 
 export const Tab = ({
   fileId,
+  isTransient,
   isActive,
   setActiveFileId,
+  openTab,
   closeTabs,
   fileName,
 }: {
   fileId: FileId;
+  isTransient: boolean;
   isActive: boolean;
   setActiveFileId: (fileId: FileId) => void;
+  openTab: (tabState: TabState) => void;
   closeTabs: (fileIds: FileId[]) => void;
   fileName: string;
 }) => {
@@ -38,16 +43,25 @@ export const Tab = ({
     [fileName],
   );
 
+  const handleClick = useCallback(() => {
+    setActiveFileId(fileId);
+  }, [fileId, setActiveFileId]);
+
+  // Double-clicking a transient tab makes it a persistent tab.
+  const handleDoubleClick = useCallback(() => {
+    openTab({ fileId, isTransient: false });
+  }, [fileId, openTab]);
+
   return (
     <div
-      className={isActive ? 'tab active' : 'tab'}
-      onClick={() => {
-        setActiveFileId(fileId);
-      }}
+      className={`tab user-select-none ${
+        isActive ? 'active' : ''
+      } ${isTransient ? 'transient' : ''}`}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
     >
       {tabName}
       <div
-        // className={isActive ? 'bx bx-x tab-close' : ''}
         className={'bx bx-x tab-close'}
         onClick={handleCloseClick}
       ></div>

package/src/client/TabList/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react';
-import { FileId, Files } from '../../types';
+import type { TabState } from '../vzReducer';
+import type { FileId, Files } from '../../types';
 import { Tab } from './Tab';
 import './style.scss';
 
@@ -9,13 +10,17 @@ export const TabList = ({
   tabList,
   activeFileId,
   setActiveFileId,
+  openTab,
   closeTabs,
+  createFile,
 }: {
   files: Files;
-  tabList: FileId[];
+  tabList: Array<TabState>;
   activeFileId: FileId;
   setActiveFileId: (fileId: FileId) => void;
+  openTab: (tabState: TabState) => void;
   closeTabs: (fileIds: FileId[]) => void;
+  createFile: () => void;
 }) => {
   // Close the active tab on alt+w
   const handleKeyPress = useCallback(
@@ -24,9 +29,12 @@ export const TabList = ({
         if (event.key == 'w') {
           closeTabs([activeFileId]);
         }
+        if (event.key == 'n') {
+          createFile();
+        }
       }
     },
-    [closeTabs, activeFileId],
+    [createFile, closeTabs, activeFileId],
   );
 
   // Add the global keydown event listener
@@ -43,14 +51,16 @@ export const TabList = ({
   return (
     <div className="vz-tab-list">
       {files &&
-        tabList.map((fileId: FileId) => (
+        tabList.map((tabState: TabState) => (
           <Tab
-            key={fileId}
-            fileId={fileId}
-            isActive={fileId === activeFileId}
+            key={tabState.fileId}
+            fileId={tabState.fileId}
+            isTransient={tabState.isTransient}
+            isActive={tabState.fileId === activeFileId}
             setActiveFileId={setActiveFileId}
+            openTab={openTab}
             closeTabs={closeTabs}
-            fileName={files[fileId].name}
+            fileName={files[tabState.fileId].name}
           />
         ))}
     </div>

package/src/client/TabList/style.scss

@@ -22,6 +22,7 @@
     // Make sure text doesn't wrap within tabs.
     white-space: nowrap;
 
+    // TODO unify with styles in code error overlay dismiss button
     .tab-close {
       margin-left: 5px;
       margin-bottom: 2px;
@@ -45,4 +46,8 @@
   .tab.active {
     background-color: #202e46;
   }
+
+  .tab.transient {
+    font-style: italic;
+  }
 }

package/src/client/VZSettings.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
+import { Username } from '../types';
 
 // const saveTimes = [
 //   { value: 1, label: '1 second' },
@@ -9,18 +10,25 @@ import { ThemeLabel, themes } from './themes';
 //   { value: 30, label: '30 seconds' },
 // ];
 
-export let username = 'Anonymous';
-
 export const VZSettings = ({
   show,
   onClose,
-  setTheme,
   theme,
+  setTheme,
+  username,
+  setUsername,
+
+  enableUsernameField = true,
 }: {
   show: boolean;
   onClose: () => void;
-  setTheme: (theme: ThemeLabel) => void;
   theme: ThemeLabel;
+  setTheme: (theme: ThemeLabel) => void;
+  username: Username;
+  setUsername: (username: Username) => void;
+
+  // Feature flag to enable/disable username field
+  enableUsernameField?: boolean;
 }) => {
   const handleThemeChange = useCallback((event) => {
     const selectedValue = event.target.value;
@@ -44,10 +52,10 @@ export const VZSettings = ({
   // );
 
   const usernameRef = useRef<HTMLInputElement>(null);
-  const handleUsernameChange = () => {
-    const usernameValue = usernameRef.current?.value;
-    username = usernameValue;
-  };
+
+  const handleUsernameChange = useCallback(() => {
+    setUsername(usernameRef.current?.value || '');
+  }, [setUsername]);
 
   return show ? (
     <Modal
@@ -60,18 +68,23 @@ export const VZSettings = ({
         <Modal.Title>Settings</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Username</Form.Label>
-          <Form.Control
-            type="text"
-            ref={usernameRef}
-            onChange={handleUsernameChange}
-            placeholder="Enter username"
-          />
-          <Form.Text className="text-muted">
-            Enter a username to be displayed on your cursor
-          </Form.Text>
-        </Form.Group>
+        {enableUsernameField ? (
+          <Form.Group className="mb-3" controlId="formFork">
+            <Form.Label>Username</Form.Label>
+            <Form.Control
+              type="text"
+              ref={usernameRef}
+              onChange={handleUsernameChange}
+              placeholder="Enter username"
+              value={username}
+            />
+            <Form.Text className="text-muted">
+              Enter a username to be displayed on your
+              cursor
+            </Form.Text>
+          </Form.Group>
+        ) : null}
+
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Theme</Form.Label>