fixed fileview colour to update on saving and fixed github opening folders bug where repeatedly opening the same folder would lead to errors

Author: linedoestrolling

src/commons/application/ApplicationTypes.ts

@@ -548,7 +548,9 @@ export const createDefaultStoriesEnv = (
 
 export const defaultFileSystem: FileSystemState = {
   inBrowserFileSystem: null,
-  persistenceFileArray: []
+  persistenceFileArray: [],
+  lastEditedFilePath: '',
+  refreshFileViewKey: 0
 };
 
 export const defaultSideContent: SideContentState = {

src/commons/fileSystem/FileSystemActions.ts

@@ -11,7 +11,9 @@ import {
   DELETE_PERSISTENCE_FILE, 
   SET_IN_BROWSER_FILE_SYSTEM,
   UPDATE_GITHUB_SAVE_INFO,
-  SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH } from './FileSystemTypes';
+  SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH, 
+  UPDATE_LAST_EDITED_FILE_PATH,
+  UPDATE_REFRESH_FILE_VIEW_KEY} from './FileSystemTypes';
 
 export const setInBrowserFileSystem = createAction(
   SET_IN_BROWSER_FILE_SYSTEM,
@@ -56,5 +58,15 @@ export const deleteAllPersistenceFiles = createAction(
 
 export const setPersistenceFileLastEditByPath = createAction(
   SET_PERSISTENCE_FILE_LAST_EDIT_BY_PATH,
-  (path: string, date: Date) => ({ payload: {path, date}})
+  (path: string, date: Date) => ({ payload: {path, date} })
+);
+
+export const updateLastEditedFilePath = createAction(
+  UPDATE_LAST_EDITED_FILE_PATH,
+  ( lastEditedFilePath: string) => ({ payload: {lastEditedFilePath} })
+);
+
+export const updateRefreshFileViewKey = createAction(
+  UPDATE_REFRESH_FILE_VIEW_KEY,
+  () => ({ payload: {} })
 );

src/commons/fileSystem/FileSystemReducer.ts

@@ -11,6 +11,8 @@ import {
   deletePersistenceFile,
   setInBrowserFileSystem, 
   setPersistenceFileLastEditByPath,
+  updateLastEditedFilePath,
+  updateRefreshFileViewKey,
   } from './FileSystemActions';
 import { FileSystemState } from './FileSystemTypes';
 
@@ -88,5 +90,11 @@ export const FileSystemReducer: Reducer<FileSystemState, SourceActionType> = cre
       filesState[persistenceFileFindIndex] = newPersistenceFile;
       state.persistenceFileArray = filesState;
     })
+    .addCase(updateLastEditedFilePath, (state, action) => {
+      state.lastEditedFilePath = action.payload.lastEditedFilePath;
+    })
+    .addCase(updateRefreshFileViewKey, (state, action) => {
+      state.refreshFileViewKey = (state.refreshFileViewKey + 1) % 2;
+    })
   }
 );

src/commons/fileSystem/FileSystemTypes.ts

@@ -10,8 +10,12 @@ 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 const UPDATE_LAST_EDITED_FILE_PATH = 'UPDATE_LAST_EDITED_FILE_PATH';
+export const UPDATE_REFRESH_FILE_VIEW_KEY = 'UPDATE_REFRESH_FILE_VIEW_KEY';
 
 export type FileSystemState = {
   inBrowserFileSystem: FSModule | null;
   persistenceFileArray: PersistenceFile[];
+  lastEditedFilePath: string;
+  refreshFileViewKey: integer
 };

src/commons/fileSystemView/FileSystemViewList.tsx

@@ -74,8 +74,6 @@ const FileSystemViewList: React.FC<Props> = ({
     });
   };
 
