Skip to content

Commit 7099773

Browse files
ibeeliotibeeliot
authored
Merge pull request #36 from jzuniga206/feature
Updated Typing for Some Files
2 parents e252682 + d42c165 commit 7099773

File tree

6 files changed

+203
-238
lines changed

6 files changed

+203
-238
lines changed

‎src/components/bottom/AddChildProps.tsx

Lines changed: 57 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,69 @@
11
import React, { Component } from 'react';
22
import { connect } from 'react-redux';
3+
import { ComponentInt, ApplicationStateInt } from '../../interfaces/Interfaces';
34
import { addProp, deleteProp } from '../../actions/actionCreators';
45
import MaterialTable from 'material-table';
56

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

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

94-
// this.setState({
95-
// propVariable: '',
96-
// propValue: '',
97-
// propRequired: true,
98-
// propType: ''
99-
// });
100-
// };
17+
class AddChildProps extends Component<ChildPropsTypes> {
18+
tableRef = React.createRef();
10119
render() {
102-
const { focusComponent, classes, deleteProp, addProp } = this.props;
20+
const { focusComponent } = this.props;
10321

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

13168
return (
13269
<div>
@@ -152,16 +89,17 @@ class AddChildProps extends Component {
15289
title='Add Your Child Props Here!'
15390
/>
15491

92+
{/* BUTTON FUNCTIONALITY PENDING
15593
<button
15694
onClick={() => {
15795
this.tableRef.current.onQueryChange();
15896
}}
15997
>
16098
Sean Sucks
161-
</button>
99+
</button> */}
162100
</div>
163101
);
164102
}
165103
}
166104

167-
export default connect(mapStateToProps, mapDispatchToProps)(AddChildProps);
105+
export default connect(mapStateToProps)(AddChildProps);

‎src/components/bottom/BottomTabs.tsx

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ import Tree from 'react-d3-tree';
77
import Props from './Props';
88
import HtmlAttr from './HtmlAttr';
99
import CodePreview from './CodePreview';
10-
import {
11-
ComponentsInt,
12-
PropInt,
13-
PropsInt
14-
} from '../../interfaces/Interfaces';
10+
import { ComponentsInt, PropInt, PropsInt } from '../../interfaces/Interfaces';
1511

1612
interface BottomTabsPropsInt extends PropsInt {
1713
deleteProp(id: number): void;
@@ -50,8 +46,8 @@ const styles = (theme: Theme): any => ({
5046
textTransform: 'initial',
5147
minWidth: 72,
5248
fontWeight: theme.typography.fontWeightRegular,
53-
marginRight: theme.spacing.unit * 4,
54-
marginTop: '10px',
49+
// marginRight: theme.spacing.unit * 4,
50+
marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
5551

5652
fontFamily: [
5753
'-apple-system',
@@ -79,10 +75,10 @@ const styles = (theme: Theme): any => ({
7975
},
8076
tabSelected: {},
8177
typography: {
82-
padding: theme.spacing.unit * 3
78+
padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
8379
},
8480
padding: {
85-
padding: `0 ${theme.spacing.unit * 2}px`
81+
padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
8682
}
8783
});
8884

@@ -165,12 +161,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
165161
<Tab
166162
disableRipple
167163
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
168-
label="Application Tree"
164+
label='Application Tree'
169165
/>
170166
<Tab
171167
disableRipple
172168
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
173-
label="Code Preview"
169+
label='Code Preview'
174170
/>
175171
<Tab
176172
disableRipple
@@ -187,13 +183,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
187183
<Tab
188184
disableRipple
189185
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
190-
label="Add Child Props"
186+
label='Add Child Props'
191187
/>
192188
</Tabs>
193189

194190
{value === 0 && (
195191
<div
196-
id="treeWrapper"
192+
id='treeWrapper'
197193
style={{
198194
width: '100%',
199195
height: '100%'

‎src/components/bottom/DataTable.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,27 @@ const styles = (theme: Theme) => ({
3030

3131
/** **************************
3232
* cannot have a row header or a key in the data called "key"
33-
* ,ust have unique id
33+
* must have unique id
3434
* ****************************** */
3535

36-
function dataTable(props: any) {
36+
// Jesse: added interface for the props being passed into dataTable. Previously, props:any was unsed in params.
37+
interface dataTableProps {
38+
classes: any; // materialUI requirement(?)
39+
rowData: {
40+
/* rowData is defined as propsRows in Props.tsx: array of objects {key, value, type, required, id}
41+
values for this object originate from the input fields within Component Props tab in the bottom section of the app
42+
*/
43+
_Key: string;
44+
Value: string | number;
45+
Type: string;
46+
Required: boolean;
47+
id: number;
48+
}[];
49+
rowHeader: string[];
50+
deletePropHandler(propId: number): void;
51+
}
52+
53+
function dataTable(props: dataTableProps) {
3754
const { classes, rowData, rowHeader, deletePropHandler } = props;
3855

3956
const renderHeader = rowHeader.map((col: any, idx: number) => (
@@ -60,7 +77,7 @@ function dataTable(props: any) {
6077
<TableCell align={'center'} padding={'none'}>
6178
<IconButton
6279
color='default'
63-
fontSize='small'
80+
// fontSize='small' - commented/removed b/c not a valid attribute for IconButton component
6481
onClick={() => deletePropHandler(row.id)}
6582
>
6683
<DeleteIcon />
@@ -72,7 +89,10 @@ function dataTable(props: any) {
7289

7390
return (
7491
<Paper className={classes.root}>
75-
<Table className={classes.table} selectable={'true'}>
92+
<Table
93+
className={classes.table}
94+
// selectable={'true'} - commented/removed b/c not a valid attr for Table (no adverse effects noted)
95+
>
7696
<TableHead>
7797
<TableRow>{renderHeader}</TableRow>
7898
</TableHead>

0 commit comments

Comments
 (0)