Fixed some typing

Author: tonyito

src/actions/components.ts

@@ -273,24 +273,23 @@ export const deleteProp = (propId: number) => (
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (id: string) => (
+export const toggleComponentState = ({ id }: { id: number }) => (
   dispatch: (arg: Action) => void
 ) => {
-  dispatch({ type: TOGGLE_STATE, payload: id });
+  dispatch({ type: TOGGLE_STATE, payload: { id } });
 };
 
-export const toggleComponentClass = (id: string) => (
+export const toggleComponentClass = ({ id }: { id: number }) => (
   dispatch: (arg: Action) => void
 ) => {
-  dispatch({ type: TOGGLE_CLASS, payload: id });
+  dispatch({ type: TOGGLE_CLASS, payload: { id } });
 };
 
 export const addProp = (prop: PropInt) => ({
   type: ADD_PROP,
   payload: { ...prop },
 });
 
-
 //action creators for undo and redo
 export const undo = () => ({
   type: UNDO,

src/components/LeftColExpansionPanel.tsx

@@ -25,8 +25,8 @@ interface LeftColExpPanPropsInt extends PropsInt {
     componentId: number;
     stateComponents: ComponentsInt;
   }): void;
-  toggleComponentState(arg: number): void;
-  toggleComponentClass(arg: number): void;
+  toggleComponentState(arg: {id: number}): void;
+  toggleComponentClass(arg: {id: number}): void;
 }
 //interface created but never used
 // interface TypographyProps {
@@ -56,7 +56,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
   return (
     <Grid
       container
-      spacing={16}
       direction='row'
       justify='center'
       alignItems='center'
@@ -142,9 +141,9 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                             </InputLabel>
                             <Switch
                               checked={stateful}
-                              onChange={e => {
-                                toggleComponentState(id);
-                                // changeFocusComponent({ title });
+                              onChange={() => {
+                                toggleComponentState({ id });
+                                changeFocusComponent({ title });
                               }}
                               value='stateful'
                               color='primary'
@@ -166,9 +165,9 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                             </InputLabel>{' '}
                             <Switch
                               checked={classBased}
-                              onChange={e => {
-                                toggleComponentClass(id);
-                                // changeFocusComponent({ title });
+                              onChange={() => {
+                                toggleComponentClass({ id });
+                                changeFocusComponent({ title });
                               }}
                               value='classBased'
                               color='primary'
@@ -204,7 +203,8 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                             />
                             <div
                               style={{
-                                marginTop: '3px',
+                                marginTop: '4px',
+                                marginLeft: '5px',
                                 fontSize: '15px',
                                 textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
                               }}
@@ -217,42 +217,11 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                         )}
                       </div>
                     }
-                    // style={{ color }}
                   />
                 </ListItem>
               </List>
             </Grid>
           </Collapse>
-          {/* {id === 1 || !isFocused() ? (           Removed sepearate delete icon and     
-                                                      made it part of card
-            <div />
-          ) : (
-            <Fragment>
-              <Button
-                variant="text"
-                size="small"
-                color="default"
-                aria-label="Delete"
-                className={classes.margin}
-                onClick={() =>
-                  deleteComponent({
-                    componentId: id,
-                    stateComponents: components,
-                  })
-                }
-                style={{
-                  color: '#D3D3D3',
-                  marginBottom: '10px',
-                  marginTop: '4px',
-                  marginLeft: '11px',
-                  padding: '0px',
-                }}
-              >
-                <DeleteIcon style={{ color: '#D3D3D3' }} />
-                <span style={{ marginTop: '3px' }}>Delete Component</span>
-              </Button>
-            </Fragment>
-          )} */}
         </div>
       </Grid>
       {/* {Create the '+' symbol that add's components as children.} */}
@@ -279,7 +248,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
     </Grid>
   );
 };
-function styles(themes: any): any {
+function styles(): object {
   return {
     root: {
       width: '100%',

src/containers/LeftContainer.tsx

@@ -76,10 +76,10 @@ const mapDispatchToProps = (dispatch: any) => ({
     componentId: number;
     stateComponents: ComponentsInt;
   }) => dispatch(actions.deleteComponent({ componentId, stateComponents })),
-  toggleComponentState: (id: string) =>
-    dispatch(actions.toggleComponentState(id)),
-  toggleComponentClass: (id: string) =>
-    dispatch(actions.toggleComponentClass(id)),
+  toggleComponentState: ({ id }: { id: number }) =>
+    dispatch(actions.toggleComponentState({ id })),
+  toggleComponentClass: ({ id }: { id: number }) =>
+    dispatch(actions.toggleComponentClass({ id })),
   deleteAllData: () => dispatch(actions.deleteAllData()),
   deleteImage: () => dispatch(actions.deleteImage()),
   createApp: ({
@@ -98,7 +98,7 @@ const mapDispatchToProps = (dispatch: any) => ({
         genOption,
         appName: 'reactype_app',
         exportAppBool: null,
-      }),
+      })
     ),
 });
 
@@ -119,7 +119,7 @@ class LeftContainer extends Component<LeftContPropsInt, StateInt> {
       imageSource: this.props.imageSource,
     };
 
-    IPC.on('app_dir_selected', (event: any, path: string) => {
+    IPC.on('app_dir_selected', (event: string, path: string) => {
       const { components } = this.props;
       const { genOption } = this.state;
       this.props.createApp({
@@ -435,5 +435,5 @@ function styles(): any {
 
 export default compose(
   withStyles(styles),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps)
 )(LeftContainer);

src/utils/componentReducer.util.ts

@@ -501,7 +501,7 @@ export const deleteComponent = (
 //Reducer that toggles the component statefulness
 export const toggleComponentState = (
   state: ApplicationStateInt,
-  id: number
+  { id }: { id: number }
 ) => {
   //creates a deep copy of the components array
   const componentCopy = cloneDeep(state.components);
@@ -512,6 +512,7 @@ export const toggleComponentState = (
       element.stateful = !element.stateful;
     }
   });
+  
   // return state and updated components array
   const { history, historyIndex, future } = createHistory(state);
 
@@ -527,7 +528,7 @@ export const toggleComponentState = (
 //Reducer that toggles the component class
 export const toggleComponentClass = (
   state: ApplicationStateInt,
-  id: number
+  { id }: { id: number }
 ) => {
   //creates a deep copy of the components array
   const componentCopy = cloneDeep(state.components);