Skip to content

Commit

Permalink
feat: refs #110082 add dialog to create new app
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillaume Bernos committed Jul 19, 2019
1 parent 97c7649 commit eb05b9b
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 6 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"license": "ISC",
"dependencies": {
"@material-ui/core": "^4.2.1",
"@material-ui/icons": "^4.2.1",
"axios": "0.19.0",
"cors": "^2.8.5",
"debug": "4.1.1",
Expand All @@ -49,13 +50,14 @@
"js-cookie": "2.2.0",
"jsonwebtoken": "8.5.1",
"jwt-decode": "2.2.0",
"moment": "2.24.0",
"moment": "^2.24.0",
"mongoose": "5.6.4",
"parse-dashboard": "1.3.3",
"parse-server": "https://github.com/brunoMaurice/parse-server/releases/download/3.6.0-bis/parse-server-v3.6.0-bis.tgz",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-moment": "^0.9.2",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"request-promise": "4.2.4",
Expand Down
158 changes: 154 additions & 4 deletions src/front/pages/home/home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,23 @@ import Divider from '@material-ui/core/Divider';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
import Fab from '@material-ui/core/Fab';
import IconButton from '@material-ui/core/IconButton';
import AddIcon from '@material-ui/icons/Add';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

import Moment from 'react-moment';

import PropTypes from 'prop-types'; // ES6

import { listOfApplications } from '../../services/api';
import { listOfApplications, createApplication } from '../../services/api';


const styles = {
Expand All @@ -33,6 +46,14 @@ const styles = {
inline: {
display: 'inline',
},
fab: {
position: 'absolute',
bottom: 32,
right: 32,
},
extendedIcon: {
marginRight: 16,
},

};

Expand All @@ -42,7 +63,14 @@ class HomePage extends React.PureComponent {
super();
this.state = {
loading: true,
developerApplications: []
dialogNewApplicationOpen: false,
developerApplications: [],
newApplication: {
name: '',
description: '',
apple_store_link: '',
google_market_link: ''
}
}
}

Expand All @@ -60,9 +88,46 @@ class HomePage extends React.PureComponent {
history.push(`/application/${application._id}`);
}

handleClickOpen() {
this.setState({
dialogNewApplicationOpen: true
});
}

handleClose() {
this.setState({
dialogNewApplicationOpen: false,
newApplication: {
name: '',
description: '',
apple_store_link: '',
google_market_link: ''
}
});
}

handleChange(name, event) {
const { newApplication } = this.state;
this.setState({
newApplication: {
...newApplication,
[name]: event.target.value
}
});
}

async clickCreateApplication() {
const { newApplication } = this.state;
const response = await createApplication(newApplication);
this.handleClose();

const { history } = this.props;
history.push(`/application/${response._id}`);
}

render() {
const { classes } = this.props;
const { developerApplications, loading } = this.state;
const { developerApplications, loading, dialogNewApplicationOpen, newApplication } = this.state;
return (
<>
<List className={classes.root}>
Expand All @@ -83,7 +148,11 @@ class HomePage extends React.PureComponent {
className={classes.inline}
color="textPrimary"
>
{` - ${application.updated_at}`}
{" - "}
<Moment format="YYYY-MM-DD HH:mm">
{application.updated_at}
</Moment>

</Typography>

</React.Fragment>
Expand All @@ -97,6 +166,87 @@ class HomePage extends React.PureComponent {
}
</List>

<Fab
variant="extended"
size="large"
color="primary"
aria-label="Add"
className={classes.fab}
onClick={() => this.handleClickOpen()}
>
<AddIcon className={classes.extendedIcon} />
New application
</Fab>


<Dialog open={dialogNewApplicationOpen} onClose={() => this.handleClose()} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">New Application</DialogTitle>
<DialogContent>
<DialogContentText>
Fill in the required fields to create a new application. It will allow you to get Token to use Connect API.
</DialogContentText>
<TextField
autoFocus
required
id="name"
label="Name"
className={classes.textField}
fullWidth
value={newApplication.name}
onChange={(event) => this.handleChange('name', event)}
margin="normal"
variant="outlined"
/>


<TextField
required
id="description"
label="Description"
className={classes.textField}
fullWidth
value={newApplication.description}
onChange={(event) => this.handleChange('description', event)}
margin="normal"
variant="outlined"
multiline
rows="4"
/>

<TextField
id="apple_store_link"
label="App Store Link"
className={classes.textField}
fullWidth
value={newApplication.apple_store_link}
onChange={(event) => this.handleChange('apple_store_link', event)}
margin="normal"
variant="outlined"
/>


<TextField
id="google_market_link"
label="Play Store Link"
className={classes.textField}
fullWidth
value={newApplication.google_market_link}
onChange={(event) => this.handleChange('google_market_link', event)}
margin="normal"
variant="outlined"
/>

</DialogContent>
<DialogActions>
<Button onClick={() => this.handleClose()} color="primary">
Cancel
</Button>
<Button disabled={!newApplication.name || !newApplication.description} onClick={() => this.clickCreateApplication()} color="primary">
Create application
</Button>
</DialogActions>
</Dialog>

</>
);
}
Expand Down
19 changes: 19 additions & 0 deletions src/front/services/api.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,22 @@ export const getApplication = async (appId) => {
}


export const createApplication = async(newApplication) => {
const jwt = getJwt();
if (!jwt) {
return {};
}

const responses = await fetch(`${process.env.API_URL}/api/application`, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${jwt}`
},
method: 'POST',
body: JSON.stringify(newApplication)
});


return responses.json();
}
14 changes: 13 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1014,6 +1014,13 @@
react-transition-group "^4.0.0"
warning "^4.0.1"

"@material-ui/icons@^4.2.1":
version "4.2.1"
resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.2.1.tgz#fe2f1c4f60c24256d244a69d86d0c00e8ed4037e"
integrity sha512-FvSD5lUBJ66frI4l4AYAPy2CH14Zs2Dgm0o3oOMr33BdQtOAjCgbdOcvPBeaD1w6OQl31uNW3CKOE8xfPNxvUQ==
dependencies:
"@babel/runtime" "^7.2.0"

"@material-ui/styles@^4.2.0":
version "4.2.1"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.2.1.tgz#b07383ffeaa840bcb6969eb17c5f0e3b734e8e5b"
Expand Down Expand Up @@ -6981,7 +6988,7 @@ [email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
dependencies:
minimist "0.0.8"

moment@2.24.0, moment@^2.11.2:
moment@^2.11.2, moment@^2.24.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
Expand Down Expand Up @@ -8680,6 +8687,11 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==

react-moment@^0.9.2:
version "0.9.2"
resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.9.2.tgz#1cdc6ed02f1735282282129edf0f607f420df039"
integrity sha512-jpKIEvcEOTSa4RXWTjDlvja7sN+ee5Gyk5ZKa704FZxE01OxmKIpq9GUliqTrAgdDYJJUQsnqQamczn0TN+DTg==

[email protected], react-router-dom@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
Expand Down

0 comments on commit eb05b9b

Please sign in to comment.