refactor styles

client/src/components/Header/Header.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Nav from '../Nav/Nav'
-import { AppBar, IconButton, Toolbar, Typography, makeStyles } from '@material-ui/core'
+import useStyles from './styles'
+import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core'
 
 import MenuIcon from '@material-ui/icons/Menu';
 import CategoryIcon from '@material-ui/icons/Category';
@@ -8,28 +9,6 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import ErrorIcon from '@material-ui/icons/Error';
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 
-const useStyles = makeStyles((theme) => ({
-  pageHeading: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  pageHeadingImg: {
-    marginRight: 10
-  },
-  appBar: {
-    [theme.breakpoints.up('sm')]: {
-      width: `calc(100% - 240px)`,
-      marginLeft: 240,
-    },
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-    [theme.breakpoints.up('sm')]: {
-      display: 'none',
-    },
-  },
-}));
-
 const renderHeading = (history, classes) => {
   const { pathname } = history.location
   
@@ -48,7 +27,7 @@ const renderHeading = (history, classes) => {
 }
 
 const Header = ({ history }) => {
-  const classes = useStyles();
+  const classes = useStyles()
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const handleDrawerToggle = () => {

client/src/components/Header/styles.js

@@ -0,0 +1,25 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+  pageHeading: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  pageHeadingImg: {
+    marginRight: 10
+  },
+  appBar: {
+    [theme.breakpoints.up('sm')]: {
+      width: `calc(100% - 240px)`,
+      marginLeft: 240,
+    },
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      display: 'none',
+    },
+  },
+}));
+
+export default useStyles

client/src/components/Layout/Layout.js

