[grid-ui] Rewriting components covered by tests to be classes instead…

… of functions
SeleniumHQ · Feb 18, 2021 · ce3a14d · ce3a14d
1 parent 78d66e8
commit ce3a14d
Show file tree

Hide file tree

Showing 5 changed files with 504 additions and 444 deletions.
diff --git a/javascript/grid-ui/src/components/Error/Error.tsx b/javascript/grid-ui/src/components/Error/Error.tsx
@@ -15,56 +15,65 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import * as React from 'react';
-import {Box, Container, Typography} from "@material-ui/core";
-import {makeStyles} from "@material-ui/core/styles";
+import React from 'react';
+import {Box, Container, createStyles, Typography} from "@material-ui/core";
+import {Theme, withStyles} from "@material-ui/core";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    backgroundColor: theme.palette.secondary.main,
-    height: '100%',
-    paddingBottom: theme.spacing(3),
-    paddingTop: theme.spacing(3),
-    width: '100%',
-    justifyContent: "center",
-  },
-}));
+const useStyles = (theme: Theme) => createStyles(
+  {
+    root: {
+      backgroundColor: theme.palette.secondary.main,
+      height: '100%',
+      paddingBottom: theme.spacing(3),
+      paddingTop: theme.spacing(3),
+      width: '100%',
+      justifyContent: "center",
+    },
+  });
 
-export default function Error(props) {
-  const classes = useStyles();
-  const {message, errorMessage} = props;
+type ErrorProps = {
+  message: string;
+  errorMessage: string;
+  classes: any;
+};
 
-  // noinspection HtmlUnknownAnchorTarget
-  return (
-    <div className={classes.root}>
-      <Box
-        display="flex"
-        flexDirection="column"
-        height="100%"
-        justifyContent="center"
-      >
-        <Container maxWidth="md">
-          <Box mb={3}>
+class Error extends React.Component<ErrorProps, {}> {
+  render () {
+    const {message, errorMessage, classes} = this.props;
+    // noinspection HtmlUnknownAnchorTarget
+    return (
+      <div className={classes.root}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          height="100%"
+          justifyContent="center"
+        >
+          <Container maxWidth="md">
+            <Box mb={3}>
+              <Typography
+                align="center"
+                color="textPrimary"
+                variant="h3"
+              >
+                {message}
+              </Typography>
+            </Box>
             <Typography
               align="center"
               color="textPrimary"
-              variant="h3"
+              variant="h4"
+              component={"span"}
             >
-              {message}
+              <pre>
+                {errorMessage}
+              </pre>
             </Typography>
-          </Box>
-          <Typography
-            align="center"
-            color="textPrimary"
-            variant="h4"
-            component={"span"}
-          >
-            <pre>
-              {errorMessage}
-            </pre>
-          </Typography>
-        </Container>
-      </Box>
-    </div>
-  );
+          </Container>
+        </Box>
+      </div>
+    );
+  }
 }
+
+export default withStyles(useStyles)(Error)
diff --git a/javascript/grid-ui/src/components/Loading/Loading.tsx b/javascript/grid-ui/src/components/Loading/Loading.tsx
@@ -15,38 +15,43 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import * as React from 'react';
-import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import React from 'react';
 import LinearProgress from '@material-ui/core/LinearProgress';
-import {Box, Typography} from "@material-ui/core";
+import {Box, createStyles, Theme, Typography, withStyles} from "@material-ui/core";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = (theme: Theme) => createStyles(
+  {
     root: {
       backgroundColor: theme.palette.secondary.main,
       height: '100%',
       paddingTop: theme.spacing(1),
       width: '100%',
       justifyContent: "center",
-    },
-  }),
-);
+    }
+  });
 
-export default function Loading() {
-  const classes = useStyles();
+type LoadingProps = {
+  classes: any;
+};
 
-  return (
-    <div className={classes.root}>
-      <Box mb={2}>
-        <Typography
-          align="center"
-          color="textPrimary"
-          variant="h3"
-        >
-          Loading...
-        </Typography>
-      </Box>
-      <LinearProgress/>
-    </div>
-  );
+class Loading extends React.Component<LoadingProps, {}>{
+  render() {
+    const {classes} = this.props;
+    return (
+      <div className={classes.root}>
+        <Box mb={2}>
+          <Typography
+            align="center"
+            color="textPrimary"
+            variant="h3"
+          >
+            Loading...
+          </Typography>
+        </Box>
+        <LinearProgress/>
+      </div>
+    );
+  }
 }
+
+export default withStyles(useStyles)(Loading)