From bb4ebed08c3f1b1a7ba9968ede75a07f1705d2df Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Sat, 18 Aug 2018 17:00:53 -0400 Subject: [PATCH] webui: Format everything with prettier --- webui/.eslintrc | 3 + webui/.prettierrc | 4 ++ webui/Makefile | 11 ++++ webui/package-lock.json | 47 +++++++++++++++ webui/package.json | 8 ++- webui/src/App.js | 38 ++++++------ webui/src/Author.js | 22 +++---- webui/src/Date.js | 12 ++-- webui/src/Label.js | 32 +++++----- webui/src/bug/Bug.js | 52 ++++++++--------- webui/src/bug/BugQuery.js | 28 ++++----- webui/src/bug/LabelChange.js | 48 ++++++++------- webui/src/bug/Message.js | 26 ++++----- webui/src/bug/SetStatus.js | 25 ++++---- webui/src/bug/SetTitle.js | 28 ++++----- webui/src/bug/Timeline.js | 47 ++++++++------- webui/src/bug/TimelineQuery.js | 41 +++++++------ webui/src/index.js | 22 +++---- webui/src/list/BugRow.js | 54 ++++++++--------- webui/src/list/List.js | 103 ++++++++++++++++----------------- webui/src/list/ListQuery.js | 36 +++++++----- 21 files changed, 386 insertions(+), 301 deletions(-) create mode 100644 webui/.eslintrc create mode 100644 webui/.prettierrc create mode 100644 webui/Makefile diff --git a/webui/.eslintrc b/webui/.eslintrc new file mode 100644 index 0000000000000000000000000000000000000000..9cf9d0090d3843c7157efe9a158dc03a63bbb544 --- /dev/null +++ b/webui/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": ["react-app", "plugin:prettier/recommended"] +} diff --git a/webui/.prettierrc b/webui/.prettierrc new file mode 100644 index 0000000000000000000000000000000000000000..c1a6f66713166020e90a73182ca967212bd18ea3 --- /dev/null +++ b/webui/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/webui/Makefile b/webui/Makefile new file mode 100644 index 0000000000000000000000000000000000000000..1f023cc9019a27c32425c4639537bb633f943317 --- /dev/null +++ b/webui/Makefile @@ -0,0 +1,11 @@ +start: + npm start + +install: + npm install + +test: + npm run lint + +build: + npm run build diff --git a/webui/package-lock.json b/webui/package-lock.json index 58af97ae8a73b6636298c473192e388a538d4354..174ff2edabf2ed52860ad7731a16a37a51dd1f3d 100644 --- a/webui/package-lock.json +++ b/webui/package-lock.json @@ -3366,6 +3366,23 @@ } } }, + "eslint-config-prettier": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-3.0.1.tgz", + "integrity": "sha512-vA0TB8HCx/idHXfKHYcg9J98p0Q8nkfNwNAoP7e+ywUidn6ScaFS5iqncZAHPz+/a0A/tp657ulFHFx/2JDP4Q==", + "dev": true, + "requires": { + "get-stdin": "^6.0.0" + }, + "dependencies": { + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + } + } + }, "eslint-config-react-app": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz", @@ -3521,6 +3538,24 @@ "jsx-ast-utils": "^1.4.0" } }, + "eslint-plugin-prettier": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.2.tgz", + "integrity": "sha512-tGek5clmW5swrAx1mdPYM8oThrBE83ePh7LeseZHBWfHVGrHPhKn7Y5zgRMbU/9D5Td9K4CEmUPjGxA7iw98Og==", + "dev": true, + "requires": { + "fast-diff": "^1.1.1", + "jest-docblock": "^21.0.0" + }, + "dependencies": { + "jest-docblock": { + "version": "21.2.0", + "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-21.2.0.tgz", + "integrity": "sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==", + "dev": true + } + } + }, "eslint-plugin-react": { "version": "7.4.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz", @@ -3913,6 +3948,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=" }, + "fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==", + "dev": true + }, "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", @@ -9016,6 +9057,12 @@ "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz", "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=" }, + "prettier": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.14.2.tgz", + "integrity": "sha512-McHPg0n1pIke+A/4VcaS2en+pTNjy4xF+Uuq86u/5dyDO59/TtFZtQ708QIRkEZ3qwKz3GVkVa6mpxK/CpB8Rg==", + "dev": true + }, "pretty-bytes": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", diff --git a/webui/package.json b/webui/package.json index 54deb684315a9908273e64746e7a349d19f4f92f..58f90deeb6cc1310b66c7341970ec141f974cdf1 100644 --- a/webui/package.json +++ b/webui/package.json @@ -15,11 +15,17 @@ "react-router-dom": "^4.3.1", "react-scripts": "1.1.4" }, + "devDependencies": { + "eslint-config-prettier": "^3.0.1", + "eslint-plugin-prettier": "^2.6.2", + "prettier": "1.14.2" + }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "lint": "eslint src/" }, "proxy": "http://localhost:3001" } diff --git a/webui/src/App.js b/webui/src/App.js index 47a31e453608404ed36504871a3ce343f087e280..3a693dcb06794f81424ec14e9bc61aa10eeb28da 100644 --- a/webui/src/App.js +++ b/webui/src/App.js @@ -1,25 +1,25 @@ -import AppBar from '@material-ui/core/AppBar' -import CssBaseline from '@material-ui/core/CssBaseline' -import { withStyles } from '@material-ui/core/styles' -import Toolbar from '@material-ui/core/Toolbar' -import Typography from '@material-ui/core/Typography' -import React from 'react' -import { Route, Switch, withRouter } from 'react-router' -import { Link } from 'react-router-dom' +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import { withStyles } from '@material-ui/core/styles'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import React from 'react'; +import { Route, Switch, withRouter } from 'react-router'; +import { Link } from 'react-router-dom'; -import BugQuery from './bug/BugQuery' -import ListQuery from './list/ListQuery' +import BugQuery from './bug/BugQuery'; +import ListQuery from './list/ListQuery'; const styles = theme => ({ appTitle: { color: 'white', - textDecoration: 'none' - } -}) + textDecoration: 'none', + }, +}); -const App = ({location, classes}) => ( +const App = ({ location, classes }) => ( - + @@ -30,10 +30,10 @@ const App = ({location, classes}) => ( - - + + -) +); -export default withStyles(styles)(withRouter(App)) +export default withStyles(styles)(withRouter(App)); diff --git a/webui/src/Author.js b/webui/src/Author.js index 37de7aa7ffa6a77da870192405be678822f46025..0ad7e257f37b54301a15d433a263aac3c9b894fb 100644 --- a/webui/src/Author.js +++ b/webui/src/Author.js @@ -1,24 +1,24 @@ -import Tooltip from '@material-ui/core/Tooltip/Tooltip' -import React from 'react' -import { withStyles } from '@material-ui/core/styles' +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; const styles = theme => ({ author: { ...theme.typography.body2, }, bold: { - fontWeight: 'bold' - } -}) + fontWeight: 'bold', + }, +}); -const Author = ({author, bold, classes}) => { - const klass = bold ? [classes.author, classes.bold] : [classes.author] +const Author = ({ author, bold, classes }) => { + const klass = bold ? [classes.author, classes.bold] : [classes.author]; return ( {author.name} - ) -} + ); +}; -export default withStyles(styles)(Author) +export default withStyles(styles)(Author); diff --git a/webui/src/Date.js b/webui/src/Date.js index b20fd274087a6f11ceb5d66199e52d1536e7f180..46741924a2f0383721cdcadcefd861e97f9a3804 100644 --- a/webui/src/Date.js +++ b/webui/src/Date.js @@ -1,11 +1,11 @@ -import Tooltip from '@material-ui/core/Tooltip/Tooltip' -import * as moment from 'moment' -import React from 'react' +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import * as moment from 'moment'; +import React from 'react'; -const Date = ({date}) => ( +const Date = ({ date }) => ( {moment(date).fromNow()} -) +); -export default Date +export default Date; diff --git a/webui/src/Label.js b/webui/src/Label.js index 8981142db69dc69b09640be33800c5477a0eadda..e7c25c237f231afff9c3b9ee4faecbed09bc88bb 100644 --- a/webui/src/Label.js +++ b/webui/src/Label.js @@ -1,11 +1,11 @@ -import React from "react"; -import { withStyles } from "@material-ui/core/styles"; +import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; import { getContrastRatio, - darken -} from "@material-ui/core/styles/colorManipulator"; -import * as allColors from "@material-ui/core/colors"; -import { common } from "@material-ui/core/colors"; + darken, +} from '@material-ui/core/styles/colorManipulator'; +import * as allColors from '@material-ui/core/colors'; +import { common } from '@material-ui/core/colors'; // JS's modulo returns negative numbers sometimes. // This ensures the result is positive. @@ -21,7 +21,7 @@ const labelColors = Object.entries(allColors) // Generate a hash (number) from a string const hash = string => - string.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0); + string.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0); // Get the background color from the label const getColor = label => @@ -36,7 +36,7 @@ const getTextColor = background => const _genStyle = background => ({ backgroundColor: background, color: getTextColor(background), - borderBottomColor: darken(background, 0.2) + borderBottomColor: darken(background, 0.2), }); // Generate a style object (text, background and border colors) from the label @@ -45,14 +45,14 @@ const genStyle = label => _genStyle(getColor(label)); const styles = theme => ({ label: { ...theme.typography.body2, - padding: "0 6px", - fontSize: "0.9em", - margin: "0 1px", - borderRadius: "3px", - display: "inline-block", - borderBottom: "solid 1.5px", - verticalAlign: "bottom" - } + padding: '0 6px', + fontSize: '0.9em', + margin: '0 1px', + borderRadius: '3px', + display: 'inline-block', + borderBottom: 'solid 1.5px', + verticalAlign: 'bottom', + }, }); const Label = ({ label, classes }) => ( diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js index c6edda35bb1496aaea1ca0e4e82a99ed61669cfe..329fdd72dd62f107f1383dee9da6e87a25aa711a 100644 --- a/webui/src/bug/Bug.js +++ b/webui/src/bug/Bug.js @@ -1,49 +1,49 @@ -import { withStyles } from "@material-ui/core/styles"; -import Typography from "@material-ui/core/Typography/Typography"; -import gql from "graphql-tag"; -import React from "react"; -import Author from "../Author"; -import Date from "../Date"; -import TimelineQuery from "./TimelineQuery"; -import Label from "../Label"; +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography/Typography'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; +import TimelineQuery from './TimelineQuery'; +import Label from '../Label'; const styles = theme => ({ main: { maxWidth: 600, - margin: "auto", - marginTop: theme.spacing.unit * 4 + margin: 'auto', + marginTop: theme.spacing.unit * 4, }, header: {}, title: { - ...theme.typography.headline + ...theme.typography.headline, }, id: { ...theme.typography.subheading, - marginLeft: 15 + marginLeft: 15, }, container: { - display: "flex", - marginBottom: 30 + display: 'flex', + marginBottom: 30, }, timeline: { - width: "70%", + width: '70%', marginTop: 20, - marginRight: 20 + marginRight: 20, }, sidebar: { - width: "30%" + width: '30%', }, labelList: { - listStyle: "none", + listStyle: 'none', padding: 0, - margin: 0 + margin: 0, }, label: { - margin: "4px 0", - "& > *": { - display: "block" - } - } + margin: '4px 0', + '& > *': { + display: 'block', + }, + }, }); const Bug = ({ bug, classes }) => ( @@ -52,7 +52,7 @@ const Bug = ({ bug, classes }) => ( {bug.title} {bug.humanId} - + opened this bug @@ -64,7 +64,7 @@ const Bug = ({ bug, classes }) => (
- Labels + Labels
    {bug.labels.map(l => (
  • diff --git a/webui/src/bug/BugQuery.js b/webui/src/bug/BugQuery.js index 2242141499f65969aa30edcb5a919f147be00e86..dbf24c3123a939dc814ef363e4e9ed209566d88a 100644 --- a/webui/src/bug/BugQuery.js +++ b/webui/src/bug/BugQuery.js @@ -1,9 +1,9 @@ -import CircularProgress from '@material-ui/core/CircularProgress' -import gql from 'graphql-tag' -import React from 'react' -import { Query } from 'react-apollo' +import CircularProgress from '@material-ui/core/CircularProgress'; +import gql from 'graphql-tag'; +import React from 'react'; +import { Query } from 'react-apollo'; -import Bug from './Bug' +import Bug from './Bug'; const QUERY = gql` query GetBug($id: String!) { @@ -15,16 +15,16 @@ const QUERY = gql` } ${Bug.fragment} -` +`; -const BugQuery = ({match}) => ( - - {({loading, error, data}) => { - if (loading) return - if (error) return

    Error: {error}

    - return +const BugQuery = ({ match }) => ( + + {({ loading, error, data }) => { + if (loading) return ; + if (error) return

    Error: {error}

    ; + return ; }}     -) +); -export default BugQuery +export default BugQuery; diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index f954372a5b1618d8860ccb5aee57ede6ed1ec2bf..bb54667839a8ccf91e8501471f67583548afa720 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -1,31 +1,39 @@ -import { withStyles } from '@material-ui/core/styles' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' -import Label from '../Label' +import { withStyles } from '@material-ui/core/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 => ({ main: { - ...theme.typography.body2 + ...theme.typography.body2, }, -}) +}); -const LabelChange = ({op, classes}) => { - const {added, removed} = op +const LabelChange = ({ op, classes }) => { + const { added, removed } = op; return (
    - { added.length > 0 && added the } - { added.map((label, index) =>
    - ) -} + ); +}; LabelChange.fragment = gql` fragment LabelChange on Operation { @@ -39,6 +47,6 @@ LabelChange.fragment = gql` removed } } -` +`; -export default withStyles(styles)(LabelChange) +export default withStyles(styles)(LabelChange); diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js index 2a96e52d8c85004b6536ab0f3647ead9bb4584cb..2d03e78062ac1c744ae5dabf9495456d03d3b1d8 100644 --- a/webui/src/bug/Message.js +++ b/webui/src/bug/Message.js @@ -1,9 +1,9 @@ -import { withStyles } from '@material-ui/core/styles' -import Typography from '@material-ui/core/Typography' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; const styles = theme => ({ header: { @@ -24,10 +24,10 @@ const styles = theme => ({ minHeight: 50, padding: 5, whiteSpace: 'pre-wrap', - } -}) + }, +}); -const Message = ({op, classes}) => ( +const Message = ({ op, classes }) => (
    @@ -38,7 +38,7 @@ const Message = ({op, classes}) => ( {op.message}
    -) +); Message.createFragment = gql` fragment Create on Operation { @@ -51,7 +51,7 @@ Message.createFragment = gql` message } } -` +`; Message.commentFragment = gql` fragment Comment on Operation { @@ -64,6 +64,6 @@ Message.commentFragment = gql` message } } -` +`; -export default withStyles(styles)(Message) +export default withStyles(styles)(Message); diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js index eb41fc2871937601477fbf5c4c0d064f1ad6bc6a..7d6bccf336dd241fba1c04422d2d8ad6751550ab 100644 --- a/webui/src/bug/SetStatus.js +++ b/webui/src/bug/SetStatus.js @@ -1,25 +1,24 @@ -import { withStyles } from '@material-ui/core/styles' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' +import { withStyles } from '@material-ui/core/styles'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; const styles = theme => ({ main: { - ...theme.typography.body2 + ...theme.typography.body2, }, -}) - -const SetStatus = ({op, classes}) => { +}); +const SetStatus = ({ op, classes }) => { return (
    {op.status.toLowerCase()} this
    - ) -} + ); +}; SetStatus.fragment = gql` fragment SetStatus on Operation { @@ -32,6 +31,6 @@ SetStatus.fragment = gql` status } } -` +`; -export default withStyles(styles)(SetStatus) +export default withStyles(styles)(SetStatus); diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js index b6bb8b70a6eaaed779bb4db4318c7c4c49a9098c..838219e29e90138e0f4183eb39f6cbf9d9191ce4 100644 --- a/webui/src/bug/SetTitle.js +++ b/webui/src/bug/SetTitle.js @@ -1,19 +1,19 @@ -import { withStyles } from '@material-ui/core/styles' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' +import { withStyles } from '@material-ui/core/styles'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; const styles = theme => ({ main: { - ...theme.typography.body2 + ...theme.typography.body2, }, bold: { - fontWeight: 'bold' - } -}) + fontWeight: 'bold', + }, +}); -const SetTitle = ({op, classes}) => { +const SetTitle = ({ op, classes }) => { return (
    @@ -23,8 +23,8 @@ const SetTitle = ({op, classes}) => { {op.title}
    - ) -} + ); +}; SetTitle.fragment = gql` fragment SetTitle on Operation { @@ -38,6 +38,6 @@ SetTitle.fragment = gql` was } } -` +`; -export default withStyles(styles)(SetTitle) +export default withStyles(styles)(SetTitle); diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js index a15409ab0925fde129ad815b5cad3c168223c2d2..d331d11d586775b565bfdcbb850091dbd96d8e97 100644 --- a/webui/src/bug/Timeline.js +++ b/webui/src/bug/Timeline.js @@ -1,52 +1,51 @@ -import { withStyles } from '@material-ui/core/styles' -import React from 'react' -import LabelChange from './LabelChange' -import Message from './Message' -import SetStatus from './SetStatus' -import SetTitle from './SetTitle' +import { withStyles } from '@material-ui/core/styles'; +import React from 'react'; +import LabelChange from './LabelChange'; +import Message from './Message'; +import SetStatus from './SetStatus'; +import SetTitle from './SetTitle'; const styles = theme => ({ main: { '& > *:not(:last-child)': { - marginBottom: 10 - } - } -}) + marginBottom: 10, + }, + }, +}); class Timeline extends React.Component { - props: { ops: Array, - fetchMore: (any) => any, + fetchMore: any => any, classes: any, - } + }; render() { - const {ops, classes} = this.props + const { ops, classes } = this.props; return (
    - { ops.map((op, index) => { + {ops.map((op, index) => { switch (op.__typename) { case 'CreateOperation': - return + return ; case 'AddCommentOperation': - return + return ; case 'LabelChangeOperation': - return + return ; case 'SetTitleOperation': - return + return ; case 'SetStatusOperation': - return + return ; default: - console.log('unsupported operation type ' + op.__typename) - return null + console.log('unsupported operation type ' + op.__typename); + return null; } })}
    - ) + ); } } -export default withStyles(styles)(Timeline) +export default withStyles(styles)(Timeline); diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js index 3ee4cb28680bfc70f6ae46a55cafb226efffb76b..78658a6fd1fbbfbe398b84e887f8c63d9425cbf5 100644 --- a/webui/src/bug/TimelineQuery.js +++ b/webui/src/bug/TimelineQuery.js @@ -1,12 +1,12 @@ -import CircularProgress from '@material-ui/core/CircularProgress' -import gql from 'graphql-tag' -import React from 'react' -import { Query } from 'react-apollo' -import LabelChange from './LabelChange' -import SetStatus from './SetStatus' -import SetTitle from './SetTitle' -import Timeline from './Timeline' -import Message from './Message' +import CircularProgress from '@material-ui/core/CircularProgress'; +import gql from 'graphql-tag'; +import React from 'react'; +import { Query } from 'react-apollo'; +import LabelChange from './LabelChange'; +import SetStatus from './SetStatus'; +import SetTitle from './SetTitle'; +import Timeline from './Timeline'; +import Message from './Message'; const QUERY = gql` query($id: String!, $first: Int = 10, $after: String) { @@ -33,16 +33,21 @@ const QUERY = gql` ${LabelChange.fragment} ${SetTitle.fragment} ${SetStatus.fragment} -` +`; -const TimelineQuery = ({id}) => ( - - {({loading, error, data, fetchMore}) => { - if (loading) return - if (error) return

    Error: {error}

    - return +const TimelineQuery = ({ id }) => ( + + {({ loading, error, data, fetchMore }) => { + if (loading) return ; + if (error) return

    Error: {error}

    ; + return ( + + ); }}     -) +); -export default TimelineQuery +export default TimelineQuery; diff --git a/webui/src/index.js b/webui/src/index.js index c34cc7ccd59d0e1e57bdd19fa7ed64efc8768bf5..f5d95ccc289c6dc4b096b4d8c850c2c952223661 100644 --- a/webui/src/index.js +++ b/webui/src/index.js @@ -1,23 +1,23 @@ -import ApolloClient from 'apollo-boost' -import React from 'react' -import { ApolloProvider } from 'react-apollo' -import ReactDOM from 'react-dom' -import { BrowserRouter } from 'react-router-dom' +import ApolloClient from 'apollo-boost'; +import React from 'react'; +import { ApolloProvider } from 'react-apollo'; +import ReactDOM from 'react-dom'; +import { BrowserRouter } from 'react-router-dom'; -import App from './App' +import App from './App'; const client = new ApolloClient({ - uri: "/graphql", - connectToDevTools: true -}) + uri: '/graphql', + connectToDevTools: true, +}); ReactDOM.render( - + , document.getElementById('root') -) +); diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js index 05eafe9273b703235e147213a5e05456ef3a9399..9253cc88a6634ddbf750e3b7425971b9b3867e8a 100644 --- a/webui/src/list/BugRow.js +++ b/webui/src/list/BugRow.js @@ -1,14 +1,14 @@ -import { withStyles } from "@material-ui/core/styles"; -import TableCell from "@material-ui/core/TableCell/TableCell"; -import TableRow from "@material-ui/core/TableRow/TableRow"; -import Tooltip from "@material-ui/core/Tooltip/Tooltip"; -import Typography from "@material-ui/core/Typography"; -import ErrorOutline from "@material-ui/icons/ErrorOutline"; -import gql from "graphql-tag"; -import React from "react"; -import { Link } from "react-router-dom"; -import Date from "../Date"; -import Label from "../Label"; +import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@material-ui/core/TableCell/TableCell'; +import TableRow from '@material-ui/core/TableRow/TableRow'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import Typography from '@material-ui/core/Typography'; +import ErrorOutline from '@material-ui/icons/ErrorOutline'; +import gql from 'graphql-tag'; +import React from 'react'; +import { Link } from 'react-router-dom'; +import Date from '../Date'; +import Label from '../Label'; const Open = ({ className }) => ( @@ -24,35 +24,35 @@ const Closed = ({ className }) => ( const Status = ({ status, className }) => { switch (status) { - case "OPEN": + case 'OPEN': return ; - case "CLOSED": + case 'CLOSED': return ; default: - return "unknown status " + status; + return 'unknown status ' + status; } }; const styles = theme => ({ cell: { - display: "flex", - alignItems: "center", - "& a": { - textDecoration: "none" - } + display: 'flex', + alignItems: 'center', + '& a': { + textDecoration: 'none', + }, }, status: { - margin: 10 + margin: 10, }, expand: { - width: "100%" + width: '100%', }, title: { - display: "inline" + display: 'inline', }, labels: { - paddingLeft: theme.spacing.unit - } + paddingLeft: theme.spacing.unit, + }, }); const BugRow = ({ bug, classes }) => ( @@ -60,9 +60,9 @@ const BugRow = ({ bug, classes }) => (
    - +
    - + {bug.title} {bug.labels.length > 0 && ( @@ -74,7 +74,7 @@ const BugRow = ({ bug, classes }) => ( )}
    - + {bug.humanId} opened by {bug.author.name} diff --git a/webui/src/list/List.js b/webui/src/list/List.js index 880782c7c548b2a95940bba9eb789e845299683b..d36be8a1464b4f30028c40b397fedd3b1a609eaf 100644 --- a/webui/src/list/List.js +++ b/webui/src/list/List.js @@ -1,115 +1,114 @@ -import { withStyles } from '@material-ui/core/styles' -import Table from '@material-ui/core/Table/Table' -import TableBody from '@material-ui/core/TableBody/TableBody' -import TablePagination from '@material-ui/core/TablePagination/TablePagination' -import React from 'react' -import BugRow from './BugRow' +import { withStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table/Table'; +import TableBody from '@material-ui/core/TableBody/TableBody'; +import TablePagination from '@material-ui/core/TablePagination/TablePagination'; +import React from 'react'; +import BugRow from './BugRow'; const styles = theme => ({ main: { maxWidth: 600, margin: 'auto', - marginTop: theme.spacing.unit * 4 - } -}) + marginTop: theme.spacing.unit * 4, + }, +}); class List extends React.Component { - props: { bugs: Array, - fetchMore: (any) => any, + fetchMore: any => any, classes: any, - } + }; state = { page: 0, rowsPerPage: 10, - lastQuery: {} - } + lastQuery: {}, + }; handleChangePage = (event, page) => { - const {bugs, fetchMore} = this.props - const {rowsPerPage} = this.state - const pageInfo = bugs.pageInfo + const { bugs, fetchMore } = this.props; + const { rowsPerPage } = this.state; + const pageInfo = bugs.pageInfo; if (page === this.state.page + 1) { if (!pageInfo.hasNextPage) { - return + return; } const variables = { after: pageInfo.endCursor, - first: rowsPerPage - } + first: rowsPerPage, + }; fetchMore({ variables, updateQuery: this.updateQuery, - }) + }); - this.setState({page, lastQuery: variables}) - return + this.setState({ page, lastQuery: variables }); + return; } if (page === this.state.page - 1) { if (!pageInfo.hasPreviousPage) { - return + return; } const variables = { before: pageInfo.startCursor, - last: rowsPerPage - } + last: rowsPerPage, + }; fetchMore({ variables, updateQuery: this.updateQuery, - }) + }); - this.setState({page, lastQuery: variables}) - return + this.setState({ page, lastQuery: variables }); + return; } - throw new Error('non neighbour page pagination is not supported') - } + throw new Error('non neighbour page pagination is not supported'); + }; handleChangeRowsPerPage = event => { - const {fetchMore} = this.props - const {lastQuery} = this.state - const rowsPerPage = event.target.value + const { fetchMore } = this.props; + const { lastQuery } = this.state; + const rowsPerPage = event.target.value; - const variables = lastQuery + const variables = lastQuery; if (lastQuery.first) { - variables.first = rowsPerPage + variables.first = rowsPerPage; } else if (lastQuery.last) { - variables.last = rowsPerPage + variables.last = rowsPerPage; } else { - variables.first = rowsPerPage + variables.first = rowsPerPage; } fetchMore({ variables, updateQuery: this.updateQuery, - }) + }); - this.setState({rowsPerPage, lastQuery: variables}) - } + this.setState({ rowsPerPage, lastQuery: variables }); + }; - updateQuery = (previousResult, {fetchMoreResult}) => { - return fetchMoreResult ? fetchMoreResult : previousResult - } + updateQuery = (previousResult, { fetchMoreResult }) => { + return fetchMoreResult ? fetchMoreResult : previousResult; + }; render() { - const {classes, bugs} = this.props - const {page, rowsPerPage} = this.state + const { classes, bugs } = this.props; + const { page, rowsPerPage } = this.state; return (
    - {bugs.edges.map(({cursor, node}) => ( - + {bugs.edges.map(({ cursor, node }) => ( + ))}
    @@ -119,17 +118,17 @@ class List extends React.Component { rowsPerPage={rowsPerPage} page={page} backIconButtonProps={{ - 'aria-label': 'Previous Page' + 'aria-label': 'Previous Page', }} nextIconButtonProps={{ - 'aria-label': 'Next Page' + 'aria-label': 'Next Page', }} onChangePage={this.handleChangePage} onChangeRowsPerPage={this.handleChangeRowsPerPage} />
    - ) + ); } } -export default withStyles(styles)(List) +export default withStyles(styles)(List); diff --git a/webui/src/list/ListQuery.js b/webui/src/list/ListQuery.js index 3b57fcc2f8c17f16278d4b795166a6fb6f30f75e..9dbe4e53d670f26fa42cbbebe8a04e8aa9b319a6 100644 --- a/webui/src/list/ListQuery.js +++ b/webui/src/list/ListQuery.js @@ -1,15 +1,20 @@ // @flow -import CircularProgress from '@material-ui/core/CircularProgress' -import gql from 'graphql-tag' -import React from 'react' -import { Query } from 'react-apollo' -import BugRow from './BugRow' -import List from './List' +import CircularProgress from '@material-ui/core/CircularProgress'; +import gql from 'graphql-tag'; +import React from 'react'; +import { Query } from 'react-apollo'; +import BugRow from './BugRow'; +import List from './List'; const QUERY = gql` query($first: Int = 10, $last: Int, $after: String, $before: String) { defaultRepository { - bugs: allBugs(first: $first, last: $last, after: $after, before: $before) { + bugs: allBugs( + first: $first + last: $last + after: $after + before: $before + ) { totalCount edges { cursor @@ -17,7 +22,7 @@ const QUERY = gql` ...BugRow } } - pageInfo{ + pageInfo { hasNextPage hasPreviousPage startCursor @@ -27,18 +32,17 @@ const QUERY = gql` } } - ${BugRow.fragment} -` +`; const ListQuery = () => ( - {({loading, error, data, fetchMore}) => { - if (loading) return - if (error) return

    Error: {error}

    - return + {({ loading, error, data, fetchMore }) => { + if (loading) return ; + if (error) return

    Error: {error}

    ; + return ; }}     -) +); -export default ListQuery +export default ListQuery;