Add orange/blue colours for FileSystemView

sumomomomomo · sumomomomomo · commit ebcb2c9ab656 · 2024-04-02T19:34:05.000+08:00
diff --git a/src/commons/fileSystem/FileSystemActions.ts b/src/commons/fileSystem/FileSystemActions.ts
@@ -10,7 +10,8 @@ import {
   DELETE_ALL_PERSISTENCE_FILES,  DELETE_GITHUB_SAVE_INFO,
   DELETE_PERSISTENCE_FILE, 
   SET_IN_BROWSER_FILE_SYSTEM,
-  UPDATE_GITHUB_SAVE_INFO } from './FileSystemTypes';
+  UPDATE_GITHUB_SAVE_INFO,
+  SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH } from './FileSystemTypes';
 
 export const setInBrowserFileSystem = createAction(
   SET_IN_BROWSER_FILE_SYSTEM,
@@ -52,3 +53,8 @@ export const deleteAllPersistenceFiles = createAction(
   DELETE_ALL_PERSISTENCE_FILES,
   () => ({ payload: {} })
 );
+
+export const setPersistenceFileLastEditByPath = createAction(
+  SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH,
+  (path: string, date: Date) => ({ payload: {path, date}})
+);
diff --git a/src/commons/fileSystem/FileSystemReducer.ts b/src/commons/fileSystem/FileSystemReducer.ts
@@ -9,7 +9,8 @@ import {
   deleteAllGithubSaveInfo,
   deleteAllPersistenceFiles,  deleteGithubSaveInfo,
   deletePersistenceFile,
-  setInBrowserFileSystem } from './FileSystemActions';
+  setInBrowserFileSystem, 
+  setPersistenceFileLastEditByPath} from './FileSystemActions';
 import { FileSystemState } from './FileSystemTypes';
 
 export const FileSystemReducer: Reducer<FileSystemState, SourceActionType> = createReducer(
@@ -57,5 +58,15 @@ export const FileSystemReducer: Reducer<FileSystemState, SourceActionType> = cre
     .addCase(deleteAllPersistenceFiles, (state, action) => {
       state.persistenceFileArray = [];
     })
+    .addCase(setPersistenceFileLastEditByPath, (state, action) => {
+      const filesState = state['persistenceFileArray'];
+      const persistenceFileFindIndex = filesState.findIndex(e => e.path === action.payload.path);
+      if (persistenceFileFindIndex === -1) {
+        return;
+      }
+      const newPersistenceFile = {...filesState[persistenceFileFindIndex], lastEdit: action.payload.date};
+      filesState[persistenceFileFindIndex] = newPersistenceFile;
+      state.persistenceFileArray = filesState;
+    })
   }
 );
diff --git a/src/commons/fileSystem/FileSystemTypes.ts b/src/commons/fileSystem/FileSystemTypes.ts
@@ -10,6 +10,7 @@ export const DELETE_PERSISTENCE_FILE = 'DELETE_PERSISTENCE_FILE';
 export const DELETE_ALL_GITHUB_SAVE_INFO = 'DELETE_ALL_GITHUB_SAVE_INFO';
 export const UPDATE_GITHUB_SAVE_INFO = 'UPDATE_GITHUB_SAVE_INFO';
 export const DELETE_ALL_PERSISTENCE_FILES = 'DELETE_ALL_PERSISTENCE_FILES';