-  refreshFileView = readDirectory;
-
   React.useEffect(readDirectory, [fileSystem, basePath]);
 
   if (!fileNames || !dirNames) {

src/commons/sagas/GitHubPersistenceSaga.ts

@@ -119,7 +119,7 @@ function* githubSaveFile(): any {
   const githubLoginId = authUser.data.login;
   const githubSaveInfo = getGithubSaveInfo();
   const repoName = githubSaveInfo.repoName;
-  const filePath = githubSaveInfo.filePath;
+  const filePath = githubSaveInfo.filePath || '';
   const githubEmail = authUser.data.email;
   const githubName = authUser.data.name;
   const commitMessage = 'Changes made from Source Academy';
@@ -138,12 +138,15 @@ function* githubSaveFile(): any {
     octokit,
     githubLoginId,
     repoName || '',
-    filePath || '',
+    filePath,
     githubEmail,
     githubName,
     commitMessage,
     content
   );
+
+  // forces lasteditedfilepath in filesystem to be updated which causes the colors to be updated
+  store.dispatch(actions.updateLastEditedFilePath(''));
 }
 
 function* githubSaveFileAs(): any {
@@ -195,6 +198,7 @@ function* githubSaveFileAs(): any {
 
     yield call(promisifiedFileExplorer);
   }
+  
 }
 
 function* githubSaveAll(): any {
@@ -237,6 +241,8 @@ function* githubSaveAll(): any {
       githubName,
       { commitMessage: commitMessage, files: modifiedcurrFiles});
 
+  // forces lasteditedfilepath in filesystem to be updated which causes the colors to be updated
+  store.dispatch(actions.updateLastEditedFilePath(''));
 }
 
 export default GitHubPersistenceSaga;

src/features/github/GitHubUtils.tsx

@@ -14,6 +14,8 @@ import {
   showWarningMessage
 } from '../../commons/utils/notifications/NotificationsHelper';
 import { store } from '../../pages/createStore';
+import { WORKSPACE_BASE_PATHS } from 'src/pages/fileSystem/createInBrowserFileSystem';
+import { updateRefreshFileViewKey } from 'src/commons/fileSystem/FileSystemActions';
 
 /**
  * Exchanges the Access Code with the back-end to receive an Auth-Token
@@ -234,6 +236,9 @@ export async function openFileInEditor(
     ))
     showSuccessMessage('Successfully loaded file!', 1000);
   }
+
+  //refreshes editor tabs
+  store.dispatch(actions.removeEditorTabsForDirectory("playground", WORKSPACE_BASE_PATHS["playground"])); // TODO hardcoded
 }
 
 export async function openFolderInFolderMode(
@@ -290,9 +295,12 @@ export async function openFolderInFolderMode(
   const readFile = async (files: Array<string>) => {
     console.log(files);
     console.log(filePath);
-    rmFilesInDirRecursively(fileSystem, "/playground");
     let promise = Promise.resolve();
+    console.log("removing files");
+    await rmFilesInDirRecursively(fileSystem, "/playground");
+    console.log("files removed");
     type GetContentResponse = GetResponseTypeFromEndpointMethod<typeof octokit.repos.getContent>;
+    console.log("starting to add files");
     files.forEach((file: string) => {
       promise = promise.then(async () => {
         let results = {} as GetContentResponse;
@@ -311,7 +319,7 @@ export async function openFolderInFolderMode(
           if (content) {
             const fileContent = Buffer.from(content, 'base64').toString();
             console.log(file);
-            writeFileRecursively(fileSystem, "/playground/" + file, fileContent);
+            await writeFileRecursively(fileSystem, "/playground/" + file, fileContent);
             store.dispatch(actions.addGithubSaveInfo(
               {
                 repoName: repoName,
@@ -327,13 +335,19 @@ export async function openFolderInFolderMode(
     })
     promise.then(() => {
       store.dispatch(actions.playgroundUpdateRepoName(repoName));
-      console.log("promises fulfilled"); 
+      console.log("promises fulfilled");
+      // store.dispatch(actions.setFolderMode('playground', true));
+      store.dispatch(updateRefreshFileViewKey());
+      console.log("refreshed");
       refreshFileView();
       showSuccessMessage('Successfully loaded file!', 1000);
     })
   }
 
   readFile(files);
+
+  //refreshes editor tabs
+  store.dispatch(actions.removeEditorTabsForDirectory("playground", WORKSPACE_BASE_PATHS["playground"])); // TODO hardcoded
 }
 
 export async function performOverwritingSave(

src/pages/playground/Playground.tsx

@@ -138,7 +138,7 @@ import {
   makeSubstVisualizerTabFrom,
   mobileOnlyTabIds
 } from './PlaygroundTabs';
-import { setPersistenceFileLastEditByPath } from 'src/commons/fileSystem/FileSystemActions';
+import { setPersistenceFileLastEditByPath, updateLastEditedFilePath } from 'src/commons/fileSystem/FileSystemActions';
 
 export type PlaygroundProps = {
   isSicpEditor?: boolean;
@@ -409,7 +409,8 @@ const Playground: React.FC<PlaygroundProps> = props => {
     [isGreen]
   );
 
-  const [lastEditedFilePath, setLastEditedFilePath] = useState<string>("");
+  const lastEditedFilePath = useTypedSelector(state => state.fileSystem.lastEditedFilePath);
+  const refreshFileViewKey = useTypedSelector(state => state.fileSystem.refreshFileViewKey);
 
   const onEditorValueChange = (editorTabIndex: number, newEditorValue: string) => {
     const filePath = editorTabs[editorTabIndex]?.filePath;
@@ -418,7 +419,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
       //console.log(editorTabs);
       console.log("dispatched " + filePath);
       dispatch(setPersistenceFileLastEditByPath(filePath, editDate));
-      setLastEditedFilePath(filePath);
+      dispatch(updateLastEditedFilePath(filePath));
     }
     setLastEdit(editDate);
     // TODO change editor tab label to reflect path of opened file?
@@ -1005,6 +1006,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
                     basePath={WORKSPACE_BASE_PATHS[workspaceLocation]}
                     lastEditedFilePath={lastEditedFilePath}
                     isContextMenuDisabled={isContextMenuDisabled}
+                    key={refreshFileViewKey}
                   />
                 ),
                 iconName: IconNames.FOLDER_CLOSE,
@@ -1014,7 +1016,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
           : [])
       ]
     };
-  }, [isFolderModeEnabled, workspaceLocation, lastEditedFilePath, isContextMenuDisabled]);
+  }, [isFolderModeEnabled, workspaceLocation, lastEditedFilePath, isContextMenuDisabled, refreshFileViewKey]);
 
   const workspaceProps: WorkspaceProps = {
     controlBarProps: {