@@ -1,21 +1,9 @@
 import React from 'react';
 import Header from '../Header/Header';
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = makeStyles((theme) => ({
-  layout: {
-    display: 'flex'
-  },
-  toolbar: theme.mixins.toolbar,
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing(3),
-  },
-}))
+import useStyles from './styles'
 
 const Layout = ({ children, history }) => {
   const classes = useStyles()
-
   return (
     <div className={classes.layout}>
       <Header history={history} />

client/src/components/Layout/styles.js

@@ -0,0 +1,14 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles((theme) => ({
+  layout: {
+    display: 'flex'
+  },
+  toolbar: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+  },
+}))
+
+export default useStyles

client/src/components/Nav/Nav.js

@@ -1,26 +1,16 @@
 import React from 'react'
+import useStyles from './styles'
 import NavContent from './NavContent/NavContent'
 import CreateCategoryModal from '../Modals/Category/CreateCategoryModal'
-import { Drawer, Hidden, makeStyles, useTheme } from '@material-ui/core';
-
-const useStyles = makeStyles((theme) => ({
-  drawer: {
-    [theme.breakpoints.up('sm')]: {
-      width: 240,
-      flexShrink: 0,
-    },
-  },
-  drawerPaper: {
-    width: 240,
-  },
-}));
+import { Drawer, Hidden, useTheme } from '@material-ui/core';
 
 const Nav = ({ window, mobileOpen, handleDrawerToggle, history }) => {
-  const classes = useStyles();
+  const classes = useStyles()
   const theme = useTheme();
   const container = window !== undefined ? () => window().document.body : undefined;
-
+  
   const [isModalOpen, setIsModalOpen] = React.useState(false)
+
   const handleCloseModal = () => setIsModalOpen(false)
   const handleOpenModal = () => setIsModalOpen(true)
 
@@ -46,13 +36,7 @@ const Nav = ({ window, mobileOpen, handleDrawerToggle, history }) => {
           </Drawer>
         </Hidden>
         <Hidden xsDown implementation="css">
-          <Drawer
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            variant="permanent"
-            open
-          >
+          <Drawer classes={{paper: classes.drawerPaper}} variant="permanent" open>
             <NavContent handleOpenModal={handleOpenModal} history={history} />
           </Drawer>
         </Hidden>

client/src/components/Nav/NavContent/NavContent.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import useStyles from '../styles'
 import Categories from '../../Categories/Categories'
 import { Link } from 'react-router-dom'
+import { Divider, List, ListItemIcon, ListItemText, Collapse, ListItem, IconButton, Typography } from '@material-ui/core'
 import MuiLink from '@material-ui/core/Link';
-import { Divider, List, ListItemIcon, ListItemText, Collapse, ListItem, IconButton, Typography, makeStyles } from '@material-ui/core'
 
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import CategoryIcon from '@material-ui/icons/Category';
@@ -14,49 +15,12 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
 
 import categories from '../../../db/categories.json'
 
-const useStyles = makeStyles((theme) => ({
-  navHeading: {
-    padding: '10px 0px 10px 16px',
-    minHeight: 64,
-    display: 'flex',
-    alignItems: 'center',
-    color: 'rgba(255, 255, 255, 0.7)'
-  },
-  githubIcon: {
-    marginLeft: 10
-  },
-  author: {
-    display: 'flex',
-    alignItems: 'center',
-    marginTop: 10
-  },
-  nested: {
-    paddingLeft: theme.spacing(4)
-  },
-  addCategoryItem: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  link: {
-    textDecoration: 'none',
-    color: '#fff'
-  }
-}))
-
 const NavContent = ({ history, handleOpenModal }) => {
-  const classes = useStyles()
-  const [collapseInfo, setCollapseInfo] = React.useState({
-    idCollapse: 0,
-    isCollapseOpen: false,
-  })
-
-  const listItemSelectedHandler = (e, index) => {
-    setCollapseInfo({
-      idCollapse: index,
-      isCollapseOpen: !collapseInfo.isCollapseOpen
-    })
-  }
-
+  const classes = useStyles() 
+  const [collapseInfo, setCollapseInfo] = React.useState({ idCollapse: 0, isCollapseOpen: false, })
+  
+  const listItemSelectedHandler = (e, index) => setCollapseInfo({ idCollapse: index, isCollapseOpen: !collapseInfo.isCollapseOpen })
+  
   return (
     <>
       <div className={classes.navHeading}>

client/src/components/Nav/styles.js

@@ -0,0 +1,41 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+  drawer: {
+    [theme.breakpoints.up('sm')]: {
+      width: 240,
+      flexShrink: 0,
+    },
+  },
+  drawerPaper: {
+    width: 240,
+  },
+  navHeading: {
+    padding: '10px 0px 10px 16px',
+    minHeight: 64,
+    display: 'flex',
+    alignItems: 'center',
+    color: 'rgba(255, 255, 255, 0.7)'
+  },
+  githubIcon: {
+    marginLeft: 10
+  },
+  author: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: 10
+  },
+  nested: {
+    paddingLeft: theme.spacing(4)
+  },
+  addCategoryItem: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  link: {
+    textDecoration: 'none',
+    color: '#fff'
+  }
+}));
+
+export default useStyles

client/src/components/Todos/Todos.js

@@ -1,45 +1,18 @@
 import React from 'react';
+import useStyles from './styles'
 import UpdateTodoModal from '../Modals/Todo/UpdateTodoModal'
 import DeleteTodoDialog from '../Dialogs/Todo/DeleteTodoDialog'
 import DeleteTodoСompletelyDialog from '../Dialogs/Todo/DeleteTodoСompletelyDialog'
 import RestoreTodoDialog from '../Dialogs/Todo/RestoreTodoDialog'
-import { Card, CardActions, CardContent, Typography, Grid, IconButton, makeStyles } from '@material-ui/core'
+import { Card, CardActions, CardContent, Typography, Grid, IconButton } from '@material-ui/core'
 
 import RestoreIcon from '@material-ui/icons/Restore';
 import DeleteIcon from '@material-ui/icons/Delete'
 import AlarmIcon from '@material-ui/icons/Alarm';
 import EditIcon from '@material-ui/icons/Edit';
 
-
 import categories from '../../db/categories.json'
 
-const useStyles = makeStyles((theme) => ({
-  alarmIcon: {
-    marginRight: 10
-  },
-  cardActions: {
-    justifyContent: 'flex-end'
-  },
-  cardHeading: {
-    marginBottom: 10
-  },
-  cardCategoryHeading: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    fontSize: 14
-  },
-  cardAlarm: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  fab: {
-    position: 'fixed',
-    margin: 30,
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}))
-
 const Todos = ({ data, fromTrashContainer }) => {
   const classes = useStyles()
   const [selectedTodo, setSelectedTodo] = React.useState({
@@ -93,10 +66,16 @@ const Todos = ({ data, fromTrashContainer }) => {
 
   return (
     <>
-      {!fromTrashContainer ? <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} /> : null}
-      {!fromTrashContainer ? <DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> : null}
-      {fromTrashContainer ? <DeleteTodoСompletelyDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> : null}
-      {fromTrashContainer ? <RestoreTodoDialog isOpenDialog={isOpenRestoreDialog} handleCloseDialog={handleCloseRestoreDialog} selectedTodo={selectedTodo} /> : null}
+      {!fromTrashContainer 
+        ? <>
+            <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} />
+            <DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
+          </>
+        : <>
+            <DeleteTodoСompletelyDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
+            <RestoreTodoDialog isOpenDialog={isOpenRestoreDialog} handleCloseDialog={handleCloseRestoreDialog} selectedTodo={selectedTodo} />
+          </>
+      }
       {data.map((todo, i) => 
         <Grid key={i} item xs={12} md={4} lg={3}>
           <Card>

client/src/components/Todos/styles.js

@@ -0,0 +1,30 @@
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles((theme) => ({
+  alarmIcon: {
+    marginRight: 10
+  },
+  cardActions: {
+    justifyContent: 'flex-end'
+  },
+  cardHeading: {
+    marginBottom: 10
+  },
+  cardCategoryHeading: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: 14
+  },
+  cardAlarm: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  fab: {
+    position: 'fixed',
+    margin: 30,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+export default useStyles