API Platform Blog

13 | {label !== null && label !== '' && {label}} 14 | {type !== 'textarea' && } 15 | {type === 'textarea' &&

}
16 |       {error && <small className="form-text text-danger">{error}</small>}
17 |     </div>
18 |   );
19 | };
20 |

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import {applyMiddleware, createStore} from "redux";
 4 | import createHistory from 'history/createBrowserHistory';
 5 | import {Provider} from "react-redux";
 6 | import {ConnectedRouter} from "react-router-redux";
 7 | import {Route} from "react-router";
 8 | import App from "./components/App";
 9 | import reducer from "./reducer";
10 | import thunkMiddleware from 'redux-thunk';
11 | import {tokenMiddleware} from "./middleware";
12 | 
13 | const store = createStore(
14 |   reducer,
15 |   applyMiddleware(thunkMiddleware, tokenMiddleware)
16 | );
17 | const history = createHistory();
18 | 
19 | ReactDOM.render((
20 |   <Provider store={store}>
21 |     <ConnectedRouter history={history}>
22 |       <Route path="/" component={App}/>
23 |     </ConnectedRouter>
24 |   </Provider>
25 | ), document.getElementById('root'));
26 |

--------------------------------------------------------------------------------
/src/middleware.js:
--------------------------------------------------------------------------------
 1 | import {USER_LOGIN_SUCCESS, USER_LOGOUT, USER_PROFILE_ERROR} from "./actions/constants";
 2 | import {requests} from "./agent";
 3 | import {userLogout} from "./actions/actions";
 4 | 
 5 | export const tokenMiddleware = store => next => action => {
 6 |   switch (action.type) {
 7 |     case USER_LOGIN_SUCCESS:
 8 |       window.localStorage.setItem('jwtToken', action.token);
 9 |       window.localStorage.setItem('userId', action.userId);
10 |       requests.setToken(action.token);
11 |       break;
12 |     case USER_LOGOUT:
13 |       window.localStorage.removeItem('jwtToken');
14 |       window.localStorage.removeItem('userId');
15 |       requests.setToken(null);
16 |       break;
17 |     case USER_PROFILE_ERROR:
18 |       const state = store.getState().auth;
19 |       if (state.userId === action.userId && state.userData === null) {
20 |         store.dispatch(userLogout());
21 |       }
22 |       break;
23 |     default:
24 |   }
25 | 
26 |   next(action);
27 | };
28 |

--------------------------------------------------------------------------------
/src/reducer.js:
--------------------------------------------------------------------------------
 1 | import {combineReducers} from "redux";
 2 | import blogPostList from "./reducers/blogPostList";
 3 | import blogPost from "./reducers/blogPost";
 4 | import commentList from "./reducers/commentList";
 5 | import {reducer as formReducer} from 'redux-form';
 6 | import auth from "./reducers/auth";
 7 | import {routerReducer} from "react-router-redux";
 8 | import registration from "./reducers/registration";
 9 | import blogPostForm from "./reducers/blogPostForm";
10 | 
11 | export default combineReducers({
12 |   blogPostList,
13 |   blogPost,
14 |   commentList,
15 |   auth,
16 |   registration,
17 |   blogPostForm,
18 |   router: routerReducer,
19 |   form: formReducer
20 | });
21 |

--------------------------------------------------------------------------------
/src/reducers/auth.js:
--------------------------------------------------------------------------------
 1 | import {USER_LOGIN_SUCCESS, USER_LOGOUT, USER_PROFILE_RECEIVED, USER_SET_ID} from "../actions/constants";
 2 | 
 3 | export default (state = {
 4 |   token: null,
 5 |   userId: null,
 6 |   isAuthenticated: false,
 7 |   userData: null
 8 | }, action) => {
 9 |   switch (action.type) {
10 |     case USER_LOGIN_SUCCESS:
11 |       return {
12 |         ...state,
13 |         token: action.token,
14 |         userId: action.userId,
15 |         isAuthenticated: true
16 |       };
17 |     case USER_SET_ID:
18 |       return {
19 |         ...state,
20 |         userId: action.userId,
21 |         isAuthenticated: true
22 |       };
23 |     case USER_PROFILE_RECEIVED:
24 |       return {
25 |         ...state,
26 |         userData: (state.userId === action.userId && state.userData === null)
27 |           ? action.userData : state.userData,
28 |         isAuthenticated: (state.userId === action.userId && state.userData === null)
29 |       };
30 |     case USER_LOGOUT:
31 |       return {
32 |         ...state,
33 |         token: null,
34 |         userId: null,
35 |         isAuthenticated: false,
36 |         userData: null
37 |       };
38 |     default:
39 |       return state;
40 |   }
41 | }
42 |

