From d79ef7a7945ba82caeec62cad44dad134c9edfbc Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Wed, 10 Apr 2019 21:19:45 +0200
Subject: webui: Migrate to Material-UI's new style API

---
 webui/src/bug/Bug.js         | 65 +++++++++++++++++++++++---------------------
 webui/src/bug/LabelChange.js | 13 +++++----
 webui/src/bug/Message.js     | 43 +++++++++++++++--------------
 webui/src/bug/SetStatus.js   | 13 +++++----
 webui/src/bug/SetTitle.js    | 13 +++++----
 webui/src/bug/Timeline.js    | 60 ++++++++++++++++++----------------------
 6 files changed, 104 insertions(+), 103 deletions(-)

(limited to 'webui/src/bug')

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;
-- 
cgit