- all cmponents are on hooks, minus the tasks component

Author: einazare

src/components/Footer/Footer.js

@@ -2,14 +2,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 import ListItem from "@material-ui/core/ListItem";
 import List from "@material-ui/core/List";
 // core components
-import footerStyle from "assets/jss/material-dashboard-react/components/footerStyle.js";
+import styles from "assets/jss/material-dashboard-react/components/footerStyle.js";
 
-function Footer(props) {
-  const { classes } = props;
+const useStyles = makeStyles(styles);
+
+export default function Footer(props) {
+  const classes = useStyles();
   return (
     <footer className={classes.footer}>
       <div className={classes.container}>
@@ -54,9 +56,3 @@ function Footer(props) {
     </footer>
   );
 }
-
-Footer.propTypes = {
-  classes: PropTypes.object.isRequired
-};
-
-export default withStyles(footerStyle)(Footer);

src/components/Grid/GridContainer.js

@@ -2,18 +2,21 @@ import React from "react";
 // nodejs library to set properties for components
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 
-const style = {
+const styles = {
   grid: {
     margin: "0 -15px !important",
     width: "unset"
   }
 };
 
-function GridContainer(props) {
-  const { classes, children, ...rest } = props;
+const useStyles = makeStyles(styles);
+
+export default function GridContainer(props) {
+  const classes = useStyles();
+  const { children, ...rest } = props;
   return (
     <Grid container {...rest} className={classes.grid}>
       {children}
@@ -22,8 +25,5 @@ function GridContainer(props) {
 }
 
 GridContainer.propTypes = {
-  classes: PropTypes.object,
   children: PropTypes.node
 };
-
-export default withStyles(style)(GridContainer);

src/components/Grid/GridItem.js

@@ -2,17 +2,20 @@ import React from "react";
 // nodejs library to set properties for components
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 
-const style = {
+const styles = {
   grid: {
     padding: "0 15px !important"
   }
 };
 
-function GridItem(props) {
-  const { classes, children, ...rest } = props;
+const useStyles = makeStyles(styles);
+
+export default function GridItem(props) {
+  const classes = useStyles();
+  const { children, ...rest } = props;
   return (
     <Grid item {...rest} className={classes.grid}>
       {children}
@@ -21,8 +24,5 @@ function GridItem(props) {
 }
 
 GridItem.propTypes = {
-  classes: PropTypes.object,
   children: PropTypes.node
 };
-
-export default withStyles(style)(GridItem);