vzcode 0.23.0 → 0.24.0

package/src/client/PresenceNotifications/index.tsx

@@ -0,0 +1,145 @@
+import { useState, useEffect, useRef } from 'react';
+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;
+  join: boolean;
+  presenceId: PresenceId;
+};
+
+export const PresenceNotifications = ({
+  docPresence,
+}: {
+  docPresence?: any;
+}) => {
+  const [presenceNotifications, setPresenceNotifications] =
+    useState<Array<PresenceNotification>>([]);
+
+  // const [presenceIds, setPresenceIds] = useState<
+  //   Array<any>
+  // >([]);
+  const alreadyJoinedPresenceIds = useRef<Set<PresenceId>>(
+    new Set(),
+  );
+
+  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 join = update !== null;
+
+        console.log('join', join);
+
+        // Figure out if we have ever seen this user before.
+
+        // if (join && docPresence.remotePresences[presenceId] === undefined){
+        if (join) {
+          if (
+            !alreadyJoinedPresenceIds.current.has(
+              presenceId,
+            )
+          ) {
+            alreadyJoinedPresenceIds.current.add(
+              presenceId,
+            );
+            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(() => {
+            setPresenceNotifications((prev) =>
+              prev.filter(
+                (notification) =>
+                  notification.presenceId !== presenceId &&
+                  notification.join !== join,
+              ),
+            );
+          }, 5000);
+        }
+      });
+    }
+  }, [docPresence]);
+
+  // console.log(
+  //   'presenceNotifications',
+  //   presenceNotifications,
+  // );
+  // console.log(
+  //   'presenceIds',
+  //   presenceIds,
+  // );
+
+  return presenceNotifications.length > 0 ? (
+    <div className="vz-notification">
+      {presenceNotifications.map((notification, i) => {
+        const { user, join } = notification;
+        return (
+          <div key={i} className="vz-notification-item">
+            {join
+              ? `${user} has joined the session.`
+              : `${user} has left the session.`}
+          </div>
+        );
+      })}
+    </div>
+  ) : null;
+};

package/src/client/PresenceNotifications/style.scss

@@ -0,0 +1,17 @@
+.vz-notification {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  bottom: 20px;
+  right: 20px;
+
+  color: rgb(154, 160, 172);
+  padding: 15px;
+
+  .vz-notification-item {
+    background-color: rgb(54, 65, 89);
+    padding: 5px;
+    border-radius: 5px;
+  }
+}

package/src/client/PrettierErrorOverlay/index.tsx

@@ -0,0 +1,9 @@
+import './style.scss';
+
+export const PrettierErrorOverlay = ({ prettierError }) => {
+  return prettierError !== null ? (
+    <pre className="prettier-error-overlay">
+      {prettierError}
+    </pre>
+  ) : null;
+};

package/src/client/PrettierErrorOverlay/style.scss

@@ -0,0 +1,9 @@
+.prettier-error-overlay {
+  color: rgb(255, 53, 53);
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}

package/src/client/Settings.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
 
@@ -9,6 +9,8 @@ import { ThemeLabel, themes } from './themes';
 //   { value: 30, label: '30 seconds' },
 // ];
 