+export const SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH = 'SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH';
 
 export type FileSystemState = {
   inBrowserFileSystem: FSModule | null;
diff --git a/src/commons/fileSystemView/FileSystemView.tsx b/src/commons/fileSystemView/FileSystemView.tsx
@@ -15,10 +15,14 @@ import FileSystemViewPlaceholderNode from './FileSystemViewPlaceholderNode';
 type Props = {
   workspaceLocation: WorkspaceLocation;
   basePath: string;
+  lastEditedFilePath: string;
 };
 
-const FileSystemView: React.FC<Props> = ({ workspaceLocation, basePath }) => {
+const FileSystemView: React.FC<Props> = ({ workspaceLocation, basePath, lastEditedFilePath }) => {
   const fileSystem = useTypedSelector(state => state.fileSystem.inBrowserFileSystem);
+  const persistenceFileArray = useTypedSelector(state => state.fileSystem.persistenceFileArray);
+
+  console.log("lefp", lastEditedFilePath, "pfa", persistenceFileArray);
 
   const [isAddingNewFile, setIsAddingNewFile] = React.useState(false);
   const [isAddingNewDirectory, setIsAddingNewDirectory] = React.useState(false);
@@ -99,6 +103,8 @@ const FileSystemView: React.FC<Props> = ({ workspaceLocation, basePath }) => {
         key={fileSystemViewListKey}
         fileSystem={fileSystem}
         basePath={basePath}
+        lastEditedFilePath={lastEditedFilePath}
+        persistenceFileArray={persistenceFileArray}
         indentationLevel={0}
       />
       {isAddingNewFile && (
diff --git a/src/commons/fileSystemView/FileSystemViewDirectoryNode.tsx b/src/commons/fileSystemView/FileSystemViewDirectoryNode.tsx
@@ -16,11 +16,14 @@ import FileSystemViewFileName from './FileSystemViewFileName';
 import FileSystemViewIndentationPadding from './FileSystemViewIndentationPadding';
 import FileSystemViewList from './FileSystemViewList';
 import FileSystemViewPlaceholderNode from './FileSystemViewPlaceholderNode';
+import { PersistenceFile } from 'src/features/persistence/PersistenceTypes';
 
 type Props = {
   workspaceLocation: WorkspaceLocation;
   fileSystem: FSModule;
   basePath: string;
+  lastEditedFilePath: string;
+  persistenceFileArray: PersistenceFile[];
   directoryName: string;
   indentationLevel: number;
   refreshParentDirectory: () => void;
@@ -30,6 +33,8 @@ const FileSystemViewDirectoryNode: React.FC<Props> = ({
   workspaceLocation,
   fileSystem,
   basePath,
+  lastEditedFilePath,
+  persistenceFileArray,
   directoryName,
   indentationLevel,
   refreshParentDirectory
@@ -196,6 +201,8 @@ const FileSystemViewDirectoryNode: React.FC<Props> = ({
           key={fileSystemViewListKey}
           fileSystem={fileSystem}
           basePath={fullPath}
+          lastEditedFilePath={lastEditedFilePath}
+          persistenceFileArray={persistenceFileArray}
           indentationLevel={indentationLevel + 1}
         />
       )}
diff --git a/src/commons/fileSystemView/FileSystemViewFileNode.tsx b/src/commons/fileSystemView/FileSystemViewFileNode.tsx
@@ -1,24 +1,26 @@
-import { Icon } from '@blueprintjs/core';
+import { Colors, Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { FSModule } from 'browserfs/dist/node/core/FS';
 import path from 'path';
 import React from 'react';
-import { useDispatch, useStore } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { persistenceDeleteFile } from 'src/features/persistence/PersistenceActions';
 import classes from 'src/styles/FileSystemView.module.scss';
 
-import { OverallState } from '../application/ApplicationTypes';
 import { showSimpleConfirmDialog } from '../utils/DialogHelper';
 import { addEditorTab, removeEditorTabForFile } from '../workspace/WorkspaceActions';
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 import FileSystemViewContextMenu from './FileSystemViewContextMenu';
 import FileSystemViewFileName from './FileSystemViewFileName';
 import FileSystemViewIndentationPadding from './FileSystemViewIndentationPadding';
+import { PersistenceFile } from 'src/features/persistence/PersistenceTypes';
 
 type Props = {
   workspaceLocation: WorkspaceLocation;
   fileSystem: FSModule;
   basePath: string;
+  lastEditedFilePath: string;
+  persistenceFileArray: PersistenceFile[];
   fileName: string;
   indentationLevel: number;
   refreshDirectory: () => void;
@@ -28,13 +30,34 @@ const FileSystemViewFileNode: React.FC<Props> = ({
   workspaceLocation,
   fileSystem,
   basePath,
+  lastEditedFilePath,
+  persistenceFileArray,
   fileName,
   indentationLevel,
   refreshDirectory
 }) => {
+  const [currColor, setCurrColor] = React.useState<string | undefined>(undefined);
+
+  React.useEffect(() => {
+    const myFileMetadata = persistenceFileArray.filter(e => e.path === basePath+"/"+fileName)?.at(0);
+    const checkColor = (myFileMetadata: PersistenceFile | undefined) =>
+    myFileMetadata
+      ? myFileMetadata.lastSaved
+        ? myFileMetadata.lastEdit
+          ? myFileMetadata.lastEdit > myFileMetadata.lastSaved
+            ? Colors.ORANGE4
+            : Colors.BLUE4
+          : Colors.BLUE4
+        : Colors.BLUE4
+      : undefined;
+    setCurrColor(checkColor(myFileMetadata));
+  }, [lastEditedFilePath]);
+  
+
   const [isEditing, setIsEditing] = React.useState(false);
   const dispatch = useDispatch();
-  const store = useStore<OverallState>();
+  // const store = useStore<OverallState>();
+
 
   const fullPath = path.join(basePath, fileName);
 
@@ -47,12 +70,12 @@ const FileSystemViewFileNode: React.FC<Props> = ({
         throw new Error('File contents are undefined.');
       }
       dispatch(addEditorTab(workspaceLocation, fullPath, fileContents));
-      const idx = store.getState().workspaces['playground'].activeEditorTabIndex || 0;
-      const repoName = store.getState().playground.repoName || '';
-      const editorFilePath = store.getState().workspaces['playground'].editorTabs[idx].filePath || '';
-      console.log(repoName);
-      console.log(editorFilePath);
-      console.log(store.getState().workspaces['playground'].editorTabs);
+      // const idx = store.getState().workspaces['playground'].activeEditorTabIndex || 0;
+      // const repoName = store.getState().playground.repoName || '';
+      // const editorFilePath = store.getState().workspaces['playground'].editorTabs[idx].filePath || '';
+      // console.log(repoName);
+      // console.log(editorFilePath);
+      // console.log(store.getState().workspaces['playground'].editorTabs);
     });
   };
 
@@ -103,7 +126,10 @@ const FileSystemViewFileNode: React.FC<Props> = ({
     >
       <div className={classes['file-system-view-node-container']} onClick={onClick}>
         <FileSystemViewIndentationPadding indentationLevel={indentationLevel} />
-        <Icon icon={IconNames.DOCUMENT} />
+        <Icon 
+          icon={IconNames.DOCUMENT} 
+          style={{color: currColor}}
+        />
         <FileSystemViewFileName
           workspaceLocation={workspaceLocation}
           fileSystem={fileSystem}
diff --git a/src/commons/fileSystemView/FileSystemViewList.tsx b/src/commons/fileSystemView/FileSystemViewList.tsx
@@ -8,11 +8,14 @@ import Delay from '../delay/Delay';
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 import FileSystemViewDirectoryNode from './FileSystemViewDirectoryNode';
 import FileSystemViewFileNode from './FileSystemViewFileNode';
+import { PersistenceFile } from 'src/features/persistence/PersistenceTypes';
 
 type Props = {
   workspaceLocation: WorkspaceLocation;
   fileSystem: FSModule;
   basePath: string;
+  lastEditedFilePath: string;
+  persistenceFileArray: PersistenceFile[];
   indentationLevel: number;
 };
 
@@ -22,6 +25,8 @@ const FileSystemViewList: React.FC<Props> = ({
   workspaceLocation,
   fileSystem,
   basePath,
+  lastEditedFilePath,
+  persistenceFileArray,
   indentationLevel
 }) => {
   const [dirNames, setDirNames] = React.useState<string[] | undefined>(undefined);
@@ -88,6 +93,8 @@ const FileSystemViewList: React.FC<Props> = ({
             key={dirName}
             fileSystem={fileSystem}
             basePath={basePath}
+            lastEditedFilePath={lastEditedFilePath}
+            persistenceFileArray={persistenceFileArray}
             directoryName={dirName}
             indentationLevel={indentationLevel}
             refreshParentDirectory={readDirectory}
@@ -101,6 +108,8 @@ const FileSystemViewList: React.FC<Props> = ({
             key={fileName}
             fileSystem={fileSystem}
             basePath={basePath}
+            lastEditedFilePath={lastEditedFilePath}
+            persistenceFileArray={persistenceFileArray}
             fileName={fileName}
             indentationLevel={indentationLevel}
             refreshDirectory={readDirectory}
diff --git a/src/commons/sagas/PersistenceSaga.tsx b/src/commons/sagas/PersistenceSaga.tsx
@@ -36,6 +36,7 @@ import {
 } from '../utils/notifications/NotificationsHelper';
 import { AsyncReturnType } from '../utils/TypeHelper';
 import { safeTakeEvery as takeEvery, safeTakeLatest as takeLatest } from './SafeEffects';
+import { WORKSPACE_BASE_PATHS } from 'src/pages/fileSystem/createInBrowserFileSystem';
 
 const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];
 const SCOPES =
@@ -179,7 +180,7 @@ export function* persistenceSaga(): SagaIterator {
         yield call(console.log, test);
 
         // refresh needed
-        yield call(store.dispatch, actions.removeEditorTabsForDirectory("playground", "/")); // deletes all active tabs
+        yield call(store.dispatch, actions.removeEditorTabsForDirectory("playground", WORKSPACE_BASE_PATHS["playground"])); // TODO hardcoded
         // TODO find a file to open instead of deleting all active tabs?
         // TODO without modifying WorkspaceReducer in one function this would cause errors - called by onChange of Playground.tsx?
         // TODO change behaviour of WorkspaceReducer to not create program.js every time folder mode changes with 0 tabs existing?
diff --git a/src/features/persistence/PersistenceTypes.ts b/src/features/persistence/PersistenceTypes.ts
@@ -18,5 +18,6 @@ export type PersistenceFile = {
   name: string;
   path?: string; // only for persistenceFileArray
   lastSaved?: Date;
+  lastEdit?: Date;
   isFolder?: boolean;
 };
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
@@ -138,6 +138,7 @@ import {
   makeSubstVisualizerTabFrom,
   mobileOnlyTabIds
 } from './PlaygroundTabs';
+import { setPersistenceFileLastEditByPath } from 'src/commons/fileSystem/FileSystemActions';
 
 export type PlaygroundProps = {
   isSicpEditor?: boolean;
@@ -269,7 +270,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     state => state.playground
   );
   const githubSaveInfo = getGithubSaveInfo();
-  console.log(githubSaveInfo);
+  //console.log(githubSaveInfo);
   const {
     sourceChapter: courseSourceChapter,
     sourceVariant: courseSourceVariant,
@@ -408,15 +409,21 @@ const Playground: React.FC<PlaygroundProps> = props => {
     [isGreen]
   );
 
-  const onEditorValueChange = React.useCallback(
-    (editorTabIndex: number, newEditorValue: string) => {
-      setLastEdit(new Date());
-      // TODO change editor tab label to reflect path of opened file?
-      
-      handleEditorValueChange(editorTabIndex, newEditorValue);
-    },
-    [handleEditorValueChange]
-  );
+  const [lastEditedFilePath, setLastEditedFilePath] = useState<string>("");
+
+  const onEditorValueChange = (editorTabIndex: number, newEditorValue: string) => {
+    const filePath = editorTabs[editorTabIndex]?.filePath;
+    const editDate = new Date();
+    if (filePath) {
+      //console.log(editorTabs);
+      console.log("dispatched " + filePath);
+      dispatch(setPersistenceFileLastEditByPath(filePath, editDate));
+      setLastEditedFilePath(filePath);
+    }
+    setLastEdit(editDate);
+    // TODO change editor tab label to reflect path of opened file?
+    handleEditorValueChange(editorTabIndex, newEditorValue);
+  };
 
   // const onChangeTabs = useCallback(
   //   (
@@ -993,6 +1000,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
                   <FileSystemView
                     workspaceLocation="playground"
                     basePath={WORKSPACE_BASE_PATHS[workspaceLocation]}
+                    lastEditedFilePath={lastEditedFilePath}
                   />
                 ),
                 iconName: IconNames.FOLDER_CLOSE,
@@ -1002,7 +1010,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
           : [])
       ]
     };
-  }, [isFolderModeEnabled, workspaceLocation]);
+  }, [isFolderModeEnabled, workspaceLocation, lastEditedFilePath]);
 
   const workspaceProps: WorkspaceProps = {
     controlBarProps: {
