Skip to content

Commit 83ff8aa

Browse files
NikitaSysoevNikitaSysoev
committed
connected react-router
1 parent d56d7d7 commit 83ff8aa

File tree

16 files changed

+1105
-948
lines changed

16 files changed

+1105
-948
lines changed

‎package-lock.json‎

Lines changed: 815 additions & 845 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tracker",
3-
"version": "1.1.2",
3+
"version": "1.1.3",
44
"private": true,
55
"dependencies": {
66
"@fortawesome/fontawesome-svg-core": "^1.2.18",
@@ -14,6 +14,7 @@
1414
"react-bootstrap": "^1.0.0-beta.9",
1515
"react-dom": "^16.8.6",
1616
"react-redux": "^7.0.3",
17+
"react-router": "^5.0.1",
1718
"react-router-dom": "^5.0.0",
1819
"react-scripts": "3.0.1",
1920
"redux": "^4.0.1",

‎src/App.js‎

Lines changed: 10 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,18 @@
11
import React from 'react';
2-
import { Route, Switch } from 'react-router-dom';
3-
import { NAV_ITEMS, NAV_MAIN } from './lib/nav_data';
4-
import Navigation from './components/navigation';
52

6-
const MainTab = React.lazy(() => import('./screens/main'));
7-
const Dnd = React.lazy(() => import('./screens/dnd'));
8-
9-
export default class App extends React.Component {
10-
constructor(props) {
11-
super(props);
12-
this.state = {
13-
activeNavItem: NAV_MAIN
14-
};
15-
}
16-
17-
handleNavClick = e => {
18-
e.preventDefault();
19-
const { target } = e;
20-
const newItem = target.getAttribute('data-name');
21-
this.setState({ activeNavItem: newItem });
22-
};
23-
24-
navHelper = () => {
25-
return NAV_ITEMS.map(item => {
26-
item.onClick = this.handleNavClick;
27-
item.isActive = false;
28-
if (this.state.activeNavItem === item.name) {
29-
item.isActive = true;
30-
}
31-
return item;
32-
});
33-
};
3+
import Navigation from './components/nav';
344

5+
class App extends React.Component {
356
render() {
367
return (
37-
<div className="container">
38-
<Navigation items={this.navHelper()} />
39-
<React.Suspense fallback={<div> Loading....</div>}>
40-
{/* <Switch>
41-
<Route exact path="/" render={() => (<MainTab
42-
/>)} />
43-
<Route exact path="/dnd" render={() => <Dnd />} />
44-
</Switch> */}
45-
{this.state.activeNavItem === NAV_MAIN ? <MainTab /> : <Dnd />}
46-
</React.Suspense>
47-
</div>
8+
<>
9+
<div className="container">
10+
<Navigation />
11+
{this.props.children}
12+
</div>
13+
</>
4814
);
4915
}
5016
}
17+
18+
export default App;

‎src/components/calendar/index.jsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import React, { useEffect, useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4+
import { faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons';
5+
6+
const ViewCalendar = ({ display, handleView }) => {
7+
const [calendarDate, setCalendarDate] = useState(null);
8+
const [currMonthCalendar, setCurrMonthCalendar] = useState(null);
9+
const [currYearCalendar, setCurrYearCalendar] = useState(null);
10+
console.log(calendarDate, currMonthCalendar, currYearCalendar)
11+
12+
useEffect(() => {
13+
setCalendarDate(new Date());
14+
setCurrMonthCalendar(new Date().getMonth());
15+
setCurrYearCalendar(new Date().getFullYear());
16+
}, [display])
17+
18+
const handleCancel = () => handleView();
19+
20+
const renderCalendarMonthHeader = () => {
21+
const text = [
22+
'Январь',
23+
'Февраль',
24+
'Март',
25+
'Апрель',
26+
'Май',
27+
'Июнь',
28+
'Июль',
29+
'Август',
30+
'Сентябрь',
31+
'Октябрь',
32+
'Ноябрь',
33+
'Декабрь'
34+
];
35+
return text[currMonthCalendar] + ' ' + currYearCalendar;
36+
}
37+
38+
const handleChangePage = (e) => {
39+
const { currentTarget: target } = e;
40+
if (target.getAttribute('data-id') === 'nextButton') {
41+
if (currMonthCalendar === 11) {
42+
setCurrMonthCalendar(0);
43+
setCurrYearCalendar(state => state + 1);
44+
return false;
45+
}
46+
setCurrMonthCalendar(state => state + 1);
47+
} else {
48+
if (currMonthCalendar === 0) {
49+
setCurrMonthCalendar(11);
50+
setCurrYearCalendar(state => state - 1);
51+
return false;
52+
}
53+
setCurrMonthCalendar(state => state - 1);
54+
}
55+
56+
}
57+
58+
const renderCells = () => {
59+
return (
60+
<tr>
61+
62+
</tr>
63+
)
64+
}
65+
66+
return (
67+
<>
68+
{display && <div className="micalendar"
69+
style={{ display: 'block', position: 'absolute' }}>
70+
<div className="header_wrap">
71+
<div className="header">
72+
<p>{renderCalendarMonthHeader()}</p>
73+
</div>
74+
<div class="arrows">
75+
<div
76+
data-id="prevButton"
77+
onClick={handleChangePage}
78+
className="arrows_left">
79+
<FontAwesomeIcon icon={faAngleLeft} />
80+
</div>
81+
<div
82+
data-id="nextButton"
83+
onClick={handleChangePage}
84+
className="arrows_right">
85+
<FontAwesomeIcon icon={faAngleRight} />
86+
</div>
87+
</div>
88+
</div>
89+
<table>
90+
<thead>
91+
<tr>
92+
<th>Пн</th>
93+
<th>Вт</th>
94+
<th>Ср</th>
95+
<th>Чт</th>
96+
<th>Пт</th>
97+
<th>Сб</th>
98+
<th>Вс</th>
99+
</tr>
100+
</thead>
101+
<tbody>
102+
<tr><td class="not_current" >30</td></tr>
103+
</tbody>
104+
</table>
105+
<hr />
106+
<div className="btn-group">
107+
<input
108+
type="button"
109+
onClick={handleCancel}
110+
value="Отмена"
111+
className="btn btn-sm btn-outline-secondary" />
112+
</div>
113+
</div>
114+
115+
}
116+
</>
117+
);
118+
};
119+
120+
ViewCalendar.propTypes = {
121+
display: PropTypes.bool,
122+
handleView: PropTypes.func
123+
};
124+
125+
export default React.memo(ViewCalendar);

‎src/components/form/date.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@ import React from 'react';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
33
import { faCalendar } from '@fortawesome/free-solid-svg-icons';
44
import PropTypes from 'prop-types';
5+
import Calendar from '../calendar'
56

67
const DateInput = (props) => {
78
const { label, icon, placeholder, mandatory = false, helper, err } = props;
8-
const handleView = () => console.log('x')
9+
10+
const [visibleCalendar, setVisibleCalendar] = React.useState(false);
11+
12+
const handleView = () => setVisibleCalendar(visibleCalendar => !visibleCalendar);
13+
914
const mandatoryStr = mandatory && <span className="text-muted">*</span>;
1015
return (
1116
<div className="form-group">
@@ -26,6 +31,9 @@ const DateInput = (props) => {
2631
placeholder={placeholder || label}
2732
/>
2833
</div>
34+
<Calendar
35+
handleView={handleView}
36+
display={visibleCalendar} />
2937
<small className={`${err && 'text-danger'} form-text text-muted`}>
3038
{helper || 'Это поле обязательное для заполнения'}
3139
</small>

‎src/components/main_form/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class MainForm extends React.Component {
4141
if (this.props.taskForEdit !== prevProps.taskForEdit) {
4242
this.setState({
4343
data: { ...this.props.taskList.find(item => item.id === this.props.taskForEdit) }
44-
})
44+
});
4545
}
4646
}
4747

‎src/components/nav/index.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withRouter } from 'react-router';
4+
import { Link } from 'react-router-dom';
5+
import { NAV_ITEMS, NAV_MAIN } from '../../lib/nav_data';
6+
7+
const isItemActive = (url, location) => {
8+
let { pathname } = location;
9+
10+
if (pathname.charAt(pathname.length-1) === "/" && pathname.length > 1) {
11+
pathname = pathname.slice(0, -1);
12+
}
13+
14+
if (pathname === url) {
15+
return "active";
16+
}
17+
return "";
18+
};
19+
20+
21+
22+
const Navigation = (props) => {
23+
24+
const renderNavItem = (item) => {
25+
const {
26+
title,
27+
name,
28+
url,
29+
} = item;
30+
31+
const isActive = isItemActive(url, props.location)
32+
33+
return (
34+
<Link
35+
to={ url }
36+
role="button"
37+
key={ name }
38+
className={ `nav-item nav-link ${ isActive ? "active" : "" }` }
39+
>
40+
{ title }
41+
</Link>
42+
)
43+
};
44+
45+
console.log("NAV = ", props)
46+
return (
47+
<nav>
48+
<div className="nav nav-tabs">
49+
{
50+
NAV_ITEMS.map(renderNavItem)
51+
}
52+
</div>
53+
</nav>);
54+
};
55+
56+
57+
export default React.memo(withRouter(Navigation));

‎src/components/navigation/index.jsx‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/index.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { Provider } from 'react-redux';
4-
import { ConnectedRouter } from 'connected-react-router';
4+
import { ConnectedRouter } from 'connected-react-router'
55
import 'bootstrap/dist/css/bootstrap.min.css';
6+
67
import './micalendar.css';
78
import App from './App';
89
import * as serviceWorker from './serviceWorker';
910
import configureStore, { history } from './store/configure_store';
11+
import theRoutes from './router/routes';
1012

1113
const store = configureStore();
1214

1315
ReactDOM.render(
1416
<Provider store={store}>
15-
<ConnectedRouter history={history}>
16-
<App />
17-
</ConnectedRouter>
17+
<ConnectedRouter history={ history }>
18+
<React.Suspense fallback={<div>Loading...</div>}>
19+
<App>{theRoutes}</App>
20+
</React.Suspense>
21+
</ConnectedRouter>
1822
</Provider>,
1923
document.getElementById('root')
2024
);

0 commit comments

Comments
 (0)