Create routes, calendar component

imagemin.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    "gifsicle": { "optimizationLevel": 2, "interlaced": false, "colors": 10 },
+    "mozjpeg": { "progressive": true, "quality": 10 },
+    "pngquant": { "quality": [0.25, 0.5] },
+    "svgo": {
+      "plugins": [
+        { "removeViewBox": false },
+        { "cleanupIDs": true },
+      ]
+    },
+    "webp": { "quality": 10 }
+  }

package.json

@@ -3,9 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.11.0",
+    "@material-ui/core": "^4.5.2",
+    "@material-ui/icons": "^4.5.1",
+    "axios": "^0.19.0",
+    "moment": "^2.24.0",
+    "react": ">=15",
+    "react-calendar-component": "^3.0.0",
     "react-dom": "^16.11.0",
     "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-scripts-parcel": "0.0.38"
   },
   "scripts": {
@@ -28,6 +34,7 @@
     ]
   },
   "devDependencies": {
-    "babel-core": "^6.26.3"
+    "babel-core": "^6.26.3",
+    "parcel-plugin-imagemin": "^3.0.0"
   }
 }

public/index.html

@@ -7,7 +7,7 @@
   <meta name="theme-color" content="#ffffff">
 
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <link rel="apple-touch-icon" href="/custom_icon.png">
+  <!--<link rel="apple-touch-icon" href="/custom_icon.png">-->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-title" content="Расписание ЮФМЛ">
   <!--

src/App.js

@@ -1,12 +1,25 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route
+  } from "react-router-dom"
 import './App.css'
 
-class App extends Component {
+import Navbar from './components/navbar'
-  render() {
+import Calendar from './components/views/calendar'
-    return (
-      
-      );
-      }
-    }
 
-    export default App;
+class App extends Component {
+    render() {
+        return (
+            <Router>
+                <Switch>
+                    <Route path="/" component={Calendar} />
+                </Switch>
+                <Navbar />
+            </Router>
+        );
+    }
+}
+
+export default App;

src/components/navbar.css

@@ -0,0 +1,4 @@
+.navBar {
+    position: fixed;
+    bottom: 0;
+}

src/components/navbar.jsx

@@ -0,0 +1,66 @@
+import { BottomNavigation, BottomNavigationAction } from '@material-ui/core'
+import React, { Component } from 'react'
+import {Link, withRouter} from 'react-router-dom';
+
+import InsertInvitationIcon from '@material-ui/icons/InsertInvitation'
+import ListAltIcon from '@material-ui/icons/ListAlt'
+import NoteIcon from '@material-ui/icons/Note'
+import AccountBoxIcon from '@material-ui/icons/AccountBox'
+
+class Navbar extends React.Component {
+    /*state = {
+        items: [
+            {id: 1, title: "Календарь", link: "calendar", icon: require("../assets/icons/calendar.svg")},
+			{id: 2, title: "Список дел", link: "/agenda", icon: require("../assets/icons/list.svg")},
+			{id: 3, title: "Новости", link: "/news", icon: require("../assets/icons/press.svg")},
+			{id: 4, title: "Аккаунт", link: "/account", icon: require("../assets/icons/user.svg")}
+        ]
+	}*/
+	constructor (props) {
+		super(props)
+		this.state = {
+			pathMap: [
+				'/calendar',
+				'/agenda',
+				'/news',
+				'/accounts'
+			]
+		}
+	}
+	componentWillReceiveProps(newProps) {
+		const {pathname} = newProps.location;
+		const {pathMap} = this.state;
+	
+		const value = pathMap.indexOf(pathname);
+	
+		if (value > -1) {
+		  	this.setState({
+				value
+		  	});
+		}
+	}
+	
+	  handleChange = (event, value) => {
+		this.setState({ value });
+	  };
+	
+    render ()  { 
+		const {value, pathMap} = this.state;
+
+        return ( 
+            <BottomNavigation
+                value={value}
+                onChange={this.handleChange}
+				showLabels
+				className="navBar"
+            >
+				<BottomNavigationAction label="Календарь" icon={<InsertInvitationIcon />} component={Link} to={pathMap[0]} />
+				<BottomNavigationAction label="Список дел" icon={<ListAltIcon />} component={Link} to={pathMap[1]} /> 
+				<BottomNavigationAction label="Новости" icon={<NoteIcon />} component={Link} to={pathMap[2]} />
+				<BottomNavigationAction label="Аккаунт" icon={<AccountBoxIcon />} component={Link} to={pathMap[3]} />
+			</BottomNavigation>
+        );
+    }
+}
+ 
+export default withRouter(Navbar);

