aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/Results.js76
-rw-r--r--src/client/react/components/container/Search.js26
-rw-r--r--src/client/react/components/container/View.js18
-rw-r--r--src/client/react/components/container/WeekSelector.js17
-rw-r--r--src/client/react/components/page/User.js22
5 files changed, 91 insertions, 68 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index c329c3c..0f70aa6 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -1,52 +1,63 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import classnames from 'classnames';
+import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
-import Result from '../presentational/Result';
+
import { setUser } from '../../actions/search';
+import { userFromMatch } from '../../lib/url';
+import Result from '../presentational/Result';
const Results = ({
results,
isExactMatch,
- urlUser,
selectedResult,
+ match,
history,
dispatch,
-}) => (
- <div
- className={classnames('search__results', {
- 'search__results--has-results': !isExactMatch && results.length > 0,
- })}
- style={{
- minHeight: isExactMatch ? 0 : results.length * 54,
- }}
- >
- {!isExactMatch && results.map(userId => (
- <Result
- key={userId}
- userId={userId}
- isSelected={userId === selectedResult}
- onClick={() => {
- if (userId === urlUser) {
- // EDGE CASE: The user is set if the user changes, but it doesn't
- // change if the result is already the one we are viewing.
- // Therefor, we need to dispatch the SET_USER command manually.
- dispatch(setUser(urlUser));
- } else {
- history.push(`/${userId}`);
- }
- }}
- />
- ))}
- </div>
-);
+}) => {
+ const user = userFromMatch(match);
+
+ return (
+ <div
+ className={classnames('search__results', {
+ 'search__results--has-results': !isExactMatch && results.length > 0,
+ })}
+ style={{
+ minHeight: isExactMatch ? 0 : results.length * 54,
+ }}
+ >
+ {!isExactMatch && results.map(userId => (
+ <Result
+ key={userId}
+ userId={userId}
+ isSelected={userId === selectedResult}
+ onClick={() => {
+ if (userId === user) {
+ // EDGE CASE: The user is set if the user changes, but it doesn't
+ // change if the result is already the one we are viewing.
+ // Therefor, we need to dispatch the SET_USER command manually.
+ dispatch(setUser(user));
+ } else {
+ history.push(`/${userId}`);
+ }
+ }}
+ />
+ ))}
+ </div>
+ );
+};
Results.propTypes = {
results: PropTypes.arrayOf(PropTypes.string).isRequired,
isExactMatch: PropTypes.bool.isRequired,
- urlUser: PropTypes.string,
selectedResult: PropTypes.string,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ type: PropTypes.string,
+ value: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
history: PropTypes.shape({
push: PropTypes.func.isRequired,
}).isRequired,
@@ -54,7 +65,6 @@ Results.propTypes = {
};
Results.defaultProps = {
- urlUser: null,
selectedResult: null,
};
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index ad6f7f1..4f3c6ee 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
import SearchIcon from 'react-icons/lib/md/search';
+import { userFromMatch } from '../../lib/url';
import { setUser, inputChange, changeSelectedResult } from '../../actions/search';
import users from '../../users';
@@ -26,12 +27,14 @@ class Search extends React.Component {
}
componentDidMount() {
- this.props.dispatch(setUser(this.props.urlUser));
+ const urlUser = userFromMatch(this.props.match);
+ this.props.dispatch(setUser(urlUser));
}
componentWillReceiveProps(nextProps) {
- if (nextProps.urlUser !== this.props.urlUser) {
- this.props.dispatch(setUser(nextProps.urlUser));
+ if (nextProps.match !== this.props.match) {
+ const urlUser = userFromMatch(nextProps.match);
+ this.props.dispatch(setUser(urlUser));
}
}
@@ -59,12 +62,13 @@ class Search extends React.Component {
break;
case 'Enter': {
const result = this.props.selectedResult || this.props.results[0];
+ const urlUser = userFromMatch(this.props.match);
- if (result === this.props.urlUser) {
+ if (result === urlUser) {
// EDGE CASE: The user is set if the user changes, but it doesn't
// change if the result is already the one we are viewing.
// Therefor, we need to dispatch the SET_USER command manually.
- this.props.dispatch(setUser(this.props.urlUser));
+ this.props.dispatch(setUser(urlUser));
} else if (result) {
this.props.history.push(`/${result}`);
}
@@ -109,7 +113,7 @@ class Search extends React.Component {
autoComplete="off"
/>
</div>
- <Results urlUser={this.props.urlUser} />
+ <Results />
</div>
</div>
);
@@ -119,18 +123,22 @@ class Search extends React.Component {
Search.propTypes = {
results: PropTypes.arrayOf(PropTypes.string).isRequired,
selectedResult: PropTypes.string,
- urlUser: PropTypes.string,
isExactMatch: PropTypes.bool.isRequired,
searchText: PropTypes.string.isRequired,
- dispatch: PropTypes.func.isRequired,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ type: PropTypes.string,
+ value: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
history: PropTypes.shape({
push: PropTypes.func.isRequired,
}).isRequired,
+ dispatch: PropTypes.func.isRequired,
};
Search.defaultProps = {
selectedResult: null,
- urlUser: null,
};
const mapStateToProps = state => ({
diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index 4f16100..052173f 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
+import { userFromMatch, weekFromLocation } from '../../lib/url';
import { fetchSchedule } from '../../actions/view';
import extractSchedule from '../../lib/extractSchedule';
@@ -11,10 +12,12 @@ import Loading from '../presentational/Loading';
const View = ({
schedules,
- user,
- week,
+ match,
+ location,
dispatch,
}) => {
+ const user = userFromMatch(match);
+ const week = weekFromLocation(location);
const schedule = extractSchedule(schedules, user, week);
switch (schedule.state) {
@@ -35,8 +38,15 @@ View.propTypes = {
state: PropTypes.string.isRequired,
htmlStr: PropTypes.string,
}))).isRequired,
- user: PropTypes.string.isRequired,
- week: PropTypes.number.isRequired,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ type: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ location: PropTypes.shape({
+ search: PropTypes.string.isRequired,
+ }).isRequired,
dispatch: PropTypes.func.isRequired,
};
diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js
index d5ba752..a7ffa3a 100644
--- a/src/client/react/components/container/WeekSelector.js
+++ b/src/client/react/components/container/WeekSelector.js
@@ -8,10 +8,13 @@ import ArrowBackIcon from 'react-icons/lib/md/arrow-back';
import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward';
import purifyWeek from '../../lib/purifyWeek';
+import { weekFromLocation } from '../../lib/url';
+
+const WeekSelector = ({ location, history }) => {
+ const week = weekFromLocation(location);
-const WeekSelector = ({ urlWeek, location, history }) => {
const updateWeek = (change) => {
- const newWeek = purifyWeek(urlWeek + change);
+ const newWeek = purifyWeek(week + change);
const isCurrentWeek = moment().week() === newWeek;
const query = queryString.stringify({
@@ -23,19 +26,19 @@ const WeekSelector = ({ urlWeek, location, history }) => {
return (
<div className="week-selector">
<button onClick={() => updateWeek(-1)}><ArrowBackIcon /></button>
- <div className="text">Week {urlWeek}</div>
+ <div className="text">Week {week}</div>
<button onClick={() => updateWeek(+1)}><ArrowForwardIcon /></button>
</div>
);
};
WeekSelector.propTypes = {
- urlWeek: PropTypes.number.isRequired,
- history: PropTypes.shape({
- push: PropTypes.func.isRequired,
- }).isRequired,
location: PropTypes.shape({
pathname: PropTypes.string.isRequired,
+ search: PropTypes.string.isRequired,
+ }).isRequired,
+ history: PropTypes.shape({
+ push: PropTypes.func.isRequired,
}).isRequired,
};
diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js
index 0c79a8b..1b7e1ce 100644
--- a/src/client/react/components/page/User.js
+++ b/src/client/react/components/page/User.js
@@ -1,20 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
-import queryString from 'query-string';
-import moment from 'moment';
-import purifyWeek from '../../lib/purifyWeek';
import Search from '../container/Search';
import View from '../container/View';
-import users from '../../users';
+import { userFromMatch } from '../../lib/url';
import WeekSelector from '../container/WeekSelector';
-const UserPage = ({ match, location }) => {
- const user = `${match.params.type}/${match.params.value}`;
- const weekStr = queryString.parse(location.search).week;
- const week = purifyWeek(weekStr ? parseInt(weekStr, 10) : moment().week());
+const UserPage = ({ match }) => {
+ const user = userFromMatch(match);
- if (!users.allIds.includes(user)) {
+ if (!user) {
// Invalid user, redirect to index.
return <Redirect to="/" />;
}
@@ -23,15 +18,15 @@ const UserPage = ({ match, location }) => {
<div className="page-user">
<div className="search-wrapper">
<div className="search-container">
- <Search urlUser={user} />
+ <Search />
</div>
</div>
<div className="menu">
<div className="menu-container">
- <WeekSelector urlWeek={week} />
+ <WeekSelector />
</div>
</div>
- <View user={user} week={week} />
+ <View />
</div>
);
};
@@ -43,9 +38,6 @@ UserPage.propTypes = {
value: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
- location: PropTypes.shape({
- search: PropTypes.string.isRequired,
- }).isRequired,
};
export default UserPage;
generated by cgit v1.1 at 2024-12-27 06:23:03 +0000