--------------------------------------------------------------------------------
/src/reducers/blogPost.js:
--------------------------------------------------------------------------------
 1 | import {BLOG_POST_ERROR, BLOG_POST_RECEIVED, BLOG_POST_REQUEST, BLOG_POST_UNLOAD} from "../actions/constants";
 2 | 
 3 | export default (state = {
 4 |   post: null,
 5 |   isFetching: false
 6 | }, action) => {
 7 |   switch (action.type) {
 8 |     case BLOG_POST_REQUEST:
 9 |       return {
10 |         ...state,
11 |         isFetching: true
12 |       };
13 |     case BLOG_POST_RECEIVED:
14 |       return {
15 |         ...state,
16 |         post: action.data,
17 |         isFetching: false
18 |       };
19 |     case BLOG_POST_ERROR:
20 |       return {
21 |         ...state,
22 |         isFetching: false
23 |       };
24 |     case BLOG_POST_UNLOAD:
25 |       return {
26 |         ...state,
27 |         isFetching: false,
28 |         post: null
29 |       };
30 |     default:
31 |       return state;
32 |   }
33 | }
34 |

--------------------------------------------------------------------------------
/src/reducers/blogPostForm.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   BLOG_POST_FORM_UNLOAD, IMAGE_DELETE_REQUEST, IMAGE_DELETED,
 3 |   IMAGE_UPLOAD_ERROR,
 4 |   IMAGE_UPLOAD_REQUEST,
 5 |   IMAGE_UPLOADED
 6 | } from "../actions/constants";
 7 | 
 8 | export default (state = {
 9 |   imageReqInProgress: false,
10 |   images: []
11 | }, action) => {
12 |   switch (action.type) {
13 |     case IMAGE_UPLOAD_REQUEST:
14 |     case IMAGE_DELETE_REQUEST:
15 |       return {
16 |         ...state,
17 |         imageReqInProgress: true
18 |       };
19 |     case IMAGE_UPLOADED:
20 |       return {
21 |         ...state,
22 |         imageReqInProgress: false,
23 |         images: state.images.concat(action.image)
24 |       };
25 |     case IMAGE_UPLOAD_ERROR:
26 |       return {
27 |         ...state,
28 |         imageReqInProgress: false
29 |       };
30 |     case BLOG_POST_FORM_UNLOAD:
31 |       return {
32 |         ...state,
33 |         imageReqInProgress: false,
34 |         images: []
35 |       };
36 |     case IMAGE_DELETED:
37 |       return {
38 |         ...state,
39 |         images: state.images.filter(image => image.id !== action.imageId),
40 |         imageReqInProgress: false
41 |       };
42 |     default:
43 |       return state;
44 |   }
45 | }
46 |

