Skip to content

Commit

Permalink
#7 added new idea submission, made report form as parent and widen it…
Browse files Browse the repository at this point in the history 
…, removed commented part of code from githubApi
  • Loading branch information
@matej-vavrek @tibor-postek-m2ms
matej-vavrek authored and tibor-postek-m2ms committed Mar 10, 2020
1 parent 5d685ac commit 515a180
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 307 deletions.
10 changes: 9 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,11 +168,13 @@ docker exec -it web_dock /bin/bash
#IDEs
###WebStorm, PhpStorm
Please install following extension Prettier

```
Go to: Preferences, Tools, File watchers
Add Prettier
Prettier reccomended settings: Files to watch - Scope - All changed files
```

During the commit in this IDE, check `Run Git hooks`

###Visual Studio Code
Expand All @@ -182,9 +184,15 @@ Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=es

ES-lint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint


#Environments
to activate GitHub api create `.env` file and following environment variable

```
GITHUB_API_TOKEN=myGitHubToken
```

To create .env with token right away:

```
echo "GITHUB_API_TOKEN=myGitHubToken" > .env
```
4 changes: 4 additions & 0 deletions js/components/header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import { DJANGO_CONTEXT } from '../../utils/djangoContext';
import { useDisableUserInteraction } from '../helpers/useEnableUserInteracion';
import { useHistory } from 'react-router-dom';
import { IssueReport } from '../userFeedback/issueReport';
import { IdeaReport } from '../userFeedback/ideaReport';
const uuidv4 = require('uuid/v4');

