diff options
author | Michael Muré <batolettre@gmail.com> | 2019-05-22 20:09:29 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-05-22 20:09:29 +0200 |
commit | e781d6c7fe7dba2fc526c2049aa188c9988e1cf4 (patch) | |
tree | 5d51b4fbf5c6dfd8439d01e4a900f074bf8d9ac1 /webui/src/bug | |
parent | 1a7ccd594adc6f185115ce12a4368c55ff418678 (diff) | |
parent | a43c7ea1c8caa61fa92bf384cd7436476fcb2b0b (diff) | |
download | git-bug-e781d6c7fe7dba2fc526c2049aa188c9988e1cf4.tar.gz |
Merge pull request #148 from MichaelMure/sandhose/webui-update-deps
Updates WebUI dependencies & rework the bug list pagination
Diffstat (limited to 'webui/src/bug')
-rw-r--r-- | webui/src/bug/Bug.js | 65 | ||||
-rw-r--r-- | webui/src/bug/LabelChange.js | 13 | ||||
-rw-r--r-- | webui/src/bug/Message.js | 43 | ||||
-rw-r--r-- | webui/src/bug/SetStatus.js | 13 | ||||
-rw-r--r-- | webui/src/bug/SetTitle.js | 13 | ||||
-rw-r--r-- | webui/src/bug/Timeline.js | 60 |
6 files changed, 104 insertions, 103 deletions
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js index 9b5f84ad..829a4af2 100644 --- a/webui/src/bug/Bug.js +++ b/webui/src/bug/Bug.js @@ -1,4 +1,4 @@ -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Typography from '@material-ui/core/Typography/Typography'; import gql from 'graphql-tag'; import React from 'react'; @@ -7,7 +7,7 @@ import Date from '../Date'; import TimelineQuery from './TimelineQuery'; import Label from '../Label'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ main: { maxWidth: 800, margin: 'auto', @@ -48,38 +48,41 @@ const styles = theme => ({ display: 'block', }, }, -}); +})); -const Bug = ({ bug, classes }) => ( - <main className={classes.main}> - <div className={classes.header}> - <span className={classes.title}>{bug.title}</span> - <span className={classes.id}>{bug.humanId}</span> +function Bug({ bug }) { + const classes = useStyles(); + return ( + <main className={classes.main}> + <div className={classes.header}> + <span className={classes.title}>{bug.title}</span> + <span className={classes.id}>{bug.humanId}</span> - <Typography color={'textSecondary'}> - <Author author={bug.author} /> - {' opened this bug '} - <Date date={bug.createdAt} /> - </Typography> - </div> - - <div className={classes.container}> - <div className={classes.timeline}> - <TimelineQuery id={bug.id} /> + <Typography color={'textSecondary'}> + <Author author={bug.author} /> + {' opened this bug '} + <Date date={bug.createdAt} /> + </Typography> </div> - <div className={classes.sidebar}> - <Typography variant={'subheading'}>Labels</Typography> - <ul className={classes.labelList}> - {bug.labels.map(l => ( - <li className={classes.label}> - <Label label={l} key={l} /> - </li> - ))} - </ul> + + <div className={classes.container}> + <div className={classes.timeline}> + <TimelineQuery id={bug.id} /> + </div> + <div className={classes.sidebar}> + <Typography variant={'subheading'}>Labels</Typography> + <ul className={classes.labelList}> + {bug.labels.map(l => ( + <li className={classes.label}> + <Label label={l} key={l} /> + </li> + ))} + </ul> + </div> </div> - </div> - </main> -); + </main> + ); +} Bug.fragment = gql` fragment Bug on Bug { @@ -97,4 +100,4 @@ Bug.fragment = gql` } `; -export default withStyles(styles)(Bug); +export default Bug; diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index 6301f35f..76b6e6e2 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -1,11 +1,11 @@ -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import gql from 'graphql-tag'; import React from 'react'; import Author from '../Author'; import Date from '../Date'; import Label from '../Label'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ main: { ...theme.typography.body2, marginLeft: theme.spacing.unit + 40, @@ -13,10 +13,11 @@ const styles = theme => ({ author: { fontWeight: 'bold', }, -}); +})); -const LabelChange = ({ op, classes }) => { +function LabelChange({ op }) { const { added, removed } = op; + const classes = useStyles(); return ( <div className={classes.main}> <Author author={op.author} className={classes.author} /> @@ -37,7 +38,7 @@ const LabelChange = ({ op, classes }) => { <Date date={op.date} /> </div> ); -}; +} LabelChange.fragment = gql` fragment LabelChange on TimelineItem { @@ -54,4 +55,4 @@ LabelChange.fragment = gql` } `; -export default withStyles(styles)(LabelChange); +export default LabelChange; diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js index 493de8ee..ff039444 100644 --- a/webui/src/bug/Message.js +++ b/webui/src/bug/Message.js @@ -1,4 +1,4 @@ -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Paper from '@material-ui/core/Paper'; import gql from 'graphql-tag'; import React from 'react'; @@ -6,7 +6,7 @@ import Author from '../Author'; import { Avatar } from '../Author'; import Date from '../Date'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ author: { fontWeight: 'bold', }, @@ -44,24 +44,27 @@ const styles = theme => ({ padding: '1rem', whiteSpace: 'pre-wrap', }, -}); +})); -const Message = ({ op, classes }) => ( - <article className={classes.container}> - <Avatar author={op.author} className={classes.avatar} /> - <Paper elevation={1} className={classes.bubble}> - <header className={classes.header}> - <div className={classes.title}> - <Author className={classes.author} author={op.author} /> - <span> commented </span> - <Date date={op.createdAt} /> - </div> - {op.edited && <div className={classes.tag}>Edited</div>} - </header> - <section className={classes.body}>{op.message}</section> - </Paper> - </article> -); +function Message({ op }) { + const classes = useStyles(); + return ( + <article className={classes.container}> + <Avatar author={op.author} className={classes.avatar} /> + <Paper elevation={1} className={classes.bubble}> + <header className={classes.header}> + <div className={classes.title}> + <Author className={classes.author} author={op.author} /> + <span> commented </span> + <Date date={op.createdAt} /> + </div> + {op.edited && <div className={classes.tag}>Edited</div>} + </header> + <section className={classes.body}>{op.message}</section> + </Paper> + </article> + ); +} Message.createFragment = gql` fragment Create on TimelineItem { @@ -95,4 +98,4 @@ Message.commentFragment = gql` } `; -export default withStyles(styles)(Message); +export default Message; diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js index 58b81630..ab591038 100644 --- a/webui/src/bug/SetStatus.js +++ b/webui/src/bug/SetStatus.js @@ -1,17 +1,18 @@ -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import gql from 'graphql-tag'; import React from 'react'; import Author from '../Author'; import Date from '../Date'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ main: { ...theme.typography.body2, marginLeft: theme.spacing.unit + 40, }, -}); +})); -const SetStatus = ({ op, classes }) => { +function SetStatus({ op }) { + const classes = useStyles(); return ( <div className={classes.main}> <Author author={op.author} bold /> @@ -19,7 +20,7 @@ const SetStatus = ({ op, classes }) => { <Date date={op.date} /> </div> ); -}; +} SetStatus.fragment = gql` fragment SetStatus on TimelineItem { @@ -35,4 +36,4 @@ SetStatus.fragment = gql` } `; -export default withStyles(styles)(SetStatus); +export default SetStatus; diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js index f5c48568..d9a09ad5 100644 --- a/webui/src/bug/SetTitle.js +++ b/webui/src/bug/SetTitle.js @@ -1,10 +1,10 @@ -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import gql from 'graphql-tag'; import React from 'react'; import Author from '../Author'; import Date from '../Date'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ main: { ...theme.typography.body2, marginLeft: theme.spacing.unit + 40, @@ -12,9 +12,10 @@ const styles = theme => ({ bold: { fontWeight: 'bold', }, -}); +})); -const SetTitle = ({ op, classes }) => { +function SetTitle({ op }) { + const classes = useStyles(); return ( <div className={classes.main}> <Author author={op.author} className={classes.bold} /> @@ -25,7 +26,7 @@ const SetTitle = ({ op, classes }) => { <Date date={op.date} /> </div> ); -}; +} SetTitle.fragment = gql` fragment SetTitle on TimelineItem { @@ -42,4 +43,4 @@ SetTitle.fragment = gql` } `; -export default withStyles(styles)(SetTitle); +export default SetTitle; diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js index 3123f45f..d77e0d4b 100644 --- a/webui/src/bug/Timeline.js +++ b/webui/src/bug/Timeline.js @@ -1,51 +1,43 @@ -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import React from 'react'; import LabelChange from './LabelChange'; import Message from './Message'; import SetStatus from './SetStatus'; import SetTitle from './SetTitle'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ main: { '& > *:not(:last-child)': { marginBottom: theme.spacing.unit * 2, }, }, -}); +})); -class Timeline extends React.Component { - props: { - ops: Array, - fetchMore: any => any, - classes: any, - }; +const componentMap = { + CreateTimelineItem: Message, + AddCommentTimelineItem: Message, + LabelChangeTimelineItem: LabelChange, + SetTitleTimelineItem: SetTitle, + SetStatusTimelineItem: SetStatus, +}; - render() { - const { ops, classes } = this.props; +function Timeline({ ops }) { + const classes = useStyles(); - return ( - <div className={classes.main}> - {ops.map((op, index) => { - switch (op.__typename) { - case 'CreateTimelineItem': - return <Message key={index} op={op} />; - case 'AddCommentTimelineItem': - return <Message key={index} op={op} />; - case 'LabelChangeTimelineItem': - return <LabelChange key={index} op={op} />; - case 'SetTitleTimelineItem': - return <SetTitle key={index} op={op} />; - case 'SetStatusTimelineItem': - return <SetStatus key={index} op={op} />; + return ( + <div className={classes.main}> + {ops.map((op, index) => { + const Component = componentMap[op.__typename]; - default: - console.log('unsupported operation type ' + op.__typename); - return null; - } - })} - </div> - ); - } + if (!Component) { + console.warn('unsupported operation type ' + op.__typename); + return null; + } + + return <Component key={index} op={op} />; + })} + </div> + ); } -export default withStyles(styles)(Timeline); +export default Timeline; |