added routing

client/package.json

@@ -7,6 +7,7 @@
     "@material-ui/icons": "^4.9.1",
     "apollo-boost": "^0.4.9",
     "graphql": "^15.1.0",
+    "history": "^4.10.1",
     "react": "^16.13.1",
     "react-apollo": "^3.1.5",
     "react-dom": "^16.13.1",

client/src/App.js

@@ -1,18 +1,30 @@
 import React from 'react'
-//import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { Route, Switch, Redirect, withRouter } from "react-router-dom"
 import Layout from './components/Layout/Layout'
 import Todos from './containers/Todos/Todos'
+import Category from './containers/Category/Category'
+import Trash from './containers/Trash/Trash'
+import NotFound from './containers/NotFound/NotFound'
 import CssBaseLine from '@material-ui/core/CssBaseline'
 
-export default function App() {
+const App = ({ history }) => {
   return (
     <>
       <CssBaseLine />
-      <Layout>
+      <Layout history={history}>
-          <Todos />
+        <Switch>
+          <Route history={history} exact path='/category/:slug' component={Category} />
+          <Route history={history} exact path='/trash' component={Trash} />
+          <Route history={history} exact path='/' component={Todos} />
+          {/* <Route component={NotFound} /> */}
+          <Route path='/404' component={NotFound} />
+          <Redirect from='*' to='/404' />
+        </Switch>
       </Layout>
     </>
   )
 }
 
+export default withRouter(App)
+
 

client/src/components/Header/Header.js

@@ -2,14 +2,25 @@ import React from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
+import CategoryIcon from '@material-ui/icons/Category';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ErrorIcon from '@material-ui/icons/Error';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography'
+import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import { makeStyles } from '@material-ui/core/styles'
 import Nav from '../Nav/Nav'
 
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
+  pageHeading: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  pageHeadingImg: {
+    marginRight: 10
+  },
   appBar: {
     [theme.breakpoints.up('sm')]: {
       width: `calc(100% - ${drawerWidth}px)`,
@@ -24,7 +35,24 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Header = () => {
+const renderHeading = (history, classes) => {
+  const { pathname } = history.location
+  
+  if (pathname.split('/')[1] === 'category') {
+    return <span className={classes.pageHeading}><CategoryIcon className={classes.pageHeadingImg} />Категория {pathname.split('/')[2]}</span>
+  }
+
+  switch(pathname) {
+    case '/':
+      return <span className={classes.pageHeading}><FormatListBulletedIcon className={classes.pageHeadingImg} /> Список дел</span>
+    case '/trash':
+      return <span className={classes.pageHeading}><DeleteIcon className={classes.pageHeadingImg} /> Корзина</span>
+    default:
+      return <span className={classes.pageHeading}><ErrorIcon className={classes.pageHeadingImg} /> Ошибка</span>
+  }
+}
+
+const Header = ({ history }) => {
   const classes = useStyles();
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
@@ -46,11 +74,11 @@ const Header = () => {
             <MenuIcon />
           </IconButton>
           <Typography variant="h1" noWrap>
-            Список дел
+            {renderHeading(history, classes)}
           </Typography>
         </Toolbar>
       </AppBar>
-      <Nav mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
+      <Nav mobileOpen={mobileOpen} history={history} handleDrawerToggle={handleDrawerToggle} />
     </>
   )
 }

client/src/components/Layout/Layout.js

@@ -13,12 +13,12 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-const Layout = ({ children }) => {
+const Layout = ({ children, history }) => {
   const classes = useStyles()
 
   return (
     <div className={classes.layout}>
-      <Header />
+      <Header history={history} />
       <main className={classes.content}>
         <div className={classes.toolbar} />
         {children} 

client/src/components/Nav/Nav.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Nav = ({ window, mobileOpen, handleDrawerToggle }) => {
+const Nav = ({ window, mobileOpen, handleDrawerToggle, history }) => {
   const classes = useStyles();
   const theme = useTheme();
   
@@ -40,7 +40,7 @@ const Nav = ({ window, mobileOpen, handleDrawerToggle }) => {
             keepMounted: true,
           }}
         >
-          <NavContent />
+          <NavContent history={history} />
         </Drawer>
       </Hidden>
       <Hidden xsDown implementation="css">
@@ -51,7 +51,7 @@ const Nav = ({ window, mobileOpen, handleDrawerToggle }) => {
           variant="permanent"
           open
         >
-          <NavContent />
+          <NavContent history={history} />
         </Drawer>
       </Hidden>
     </nav>

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

@@ -13,7 +13,8 @@ import Collapse from '@material-ui/core/Collapse'
 import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import IconButton from '@material-ui/core/IconButton'
-import Link from '@material-ui/core/Link';
+import MuiLink from '@material-ui/core/Link';
+import { Link } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
 import { Typography } from '@material-ui/core';
 
@@ -39,19 +40,21 @@ const useStyles = makeStyles((theme) => ({
   addCategoryItem: {
     display: 'flex',
     justifyContent: 'center'
+  },
+  link: {
+    textDecoration: 'none',
+    color: '#fff'
   }
 }))
 
-const Drawer = () => {
+const NavContent = ({ history }) => {
   const classes = useStyles()
-  const [selectedIndex, setSelectedIndex] = React.useState(0)
   const [isListOpen, setIsListOpen] = React.useState({
     idCollapse: 0,
     current: false,
   })
 
   const listItemSelectedHandler = (e, index) => {
-    setSelectedIndex(index)
     if (index === 1) setIsListOpen({
       idCollapse: 1,
       current: !isListOpen.current
@@ -62,24 +65,26 @@ const Drawer = () => {
     <>
     <div className={classes.navHeading}>
       <Typography>
-        <Link style={{ color: 'rgba(255, 255, 255, 0.7)' }} href="#" variant='h1'>
+        <MuiLink style={{ color: 'rgba(255, 255, 255, 0.7)' }} href="#" variant='h1'>
           Todo App
-        </Link>
+        </MuiLink>
         <br />
         <span className={classes.author} href="#">
-          Github: <Link href='https://github.com/sergeyyarkov/todo-app' target='_blank'><GitHubIcon className={classes.githubIcon} color='action' fontSize='small' /></Link>
+          Github: <MuiLink href='https://github.com/sergeyyarkov/todo-app' target='_blank'><GitHubIcon className={classes.githubIcon} color='action' fontSize='small' /></MuiLink>
         </span>
       </Typography>
     </div>
     <Divider />
     <List>
-      <ListItem onClick={(e) => listItemSelectedHandler(e, 0)} selected={selectedIndex === 0} button> 
+      <Link className={classes.link} to='/'>
-        <ListItemIcon>
+        <ListItem selected={history.location.pathname === '/'} button> 
-          <FormatListBulletedIcon />
+          <ListItemIcon>
-        </ListItemIcon>
+            <FormatListBulletedIcon />
-        <ListItemText primary={'Список дел'} />
+          </ListItemIcon>
-      </ListItem>
+          <ListItemText primary={'Список дел'} />
-      <ListItem onClick={(e) => listItemSelectedHandler(e, 1)} selected={selectedIndex === 1} button> 
+        </ListItem>
+      </Link>
+      <ListItem onClick={(e) => listItemSelectedHandler(e, 1)} button> 
         <ListItemIcon>
           <CategoryIcon />
         </ListItemIcon>
@@ -90,9 +95,11 @@ const Drawer = () => {
         <List component="div" disablePadding>
           {[1,2,3].map((e, i) => {
             return (
-              <ListItem key={i} button className={classes.nested}>
+              <Link className={classes.link} key={i} to={`/category/${i}`}>
-                <ListItemText primary={"Категория " + i} />
+                  <ListItem selected={history.location.pathname === `/category/${i}`} button className={classes.nested}>
-              </ListItem>
+                    <ListItemText primary={"Категория " + i} />
+                  </ListItem>
+              </Link>
             )
           })}
           <ListItem className={classes.addCategoryItem}>
@@ -103,15 +110,17 @@ const Drawer = () => {
         </List>
       </Collapse>
       <Divider />
-      <ListItem onClick={(e) => listItemSelectedHandler(e, 2)} selected={selectedIndex === 2} button> 
+      <Link className={classes.link} to='/trash'>
-        <ListItemIcon>
+        <ListItem selected={history.location.pathname === '/trash'} button> 
-          <DeleteIcon />
+          <ListItemIcon>
-        </ListItemIcon>
+            <DeleteIcon />
-        <ListItemText primary={'Корзина'} />
+          </ListItemIcon>
-      </ListItem>
+          <ListItemText primary={'Корзина'} />
+        </ListItem>
+      </Link>
     </List>
   </>
   )
 }
 
-export default Drawer
+export default NavContent

client/src/containers/Category/Category.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Grid, Typography, Fab } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import EditIcon from '@material-ui/icons/Edit';
+// import { useParams } from 'react-router-dom'
+
+const useStyles = makeStyles((theme) => ({
+  fab: {
+    position: 'fixed',
+    margin: 30,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+const Category = () => {
+  // const { slug } = useParams()
+  const classes = useStyles()
+  return (
+    <Grid container spacing={2}>
+      <Fab className={classes.fab} size='large' aria-label="add">
+        <EditIcon />
+      </Fab>
+      <Grid item xs={12}>
+        <Typography>
+          {`Сортируйте свои повседневные задачи используя категории.`}
+        </Typography> 
+      </Grid> 
+    </Grid>
+  )
+}
+
+export default Category

client/src/containers/NotFound/NotFound.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Grid, Typography } from '@material-ui/core'
+
+const Trash = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Typography>
+        <span role='img' aria-label="cross mark">❌</span> Ошибка! Такого маршрута не существует.
+        </Typography> 
+      </Grid> 
+    </Grid>
+  )
+}
+
+export default Trash

client/src/containers/Todos/Todos.js

@@ -48,7 +48,7 @@ const Todos = () => {
       </Fab> 
         <Grid item xs={12}>
           <Typography>
-            Создавайте, редактируйте или удаляйте свои повседневные задачи.
+            Создавайте, редактируйте или удаляйте ваши повседневные дела.
           </Typography> 
         </Grid>      
         {[1,2,3,4,5,6].map((e, i) => 

client/src/containers/Trash/Trash.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Grid, Typography } from '@material-ui/core'
+
+const Trash = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Typography>
+          Здесь находятся ваши недавно удаленные записи, вы можете их легко восстановить.
+        </Typography> 
+      </Grid> 
+    </Grid>
+  )
+}
+
+export default Trash

client/src/index.js

@@ -1,18 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Router } from 'react-router-dom'
 import App from './App';
 import { ThemeProvider } from '@material-ui/core/styles';
+import { createBrowserHistory } from 'history'
 import theme from './theme';
 import * as serviceWorker from './serviceWorker';
 
+
+const history = createBrowserHistory()
+
 ReactDOM.render(
     <ThemeProvider theme={theme}>
-      <App />
+      <Router history={history}>
+        <App />
+      </Router>
     </ThemeProvider>,
   document.getElementById('root')
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();