const useStyles = makeStyles(theme => ({
Expand Down Expand Up @@ -211,6 +212,9 @@ export default memo(
<Grid item>
<IssueReport />
</Grid>
<Grid item>
<IdeaReport />
</Grid>
</Grid>
</Grid>
<Grid item>
Expand Down
51 changes: 7 additions & 44 deletions js/components/userFeedback/githubApi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const getHeaders = () => {
/**
* Upload an image from form state
*/
const uploadFile = formState => async dispatch => {
const uploadFile = (formState, formType) => async dispatch => {
console.log('uploading new file');

let screenshotUrl = '';
Expand All @@ -36,7 +36,7 @@ const uploadFile = formState => async dispatch => {
const fileName = 'screenshot-' + uid + '.png';

const payload = {
message: 'auto upload from issue form',
message: 'auto upload from ' + formType + ' form',
branch: 'master',
content: imgBase64
};
Expand All @@ -61,11 +61,11 @@ const uploadFile = formState => async dispatch => {
/**
* Create issue in GitHub (thunk actions are used to stored in dispatchActions.js)
*/
export const createIssue = (formState, afterCreateIssueCallback) => async dispatch => {
export const createIssue = (formState, formType, labels, afterCreateIssueCallback) => async dispatch => {
dispatch(setResponse(''));

const screenshotUrl = await dispatch(uploadFile(formState));
console.log('url', screenshotUrl);
const screenshotUrl = await dispatch(uploadFile(formState, formType));
console.log('screenshot url', screenshotUrl);

console.log('creating new issue');
console.log(formState.name, formState.email, formState.title, formState.description);
Expand All @@ -79,50 +79,13 @@ export const createIssue = (formState, afterCreateIssueCallback) => async dispat
if (screenshotUrl.length > 0) {
body.push('', '![screenshot](' + screenshotUrl + ')');
}

body = body.join('\n');

// check if same title exists
/*var createIssue = true;
var issues = null;
axios.get(getIssuesLink(), { 'headers': getHeaders() }).then(result => {
console.log(result);
var create = true;
if (result.data.length > 0) {
result.data.some(item => {
console.log(item.title);
if (item.title == title) {
create = false;
console.log('found!');
dispatch(setResponse(title + ' already exists!'));
return true;
}
});
}
if (create) {
// https://developer.github.com/v3/issues/#create-an-issue
var issue = {
"title": title,
"body": body,
"labels": ["issue"]
};
// headers['Content-Type'] = 'application/json';
axios.post(getIssuesLink(), issue, { 'headers': getHeaders() }).then(result => {
console.log(result);
dispatch(setResponse('Issue created: ' + result.data.html_url));
handleCloseForm();
}).catch((error, result) => {
console.log(error);
dispatch(setResponse('Error occured: ' + error.message));
});
}
});*/

// https://developer.github.com/v3/issues/#create-an-issue
var issue = {
title: formState.title,
body: body,
labels: ['issue']
labels: labels
};

api({
Expand Down
252 changes: 3 additions & 249 deletions js/components/userFeedback/issueReport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,255 +2,9 @@
* This component creates a button for reporting new issues and handling them.
*/

import React, { memo, useState, useContext } from 'react';
import { ButtonBase, Grid, makeStyles, Typography } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import { ReportProblem } from '@material-ui/icons'; // EmojiObjects for new idea
import { Button } from '../common/Inputs/Button';
import Modal from '../common/Modal';
import { HeaderContext } from '../header/headerContext';
import { Formik, Form } from 'formik';
import { TextField } from 'formik-material-ui';
import { createIssue } from './githubApi';
import { canCaptureScreen, captureScreen, isFirefox, isChrome } from './browserApi';
import { resetForm, setName, setEmail, setTitle, setDescription } from './redux/actions';
import { useDispatch, useSelector } from 'react-redux';

const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1),
color: 'red'
},
input: {
width: '100%'
},
body: {
width: '100%',
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1)
},
pt: {
paddingTop: theme.spacing(2)
},
link: {
color: theme.palette.primary.contrastText,
'&:visited': {
color: theme.palette.primary.contrastText
},
'&:active': {
color: theme.palette.primary.contrastText
},
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
}
},
// https://material-ui.com/components/grid/
image: {
width: 256,
height: 256
},
img: {
margin: 'auto',
display: 'block',
maxWidth: '100%',
maxHeight: '100%'
}
}));
import React, { memo } from 'react';
import { ReportForm, FORM_TYPE } from './reportForm';

export const IssueReport = memo(() => {
const classes = useStyles();
const [state, setState] = useState();

const dispatch = useDispatch();
const formState = useSelector(state => state.issueReducers);
const { setSnackBarTitle } = useContext(HeaderContext);

const afterCreateIssueCallback = url => {
setSnackBarTitle(
<>
{'Issue was created: '}
<a href={url} target="_blank" className={classes.link}>
{url}
</a>
</>
);
handleCloseForm();
};

/* Modal handlers */
const [openForm, setOpenForm] = useState(false);
const [openDialog, setOpenDialog] = useState(false);

const isResponse = () => {
return openForm && formState.response.length > 0;
};

const handleOpenForm = async () => {
await dispatch(captureScreen());
setOpenForm(true);
};

const handleCloseForm = () => {
setOpenForm(false);
dispatch(resetForm());
};

const handleOpenDialog = () => {
if (canCaptureScreen()) {
setOpenDialog(true);
} else {
handleOpenForm(true);
}
};

const handleCloseDialog = () => {
setOpenDialog(false);
handleOpenForm();
};

const getHintText = () => {
let text = 'please choose your window or screen to share';
if (isFirefox()) {
text += ' and "Allow" it';
} else if (isChrome()) {
text += ', ideally "Chrome tab" and your current tab';
}
return text;
};

return (
<div>
<Button
startIcon={<ReportProblem />}
variant="text"
size="small"
className={classes.button}
onClick={handleOpenDialog}
>
Report issue
</Button>
<Modal open={openDialog} onClose={handleCloseDialog}>
<Grid container direction="column" className={classes.pt}>
<Grid item>
<Typography variant="body1">
It is helpful to provide a screenshot of your current state, therefore you are going to be prompted by
browser to do so.
</Typography>
<Typography variant="body1">After you proceed, {getHintText()}.</Typography>
</Grid>
<Grid container justify="flex-end" direction="row">
<Grid item>
<Button color="primary" onClick={handleCloseDialog}>
Proceed
</Button>
</Grid>
</Grid>
</Grid>
</Modal>
<Modal open={openForm} onClose={handleCloseForm}>
<Formik
initialValues={{
name: formState.name,
email: formState.email,
title: formState.title,
description: formState.description
}}
validate={values => {
const errors = {};
if (!values.title) {
errors.title = 'Required field.';
}
if (!values.description) {
errors.description = 'Required field.';
}
if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address.';
}
return errors;
}}
onSubmit={async (values, { setSubmitting }) => {
await dispatch(createIssue(formState, afterCreateIssueCallback));
setSubmitting(false);
}}
>
{({ submitForm, isSubmitting }) => (
<Form>
<Grid container direction="column" className={classes.body}>
<Typography variant="h3">Report issue</Typography>
{isResponse() && <Alert severity="error">{formState.response}</Alert>}

<Grid container direction="row" spacing={2} className={classes.input}>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" className={classes.input}>
<Grid item xs>
<TextField
name="name"
label="Name"
value={formState.name}
onInput={e => dispatch(setName(e.target.value))}
disabled={isSubmitting}
/>
</Grid>
<Grid item xs>
<TextField
name="email"
label="Email"
value={formState.email}
onInput={e => dispatch(setEmail(e.target.value))}
disabled={isSubmitting}
/>
</Grid>
<Grid item xs>
<TextField
required
name="title"
label="Title"
value={formState.title}
onInput={e => dispatch(setTitle(e.target.value))}
disabled={isSubmitting}
/>
</Grid>
<Grid item xs>
<TextField
required
name="description"
label="Description"
placeholder="Describe your problem in a detail."
multiline
rows="4"
value={formState.description}
onInput={e => dispatch(setDescription(e.target.value))}
disabled={isSubmitting}
/>
</Grid>
</Grid>
</Grid>

<Grid item>
<ButtonBase className={classes.image}>
<img className={classes.img} alt="complex" src={formState.imageSource} />
</ButtonBase>
</Grid>
</Grid>

<Grid container justify="flex-end" direction="row">
<Grid item>
<Button disabled={isSubmitting} onClick={handleCloseForm}>
Close
</Button>
</Grid>
<Grid item>
<Button color="primary" disabled={isSubmitting} onClick={submitForm}>
Report issue
</Button>
</Grid>
</Grid>
</Grid>
</Form>
)}
</Formik>
</Modal>
</div>
);
return <ReportForm formType={FORM_TYPE.ISSUE} />;
});
Loading

0 comments on commit 515a180

Please sign in to comment.