Make folder name appear on the bar

Author: sumomomomomo

src/commons/controlBar/ControlBarGoogleDriveButtons.tsx

@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
-import { PersistenceFile, PersistenceState } from '../../features/persistence/PersistenceTypes';
+import { PersistenceObject, PersistenceState } from '../../features/persistence/PersistenceTypes';
 import ControlButton from '../ControlButton';
 import { useResponsive } from '../utils/Hooks';
 
@@ -17,7 +17,7 @@ type Props = {
   isFolderModeEnabled: boolean;
   loggedInAs?: string;
   accessToken?: string;
-  currentFile?: PersistenceFile;
+  currentObject?: PersistenceObject;
   isDirty?: boolean;
   onClickOpen?: () => any;
   onClickSave?: () => any;
@@ -30,14 +30,14 @@ type Props = {
 
 export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
   const { isMobileBreakpoint } = useResponsive();
-  const state: PersistenceState = props.currentFile
+  const state: PersistenceState = props.currentObject
     ? props.isDirty
       ? 'DIRTY'
       : 'SAVED'
     : 'INACTIVE';
   const mainButton = (
     <ControlButton
-      label={(props.currentFile && props.currentFile.name) || 'Google Drive'}
+      label={(props.currentObject && props.currentObject.name) || 'Google Drive'}
       icon={IconNames.CLOUD}
       options={{ intent: stateToIntent[state] }}
       //isDisabled={props.isFolderModeEnabled}

src/commons/sagas/PersistenceSaga.tsx

@@ -10,7 +10,7 @@ import {
   PERSISTENCE_SAVE_ALL,
   PERSISTENCE_SAVE_FILE,
   PERSISTENCE_SAVE_FILE_AS,
-  PersistenceFile
+  PersistenceObject
 } from '../../features/persistence/PersistenceTypes';
 import { store } from '../../pages/createStore';
 import { OverallState } from '../application/ApplicationTypes';
@@ -142,6 +142,8 @@ export function* persistenceSaga(): SagaIterator {
         }
         yield call(console.log, "there is a filesystem");
 
+        yield put(actions.playgroundUpdatePersistenceFolder({ id, name, lastSaved: new Date() }));
+
         // rmdir everything TODO replace everything hardcoded with playground?
         yield call(rmFilesInDirRecursively, fileSystem, "/playground");
 
@@ -171,6 +173,8 @@ export function* persistenceSaga(): SagaIterator {
 
         yield call(showSuccessMessage, `Loaded folder ${name}.`, 1000);
 
+        // TODO the Google Drive button isn't blue even after loading stuff
+
         return;
       }
 
@@ -196,7 +200,7 @@ export function* persistenceSaga(): SagaIterator {
       if (meta && meta.appProperties) {
         yield put(
           actions.chapterSelect(
-            parseInt(meta.appProperties.chapter || '4', 10) as Chapter, // how does this work??
+            parseInt(meta.appProperties.chapter || '4', 10) as Chapter,
             meta.appProperties.variant || Variant.DEFAULT,
             'playground'
           )
@@ -251,9 +255,9 @@ export function* persistenceSaga(): SagaIterator {
         }
       );
 
-      const saveToDir: PersistenceFile = pickedDir.picked
-        ? pickedDir
-        : { id: ROOT_ID, name: 'My Drive' };
+      const saveToDir: PersistenceObject = pickedDir.picked // TODO is there a better way?
+        ? {...pickedDir}
+        : { id: ROOT_ID, name: 'My Drive'};
 
       const pickedFile: PickFileResult = yield call(
         pickFile,
@@ -597,7 +601,7 @@ function createFile(
   mimeType: string,
   contents: string = '',
   config: IPlaygroundConfig | {}
-): Promise<PersistenceFile> {
+): Promise<PersistenceObject> {
   const name = filename;
   const meta = {
     name,
@@ -621,7 +625,7 @@ function createFile(
       headers,
       body
     })
-    .then(({ result }) => ({ id: result.id, name: result.name }));
+    .then(({ result }) => ({ id: result.id, name: result.name, isFile: true }));
 }
 
 function updateFile(

src/commons/sagas/__tests__/PersistenceSaga.ts

@@ -189,7 +189,7 @@ test('PERSISTENCE_SAVE_FILE saves', () => {
         }
       }
     })
-    .dispatch(actions.persistenceSaveFile({ id: FILE_ID, name: FILE_NAME }))
+    .dispatch(actions.persistenceSaveFile({ id: FILE_ID, name: FILE_NAME}))
     .provide({
       call(effect, next) {
         switch (effect.fn.name) {

src/features/persistence/PersistenceTypes.ts

@@ -6,8 +6,9 @@ export const PERSISTENCE_INITIALISE = 'PERSISTENCE_INITIALISE';
 
 export type PersistenceState = 'INACTIVE' | 'SAVED' | 'DIRTY';
 
-export type PersistenceFile = {
+export type PersistenceObject = {
   id: string;
   name: string;
   lastSaved?: Date;
-};
+  isFolder?: boolean;
+};

src/features/playground/PlaygroundActions.ts

@@ -1,13 +1,14 @@
 import { createAction } from '@reduxjs/toolkit';
 import { SALanguage } from 'src/commons/application/ApplicationTypes';
 
-import { PersistenceFile } from '../persistence/PersistenceTypes';
+import { PersistenceObject } from '../persistence/PersistenceTypes';
 import {
   CHANGE_QUERY_STRING,
   GENERATE_LZ_STRING,
   PLAYGROUND_UPDATE_GITHUB_SAVE_INFO,
   PLAYGROUND_UPDATE_LANGUAGE_CONFIG,
   PLAYGROUND_UPDATE_PERSISTENCE_FILE,
+  PLAYGROUND_UPDATE_PERSISTENCE_FOLDER,
   SHORTEN_URL,
   UPDATE_SHORT_URL
 } from './PlaygroundTypes';
@@ -29,6 +30,11 @@ export const playgroundUpdatePersistenceFile = createAction(
   (file?: PersistenceFile) => ({ payload: file })
 );
 
+export const playgroundUpdatePersistenceFolder = createAction(
+  PLAYGROUND_UPDATE_PERSISTENCE_FOLDER,
+  (file?: PersistenceFile) => ({ payload: file ? {...file, isFolder: true} : undefined})
+);
+
 export const playgroundUpdateGitHubSaveInfo = createAction(
   PLAYGROUND_UPDATE_GITHUB_SAVE_INFO,
   (repoName: string, filePath: string, lastSaved: Date) => ({

src/features/playground/PlaygroundReducer.ts

@@ -7,6 +7,7 @@ import {
   PLAYGROUND_UPDATE_GITHUB_SAVE_INFO,
   PLAYGROUND_UPDATE_LANGUAGE_CONFIG,
   PLAYGROUND_UPDATE_PERSISTENCE_FILE,
+  PLAYGROUND_UPDATE_PERSISTENCE_FOLDER,
   PlaygroundState,
   UPDATE_SHORT_URL
 } from './PlaygroundTypes';
@@ -34,8 +35,13 @@ export const PlaygroundReducer: Reducer<PlaygroundState, SourceActionType> = (
     case PLAYGROUND_UPDATE_PERSISTENCE_FILE:
       return {
         ...state,
-        persistenceFile: action.payload
+        persistenceObject: action.payload
       };
+    case PLAYGROUND_UPDATE_PERSISTENCE_FOLDER:
+      return {
+        ...state,
+        persistenceObject: action.payload
+      }
     case PLAYGROUND_UPDATE_LANGUAGE_CONFIG:
       return {
         ...state,

src/features/playground/PlaygroundTypes.ts

@@ -1,20 +1,21 @@
 import { SALanguage } from 'src/commons/application/ApplicationTypes';
 
 import { GitHubSaveInfo } from '../github/GitHubTypes';
-import { PersistenceFile } from '../persistence/PersistenceTypes';
+import { PersistenceObject } from '../persistence/PersistenceTypes';
 
 export const CHANGE_QUERY_STRING = 'CHANGE_QUERY_STRING';
 export const GENERATE_LZ_STRING = 'GENERATE_LZ_STRING';
 export const SHORTEN_URL = 'SHORTEN_URL';
 export const UPDATE_SHORT_URL = 'UPDATE_SHORT_URL';
 export const PLAYGROUND_UPDATE_GITHUB_SAVE_INFO = 'PLAYGROUND_UPDATE_GITHUB_SAVE_INFO';
 export const PLAYGROUND_UPDATE_PERSISTENCE_FILE = 'PLAYGROUND_UPDATE_PERSISTENCE_FILE';
+export const PLAYGROUND_UPDATE_PERSISTENCE_FOLDER = 'PLAYGROUND_UPDATE_PERSISTENCE_FOLDER';
 export const PLAYGROUND_UPDATE_LANGUAGE_CONFIG = 'PLAYGROUND_UPDATE_LANGUAGE_CONFIG';
 
 export type PlaygroundState = {
   readonly queryString?: string;
   readonly shortURL?: string;
-  readonly persistenceFile?: PersistenceFile;
+  readonly persistenceObject?: PersistenceObject;
   readonly githubSaveInfo: GitHubSaveInfo;
   readonly languageConfig: SALanguage;
 };

src/pages/playground/Playground.tsx

@@ -264,7 +264,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     context: { chapter: playgroundSourceChapter, variant: playgroundSourceVariant }
   } = useTypedSelector(state => state.workspaces[workspaceLocation]);
   const fileSystem = useTypedSelector(state => state.fileSystem.inBrowserFileSystem);
-  const { queryString, shortURL, persistenceFile, githubSaveInfo } = useTypedSelector(
+  const { queryString, shortURL, persistenceObject, githubSaveInfo } = useTypedSelector(
     state => state.playground
   );
   const {
@@ -585,12 +585,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
 
   // Compute this here to avoid re-rendering the button every keystroke 
   const persistenceIsDirty =
-    persistenceFile && (!persistenceFile.lastSaved || persistenceFile.lastSaved < lastEdit);
+    persistenceObject && (!persistenceObject.lastSaved || persistenceObject.lastSaved < lastEdit);
   const persistenceButtons = useMemo(() => {
     return (
       <ControlBarGoogleDriveButtons
         isFolderModeEnabled={isFolderModeEnabled}
-        currentFile={persistenceFile}
+        currentObject={persistenceObject}
         loggedInAs={persistenceUser}
         isDirty={persistenceIsDirty}
         accessToken={googleAccessToken}
@@ -599,7 +599,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
         onClickSaveAll={() => dispatch(persistenceSaveAll())}
         onClickOpen={() => dispatch(persistenceOpenPicker())}
         onClickSave={
-          persistenceFile ? () => dispatch(persistenceSaveFile(persistenceFile)) : undefined
+          persistenceObject ? () => dispatch(persistenceSaveFile(persistenceObject)) : undefined
         }
         onClickLogIn={() => dispatch(loginGoogle())}
         onClickLogOut={() => dispatch(logoutGoogle())}
@@ -608,7 +608,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     );
   }, [
     isFolderModeEnabled,
-    persistenceFile,
+    persistenceObject,
     persistenceUser,
     persistenceIsDirty,
     dispatch,
@@ -720,7 +720,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
       <ControlBarToggleFolderModeButton
         isFolderModeEnabled={isFolderModeEnabled}
         isSessionActive={editorSessionId !== ''}
-        isPersistenceActive={persistenceFile !== undefined || githubSaveInfo.repoName !== ''}
+        isPersistenceActive={persistenceObject !== undefined || githubSaveInfo.repoName !== ''}
         toggleFolderMode={() => dispatch(toggleFolderMode(workspaceLocation))}
         key="folder"
       />
@@ -729,7 +729,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     dispatch,
     githubSaveInfo.repoName,
     isFolderModeEnabled,
-    persistenceFile,
+    persistenceObject,
     editorSessionId,
     workspaceLocation
   ]);