Showing "Autosave enabled" toast (#173)

* showing Autosave enabled toast

* fixed variable names

* fixed constant name typo

client/constants.js

@@ -98,3 +98,6 @@ export const RESET_PASSWORD_RESET = 'RESET_PASSWORD_RESET';
 export const INVALID_RESET_PASSWORD_TOKEN = 'INVALID_RESET_PASSWORD_TOKEN';
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';
+
+export const JUST_OPENED_PROJECT = 'JUST_OPENED_PROJECT';
+export const RESET_JUST_OPENED_PROJECT = 'RESET_JUST_OPENED_PROJECT';

client/modules/IDE/actions/ide.js

@@ -195,3 +195,15 @@ export function resetInfiniteLoops() {
     type: ActionTypes.RESET_INFINITE_LOOPS
   };
 }
+
+export function justOpenedProject() {
+  return {
+    type: ActionTypes.JUST_OPENED_PROJECT,
+  };
+}
+
+export function resetJustOpenedProject() {
+  return {
+    type: ActionTypes.RESET_JUST_OPENED_PROJECT
+  };
+}

client/modules/IDE/actions/project.js

@@ -5,12 +5,13 @@ import JSZip from 'jszip';
 import JSZipUtils from 'jszip-utils';
 import { saveAs } from 'file-saver';
 import { showToast, setToastText } from './toast';
-import { setUnsavedChanges } from './ide';
+import { setUnsavedChanges, justOpenedProject, resetJustOpenedProject } from './ide';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
 export function getProject(id) {
   return (dispatch) => {
+    dispatch(justOpenedProject());
     axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
       .then(response => {
         // browserHistory.push(`/projects/${id}`);
@@ -52,8 +53,15 @@ export function saveProject(autosave = false) {
             type: ActionTypes.PROJECT_SAVE_SUCCESS
           });
           if (!autosave) {
-            dispatch(showToast());
+            if (state.ide.justOpenedProject && state.preferences.autosave) {
+              dispatch(showToast(5500));
               dispatch(setToastText('Project saved.'));
+              setTimeout(() => dispatch(setToastText('Autosave enabled.')), 1500);
+              dispatch(resetJustOpenedProject());
+            } else {
+              dispatch(showToast(1500));
+              dispatch(setToastText('Project saved.'));
+            }
           }
         })
         .catch((response) => dispatch({
@@ -73,8 +81,15 @@ export function saveProject(autosave = false) {
             files: response.data.files
           });
           if (!autosave) {
-            dispatch(showToast());
+            if (state.preferences.autosave) {
+              dispatch(showToast(5500));
               dispatch(setToastText('Project saved.'));
+              setTimeout(() => dispatch(setToastText('Autosave enabled.')), 1500);
+              dispatch(resetJustOpenedProject());
+            } else {
+              dispatch(showToast(1500));
+              dispatch(setToastText('Project saved.'));
+            }
           }
         })
         .catch(response => dispatch({

client/modules/IDE/actions/toast.js

@@ -6,12 +6,12 @@ export function hideToast() {
   };
 }
 
-export function showToast() {
+export function showToast(time) {
   return (dispatch) => {
     dispatch({
       type: ActionTypes.SHOW_TOAST
     });
-    setTimeout(() => dispatch(hideToast()), 1500);
+    setTimeout(() => dispatch(hideToast()), time);
   };
 }
 

client/modules/IDE/reducers/ide.js

@@ -16,7 +16,8 @@ const initialState = {
   unsavedChanges: false,
   infiniteLoop: false,
   previewIsRefreshing: false,
-  infiniteLoopMessage: ''
+  infiniteLoopMessage: '',
+  projectJustOpened: false
 };
 
 const ide = (state = initialState, action) => {
@@ -79,6 +80,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { previewIsRefreshing: true });
     case ActionTypes.END_SKETCH_REFRESH:
       return Object.assign({}, state, { previewIsRefreshing: false });
+    case ActionTypes.JUST_OPENED_PROJECT:
+      return Object.assign({}, state, { justOpenedProject: true });
+    case ActionTypes.RESET_JUST_OPENED_PROJECT:
+      return Object.assign({}, state, { justOpenedProject: false });
     default:
       return state;
   }