refactor: example pages

Author: somus

client/modules/App/AppReducer.js

@@ -18,4 +18,10 @@ const AppReducer = (state = initialState, action) => {
   }
 };
 
+/* Selectors */
+
+// Get showAddPost
+export const getShowAddPost = state => state.app.showAddPost;
+
+// Export Reducer
 export default AppReducer;

client/modules/App/__tests__/AppReducer.spec.js

@@ -1,6 +1,6 @@
 import test from 'ava';
 import { reducerTest } from 'redux-ava';
-import appReducer from '../AppReducer';
+import appReducer, { getShowAddPost } from '../AppReducer';
 import { toggleAddPost } from '../AppActions';
 
 test('action for TOGGLE_ADD_POST is working', reducerTest(
@@ -9,3 +9,9 @@ test('action for TOGGLE_ADD_POST is working', reducerTest(
   toggleAddPost(),
   { showAddPost: true },
 ));
+
+test('getShowAddPost selector', t => {
+  t.is(getShowAddPost({
+    app: { showAddPost: false },
+  }), false);
+});

client/modules/Post/PostActions.js

@@ -1,95 +1,60 @@
-import Config from '../../../server/config';
-import fetch from 'isomorphic-fetch';
-
-const baseURL = typeof window === 'undefined' ? process.env.BASE_URL || (`http://localhost:${Config.port}`) : '';
+import callApi from '../../util/apiCaller';
 
 // Export Constants
 export const ADD_POST = 'ADD_POST';
 export const ADD_POSTS = 'ADD_POSTS';
-export const ADD_SELECTED_POST = 'ADD_SELECTED_POST';
 export const DELETE_POST = 'DELETE_POST';
 
 // Export Actions
 export function addPost(post) {
   return {
     type: ADD_POST,
-    name: post.name,
-    title: post.title,
-    content: post.content,
-    slug: post.slug,
-    cuid: post.cuid,
-    _id: post._id,
+    post,
   };
 }
 
 export function addPostRequest(post) {
   return (dispatch) => {
-    fetch(`${baseURL}/api/posts`, {
-      method: 'post',
-      body: JSON.stringify({
-        post: {
-          name: post.name,
-          title: post.title,
-          content: post.content,
-        },
-      }),
-      headers: new Headers({
-        'Content-Type': 'application/json',
-      }),
-    }).then((res) => res.json()).then(res => dispatch(addPost(res.post)));
+    return callApi('posts', 'post', {
+      post: {
+        name: post.name,
+        title: post.title,
+        content: post.content,
+      },
+    }).then(res => dispatch(addPost(res.post)));
   };
 }
 
-export function addSelectedPost(post) {
+export function addPosts(posts) {
   return {
-    type: ADD_SELECTED_POST,
-    post,
+    type: ADD_POSTS,
+    posts,
   };
 }
 
-export function getPostRequest(post) {
+export function fetchPosts() {
   return (dispatch) => {
-    return fetch(`${baseURL}/api/posts/${post}`, {
-      method: 'get',
-      headers: new Headers({
-        'Content-Type': 'application/json',
-      }),
-    }).then((response) => response.json()).then(res => dispatch(addSelectedPost(res.post)));
+    return callApi('posts').then(res => {
+      dispatch(addPosts(res.posts));
+    });
   };
 }
 
-export function deletePost(post) {
-  return {
-    type: DELETE_POST,
-    post,
+export function fetchPost(cuid) {
+  return (dispatch) => {
+    return callApi(`posts/${cuid}`).then(res => dispatch(addPost(res.post)));
   };
 }
 
-export function addPosts(posts) {
+export function deletePost(cuid) {
   return {
-    type: ADD_POSTS,
-    posts,
-  };
-}
-
-export function fetchPosts() {
-  return (dispatch) => {
-    return fetch(`${baseURL}/api/posts`).
-    then((response) => response.json()).
-    then((response) => dispatch(addPosts(response.posts)));
+    type: DELETE_POST,
+    cuid,
   };
 }
 
-export function deletePostRequest(post) {
+export function deletePostRequest(cuid) {
   return (dispatch) => {
-    fetch(`${baseURL}/api/posts`, {
-      method: 'delete',
-      body: JSON.stringify({
-        id: post._id,
-      }),
-      headers: new Headers({
-        'Content-Type': 'application/json',
-      }),
-    }).then(() => dispatch(deletePost(post)));
+    return callApi(`posts/${cuid}`, 'delete').then(() => dispatch(deletePost(cuid)));
   };
 }

client/modules/Post/PostReducer.js

@@ -1,41 +1,37 @@
-import { ADD_POST, ADD_POSTS, ADD_SELECTED_POST, DELETE_POST } from './PostActions';
+import { ADD_POST, ADD_POSTS, DELETE_POST } from './PostActions';
 
-const initialState = { posts: [], post: null };
+// Initial State
+const initialState = { data: [] };
 
 const PostReducer = (state = initialState, action) => {
   switch (action.type) {
     case ADD_POST :
       return {
-        posts: [{
-          name: action.name,
-          title: action.title,
-          content: action.content,
-          slug: action.slug,
-          cuid: action.cuid,
-          _id: action._id,
-        }, ...state.posts],
-        post: state.post };
-
-    case ADD_POSTS :
-      return {
-        posts: action.posts,
-        post: state.post,
+        data: [action.post, ...state.data],
       };
 
-    case ADD_SELECTED_POST :
+    case ADD_POSTS :
       return {
-        post: action.post,
-        posts: state.posts,
+        data: action.posts,
       };
 
     case DELETE_POST :
       return {
-        posts: state.posts.filter((post) => post._id !== action.post._id),
+        data: state.data.filter(post => post.cuid !== action.cuid),
       };
 
     default:
       return state;
   }
 };
 
+/* Selectors */
+
+// Get all posts
+export const getPosts = state => state.posts.data;
+
+// Get post by cuid
+export const getPost = (state, cuid) => state.posts.data.filter(post => post.cuid === cuid)[0];
+
+// Export Reducer
 export default PostReducer;

client/modules/Post/__tests__/PostActions.spec.js

@@ -1,33 +1,31 @@
 import test from 'ava';
 import { actionTest } from 'redux-ava';
+
 import {
   ADD_POST,
-  ADD_SELECTED_POST,
   DELETE_POST,
   ADD_POSTS,
   addPost,
-  addSelectedPost,
   deletePost,
   addPosts,
 } from '../PostActions';
 
 const post = { name: 'Prashant', title: 'Hello Mern', cuid: 'f34gb2bh24b24b2', content: "All cats meow 'mern!'", slug: 'hello-mern', _id: 1 };
 
-test('should return the correct type for addPost', actionTest(addPost, post, {
-  type: ADD_POST,
-  name: post.name,
-  title: post.title,
-  content: post.content,
-  slug: post.slug,
-  cuid: post.cuid,
-  _id: post._id,
-}));
-
-test('should return the correct type for addSelectedPost', actionTest(deletePost, post, { type: DELETE_POST, post }));
+test('should return the correct type for addPost', actionTest(
+  addPost,
+  post,
+  { type: ADD_POST, post },
+));
 
-test('should return the correct type for deletePost', actionTest(addSelectedPost, post, { type: ADD_SELECTED_POST, post }));
+test('should return the correct type for deletePost', actionTest(
+  deletePost,
+  post.cuid,
+  { type: DELETE_POST, cuid: post.cuid },
+));
 
-test('should return the correct type for addPosts', actionTest(addPosts, [post], {
-  type: ADD_POSTS,
-  posts: [post],
-}));
+test('should return the correct type for addPosts', actionTest(
+  addPosts,
+  [post],
+  { type: ADD_POSTS, posts: [post] },
+));