modularized code

src/client/components/BottomBar.jsx

@@ -1,24 +1,12 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { stylesBottomBar } from "../styles/stylesBottomBar";
 import { BottomNavigation, BottomNavigationAction } from "@material-ui/core";
 import SpeedIcon from "@material-ui/icons/Speed";
 import EmojiObjectsIcon from "@material-ui/icons/EmojiObjects";
 
-const useStyles = makeStyles({
-  root: {
-    width: "100%",
-    position: "fixed",
-    bottom: 0,
-    background: "black",
-  },
-  button: {
-    width: "100%",
-  },
-});
-
 export default function BottomBar({ view, setView }) {
-  const classes = useStyles();
+  const classes = stylesBottomBar();
 
   return (
     <BottomNavigation

src/client/components/TopBar.jsx

@@ -1,23 +1,11 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { stylesTopBar } from "../styles/stylesTopBar";
 import { Toolbar, Typography, IconButton, MenuItem, Menu } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
 import AccountCircle from "@material-ui/icons/AccountCircle";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  title: {
-    flexGrow: 1,
-  },
-}));
-
 export default function TopBar() {
-  const classes = useStyles();
+  const classes = stylesTopBar();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const today = new Date().toDateString();

src/client/features/lights/LightPanel.jsx

@@ -1,72 +1,28 @@
 import React from "react";
 import * as actions from "../../reducer/actions/actions";
 import { useSelector, useDispatch } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
+import { stylesPanel } from "../../styles/stylesPanel";
 import { Button, Drawer, List, Divider } from "@material-ui/core";
 import PowerSettingsNewIcon from "@material-ui/icons/PowerSettingsNew";
 import PowerOffIcon from "@material-ui/icons/PowerOff";
 import LightItem from "./lightsComponents/LightItem";
 import LightForm from "./lightsComponents/LightForm";
 
-// custom styles for the drawer
-const useStyles = makeStyles((theme) => ({
-  // drawer stays at fixed width, no matter the size of the screen
-  drawer: {
-    [theme.breakpoints.down("sm")]: {
-      width: "80%",
-      height: "80%",
-      margin: "10%",
-    },
-    [theme.breakpoints.up("md")]: {
-      width: "90%",
-      height: "80%",
-      margin: "5%",
-    },
-    flexShrink: 0,
-  },
-  button: {
-    width: "50%",
-  },
-  title: {
-    marginLeft: "18px",
-    marginTop: "52px",
-  },
-  // width of background of drawer
-  drawerPaper: {
-    backgroundColor: "#333",
-    [theme.breakpoints.up("xs")]: {
-      width: "80%",
-      height: "70%",
-      margin: "10%",
-      marginTop: "20%",
-    },
-    [theme.breakpoints.up("sm")]: {
-      width: "80%",
-      height: "80%",
-      margin: "10%",
-    },
-    [theme.breakpoints.up("md")]: {
-      width: "90%",
-      height: "80%",
-      margin: "5%",
-    },
-  },
-  drawerContainer: {
-    overflow: "auto",
-  },
-}));
+
 
 export default function LightPanel() {
   // gives us access to styles object generated by makeStyles
-  const classes = useStyles();
+  const classes = stylesPanel();
+  // manupulated store central data
   const dispatch = useDispatch();
+  // gives acess to store central data
   const { lights } = useSelector((state) => state);
+  // reorganizes lights in an array
   const lightsArray = Object.values(lights);
 
-  /* Drawer is our sidebar navigation component, stays permanently fixed to side, as docs recommend on desktop usage */
+
   return (
     <Drawer
-      // targets the nested component of the drawer (in this case, the paper)
       classes={{
         paper: classes.drawerPaper,
       }}
@@ -76,7 +32,6 @@ export default function LightPanel() {
     >
       <h3 className={classes.title}> Lights Panel </h3>
       <div className={classes.drawerContainer}>
-        {/* map topics to new navbar items (rendered as a list) */}
         <Button
           // eslint-disable-next-line no-unused-vars
           onClick={(e) => {
@@ -100,8 +55,6 @@ export default function LightPanel() {
           All Off
         </Button>
         <List>
-          {/* up and down implent logic comparing with Date.now()*/}
-          {/* <LightItem id={1} name={'test'} status={true}/> */}
           {lightsArray.map((obj, index) => {
             return (
               <LightItem
@@ -113,7 +66,6 @@ export default function LightPanel() {
             );
           })}
           <Divider />
-          {/* form to arr a new light */}
           <LightForm />
         </List>
       </div>

src/client/features/lights/lightsComponents/LightItem.jsx

@@ -2,19 +2,12 @@
 import React from "react";
 import * as actions from "../../../reducer/actions/actions";
 import { useDispatch } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
+import { stylesLightItem } from "../lightsStyles/stylesLightItem";
 import { FormControlLabel, ListItem, ListItemSecondaryAction, ListItemText, Switch, IconButton } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 
-const useStyles = makeStyles(() => ({
-  name: {
-    position: "absolute",
-    left: "40%",
-  },
-}));
-
 export default function LightItem({ id, name, status }) {
-  const classes = useStyles();
+  const classes = stylesLightItem();
   const dispatch = useDispatch();
 
   const handleChange = (event) => {

src/client/features/lights/lightsStyles/stylesLightItem.jsx

@@ -0,0 +1,10 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+const stylesLightItem = makeStyles(() => ({
+  name: {
+    position: "absolute",
+    left: "40%",
+  },
+}));
+
+export { stylesLightItem }

src/client/features/temperature/TemperaturePanel.jsx

@@ -1,65 +1,26 @@
 import React from "react";
 import * as actions from "../../reducer/actions/actions";
 import { useSelector, useDispatch } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
+import { stylesPanel } from "../../styles/stylesPanel";
 import { green } from "@material-ui/core/colors";
 import { Drawer, FormControlLabel, Switch } from "@material-ui/core";
 import Thermostat from "./temperatureComponents/Thermostat";
 import ChangeTemperature from "./temperatureComponents/ChangeTemperature";
 
-// custom styles for the drawer
-const useStyles = makeStyles((theme) => ({
-  // drawer stays at fixed width, no matter the size of the screen
-  drawer: {
-    flexShrink: 0,
-  },
-  title: {
-    marginLeft: "18px",
-    marginTop: "52px",
-  },
-  // width of background of drawer
-  drawerPaper: {
-    backgroundColor: "#333",
-    [theme.breakpoints.up("xs")]: {
-      width: "80%",
-      height: "70%",
-      margin: "10%",
-      marginTop: "20%",
-    },
-    [theme.breakpoints.up("sm")]: {
-      width: "80%",
-      height: "80%",
-      margin: "10%",
-    },
-    [theme.breakpoints.up("md")]: {
-      width: "90%",
-      height: "80%",
-      margin: "5%",
-    },
-  },
-  drawerContainer: {
-    overflow: "auto",
-  },
-  form: {
-    marginLeft: "auto",
-    marginRight: "auto",
-  },
-}));
-
 export default function TemperaturePanel() {
   // gives us access to styles object generated by makeStyles
-  const classes = useStyles();
+  const classes = stylesPanel();
+  // gives acess to store central data
   const { eco } = useSelector((state) => state);
+  // manupulated store central data
   const dispatch = useDispatch();
-  // Set the initial state.
 
   const handleChange = (event) => {
     dispatch(actions.updateTemperature({ eco: event.target.checked }));
   };
 
   return (
     <Drawer
-      // targets the nested component of the drawer (in this case, the paper)
       classes={{
         paper: classes.drawerPaper,
       }}