Skip to content

Commit 3e24caa

Browse files
vwang4536vwang4536
committed
second updated?
2 parents b7a841a + 8e443d3 commit 3e24caa

17 files changed

+13467
-27391
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@
2222
"dependencies": {
2323
"@material-ui/core": "^3.7.0",
2424
"@material-ui/icons": "^3.0.1",
25+
"graphql": "^14.0.2",
26+
"prop-types": "^15.6.2",
2527
"react": "^16.6.3",
28+
"react-clipboard.js": "^2.0.2",
2629
"react-dom": "^16.6.3",
2730
"react-redux": "^6.0.0",
2831
"redux": "^4.0.1",

‎src/actions/introspectionActions.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
// import each action type into the actions
2-
import * as actionTypes from '../constants/actionTypes';
2+
import * as actionTypes from '../constants/actionTypes.js';
33

44
// changing schema action, linked by CHANGE_SCHEMA type
5-
export const changeSchema = (introspection) => {
5+
export const changeSchema = (introspection, text) => {
66
return {
77
type: actionTypes.CHANGE_SCHEMA,
8-
payload: {
9-
introspection,
10-
},
8+
payload: introspection,
9+
text: text,
1110
};
1211
}
1312

13+
// export const filterTypes = (schema) => {
14+
// return {
15+
// type: actionTypes.FILTER_TYPES,
16+
// payload: schema,
17+
// };
18+
// }
19+

‎src/components/App.js

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,22 @@
1-
import React, { Component } from "react";
1+
import React, { Component } from 'react';
22
import Button from '@material-ui/core/Button';
3-
import SimpleModal from './SimpleModal.js'
4-
import panelContainer from '../containers/panelContainer.jsx';
3+
import MainContainer from '../containers/MainContainer.jsx';
54
import '../styles/App.css';
6-
// import Wrapper from '../containers/graphContainer.jsx'
7-
85

96

107
class App extends Component {
11-
constructor(props) {
12-
super(props);
13-
}
14-
render() {
15-
return (
16-
<div>
17-
{/* <h1>My React App! TESTINfddwdwadw:)dwdG!</h1> */}
18-
{/* <Wrapper /> */}
19-
{/* <h1>My React App! TESTING! </h1> */}
20-
21-
{/* <Button variant="contained" color="primary">
22-
Hello World</Button> */}
8+
constructor(props) {
9+
super(props);
10+
}
2311

24-
<SimpleModal />
25-
<panelContainer />
26-
</div>
27-
);
28-
}
12+
render() {
13+
return (
14+
<div className='main'>
15+
<h1>My React App! TESTING!</h1>
16+
<MainContainer />
17+
</div>
18+
);
19+
}
2920
}
3021

31-
export default App;
22+
export default App;

‎src/components/ModalComponent.jsx

Whitespace-only changes.

‎src/components/Type.jsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
3+
const Type = (props) => {
4+
const { name, fields, possibleTypes } = props;
5+
if (fields !== null) {
6+
const fieldList = fields.map(field => (
7+
<tr>
8+
<td>{field.name}</td>
9+
<td>{ (field.type.kind === 'SCALAR') ? field.type.kind : (field.type.kind === 'LIST') ? `[${field.type.ofType.name}]` : field.type.name }</td>
10+
</tr>
11+
))
12+
return fieldList
13+
}
14+
// if (!fields) {
15+
// const possibleTypesList = possibleTypes.map(possibleTypes)
16+
// }
17+
18+
return (
19+
<div className="nodeDisplay">
20+
<table>
21+
<thead>{name}</thead>
22+
<tbody>{fieldList}</tbody>
23+
</table>
24+
</div>
25+
)
26+
}
27+
28+
export default Type;

‎src/containers/MainContainer.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Component } from 'react';
2+
import ModalContainer from './ModalContainer.jsx';
3+
import GraphContainer from './GraphContainer.jsx';
4+
5+
class MainContainer extends Component {
6+
render() {
7+
return (
8+
<div>
9+
Main Container is made here
10+
<ModalContainer />
11+
<GraphContainer />
12+
</div>
13+
);
14+
}
15+
}
16+
17+
18+
export default MainContainer;

‎src/containers/graphContainer.jsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react';
22
import { connect } from 'react-redux';
3+
<<<<<<< HEAD
34
import panelContainer from './panelContainer.jsx';
45
import modalContainer from './modalContainer.jsx';
56

@@ -61,3 +62,57 @@ import modalContainer from './modalContainer.jsx';
6162

6263

6364

65+
=======
66+
import * as errorAction from '../actions/errorActions';
67+
import * as introspectionAction from '../actions/introspectionActions';
68+
import * as svgAction from '../actions/svgActions';
69+
import * as viewAction from '../actions/viewActions';
70+
import PanelContainer from './PanelContainer.jsx';
71+
import ModalContainer from './ModalContainer.jsx';
72+
import Type from '../components/Type.jsx';
73+
import { FormGroup } from '@material-ui/core';
74+
75+
const mapStateToProps = store => ({
76+
schema: store.root.schema
77+
})
78+
79+
const mapDispatchToProps = dispatch => ({
80+
81+
})
82+
83+
class GraphContainer extends Component {
84+
constructor(props) {
85+
super(props);
86+
}
87+
88+
render() {
89+
// filter introspection query result to related type tables
90+
// const typeList = this.props.schema.data.__schema.types.filter((type) => {
91+
// return (type.name.charAt(0) !== "_" && type.name.charAt(1) !== "_" && type.kind !== "SCALAR" && type.kind !== "ENUM" && type.name.toLowerCase() !== "mutation")
92+
// });
93+
94+
const typeList = this.props.schema.data.__schema.types.filter((type) => {
95+
return (
96+
type.name.charAt(0) !== "_" && type.name.charAt(1) !== "_" &&
97+
type.kind !== "INPUT_OBJECT" &&
98+
type.kind !== "SCALAR" &&
99+
type.kind !== "ENUM" &&
100+
(type.fields !== null || type.possibleTypes !== null) &&
101+
type.name.toLowerCase() !== "mutation")
102+
});
103+
104+
const nodes = typeList.map(type => {
105+
console.log(type)
106+
return <Type fields={type.fields} name={type.name} possibleTypes={type.possibleTypes}/>
107+
})
108+
109+
return(
110+
<div className="nodes">
111+
{nodes}
112+
</div>
113+
)
114+
}
115+
}
116+
117+
export default connect(mapStateToProps, mapDispatchToProps)(GraphContainer);
118+
>>>>>>> 8e443d359b7e6d160f0359d678f0356f0d90e55d

‎src/containers/modalContainer.jsx

Lines changed: 184 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,184 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Typography from '@material-ui/core/Typography';
5+
import Modal from '@material-ui/core/Modal';
6+
import Button from '@material-ui/core/Button';
7+
import PropTypes from 'prop-types';
8+
import FormControl from '@material-ui/core/FormControl';
9+
import InputLabel from '@material-ui/core/InputLabel';
10+
import Select from '@material-ui/core/Select';
11+
import MenuItem from '@material-ui/core/MenuItem';
12+
import FormHelperText from '@material-ui/core/FormHelperText';
13+
import Input from '@material-ui/core/Input';
14+
import Clipboard from 'react-clipboard.js';
15+
import { introspectionQuery } from 'graphql/utilities';
16+
17+
import * as actions from '../actions/introspectionActions';
18+
19+
20+
function getModalStyle() {
21+
const top = 50;
22+
const left = 50;
23+
24+
return {
25+
top: `${top}%`,
26+
left: `${left}%`,
27+
transform: `translate(-${top}%, -${left}%)`,
28+
};
29+
}
30+
31+
const styles = theme => ({
32+
paper: {
33+
position: 'absolute',
34+
width: theme.spacing.unit * 50,
35+
backgroundColor: theme.palette.background.paper,
36+
boxShadow: theme.shadows[5],
37+
padding: theme.spacing.unit * 4,
38+
},
39+
root: {
40+
display: 'flex',
41+
flexWrap: 'wrap',
42+
},
43+
formControl: {
44+
margin: theme.spacing.unit,
45+
minWidth: 120,
46+
},
47+
selectEmpty: {
48+
marginTop: theme.spacing.unit * 2,
49+
},
50+
});
51+
52+
const mapStateToProps = store => ({
53+
schema: store.root.schema
54+
});
55+
//mapDespacitoToProps
56+
const mapDispatchToProps = dispatch => ({
57+
changeSchema: schema => dispatch(actions.changeSchema(schema)),
58+
});
59+
60+
class ModalContainer extends React.Component {
61+
constructor(props) {
62+
super(props);
63+
this.state = {
64+
open: true,
65+
uploadedText: '',
66+
currentSchema: '',
67+
};
68+
this.handleSelectSchema = this.handleSelectSchema.bind(this);
69+
this.handleClose = this.handleClose.bind(this);
70+
this.handleOpen = this.handleOpen.bind(this);
71+
this.handleUpload = this.handleUpload.bind(this);
72+
this.handleSchema = this.handleSchema.bind(this);
73+
}
74+
75+
handleSelectSchema(event) {
76+
this.setState({ currentSchema: event.target.value });
77+
}
78+
79+
handleOpen() {
80+
this.setState({ open: true });
81+
}
82+
83+
handleClose() {
84+
this.setState({ open: false });
85+
}
86+
87+
handleUpload(event) {
88+
this.setState({ uploadedText: event.target.value });
89+
}
90+
91+
handleSchema() {
92+
this.setState({ currentSchema: uploadedText })
93+
}
94+
95+
96+
97+
render() {
98+
const { classes } = this.props;
99+
100+
return (
101+
<div>
102+
<Button onClick={this.handleOpen}>Change Schema</Button>
103+
<Modal
104+
aria-labelledby="simple-modal-title"
105+
aria-describedby="simple-modal-description"
106+
open={this.state.open}
107+
onClose={this.handleClose}
108+
>
109+
<div style={getModalStyle()} className={classes.paper}>
110+
<Typography variant="h3" id="modal-title">
111+
GraphnomiQL
112+
</Typography>
113+
<Typography variant="h6" id="simple-modal-description">
114+
Select Demo or Custom Schema
115+
</Typography>
116+
<form>
117+
<FormControl className={classes.formControl}>
118+
<InputLabel htmlFor="schema-helper">Schema</InputLabel>
119+
<Select
120+
value={this.state.currentSchema}
121+
onChange={this.handleSelectSchema}
122+
input={<Input name="schema" id="schema-helper" />}
123+
>
124+
<MenuItem value="">
125+
<em>None</em>
126+
</MenuItem>
127+
<MenuItem value="shopify">Shopify</MenuItem>
128+
<MenuItem value="yelp">Yelp</MenuItem>
129+
<MenuItem value="custom">Custom</MenuItem>
130+
</Select>
131+
<FormHelperText>Select Custom to visualize your own schema</FormHelperText>
132+
<Typography variant="body1" id="custom-schema-instruction-1">
133+
If you have custom schema selected, please copy and send introspection to server, then paste result into text box
134+
</Typography>
135+
<textarea
136+
value={introspectionQuery}
137+
readOnly
138+
onChange={this.handleUpload}
139+
/>
140+
<br />
141+
<br />
142+
<textarea
143+
placeholder="Insert Introspection Result Here"
144+
/>
145+
<Button onClick={() => { this.props.changeSchema(this.state.currentSchema, this.state.uploadedText) } }>
146+
Visualize Schema
147+
</Button>
148+
{/* <Clipboard
149+
component="a"
150+
className="copy-button"
151+
data-clipboard-text={introspectionQuery}
152+
>
153+
{introspectionQuery}
154+
</Clipboard> */}
155+
</FormControl>
156+
</form>
157+
</div>
158+
</Modal>
159+
</div>
160+
);
161+
}
162+
}
163+
164+
const SimpleModalWrapped = withStyles(styles)(ModalContainer);
165+
166+
export default connect(mapStateToProps, mapDispatchToProps)(SimpleModalWrapped);
167+
168+
// SimpleModal.propTypes = {
169+
// classes: PropTypes.object.isRequired,
170+
// };
171+
172+
// We need an intermediary variable for handling the recursive nesting.
173+
// import React, { Component } from 'react';
174+
175+
// class ModalComponent extends Component {
176+
// render() {
177+
// return (
178+
// <div>Modal Component</div>
179+
// );
180+
// }
181+
// }
182+
183+
184+
// export default ModalComponent;

‎src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { Provider } from "react-redux";
55
import store from "./store";
66

77
ReactDOM.render(
8-
// <Provider store={store}>
8+
<Provider store={store}>
99
<App /> ,
10-
// </Provider>,
10+
</Provider>,
1111
document.getElementById("root")
1212
);

0 commit comments

Comments
 (0)