54 | {type === 'thumb' ? (
55 |
84 | );
85 | }
86 | }
87 |
88 | Upload.propTypes = {
89 | onChange: PropTypes.func,
90 | value: PropTypes.string,
91 | accept: PropTypes.oneOf(['image', 'audio']),
92 | type: PropTypes.oneOf(['thumb', 'input']),
93 | name: PropTypes.string,
94 | placeholder: PropTypes.string
95 | };
96 |
97 | Upload.defaultProps = {
98 | value: '',
99 | accept: 'image',
100 | type: 'thumb',
101 | name: 'image',
102 | placeholder: 'Upload'
103 | };
104 |
105 | export default Upload;
106 |
--------------------------------------------------------------------------------
/src/config/firebase.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Config firebase app
3 | * @type {{apiKey: string, authDomain: string, databaseURL: string, projectId: string, storageBucket: string, messagingSenderId: string}}
4 | */
5 | export const config = {
6 | apiKey: "AIzaSyBHIkYnZY3Z221RJ3lfO5KShMKMo8EJedg",
7 | authDomain: "travelear-df75e.firebaseapp.com",
8 | databaseURL: "https://travelear-df75e.firebaseio.com",
9 | projectId: "travelear-df75e",
10 | storageBucket: "travelear-df75e.appspot.com",
11 | messagingSenderId: "1035569732494"
12 | };
13 |
14 | /**
15 | * firestore setting
16 | * @type {{timestampsInSnapshots: boolean}}
17 | */
18 | export const fireStoreSetting = {
19 | timestampsInSnapshots: true
20 | };
21 |
--------------------------------------------------------------------------------
/src/firebase/authencation.js:
--------------------------------------------------------------------------------
1 | import { auth } from './firebase';
2 |
3 | /**
4 | * Sign in firebase email and password
5 | * @param email
6 | * @param password
7 | * @param remember
8 | * @returns {Promise
56 | {value === '' ? (
57 | profile image
58 | ) : (
59 | 
60 | )}
61 |
62 | ) : (
63 |
64 |
70 | Choose
71 |
72 | )}
73 | {this.state.progress ? {this.state.progress}% : null}
74 |
83 |
34 |
36 |
75 |
76 | );
77 | }
78 | }
79 |
80 | AppLayout.propTypes = {
81 | dispatch: PropTypes.func.isRequired,
82 | location: PropTypes.object.isRequired
83 | };
84 |
85 | const mapStateToProps = state => {
86 | const auth = makeSelectAuth(state);
87 | return {
88 | auth
89 | };
90 | };
91 |
92 | export default withRouter(connect(mapStateToProps)(AppLayout));
93 |
--------------------------------------------------------------------------------
/src/pages/login/Login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { connect } from 'react-redux';
5 | import { Redirect } from 'react-router-dom';
6 |
7 | import { login } from '../../modules/auth';
8 |
9 | class Login extends Component {
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | username: '',
14 | password: ''
15 | };
16 | this.onLogin = this.onLogin.bind(this);
17 | }
18 | onLogin(e) {
19 | e.preventDefault();
20 | const { username, password } = this.state;
21 | this.props.dispatch(login(username, password, true));
22 | }
23 | render() {
24 | const {
25 | auth: { isLogin }
26 | } = this.props;
27 | const { username, password } = this.state;
28 | if (isLogin) {
29 | return Not found
} /> 74 |
33 |
54 | );
55 | }
56 | }
57 |
58 | Login.propTypes = {
59 | dispatch: PropTypes.func.isRequired,
60 | auth: PropTypes.shape({
61 | isLogin: PropTypes.bool.isRequired,
62 | loading: PropTypes.bool.isRequired
63 | }).isRequired
64 | };
65 |
66 | Login.defaultProps = {};
67 |
68 | const mapStateToProps = state => ({
69 | auth: state.get('auth').toJS()
70 | });
71 |
72 | const mapDispatchToProps = dispatch => ({
73 | dispatch
74 | });
75 |
76 | export default connect(
77 | mapStateToProps,
78 | mapDispatchToProps
79 | )(Login);
80 |
--------------------------------------------------------------------------------
/src/pages/login/Register.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { connect } from 'react-redux';
5 | import { Redirect } from 'react-router-dom';
6 |
7 | import { register } from '../../modules/auth';
8 |
9 | class Login extends Component {
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | username: '',
14 | password: ''
15 | };
16 | this.onSubmit = this.onSubmit.bind(this);
17 | }
18 | onSubmit(e) {
19 | e.preventDefault();
20 | const { username, password } = this.state;
21 | this.props.dispatch(register(username, password));
22 | }
23 | render() {
24 | const {
25 | auth: { isLogin }
26 | } = this.props;
27 | const { username, password } = this.state;
28 | if (isLogin) {
29 | return Login Page
34 | 53 |
33 |
54 | );
55 | }
56 | }
57 |
58 | Login.propTypes = {
59 | dispatch: PropTypes.func.isRequired,
60 | auth: PropTypes.shape({
61 | isLogin: PropTypes.bool.isRequired,
62 | loading: PropTypes.bool.isRequired
63 | }).isRequired
64 | };
65 |
66 | Login.defaultProps = {};
67 |
68 | const mapStateToProps = state => ({
69 | auth: state.get('auth').toJS()
70 | });
71 |
72 | const mapDispatchToProps = dispatch => ({
73 | dispatch
74 | });
75 |
76 | export default connect(
77 | mapStateToProps,
78 | mapDispatchToProps
79 | )(Login);
80 |
--------------------------------------------------------------------------------
/src/pages/login/index.js:
--------------------------------------------------------------------------------
1 | import loadable from 'react-loadable';
2 |
3 | // Use react-loadable to make component-centric code splitting.
4 |
5 | export const LoginPage = loadable({
6 | loader: () => import('./Login'),
7 | loading: () => null
8 | });
9 |
10 | export const RegisterPage = loadable({
11 | loader: () => import('./Register'),
12 | loading: () => null
13 | });
14 |
--------------------------------------------------------------------------------
/src/pages/other/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { connect } from 'react-redux';
5 | import { compose } from 'recompose';
6 | import sortBy from 'lodash/sortBy';
7 |
8 | import { withSubscribe } from '../../hoc';
9 | import { makeSelectTrack, subscribe, unsubscribe } from '../../modules/track';
10 | import { makeSelectAuth } from '../../modules/auth';
11 | import { Track } from './components/Track';
12 |
13 | class List extends Component {
14 | render() {
15 | const { data, role, useId } = this.props;
16 | return (
17 | Register Page
34 | 53 |
18 |
24 | );
25 | }
26 | }
27 |
28 | List.propTypes = {
29 | loading: PropTypes.bool.isRequired,
30 | data: PropTypes.array.isRequired,
31 | dispatch: PropTypes.func.isRequired,
32 | match: PropTypes.object.isRequired,
33 | role: PropTypes.string,
34 | useId: PropTypes.string.isRequired
35 | };
36 |
37 | List.defaultProps = {
38 | role: 'user'
39 | };
40 |
41 | /**
42 | * Filter tracks by the user role
43 | * - Admin has full access to all tracks
44 | * - Creators can't see all pending tracks created by other creators
45 | * - Normal users can only see public tracks
46 | * @param {State} state
47 | */
48 | const mapStateToProps = state => {
49 | const { loading, data } = makeSelectTrack(state);
50 |
51 | const {
52 | user: { role, id }
53 | } = makeSelectAuth(state);
54 |
55 | let preData;
56 | if (role === 'admin') {
57 | preData = data;
58 | } else if (role === 'creator') {
59 | preData = data.filter(track => track.isPublic || track.author === id)
60 | } else {
61 | preData = data.filter(track => track.isPublic)
62 | }
63 |
64 | return {
65 | loading,
66 | data: sortBy(preData, 'timestamp'),
67 | role,
68 | useId: id
69 | };
70 | };
71 |
72 | const mapDispatchToProps = dispatch => ({ dispatch });
73 |
74 | const withReducer = connect(
75 | mapStateToProps,
76 | mapDispatchToProps
77 | );
78 | const withData = withSubscribe(subscribe, unsubscribe);
79 |
80 | export default compose(
81 | withReducer,
82 | withData
83 | )(List);
84 |
--------------------------------------------------------------------------------
/src/pages/other/NewTrack.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import moment from 'moment';
5 | import { compose } from 'redux';
6 | import isEmpty from 'lodash/isEmpty';
7 | import { makeSelectAuth } from '../../modules/auth';
8 | import { removeService } from '../../modules/track/service';
9 | import {
10 | defaultPropsData,
11 | handleSubmit,
12 | withData,
13 | withLoading
14 | } from '../../hoc';
15 | import queryString from '../../helpers/query-string';
16 |
17 | import Upload from '../../components/Upload';
18 |
19 | import { connect } from 'react-redux';
20 | import { REMOVED } from '../../modules/track/constants';
21 |
22 | const initialValues = {
23 | name: '',
24 | location: '',
25 | latitude: '',
26 | longitude: '',
27 | tags: '',
28 | image: '',
29 | file: '',
30 | bio: ''
31 | };
32 |
33 | class NewTrack extends Component {
34 | constructor(props) {
35 | super(props);
36 | const track = this.props.data;
37 | this.state = {
38 | track: isEmpty(track) ?
39 | initialValues :
40 | {
41 | ...track,
42 | recorded: moment(track.recorded.toDate()).format('YYYY-MM-DD')
43 | },
44 | errors: {}
45 | };
46 | this.handleSubmit = this.handleSubmit.bind(this);
47 | this.handleChange = this.handleChange.bind(this);
48 | this.handleClear = this.handleClear.bind(this);
49 | this.handleDelete = this.handleDelete.bind(this);
50 | this.handleAudioDuration = this.handleAudioDuration.bind(this);
51 | }
52 |
53 | componentDidMount() {
54 | const { user } = this.props;
55 | const track = this.props.data;
56 | if (user.role === 'creator' && track.isPublic) {
57 | alert('Track approved, you can not edit content.');
58 | }
59 | }
60 |
61 | handleSubmit(e) {
62 | e.preventDefault();
63 |
64 | const { user } = this.props;
65 | const { track } = this.state;
66 |
67 | if (user.role === 'creator' && track.isPublic) {
68 | alert('Track approved, you can not edit content.');
69 | return;
70 | }
71 |
72 | this.props.updatePending(true);
73 | const { search } = this.props.location;
74 | const { id } = queryString.parse(search);
75 | const errors = this.validate(track);
76 |
77 | if (isEmpty(errors)) {
78 | let preData = track;
79 | if (!id) {
80 | preData = {
81 | isPublic: false,
82 | author: user.id,
83 | authorName: user.name ? user.name : '',
84 | plays: 0,
85 | duration: '',
86 | ...track,
87 | recorded: moment(track.recorded).toDate(),
88 | timestamp: new Date(),
89 | };
90 | } else {
91 | preData.recorded = moment(track.recorded).toDate();
92 | }
93 |
94 | this.props
95 | .handleSave(id, preData)
96 | .then(() => {
97 | alert('Save successfully!');
98 | this.props.history.push('/');
99 | })
100 | .catch(error => {
101 | alert(error.message);
102 | this.props.updatePending(false);
103 | });
104 | } else {
105 | this.setState({
106 | errors
107 | });
108 | }
109 | }
110 |
111 | handleAudioDuration(e) {
112 | const duration = e.target.duration;
113 | const transformed = moment.utc(moment.duration(duration, 'second').asMilliseconds());
114 | let durationString;
115 |
116 | if (transformed.hour()) {
117 | durationString = transformed.format('HH:m:ss');
118 | } else {
119 | durationString = transformed.format('m:ss');
120 | }
121 |
122 | this.setState({
123 | ...this.state,
124 | track: {
125 | ...this.state.track,
126 | duration: durationString
127 | }
128 | })
129 | }
130 |
131 | transformValue(name, value) {
132 | if (name === "latitude" || name === "longitude") {
133 | return parseFloat(value);
134 | }
135 | return value;
136 | }
137 |
138 | handleChange(e) {
139 | const { value, name } = e.target;
140 | const { track } = this.state;
141 | this.setState({
142 | track: { ...track, [name]: this.transformValue(name, value) }
143 | });
144 | }
145 |
146 | handleClear() {
147 | this.setState({
148 | track: initialValues
149 | });
150 | }
151 |
152 | handleDelete() {
153 | const { track } = this.state;
154 | removeService(track.id)
155 | .then(() => {
156 | this.props.dispatch({ type: REMOVED, payload: { id: track.id } });
157 | this.props.history.push('/');
158 | alert('Remove successfully!');
159 | })
160 | .catch(error => {
161 | alert(error.message);
162 | });
163 | }
164 | validate(data) {
165 | let errors = {};
166 | if (!data.name) {
167 | errors = { ...errors, name: 'Name is required!' };
168 | }
169 | if (!data.location) {
170 | errors = { ...errors, location: 'Location is required!' };
171 | }
172 | if (!data.latitude) {
173 | errors = { ...errors, latitude: 'Latitude is required!' };
174 | }
175 | if (!data.longitude) {
176 | errors = { ...errors, longitude: 'Longitude is required!' };
177 | }
178 | if (!data.image) {
179 | errors = { ...errors, image: 'Image is required!' };
180 | }
181 | if (!data.file) {
182 | errors = { ...errors, file: 'Audio is required!' };
183 | }
184 | if (!data.recorded) {
185 | errors = { ...errors, recorded: 'Recorded date is required!' };
186 | }
187 | return errors;
188 | }
189 | showButtonDelete() {
190 | const { track } = this.state;
191 | const { user } = this.props;
192 | if (!track.id) {
193 | return null;
194 | } else {
195 | if (
196 | user.role === 'admin' ||
197 | (user.role === 'creator' && !track.isPublic)
198 | ) {
199 | return (
200 |
206 | );
207 | }
208 | return null;
209 | }
210 | }
211 | render() {
212 | const { track, errors } = this.state;
213 | return (
214 |
19 | {data.map(track => (
20 |
21 | )).reverse()}
22 |
23 |
215 |
327 | );
328 | }
329 | }
330 |
331 | NewTrack.propTypes = {
332 | location: PropTypes.object.isRequired,
333 | history: PropTypes.object.isRequired,
334 | handleSave: PropTypes.func.isRequired,
335 | updatePending: PropTypes.func.isRequired,
336 | pending: PropTypes.bool.isRequired
337 | };
338 |
339 | NewTrack.defaultProps = {};
340 |
341 | const mapStateToProps = state => {
342 | const { user } = makeSelectAuth(state);
343 | return {
344 | user
345 | };
346 | };
347 |
348 | const mapDispatchToProps = dispatch => ({ dispatch });
349 |
350 | const withReducer = connect(
351 | mapStateToProps,
352 | mapDispatchToProps
353 | );
354 |
355 | export default compose(
356 | withReducer,
357 | defaultPropsData,
358 | withData,
359 | withLoading,
360 | handleSubmit
361 | )(NewTrack);
362 |
--------------------------------------------------------------------------------
/src/pages/other/Profile.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import { compose } from "redux";
5 | import { connect } from "react-redux";
6 | import isEmpty from "lodash/isEmpty";
7 |
8 | import {
9 | withData,
10 | withLoading,
11 | defaultPropsData,
12 | handleSubmit
13 | } from "../../hoc";
14 | import queryString from "../../helpers/query-string";
15 |
16 | import Upload from "../../components/Upload";
17 | import { makeSelectAuth } from "../../modules/auth";
18 | import { firestore } from "../../firebase";
19 |
20 | class Profile extends Component {
21 | constructor(props) {
22 | super(props);
23 | this.state = {
24 | user: this.props.data,
25 | errors: {}
26 | };
27 | this.handleSubmit = this.handleSubmit.bind(this);
28 | this.handleChange = this.handleChange.bind(this);
29 | }
30 |
31 | updateTracks(id, authorName) {
32 | firestore
33 | .collection("tracks")
34 | .where("author", "==", id)
35 | .get()
36 | .then(function(querySnapshot) {
37 | const batch = firestore.batch();
38 | querySnapshot.forEach(function(doc) {
39 | const setTrack = firestore.collection("tracks").doc(doc.id);
40 | batch.update(setTrack, { authorName });
41 | });
42 | batch.commit().then(function() {
43 | console.log("Update successfully!");
44 | });
45 | })
46 | .catch(function(error) {
47 | console.log("Error getting documents: ", error);
48 | });
49 | }
50 |
51 | handleSubmit(e) {
52 | e.preventDefault();
53 | this.props.updatePending(true);
54 | const { search } = this.props.location;
55 | const { id } = queryString.parse(search);
56 | const { user } = this.state;
57 | const errors = this.validate(user);
58 | const { role, email } = this.props.user;
59 | if (isEmpty(errors)) {
60 | this.props
61 | .handleSave(id, { ...user, role, email })
62 | .then(() => {
63 | alert("Save successfully!");
64 | this.updateTracks(id, user.name);
65 | this.props.updatePending(false);
66 | })
67 | .catch(error => {
68 | this.props.updatePending(false);
69 | });
70 | } else {
71 | this.setState({ errors });
72 | }
73 | }
74 |
75 | handleChange(e) {
76 | const { value, name } = e.target;
77 | this.setState({
78 | user: { ...this.state.user, [name]: value }
79 | });
80 | }
81 |
82 | validate(data) {
83 | let errors = {};
84 | if (!data.name) {
85 | errors = { ...errors, name: "Name is required!" };
86 | }
87 | if (!data.bio) {
88 | errors = { ...errors, bio: "Bio is required!" };
89 | }
90 | return errors;
91 | }
92 |
93 | render() {
94 | const { user, errors } = this.state;
95 |
96 | return (
97 |
141 | );
142 | }
143 | }
144 |
145 | Profile.propTypes = {
146 | location: PropTypes.object.isRequired,
147 | user: PropTypes.object.isRequired,
148 | history: PropTypes.object.isRequired,
149 | handleSave: PropTypes.func.isRequired,
150 | updatePending: PropTypes.func.isRequired,
151 | pending: PropTypes.bool.isRequired
152 | };
153 |
154 | Profile.defaultProps = {};
155 |
156 | const mapStateToProps = state => {
157 | const { user } = makeSelectAuth(state);
158 | return {
159 | user
160 | };
161 | };
162 |
163 | const mapDispatchToProps = dispatch => ({ dispatch });
164 |
165 | const withReducer = connect(
166 | mapStateToProps,
167 | mapDispatchToProps
168 | );
169 |
170 | export default compose(
171 | withReducer,
172 | defaultPropsData,
173 | withData,
174 | withLoading,
175 | handleSubmit
176 | )(Profile);
177 |
--------------------------------------------------------------------------------
/src/pages/other/ReviewTrack.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { compose } from 'redux';
5 | import {
6 | defaultPropsData,
7 | handleSubmit,
8 | withData,
9 | withLoading
10 | } from '../../hoc';
11 | import queryString from '../../helpers/query-string';
12 | import { removeService } from '../../modules/track/service';
13 | import { makeSelectTrack } from '../../modules/track';
14 | import { REMOVED } from '../../modules/track/constants';
15 | import { connect } from 'react-redux';
16 |
17 | class ReviewTrack extends Component {
18 | constructor(props) {
19 | super(props);
20 | this.state = {
21 | track: this.props.data
22 | };
23 | this.handleSubmit = this.handleSubmit.bind(this);
24 | this.handleRemove = this.handleRemove.bind(this);
25 | }
26 |
27 | handleSubmit() {
28 | this.props.updatePending(true);
29 | const { search } = this.props.location;
30 | const { id } = queryString.parse(search);
31 | this.props
32 | .handleSave(id, { ...this.state.track, isPublic: true })
33 | .then(() => {
34 | alert('Publish successfully!');
35 | this.props.updatePending(false);
36 | this.props.history.push('/');
37 | })
38 | .catch(error => {
39 | alert(error.message);
40 | this.props.updatePending(false);
41 | });
42 | }
43 |
44 | handleRemove() {
45 | const { track } = this.state;
46 | removeService(track.id)
47 | .then(() => {
48 | this.props.dispatch({ type: REMOVED, payload: { id: track.id } });
49 | this.props.history.push('/');
50 | alert('Remove successfully!');
51 | })
52 | .catch(error => {
53 | alert(error.message);
54 | });
55 | }
56 |
57 | render() {
58 | const { track } = this.state;
59 | return (
60 |
216 |
321 | {this.showButtonDelete()}
322 |
325 |
326 |
61 |
98 | );
99 | }
100 | }
101 |
102 | ReviewTrack.propTypes = {
103 | location: PropTypes.object.isRequired,
104 | history: PropTypes.object.isRequired,
105 | handleSave: PropTypes.func.isRequired,
106 | updatePending: PropTypes.func.isRequired,
107 | pending: PropTypes.bool.isRequired
108 | };
109 |
110 | ReviewTrack.defaultProps = {};
111 |
112 | const mapStateToProps = state => {
113 | const { loading, data } = makeSelectTrack(state);
114 | return {
115 | loading,
116 | data
117 | };
118 | };
119 |
120 | const mapDispatchToProps = dispatch => ({ dispatch });
121 |
122 | const withReducer = connect(
123 | mapStateToProps,
124 | mapDispatchToProps
125 | );
126 |
127 | export default compose(
128 | withReducer,
129 | defaultPropsData,
130 | withData,
131 | withLoading,
132 | handleSubmit
133 | )(ReviewTrack);
134 |
--------------------------------------------------------------------------------
/src/pages/other/UserForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { compose } from 'redux';
5 | import isEmpty from 'lodash/isEmpty';
6 | import {
7 | defaultPropsData,
8 | handleSubmit,
9 | withData,
10 | withLoading
11 | } from '../../hoc';
12 | import queryString from '../../helpers/query-string';
13 |
14 | const initialValues = {
15 | email: '',
16 | role: ''
17 | };
18 |
19 | class UserForm extends Component {
20 | constructor(props) {
21 | super(props);
22 | const user = this.props.data;
23 | this.state = {
24 | user: isEmpty(user) ? initialValues : user,
25 | errors: {}
26 | };
27 | this.handleSubmit = this.handleSubmit.bind(this);
28 | this.handleChange = this.handleChange.bind(this);
29 | }
30 |
31 | handleSubmit(e) {
32 | e.preventDefault();
33 |
34 | const { user } = this.state;
35 | this.props.updatePending(true);
36 | const { search } = this.props.location;
37 | const { id } = queryString.parse(search);
38 | this.props
39 | .handleSave(id, user, 'users')
40 | .then(() => {
41 | alert('Updated successfully!');
42 | this.props.history.push('/admin/user');
43 | })
44 | .catch(error => {
45 | alert(error.message);
46 | this.props.updatePending(false);
47 | });
48 | }
49 |
50 | handleChange(e) {
51 | const { value, name } = e.target;
52 | const { user } = this.state;
53 | this.setState({
54 | user: { ...user, [name]: value }
55 | });
56 | }
57 |
58 | render() {
59 | const { user } = this.state;
60 | return (
61 |
62 | Review Track
63 |
97 |
64 |
87 |
93 |
96 |
65 | 
71 |
82 |
86 |
72 | {track.name}
73 | {track.authorName}
74 | {track.location}
75 |
81 |
76 | {track.latitude}
77 | {track.longitude}
78 |
79 | {track.tags}
80 |
62 |
86 | );
87 | }
88 | }
89 |
90 | UserForm.propTypes = {
91 | location: PropTypes.object.isRequired,
92 | history: PropTypes.object.isRequired,
93 | handleSave: PropTypes.func.isRequired,
94 | updatePending: PropTypes.func.isRequired,
95 | pending: PropTypes.bool.isRequired
96 | };
97 |
98 | UserForm.defaultProps = {};
99 |
100 | export default compose(
101 | defaultPropsData,
102 | withData,
103 | withLoading,
104 | handleSubmit
105 | )(UserForm);
106 |
--------------------------------------------------------------------------------
/src/pages/other/UserList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { connect } from 'react-redux';
5 | import { compose } from 'recompose';
6 | import { Link } from 'react-router-dom';
7 |
8 | import { withSubscribe } from '../../hoc';
9 | import {
10 | makeSelectUser,
11 | subscribe,
12 | unsubscribe,
13 | remove
14 | } from '../../modules/user';
15 |
16 | class UserList extends Component {
17 | constructor(props, context) {
18 | super(props, context);
19 | this.onDelete = this.onDelete.bind(this);
20 | }
21 |
22 | onDelete(id) {
23 | //eslint-disable-next-line
24 | confirm('Are you want delete this user?')
25 | ? this.props.dispatch(remove(id))
26 | : null;
27 | }
28 |
29 | render() {
30 | const { data } = this.props;
31 | return (
32 |
63 |
84 |
85 |
33 |
34 |
35 |
65 |
66 | );
67 | }
68 | }
69 |
70 | UserList.propTypes = {
71 | loading: PropTypes.bool.isRequired,
72 | data: PropTypes.array.isRequired,
73 | dispatch: PropTypes.func.isRequired,
74 | match: PropTypes.object.isRequired
75 | };
76 |
77 | UserList.defaultProps = {};
78 |
79 | const mapStateToProps = state => {
80 | const { loading, data } = makeSelectUser(state);
81 | return {
82 | loading,
83 | data
84 | };
85 | };
86 |
87 | const mapDispatchToProps = dispatch => ({ dispatch });
88 |
89 | const withReducer = connect(
90 | mapStateToProps,
91 | mapDispatchToProps
92 | );
93 | const withData = withSubscribe(subscribe, unsubscribe);
94 |
95 | export default compose(
96 | withReducer,
97 | withData
98 | )(UserList);
99 |
--------------------------------------------------------------------------------
/src/pages/other/components/Track.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import { Link } from "react-router-dom";
5 |
6 | export class Track extends PureComponent {
7 | renderEditButton(track, role, useId) {
8 | // invisible for any user
9 | if (role === "user") {
10 | return null;
11 | }
12 |
13 | if (role === 'creator' && track.author !== useId) {
14 | return null;
15 | }
16 |
17 | // invisible on any public tracks for any creators
18 | if (role === 'creator' && track.isPublic) {
19 | return null;
20 | }
21 |
22 | return (
23 |
27 | Edit
28 |
29 | );
30 | }
31 |
32 | renderReviewButton(track, role) {
33 | // invisible for any user
34 | if (role === "user") {
35 | return null;
36 | }
37 |
38 | if (role === "admin" && !track.isPublic) {
39 | return (
40 |
44 | Review Track
45 |
46 | );
47 | }
48 | return null;
49 | }
50 |
51 | render() {
52 | const { track, role, useId } = this.props;
53 | return (
54 | | ID | 37 |Name | 38 |Role | 40 |Action | 41 ||
|---|---|---|---|---|
| {user.id} | 47 |{user.name} | 48 |{user.email} | 49 |{user.role} | 50 |51 | 52 | Edit 53 | 54 | 60 | | 61 |
55 |
56 | {this.renderEditButton(track, role, useId)}
57 | {this.renderReviewButton(track, role)}
58 |
59 |
77 | );
78 | }
79 | }
80 |
81 | Track.propTypes = {
82 | track: PropTypes.object.isRequired,
83 | role: PropTypes.string,
84 | useId: PropTypes.string.isRequired
85 | };
86 |
87 | Track.defaultProps = {
88 | role: "user"
89 | };
90 |
--------------------------------------------------------------------------------
/src/pages/other/index.js:
--------------------------------------------------------------------------------
1 | import loadable from 'react-loadable';
2 |
3 | // Use react-loadable to make component-centric code splitting.
4 |
5 | export const ListPage = loadable({
6 | loader: () => import('./List'),
7 | loading: () => null
8 | });
9 |
10 | export const NewTrack = loadable({
11 | loader: () => import('./NewTrack'),
12 | loading: () => null
13 | });
14 |
15 | export const Profile = loadable({
16 | loader: () => import('./Profile'),
17 | loading: () => null
18 | });
19 |
20 | export const ReviewTrack = loadable({
21 | loader: () => import('./ReviewTrack'),
22 | loading: () => null
23 | });
24 |
25 | export const UserList = loadable({
26 | loader: () => import('./UserList'),
27 | loading: () => null
28 | });
29 |
30 | export const UserForm = loadable({
31 | loader: () => import('./UserForm'),
32 | loading: () => null
33 | });
34 |
--------------------------------------------------------------------------------
/src/reducers.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux-immutable';
2 |
3 | import { trackReducer } from './modules/track';
4 | import { authReducer } from './modules/auth';
5 | import { userReducer } from './modules/user';
6 |
7 | // Turns an object whose values are different reducing functions into a single reducing function you can pass to createStore
8 | const rootApp = combineReducers({
9 | track: trackReducer,
10 | auth: authReducer,
11 | user: userReducer
12 | });
13 |
14 | export default rootApp;
15 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ'
45 | );
46 | });
47 | } else {
48 | // Is not local host. Just register service worker
49 | registerValidSW(swUrl);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then(registration => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | installingWorker.onstatechange = () => {
62 | if (installingWorker.state === 'installed') {
63 | if (navigator.serviceWorker.controller) {
64 | // At this point, the old content will have been purged and
65 | // the fresh content will have been added to the cache.
66 | // It's the perfect time to display a "New content is
67 | // available; please refresh." message in your web app.
68 | console.log('New content is available; please refresh.');
69 | } else {
70 | // At this point, everything has been precached.
71 | // It's the perfect time to display a
72 | // "Content is cached for offline use." message.
73 | console.log('Content is cached for offline use.');
74 | }
75 | }
76 | };
77 | };
78 | })
79 | .catch(error => {
80 | console.error('Error during service worker registration:', error);
81 | });
82 | }
83 |
84 | function checkValidServiceWorker(swUrl) {
85 | // Check if the service worker can be found. If it can't reload the page.
86 | fetch(swUrl)
87 | .then(response => {
88 | // Ensure service worker exists, and that we really are getting a JS file.
89 | if (
90 | response.status === 404 ||
91 | response.headers.get('content-type').indexOf('javascript') === -1
92 | ) {
93 | // No service worker found. Probably a different app. Reload the page.
94 | navigator.serviceWorker.ready.then(registration => {
95 | registration.unregister().then(() => {
96 | window.location.reload();
97 | });
98 | });
99 | } else {
100 | // Service worker found. Proceed as normal.
101 | registerValidSW(swUrl);
102 | }
103 | })
104 | .catch(() => {
105 | console.log(
106 | 'No internet connection found. App is running in offline mode.'
107 | );
108 | });
109 | }
110 |
111 | export function unregister() {
112 | if ('serviceWorker' in navigator) {
113 | navigator.serviceWorker.ready.then(registration => {
114 | registration.unregister();
115 | });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/src/sagas.js:
--------------------------------------------------------------------------------
1 | import { all } from 'redux-saga/effects';
2 | import { authSaga } from './modules/auth';
3 | import { trackSagas } from './modules/track';
4 | import { userSagas } from './modules/user';
5 |
6 | /**
7 | * Creates an effect description that instructs the middleware to run multiple effects in parallel and wait for all of them to complete
8 | */
9 | export default function* rootSagas() {
10 | yield all([authSaga(), trackSagas(), userSagas()]);
11 | }
12 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create the store with dynamic reducers
3 | */
4 |
5 | import { createStore, applyMiddleware, compose } from 'redux';
6 | import createSagaMiddleware from 'redux-saga';
7 | import { fromJS } from 'immutable';
8 |
9 | import reducers from '../reducers';
10 | import sagas from '../sagas';
11 |
12 | // Creates a Redux middleware and connects the Sagas to the Redux Store
13 | const sagaMiddleware = createSagaMiddleware();
14 |
15 | export default function configureStore(initialState = {}) {
16 | // Create the store with middlewares
17 | const middlewares = [sagaMiddleware];
18 |
19 | const enhancers = [applyMiddleware(...middlewares)];
20 |
21 | // If Redux DevTools Extension is installed use it, otherwise use Redux compose
22 | /* eslint-disable no-underscore-dangle */
23 | const composeEnhancers =
24 | process.env.NODE_ENV !== 'production' &&
25 | typeof window === 'object' &&
26 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
27 | ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ shouldHotReload: false })
28 | : compose;
29 |
30 | // Create a redux store that holds the complete state tree of the app.
31 | const store = createStore(
32 | reducers,
33 | // Deeply converts plain JS objects and arrays to immutable Maps and Lists
34 | fromJS(initialState),
35 | composeEnhancers(...enhancers)
36 | );
37 |
38 | // Extensions
39 | store.runSaga = sagaMiddleware.run(sagas);
40 |
41 | return store;
42 | }
43 |
--------------------------------------------------------------------------------
60 |
61 |
72 |
76 |
62 | {track.name}
63 | {track.authorName}
64 | {track.location}
65 |
71 |
66 | {track.latitude}
67 | {track.longitude}
68 |
69 | {track.tags}
70 |