Local store via Datatree (#367)

Author: hetunandu

app/client/src/actions/pageActions.tsx

@@ -213,3 +213,10 @@ export const setAppMode = (payload: APP_MODE): ReduxAction<APP_MODE> => {
     payload,
   };
 };
+
+export const updateAppStore = (payload: object): ReduxAction<object> => {
+  return {
+    type: ReduxActionTypes.UPDATE_APP_STORE,
+    payload,
+  };
+};

app/client/src/constants/AppConstants.ts

@@ -15,3 +15,8 @@ export const appCardColors = [
   "#CC293F",
   "#6BA3FD",
 ];
+
+const APP_STORE_NAMESPACE = "APPSMITH_LOCAL_STORE";
+
+export const getAppStoreName = (appId: string) =>
+  `${APP_STORE_NAMESPACE}-${appId}`;

app/client/src/constants/ReduxActionConstants.tsx

@@ -251,6 +251,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   SET_APP_MODE: "SET_APP_MODE",
   TOGGLE_PROPERTY_PANE_WIDGET_NAME_EDIT:
     "TOGGLE_PROPERTY_PANE_WIDGET_NAME_EDIT",
+  UPDATE_APP_STORE: "UPDATE_APP_STORE",
 };
 
 export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes];

app/client/src/entities/DataTree/dataTreeFactory.ts

@@ -50,6 +50,7 @@ export interface DataTreeWidget extends WidgetProps {
 
 export interface DataTreeAppsmith extends AppDataState {
   ENTITY_TYPE: ENTITY_TYPE.APPSMITH;
+  store: object;
 }
 
 export type DataTreeEntity =
@@ -188,6 +189,14 @@ export class DataTreeFactory {
         };
       };
       actionPaths.push("closeModal");
+
+      dataTree.storeValue = function(key: string, value: string) {
+        return {
+          type: "STORE_VALUE",
+          payload: { key, value },
+        };
+      };
+      actionPaths.push("storeValue");
     }
 
     dataTree.pageList = pageList;

app/client/src/reducers/entityReducers/appReducer.ts

@@ -28,6 +28,7 @@ export type AppDataState = {
   mode?: APP_MODE;
   user: AuthUserState;
   URL: UrlDataState;
+  store: object;
 };
 
 const initialState: AppDataState = {
@@ -46,6 +47,7 @@ const initialState: AppDataState = {
     hash: "",
     fullPath: "",
   },
+  store: {},
 };
 
 const appReducer = createReducer(initialState, {
@@ -76,6 +78,15 @@ const appReducer = createReducer(initialState, {
       URL: action.payload,
     };
   },
+  [ReduxActionTypes.UPDATE_APP_STORE]: (
+    state: AppDataState,
+    action: ReduxAction<object>,
+  ) => {
+    return {
+      ...state,
+      store: action.payload,
+    };
+  },
 });
 
 export default appReducer;

app/client/src/sagas/ActionExecutionSagas.ts

@@ -71,6 +71,8 @@ import { validateResponse } from "sagas/ErrorSagas";
 import { ToastType } from "react-toastify";
 import { PLUGIN_TYPE_API } from "constants/ApiEditorConstants";
 import { DEFAULT_EXECUTE_ACTION_TIMEOUT_MS } from "constants/ApiConstants";
+import { updateAppStore } from "actions/pageActions";
+import { getAppStoreName } from "constants/AppConstants";
 
 function* navigateActionSaga(
   action: { pageNameOrUrl: string; params: Record<string, string> },
@@ -111,6 +113,25 @@ function* navigateActionSaga(
   }
 }
 
+function* storeValueLocally(
+  action: { key: string; value: string },
+  event: ExecuteActionPayloadEvent,
+) {
+  try {
+    const appId = yield select(getCurrentApplicationId);
+    const appStoreName = getAppStoreName(appId);
+    const existingStore = yield localStorage.getItem(appStoreName) || "{}";
+    const storeObj = JSON.parse(existingStore);
+    storeObj[action.key] = action.value;
+    const storeString = JSON.stringify(storeObj);
+    yield localStorage.setItem(appStoreName, storeString);
+    yield put(updateAppStore(storeObj));
+    if (event.callback) event.callback({ success: true });
+  } catch (err) {
+    if (event.callback) event.callback({ success: false });
+  }
+}
+
 export const getActionTimeout = (
   state: AppState,
   actionId: string,
@@ -357,6 +378,9 @@ function* executeActionTriggers(
         yield put(trigger);
         if (event.callback) event.callback({ success: true });
         break;
+      case "STORE_VALUE":
+        yield call(storeValueLocally, trigger.payload, event);
+        break;
       default:
         yield put(
           executeActionError({

app/client/src/sagas/InitSagas.ts

@@ -8,7 +8,12 @@ import {
 } from "constants/ReduxActionConstants";
 
 import { fetchEditorConfigs } from "actions/configsActions";
-import { fetchPage, fetchPageList, setAppMode } from "actions/pageActions";
+import {
+  fetchPage,
+  fetchPageList,
+  setAppMode,
+  updateAppStore,
+} from "actions/pageActions";
 import { fetchDatasources } from "actions/datasourceActions";
 import { fetchPlugins } from "actions/pluginActions";
 import { fetchActions, fetchActionsForView } from "actions/actionActions";
@@ -20,6 +25,19 @@ import PageApi, { FetchPageResponse } from "api/PageApi";
 import { validateResponse } from "./ErrorSagas";
 import { extractCurrentDSL } from "utils/WidgetPropsUtils";
 import { APP_MODE } from "reducers/entityReducers/appReducer";
+import { getAppStoreName } from "constants/AppConstants";
+
+const getAppStore = (appId: string) => {
+  const appStoreName = getAppStoreName(appId);
+  const storeString = localStorage.getItem(appStoreName) || "{}";
+  let store;
+  try {
+    store = JSON.parse(storeString);
+  } catch (e) {
+    store = {};
+  }
+  return store;
+};
 
 function* initializeEditorSaga(
   initializeEditorAction: ReduxAction<InitializeEditorPayload>,
@@ -52,6 +70,7 @@ function* initializeEditorSaga(
 
   // Step 5: Set app mode
   yield put(setAppMode(APP_MODE.EDIT));
+  yield put(updateAppStore(getAppStore(applicationId)));
 
   const currentApplication = yield select(getCurrentApplication);
 
@@ -142,6 +161,7 @@ export function* initializeAppViewerSaga(
   ]);
 
   yield put(setAppMode(APP_MODE.PUBLISHED));
+  yield put(updateAppStore(getAppStore(applicationId)));
 
   yield put({
     type: ReduxActionTypes.INITIALIZE_PAGE_VIEWER_SUCCESS,

app/client/src/utils/autocomplete/EntityDefinitions.ts

@@ -233,4 +233,8 @@ export const GLOBAL_FUNCTIONS = {
     "!doc": "Close a modal",
     "!type": "fn(modalName: string) -> void",
   },
+  storeValue: {
+    "!doc": "Store key value data locally",
+    "!type": "fn(key: string, value: any) -> void",
+  },
 };