--------------------------------------------------------------------------------
/src/reducers/blogPostList.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   BLOG_POST_LIST_REQUEST,
 3 |   BLOG_POST_LIST_ADD,
 4 |   BLOG_POST_LIST_RECEIVED,
 5 |   BLOG_POST_LIST_ERROR, BLOG_POST_LIST_SET_PAGE
 6 | } from "../actions/constants";
 7 | import {hydraPageCount} from "../apiUtils";
 8 | 
 9 | export default(state = {
10 |   posts: null,
11 |   isFetching: false,
12 |   currentPage: 1,
13 |   pageCount: null
14 | }, action) => {
15 |   switch (action.type) {
16 |     case BLOG_POST_LIST_REQUEST:
17 |       state = {
18 |         ...state,
19 |         isFetching: true,
20 |       };
21 |       return state;
22 |     case BLOG_POST_LIST_RECEIVED:
23 |       state = {
24 |         ...state,
25 |         posts: action.data['hydra:member'],
26 |         pageCount: hydraPageCount(action.data),
27 |         isFetching: false
28 |       };
29 |       return state;
30 |     case BLOG_POST_LIST_ERROR:
31 |       return {
32 |         ...state,
33 |         isFetching: false,
34 |         posts: null
35 |       };
36 |     case BLOG_POST_LIST_ADD:
37 |       state = {
38 |         ...state,
39 |         posts: state.posts ? state.posts.concat(action.data) : state.posts
40 |       };
41 |       return state;
42 |     case BLOG_POST_LIST_SET_PAGE:
43 |       return {
44 |         ...state,
45 |         currentPage: action.page
46 |       };
47 |     default:
48 |       return state;
49 |   }
50 | }
51 |

--------------------------------------------------------------------------------
/src/reducers/commentList.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   COMMENT_ADDED,
 3 |   COMMENT_LIST_ERROR,
 4 |   COMMENT_LIST_RECEIVED,
 5 |   COMMENT_LIST_REQUEST,
 6 |   COMMENT_LIST_UNLOAD
 7 | } from "../actions/constants";
 8 | import {hydraPageCount} from "../apiUtils";
 9 | 
10 | export default (state = {
11 |   commentList: null,
12 |   isFetching: false,
13 |   currentPage: 1,
14 |   pageCount: null
15 | }, action) => {
16 |   switch (action.type) {
17 |     case COMMENT_LIST_REQUEST:
18 |       return {
19 |         ...state,
20 |         isFetching: true,
21 |       };
22 |     case COMMENT_LIST_RECEIVED:
23 |       return {
24 |         ...state,
25 |         commentList: !state.commentList ? action.data['hydra:member']
26 |           : state.commentList.concat(action.data['hydra:member']),
27 |         isFetching: false,
28 |         currentPage: state.currentPage + 1,
29 |         pageCount: hydraPageCount(action.data)
30 |       };
31 |     case COMMENT_ADDED:
32 |       return {
33 |         ...state,
34 |         commentList: [action.comment, ...state.commentList]
35 |       };
36 |     case COMMENT_LIST_ERROR:
37 |     case COMMENT_LIST_UNLOAD:
38 |       return {
39 |         ...state,
40 |         isFetching: false,
41 |         commentList: null,
42 |         currentPage: 1,
43 |         pageCount: null
44 |       };
45 |     default:
46 |       return state;
47 |   }
48 | }
49 |

--------------------------------------------------------------------------------
/src/reducers/registration.js:
--------------------------------------------------------------------------------
 1 | import {USER_CONFIRMATION_SUCCESS, USER_REGISTER_COMPLETE, USER_REGISTER_SUCCESS} from "../actions/constants";
 2 | 
 3 | export default (state = {
 4 |   registrationSuccess: false,
 5 |   confirmationSuccess: false
 6 | }, action) => {
 7 |   switch (action.type) {
 8 |     case USER_REGISTER_SUCCESS:
 9 |       return {
10 |         ...state,
11 |         registrationSuccess: true
12 |       };
13 |     case USER_CONFIRMATION_SUCCESS:
14 |       return {
15 |         ...state,
16 |         confirmationSuccess: true
17 |       };
18 |     case USER_REGISTER_COMPLETE:
19 |       return {
20 |         ...state,
21 |         confirmationSuccess: false,
22 |         registrationSuccess: false
23 |       };
24 |     default:
25 |       return state;
26 |   }
27 | }
28 |

--------------------------------------------------------------------------------

Piotr Jura Udemy Courses

Fado Code Camp

{post.title}

19 | {post.title} 20 |

Congratulations!