src/components/views/calendar.css

@@ -0,0 +1,73 @@
+* {
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    font-family: sans-serif;
+    font-size: 16px;
+    color: #444;
+  }
+  
+  #calendar {
+    width: 640px;
+    height: 480px;
+    margin: 100px auto;
+  }
+  
+  .Calendar-grid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  
+  .Calendar-header {
+    height: 50px;
+    background: #333;
+    color: #fff;
+    text-align: center;
+    line-height: 50px;
+    display: flex;
+    font-size: 20px;
+    justify-content: space-between;
+  }
+  
+  .Calendar-header button {
+    width: 50px;
+    font-size: 20px;
+    border: 0;
+    background: transparent;
+    color: #ddd;
+    cursor: pointer;
+  }
+  
+  .Calendar-grid-item {
+    flex: 0 14.28571%;
+    text-align: center;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .Calendar-grid-item--current {
+    font-weight: 700;
+  }
+  
+  .Calendar-grid-item.nextMonth,
+  .Calendar-grid-item.prevMonth {
+    color: #999;
+  }
+  
+  .Calendar-grid-item:nth-child(7n + 1) {
+    border-left: 1px solid #ddd;
+  }
+  
+  .Calendar-grid-item:nth-child(-n + 7) {
+    border-top: 1px solid #ddd;
+  }

src/components/views/calendar.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import {Link, withRouter} from 'react-router-dom'
+
+//import getCalendar from '../../methods/calendar'
+
+import { Calendar as CalendarComponent } from 'react-calendar-component'
+import moment from 'moment';
+import 'moment/locale/ru';
+
+import './calendar.css'
+
+class Calendar extends React.Component {
+    constructor (props) {
+		super(props)
+		this.state = {
+            date: moment()
+        }
+    }
+    render() {
+        return(
+            <CalendarComponent
+                onChangeMonth={date => this.setState({ date })}
+                date={this.state.date}
+                onPickDate={date => console.log(date)}
+            />
+        )
+    }
+}
+export default withRouter(Calendar);

src/index.css

@@ -1,6 +1,7 @@
 body {
   margin: 0;
   padding: 0;
+  min-height: 100vh;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
     'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;

src/index.js

@@ -3,6 +3,18 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme({
+    palette: {
+        primary: {
+            main: '#007aff',
+        },
+        secondary: {
+            main: '#ff2d54',
+        },
+    },
+});
 
 ReactDOM.render(<App />, document.getElementById('root'));
 

src/methods/api.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+  baseURL: `localhost:3000`
+});

src/methods/calendar.js

@@ -0,0 +1,14 @@
+import API from './api'
+export default {
+	getEventsList () {
+		let fullTimetable = API.get('weekTimetable', { crossdomain: true })
+		for(let el in fullTimetable) {
+			fullTimetable[el].splice(4,4)
+		}
+		let result = fullTimetable
+		return result
+	},
+	getCalendarEvents () {
+		return API.get('weekTimetable', { crossdomain: true })
+	}
+}

src/methods/news.js

@@ -0,0 +1,6 @@
+import API from './api'
+export default {
+	getNewsList () {
+		return API.get('newsList', { crossdomain: true })
+	}
+}