+export let username = 'Anonymous';
+
 export const Settings = ({
   show,
   onClose,
@@ -41,6 +43,12 @@ export const Settings = ({
   //   [],
   // );
 
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const handleUsernameChange = () => {
+    const usernameValue = usernameRef.current?.value;
+    username = usernameValue;
+  };
+
   return show ? (
     <Modal
       className="vz-settings"
@@ -56,6 +64,8 @@ export const Settings = ({
           <Form.Label>Username</Form.Label>
           <Form.Control
             type="text"
+            ref={usernameRef}
+            onChange={handleUsernameChange}
             placeholder="Enter username"
           />
           <Form.Text className="text-muted">

package/src/client/Sidebar/FileListing.tsx

@@ -46,7 +46,6 @@ export const FileListing = ({
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
       isDir={false}
-      name={name}
     >
       {name}
     </Item>

package/src/client/Sidebar/Item.tsx

@@ -42,9 +42,13 @@ export const Item = ({
   const [showModal, setShowModal] = useState(false);
 
   // Function to open the delete file confirmation modal
-  const handleModalOpen = useCallback(() => {
-    setShowModal(true);
-  }, []);
+  const handleModalOpen = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(true);
+    },
+    [],
+  );
 
   // Function to close the modal
   const handleModalClose = useCallback(() => {
@@ -52,10 +56,14 @@ export const Item = ({
   }, []);
 
   // Function to handle confirmation on modal
-  const handleConfirmModal = useCallback(() => {
-    setShowModal(false);
-    handleDeleteClick();
-  }, [handleDeleteClick]);
+  const handleConfirmModal = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(false);
+      handleDeleteClick();
+    },
+    [handleDeleteClick],
+  );
 
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
@@ -98,7 +106,8 @@ export const Item = ({
           <i
             className="bx bxs-edit utilities"
             style={{ color: '#abdafb' }}
-            onClick={() => {
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
               setIsRenaming(!isRenaming);
               setRenameValue(isDir ? name : children);
             }}

package/src/client/reducer.ts

@@ -0,0 +1,122 @@
+import { FileId } from '../types';
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    // TODO phase this out
+    case 'set_tab_list': {
+      return { ...state, tabList: action.tabList };
+    }
+    case 'set_active_fileId': {
+      return {
+        ...state,
+        activeFileId: action.activeFileId,
+      };
+    }
+    case 'open_tab': {
+      if (!state.tabList.includes(action.fileId)) {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+          tabList: [...state.tabList, action.fileId],
+        };
+      } else {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+        };
+      }
+    }
+    case 'close_tab': {
+      const i = state.tabList.findIndex(
+        (fileId) => fileId === action.fileIdToRemove,
+      );
+      if (i != -1) {
+        const newTabList = [
+          ...state.tabList.slice(0, i),
+          ...state.tabList.slice(i + 1),
+        ];
+        if (state.activeFileId === action.fileIdToRemove) {
+          // set the new active file to the next tab over,
+          if (newTabList.length > 0) {
+            return {
+              ...state,
+              activeFileId:
+                i === 0 ? newTabList[i] : newTabList[i - 1],
+              tabList: newTabList,
+            };
+          } else {
+            // or clear out the active file
+            // if we've closed the last tab.
+            return {
+              ...state,
+              activeFileId: null,
+              tabList: newTabList,
+            };
+          }
+        }
+        return {
+          ...state,
+          tabList: newTabList,
+        };
+      }
+      return {
+        ...state,
+      };
+    }
+    case 'multi_close_tab': {
+      let newTabList = [...state.tabList]; // Create a copy of the tabList array.
+      let newActiveFileId: FileId = state.activeFileId;
+      action.idsToDelete.forEach((id) => {
+        const i = newTabList.findIndex(
+          (fileId) => fileId === id,
+        );
+        if (i !== -1) {
+          // Remove the tab from the tab list.
+          newTabList = [
+            ...newTabList.slice(0, i),
+            ...newTabList.slice(i + 1),
+          ];
+          // If we are closing the active file,
+          if (newActiveFileId === id) {
+            // set the new active file to the next tab over,
+            if (newTabList.length > 0) {
+              newActiveFileId =
+                i === 0 ? newTabList[i] : newTabList[i - 1];
+            } else {
+              // or clear out the active file if we've closed the last tab.
+              newActiveFileId = null;
+            }
+          }
+        }
+      });
+      return {
+        ...state,
+        tabList: newTabList,
+        activeFileId: newActiveFileId,
+      };
+    }
+    // TODO eventually
+    // case 'init_sharedb': {
+    //   return {
+    //     ...state,
+    //     submitOperation: action.submitOperation
+    //   }
+    // }
+    // case 'delete_file': {
+    // case 'delete_directory': {
+    // case 'create_file': {
+    //           state.submitOperation((document) => ({
+    //             ...document,
+    //             files: {
+    //               ...document.files,
+    //               [randomId()]: { name:action.name, text: '' },
+    //             },
+    //           }))
+    //           return state;
+
+    //     }
+    // case 'rename_file': {
+    // ...
+  }
+  throw Error('Unknown action: ' + action.type);
+};

package/src/client/style.scss

@@ -45,6 +45,9 @@ body,
   .left,
   .right {
     display: flex;
+
+    /* To suport PrettierErrorOverlay, which is position: absolute */
+    position: relative;
   }
 
   .right {

package/src/client/usePrettier/index.ts

@@ -4,7 +4,7 @@ import {
   ShareDBDoc,
   VZCodeContent,
 } from '../../types';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoPrettierDebounceTimeMS = 1200;
@@ -31,6 +31,14 @@ export const usePrettier = (
   // since the last Prettier run.
   const dirtyFiles: Set<FileId> = new Set<FileId>();
 
+  // State to hold the error from Prettier
+  // `null` means no errors
+  // If this is a string, it's the
+  // error message from Prettier.
+  const [prettierError, setPrettierError] = useState<
+    string | null
+  >(null);
+
   // A ref to keep track of whether an op is being applied.
   // This is used to prevent Prettier from running
   // when the op is coming from Prettier itself.
@@ -46,9 +54,18 @@ export const usePrettier = (
     const handleMessage = (event) => {
       const { fileId, error, fileTextPrettified } =
         event.data;
+
+      // Handle syntax errors
       if (error) {
-        console.log(error);
+        // If there's an error, set the error state
+        setPrettierError(error);
+
+        // Return early as there is no text change to apply.
         return;
+      } else {
+        // Make sure the error overlay goes away
+        // when Prettier runs successfully with no errors.
+        setPrettierError(null);
       }
 
       isApplyingOpRef.current = true;
@@ -159,19 +176,20 @@ export const usePrettier = (
         } else {
           // console.log('ignoring op from remote', op, isLocal);
         }
-
-        // In the event that the component unmounts,
-        return () => {
-          // Remove the event listener
-          prettierWorker.removeEventListener(
-            'message',
-            handleMessage,
-          );
-
-          // Clear the timeout
-          clearTimeout(debounceTimeout);
-        };
       },
     );
+
+    // In the event that the component unmounts,
+    return () => {
+      // Remove the event listener
+      prettierWorker.removeEventListener(
+        'message',
+        handleMessage,
+      );
+
+      // Clear the timeout
+      clearTimeout(debounceTimeout);
+    };
   }, [shareDBDoc]);
+  return { prettierError }; // Return the errors for use in other files
 };

package/src/client/usePrettier/worker.ts

@@ -90,7 +90,7 @@ onmessage = async ({
   } catch (error) {
     postMessage({
       fileId,
-      error,
+      error: error.toString(),
     });
   }
 };

package/src/client/useTabsState.ts

@@ -11,6 +11,7 @@ export const useTabsState = (
   // Called when a tab is closed.
   const closeTab = useCallback(
     (fileIdToRemove: FileId) => {
+      let newActiveFileId: FileId = activeFileId;
       const i = tabList.findIndex(
         (fileId) => fileId === fileIdToRemove,
       );
@@ -29,16 +30,52 @@ export const useTabsState = (
         if (activeFileId === fileIdToRemove) {
           // set the new active file to the next tab over,
           if (newTabList.length > 0) {
-            setActiveFileId(
-              i === 0 ? newTabList[i] : newTabList[i - 1],
-            );
+            newActiveFileId =
+              i === 0 ? newTabList[i] : newTabList[i - 1];
           } else {
             // or clear out the active file
             // if we've closed the last tab.
-            setActiveFileId(null);
+            newActiveFileId = null;
           }
         }
       }
+      setActiveFileId(newActiveFileId);
+    },
+    [tabList, activeFileId],
+  );
+
+  //When closing multiple tabs use this function over CloseTab()
+  const multiCloseTab = useCallback(
+    (idsToDelete: Array<FileId>) => {
+      let newTabList = [...tabList]; // Create a copy of the tabList array.
+      let newActiveFileId: FileId = activeFileId;
+      idsToDelete.forEach((id) => {
+        const i = newTabList.findIndex(
+          (fileId) => fileId === id,
+        );
+        if (i !== -1) {
+          // Remove the tab from the tab list.
+          newTabList = [
+            ...newTabList.slice(0, i),
+            ...newTabList.slice(i + 1),
+          ];
+
+          // If we are closing the active file,
+          if (newActiveFileId === id) {
+            // set the new active file to the next tab over,
+            if (newTabList.length > 0) {
+              newActiveFileId =
+                i === 0 ? newTabList[i] : newTabList[i - 1];
+            } else {
+              // or clear out the active file if we've closed the last tab.
+              newActiveFileId = null;
+            }
+          }
+        }
+      });
+      //Run setStates after doing multiple changes to the two variables. Will properly render tabList and activeFileID.
+      setActiveFileId(newActiveFileId);
+      setTabList(newTabList);
     },
     [tabList, activeFileId],
   );
@@ -54,5 +91,5 @@ export const useTabsState = (
     [tabList],
   );
 
-  return { tabList, closeTab, openTab };
+  return { tabList, closeTab, openTab, multiCloseTab };
 };