Skip to content

Commit 3b36251

Browse files
jzuniga206jzuniga206
committed
Typing for AddChildProps complete
1 parent 758ce68 commit 3b36251

File tree

2 files changed

+61
-125
lines changed

2 files changed

+61
-125
lines changed

‎src/components/AddChildProps.tsx

Lines changed: 57 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,68 @@
11
import React, { Component } from 'react';
22
import { connect } from 'react-redux';
3-
import { ComponentInt } from '../utils/Interfaces';
4-
import { addProp, deleteProp } from '../actions/components';
5-
import DataTable from './DataTable';
3+
import { ComponentInt, ApplicationStateInt } from '../utils/Interfaces';
64
import MaterialTable from 'material-table';
75

8-
const mapDispatchToProps = (dispatch: any) => ({
9-
addProp: ({
10-
key,
11-
value,
12-
required,
13-
type
14-
}: {
15-
key: string;
16-
value: string;
17-
required: boolean;
18-
type: string;
19-
}) =>
20-
dispatch(
21-
addProp({
22-
key,
23-
value,
24-
required,
25-
type
26-
})
27-
),
28-
deleteProp: (propId: number) => dispatch(deleteProp(propId))
29-
});
30-
31-
const mapStateToProps = (store: any) => ({
6+
const mapStateToProps = (store: { workspace: ApplicationStateInt }) => ({
327
focusComponent: store.workspace.focusComponent
338
});
349

35-
class AddChildProps extends Component {
36-
tableRef = React.createRef();
37-
// state = {
38-
// propVariables: '',
39-
// propValue: '',
40-
// propRequired: true,
41-
// propType: ''
42-
// };
43-
44-
// handleChange = (event: MouseEvent | any) => {
45-
// if (event.target.id === 'propVariable') {
46-
// this.setState({
47-
// [event.target.id]: event.target.value.trim()
48-
// });
49-
// } else {
50-
// this.setState({
51-
// [event.target.id]: event.target.value
52-
// });
53-
// }
54-
// };
55-
56-
// togglePropRequired = () => {
57-
// this.setState({
58-
// propRequired: !this.state.propRequired
59-
// });
60-
// };
61-
62-
// function that handles the addition of props to a given componnent
63-
// added regex to strip usr input from non alpha numeric properties
64-
// presence of these characters crashes the app and should not be a valid input anyways
65-
// handleAddProp = (event: MouseEvent) => {
66-
// event.preventDefault();
67-
68-
// // destructuring from local state
69-
// // if change here, make sure to change local state props to match
70-
// let { propVariable, propValue, propRequired, propType } = this.state;
71-
// propVariable = propVariable.replace(/[!@#$%^&*,./:;"]+\s/gi, '');
72-
// propValue = propValue.replace(/[!@#$%^&*,./:;'"]+\s/gi, '');
73-
74-
// // check if prop exists with same key. CANNOT have duplicates
75-
// const savedVariableKeys = this.props.focusComponent.props.map(
76-
// prop => prop.key
77-
// );
78-
// if (savedVariableKeys.includes(propVariable)) {
79-
// window.alert(`A prop with the name: "${propVariable}" already exists.`);
80-
// return;
81-
// }
82-
83-
// // check if prop starts with digits. Digits at string start breaks indexedDB
84-
// if (/^\d/.test(propVariable)) {
85-
// window.alert('Props are not allowed to begin with digits');
86-
// return;
87-
// }
88-
89-
// this.props.addProp({
90-
// key: propVariable,
91-
// value: propValue,
92-
// required: propRequired,
93-
// type: propType
94-
// });
10+
// JZ: created interface to define the props that are being passed into this component
11+
interface ChildPropsTypes {
12+
focusComponent: ComponentInt;
13+
// classes?: any; -- not possibly needed, also removed from prop deconstruction
14+
}
9515

96-
// this.setState({
97-
// propVariable: '',
98-
// propValue: '',
99-
// propRequired: true,
100-
// propType: ''
101-
// });
102-
// };
16+
class AddChildProps extends Component<ChildPropsTypes> {
17+
tableRef = React.createRef();
10318
render() {
104-
const { focusComponent, classes, deleteProp, addProp } = this.props;
19+
const { focusComponent } = this.props;
10520

10621
// Array to be used to populate HTML form elements
107-
const arrayPropsAvailable = [];
108-
109-
// IIFE : so that it runs without needing to be invoked
110-
(() => {
111-
focusComponent.props.map(prop => {
112-
// console.log('this is component Name from props array', prop.key);
113-
arrayPropsAvailable.push(
114-
<span>
115-
<input
116-
type='checkbox'
117-
id={`${prop}checkbox-${prop.key}`}
118-
name={`${prop}checkbox-${prop.key}`}
119-
/>
120-
<label
121-
className={`labelForPropsToAddToChild`}
122-
for={`${prop}checkbox-${prop.key}`}
123-
>
124-
{prop.key}
125-
</label>
126-
</span>
127-
);
128-
});
129-
})();
130-
131-
console.log('this is the array of props available', arrayPropsAvailable);
22+
// JZ: refactored this code to the above to be all done within one map function
23+
const arrayPropsAvailable = focusComponent.props.map((prop, idx) => {
24+
return (
25+
<span key={`span-${idx}`}>
26+
<input
27+
type='checkbox'
28+
id={`${prop}checkbox-${prop.key}`}
29+
name={`${prop}checkbox-${prop.key}`}
30+
key={`checkbox-${idx}`}
31+
/>
32+
<label
33+
className={`labelForPropsToAddToChild`}
34+
htmlFor={`${prop}checkbox-${prop.key}`}
35+
key={`label-${idx}`}
36+
>
37+
{prop.key}
38+
</label>
39+
</span>
40+
);
41+
});
42+
43+
// const arrayPropsAvailable = [];
44+
// // IIFE : so that it runs without needing to be invoked
45+
// (() => {
46+
// focusComponent.props.map(prop => {
47+
// // console.log('this is component Name from props array', prop.key);
48+
// arrayPropsAvailable.push(
49+
// <span>
50+
// <input
51+
// type='checkbox'
52+
// id={`${prop}checkbox-${prop.key}`}
53+
// name={`${prop}checkbox-${prop.key}`}
54+
// />
55+
// <label
56+
// className={`labelForPropsToAddToChild`}
57+
// for={`${prop}checkbox-${prop.key}`}
58+
// >
59+
// {prop.key}
60+
// </label>
61+
// </span>
62+
// );
63+
// });
64+
// })();
65+
// console.log('this is the array of props available', arrayPropsAvailable);
13266

13367
return (
13468
<div>
@@ -154,16 +88,17 @@ class AddChildProps extends Component {
15488
title='Add Your Child Props Here!'
15589
/>
15690

91+
{/* BUTTON FUNCTIONALITY PENDING
15792
<button
15893
onClick={() => {
15994
this.tableRef.current.onQueryChange();
16095
}}
16196
>
16297
Sean Sucks
163-
</button>
98+
</button> */}
16499
</div>
165100
);
166101
}
167102
}
168103

169-
export default connect(mapStateToProps, mapDispatchToProps)(AddChildProps);
104+
export default connect(mapStateToProps)(AddChildProps);

‎src/components/BottomTabs.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@ const styles = (theme: Theme): any => ({
5050
textTransform: 'initial',
5151
minWidth: 72,
5252
fontWeight: theme.typography.fontWeightRegular,
53-
marginRight: theme.spacing.unit * 4,
53+
// marginRight: theme.spacing.unit * 4,
54+
marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
5455

5556
fontFamily: [
5657
'-apple-system',
@@ -78,10 +79,10 @@ const styles = (theme: Theme): any => ({
7879
},
7980
tabSelected: {},
8081
typography: {
81-
padding: theme.spacing.unit * 3
82+
padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
8283
},
8384
padding: {
84-
padding: `0 ${theme.spacing.unit * 2}px`
85+
padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
8586
}
8687
});
8788

0 commit comments

Comments
 (0)