Merge pull request #4 from ReacType-2-0/reducer-refactor

Reducer refactor

Author: null267

package-lock.json

@@ -104,6 +104,7 @@
     "react-d3-tree": "^1.12.3",
     "react-dom": "^16.4.1",
     "react-draggable": "^3.0.5",
+    "react-dropzone": "^10.2.1",
     "react-konva": "^16.12.0-0",
     "react-redux": "^5.0.7",
     "react-sortable-tree": "^2.2.0",

package.json

@@ -0,0 +1,13 @@
+import React from 'react';
+import './public/styles/style.css';
+import AppContainer from './containers/AppContainer';
+// import Test from './components/Test';
+
+const App: React.FC = () => (
+  <div className="app">
+    <AppContainer />
+    {/* <Test /> */}
+  </div>
+);
+
+export default App;

src/App.tsx

@@ -0,0 +1,242 @@
+import { createComponent } from '../utils/reducer.util';
+import { ComponentState } from '../types/types';
+import * as types from '../types/actionTypes';
+import { loadState } from '../localStorage.js';
+import createFiles from '../utils/createFiles.util';
+import createApplicationUtil from '../utils/createApplication.util';
+
+// ** ACTION CREATORS ** \\
+
+// ** openExpansionPanel just takes the id of the current component and toggles the expanded value to either true or false
+export const toggleExpansionPanel = (id: number) => ({
+  type: types.TOGGLE_EXPANSION_PANEL,
+  payload: { id },
+});
+
+// ! Redux thunk action
+export const loadInitData = () => {
+  return (dispatch: any) => {
+    loadState().then((data: any) => dispatch({
+      type: types.LOAD_INIT_DATA,
+      payload: {
+        data: data ? data.application : {},
+      },
+    }));
+  }
+};
+
+// ! Redux thunk action
+// ** addComponent waits for createComponent to dispatch then createComponent returns a promise with the new component object created
+export const addComponent = (title: string) => {
+  return (dispatch, getState) => {
+    // ** grab state from our reducer to see how many components currently exist in our array
+    const appComponentState = getState().application.components;
+    // ** Conditionally assigning a variable componentId. If any components exist in the array find the last component's id and increment it else initialize at 1.
+    const componentId = appComponentState.length ? appComponentState[appComponentState.length - 1].id + 1 : 1;
+    dispatch(createComponent(componentId, title, appComponentState))
+    .then((component: ComponentState) => {
+      // ** the dispatch to createComponent will return a promise. The promise will return either the new createdComponent or just the generic state object (which will have an id of 0 by default)
+      if (component.id !== 0) {
+        dispatch({ 
+          type: types.ADD_COMPONENT, 
+          payload: { component } 
+        });
+      }
+    })
+    .catch((err: Error) => console.log(err));
+  };
+}
+
+// ** updateComponent updates one of the values that can be updated from a component
+export const updateComponent = (id: number, update: {}) => ({
+  type: types.UPDATE_COMPONENT,
+  payload: {
+    id,
+    ...update
+  }
+});
+
+// ** deleteComponent deletes a component from our global state component array
+export const deleteComponent = (id: number) => ({
+  type: types.DELETE_COMPONENT,
+  payload: { id }
+});
+
+export const addChild = ({
+  title,
+  childType,
+  HTMLInfo,
+}: {
+title: string;
+childType: string;
+HTMLInfo: object;
+}) => (dispatch: any) => {
+  dispatch({ type: types.ADD_CHILD, payload: { title, childType, HTMLInfo } });
+};
+
+export const deleteChild = ({}) => (dispatch: any) => {
+  // with no payload, it will delete focusd child
+  dispatch({ type: types.DELETE_CHILD, payload: {} });
+};
+
+export const changeFocusComponent = ({ title }: { title: string }) => (dispatch: any) => {
+  dispatch({ type: types.CHANGE_FOCUS_COMPONENT, payload: { title } });
+};
+
+// make sure childId is being sent in
+export const changeFocusChild = ({ childId }: { childId: number }) => (dispatch: any) => {
+  dispatch({ type: types.CHANGE_FOCUS_CHILD, payload: { childId } });
+};
+
+export const changeComponentFocusChild = ({
+  componentId,
+  childId,
+}: {
+componentId: number;
+childId: number;
+}) => (dispatch: any) => {
+  dispatch({
+    type: types.CHANGE_COMPONENT_FOCUS_CHILD,
+    payload: { componentId, childId },
+  });
+};
+
+export const exportFiles = ({
+  components,
+  path,
+  appName,
+  exportAppBool,
+}: {
+components: ComponentState;
+path: string;
+appName: string;
+exportAppBool: boolean;
+}) => (dispatch: any) => {
+  // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
+  dispatch({
+    type: types.EXPORT_FILES,
+  });
+
+  createFiles(components, path, appName, exportAppBool)
+    .then(dir => dispatch({
+      type: types.EXPORT_FILES_SUCCESS,
+      payload: { status: true, dir: dir[0] },
+    }))
+    .catch(err => dispatch({
+      type: types.EXPORT_FILES_ERROR,
+      payload: { status: true, err },
+    }));
+};
+
+export const handleClose = () => ({
+  type: types.HANDLE_CLOSE,
+  payload: false,
+});
+
+export const handleTransform = (
+  componentId: number,
+  childId: number,
+  {
+    x, y, width, height,
+  }: { x: number; y: number; width: number; height: number },
+) => ({
+  type: types.HANDLE_TRANSFORM,
+  payload: {
+    componentId,
+    childId,
+    x,
+    y,
+    width,
+    height,
+  },
+});
+
+export const createApplication = ({
+  path,
+  components = [],
+  genOption,
+  appName = 'reactype_app',
+  exportAppBool,
+}: {
+path: string;
+components: ComponentState;
+genOption: number;
+appName: string;
+exportAppBool: boolean;
+}) => (dispatch: any) => {
+  if (genOption === 0) {
+    exportAppBool = false;
+    dispatch(
+      exportFiles({
+        appName,
+        path,
+        components,
+        exportAppBool,
+      }),
+    );
+  } else if (genOption) {
+    exportAppBool = true;
+    dispatch({
+      type: types.CREATE_APPLICATION,
+    });
+    createApplicationUtil({
+      path,
+      appName,
+      genOption,
+      // exportAppBool
+    })
+      .then(() => {
+        dispatch({
+          type: types.CREATE_APPLICATION_SUCCESS,
+        });
+        dispatch(
+          exportFiles({
+            appName,
+            path,
+            components,
+            exportAppBool,
+          }),
+        );
+      })
+      .catch(err => dispatch({
+        type: types.CREATE_APPLICATION_ERROR,
+        payload: { status: true, err },
+      }));
+  }
+};
+
+// export const openExpansionPanel = (component: ComponentInt) => ({
+//   type: OPEN_EXPANSION_PANEL,
+//   payload: { component },
+// });
+
+export const deleteAllData = () => ({
+  type: types.DELETE_ALL_DATA,
+});
+
+export const deleteProp = (propId: number) => (dispatch: any) => {
+  dispatch({ type: types.DELETE_PROP, payload: propId });
+};
+
+export const addProp = (prop: PropInt) => ({
+  type: types.ADD_PROP,
+  payload: { ...prop },
+});
+
+export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
+  dispatch: any,
+) => {
+  dispatch({
+    type: types.UPDATE_HTML_ATTR,
+    payload: { attr, value },
+  });
+};
+
+export const updateChildrenSort = ({ newSortValues }: { newSortValues: any }) => (
+  dispatch: any,
+) => {
+  dispatch({
+    type: types.UPDATE_CHILDREN_SORT,
+    payload: { newSortValues },
+  });
+};