From 904f403b0c3e1367e093a01ce9dc6b44bea12716 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Fri, 30 Aug 2019 13:58:48 +0200
Subject: [PATCH] Use style hook

---
 .../components/PluginInfo/PluginInfo.tsx      |  86 +++++++-------
 .../PluginSettings/PluginSettings.tsx         | 106 +++++++++---------
 2 files changed, 94 insertions(+), 98 deletions(-)

diff --git a/src/plugins/components/PluginInfo/PluginInfo.tsx b/src/plugins/components/PluginInfo/PluginInfo.tsx
index ed4a1e9b5..bb8eb572e 100644
--- a/src/plugins/components/PluginInfo/PluginInfo.tsx
+++ b/src/plugins/components/PluginInfo/PluginInfo.tsx
@@ -1,7 +1,7 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import makeStyles from "@material-ui/styles/makeStyles";
 import React from "react";
 
 import CardTitle from "@saleor/components/CardTitle";
@@ -18,7 +18,7 @@ interface PluginInfoProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles(() => ({
   status: {
     paddingTop: 20
   },
@@ -26,49 +26,47 @@ const styles = createStyles({
     fontSize: 14,
     paddingTop: 10
   }
-});
+}));
 
-const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
-  ({
-    data,
-    description,
-    name,
-    classes,
-    onChange
-  }: PluginInfoProps & WithStyles<typeof styles>) => {
-    return (
-      <Card>
-        <CardTitle
-          title={i18n.t("Plugin Information and Status", {
-            context: "plugin configuration"
-          })}
+const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
+  data,
+  description,
+  name,
+  onChange
+}) => {
+  const classes = useStyles({});
+  return (
+    <Card>
+      <CardTitle
+        title={i18n.t("Plugin Information and Status", {
+          context: "plugin configuration"
+        })}
+      />
+      <CardContent>
+        <Typography className={classes.title} variant="h6">
+          {i18n.t("Plugin Name")}
+        </Typography>
+        <Typography>{name}</Typography>
+        {description && (
+          <>
+            <Typography className={classes.title} variant="h6">
+              {i18n.t("Plugin Description")}
+            </Typography>
+            <Typography>{description}</Typography>
+          </>
+        )}
+        <FormSpacer />
+        <Hr />
+        <Typography className={classes.status}>{i18n.t("Status")}</Typography>
+        <ControlledSwitch
+          checked={data.active}
+          label={"Set plugin as Active"}
+          name={"active" as keyof FormData}
+          onChange={onChange}
         />
-        <CardContent>
-          <Typography className={classes.title} variant="h6">
-            {i18n.t("Plugin Name")}
-          </Typography>
-          <Typography>{name}</Typography>
-          {description && (
-            <>
-              <Typography className={classes.title} variant="h6">
-                {i18n.t("Plugin Description")}
-              </Typography>
-              <Typography>{description}</Typography>
-            </>
-          )}
-          <FormSpacer />
-          <Hr />
-          <Typography className={classes.status}>{i18n.t("Status")}</Typography>
-          <ControlledSwitch
-            checked={data.active}
-            label={"Set plugin as Active"}
-            name={"active" as keyof FormData}
-            onChange={onChange}
-          />
-        </CardContent>
-      </Card>
-    );
-  }
-);
+      </CardContent>
+    </Card>
+  );
+};
 PluginInfo.displayName = "PluginInfo";
 export default PluginInfo;
diff --git a/src/plugins/components/PluginSettings/PluginSettings.tsx b/src/plugins/components/PluginSettings/PluginSettings.tsx
index 88311c3ce..b81fdef51 100644
--- a/src/plugins/components/PluginSettings/PluginSettings.tsx
+++ b/src/plugins/components/PluginSettings/PluginSettings.tsx
@@ -1,7 +1,7 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
+import makeStyles from "@material-ui/styles/makeStyles";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledSwitch from "@saleor/components/ControlledSwitch";
 import { FormErrors } from "@saleor/types";
@@ -24,63 +24,61 @@ interface PluginSettingsProps {
   }>;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles(() => ({
   item: {
     paddingBottom: 10,
     paddingTop: 10
   }
-});
+}));
 
-const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
-  ({
-    data,
-    disabled,
-    classes,
-    errors,
-    onChange,
-    plugin
-  }: PluginSettingsProps & WithStyles<typeof styles>) => {
-    return (
-      <Card>
-        <CardTitle
-          title={i18n.t("Plugin Settings", {
-            context: "plugin configuration"
-          })}
-        />
-        <CardContent>
-          {data.configuration.map((configuration, index) => (
-            <div className={classes.item} key={index}>
-              {plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
-                <TextField
-                  disabled={disabled}
-                  error={!!errors.name}
-                  helperText={plugin[index].helpText}
-                  label={plugin[index].label}
-                  name={configuration.name}
-                  fullWidth
-                  value={configuration.value}
-                  onChange={onChange}
-                />
-              )}
-              {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
-                <ControlledSwitch
-                  checked={
-                    typeof configuration.value !== "boolean"
-                      ? configuration.value === "true"
-                      : configuration.value
-                  }
-                  disabled={disabled}
-                  label={plugin[index].label}
-                  name={configuration.name}
-                  onChange={onChange}
-                />
-              )}
-            </div>
-          ))}
-        </CardContent>
-      </Card>
-    );
-  }
-);
+const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
+  data,
+  disabled,
+  errors,
+  onChange,
+  plugin
+}) => {
+  const classes = useStyles({});
+  return (
+    <Card>
+      <CardTitle
+        title={i18n.t("Plugin Settings", {
+          context: "plugin configuration"
+        })}
+      />
+      <CardContent>
+        {data.configuration.map((configuration, index) => (
+          <div className={classes.item} key={index}>
+            {plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
+              <TextField
+                disabled={disabled}
+                error={!!errors.name}
+                helperText={plugin[index].helpText}
+                label={plugin[index].label}
+                name={configuration.name}
+                fullWidth
+                value={configuration.value}
+                onChange={onChange}
+              />
+            )}
+            {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
+              <ControlledSwitch
+                checked={
+                  typeof configuration.value !== "boolean"
+                    ? configuration.value === "true"
+                    : configuration.value
+                }
+                disabled={disabled}
+                label={plugin[index].label}
+                name={configuration.name}
+                onChange={onChange}
+              />
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
 PluginSettings.displayName = "PluginSettings";
 export default PluginSettings;