[#197] Update fetch blogs and post

modules/blogs/api/__test__/__snapshots__/fetch.spec.tsx.snap

@@ -1,24 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Fetch  fetchPostFromSlug with empty request 1`] = `Object {}`;
+exports[`fetchPostSummary  fetchPostSummary with empty request 1`] = `Array []`;
 
-exports[`Fetch  fetchPostFromSlug with mock request 1`] = `
+exports[`fetchPostSummary  fetchPostSummary with error request 1`] = `Array []`;
+
+exports[`fetchPostSummary  fetchPostSummary with mock request 1`] = `
 Array [
   Object {
-    "author": "test author 1",
-    "brief": "This is test brief 1",
-    "date": "20/1/2019",
-    "header": "Test header 1",
-    "id": 1,
-    "slug": "test-slug-1",
+    "author": "Phat Ho",
+    "brief": "Get startted with Java",
+    "commentNum": 0,
+    "likeNum": 0,
+    "slug": "getting-started-with-java",
+    "tag": Array [
+      "Web Development",
+      "Java",
+    ],
+    "time": "06/01/2020",
+    "title": "Getting Started With Java",
+    "viewNum": 0,
   },
   Object {
-    "author": "test author 2",
-    "brief": "This is test brief 2",
-    "date": "20/1/2019",
-    "header": "Test header 2",
-    "id": 2,
-    "slug": "test-slug-2",
+    "author": "Phat Ho",
+    "brief": "I have written a lot about Java Spring",
+    "commentNum": 0,
+    "likeNum": 0,
+    "slug": "get-startted-with-spring",
+    "tag": Array [
+      "Java Spring",
+      "Course",
+    ],
+    "time": "06/01/2020",
+    "title": "Get Startted With Spring MVC",
+    "viewNum": 0,
   },
 ]
 `;

modules/blogs/api/__test__/fetch.spec.tsx

@@ -2,27 +2,42 @@ import { fetchPostSummary } from '../fetch'
 import mockAxios from 'axios'
 jest.mock('axios')
 
-const blogs = [
-  {
-    id: 1,
-    header: 'Test header 1',
-    slug: 'test-slug-1',
-    brief: 'This is test brief 1',
-    author: 'test author 1',
-    date: '20/1/2019'
-  },
-  {
-    id: 2,
-    header: 'Test header 2',
-    slug: 'test-slug-2',
-    brief: 'This is test brief 2',
-    author: 'test author 2',
-    date: '20/1/2019'
-  }
-]
+const blogs = {
+  data: [
+    {
+      "slug": "getting-started-with-java",
+      "title": "Getting Started With Java",
+      "brief": "Get startted with Java",
+      "time": "06/01/2020",
+      "tag": [
+        "Web Development",
+        "Java"
+      ],
+      "author": "Phat Ho",
+      "viewNum": 0,
+      "commentNum": 0,
+      "likeNum": 0
+    },
+    {
+      "slug": "get-startted-with-spring",
+      "title": "Get Startted With Spring MVC",
+      "brief": "I have written a lot about Java Spring",
+      "time": "06/01/2020",
+      "tag": [
+        "Java Spring",
+        "Course"
+      ],
+      "author": "Phat Ho",
+      "viewNum": 0,
+      "commentNum": 0,
+      "likeNum": 0
+    }
+  ],
+  success: true
+}
 
-describe('Fetch ', () => {
-  it('fetchPostFromSlug with mock request', async () => {
+describe('fetchPostSummary ', () => {
+  it('fetchPostSummary with mock request', async () => {
     //@ts-ignore
     mockAxios.get.mockResolvedValue({
       data: blogs
@@ -32,10 +47,29 @@ describe('Fetch ', () => {
     expect(data).toMatchSnapshot()
   })
 
-  it('fetchPostFromSlug with empty request', async () => {
+  it('fetchPostSummary with empty request', async () => {
     //@ts-ignore
     mockAxios.get.mockResolvedValue({
-      data: {}
+      data: {
+        data: [],
+        success: true
+      }
+    })
+
+    const data = await fetchPostSummary()
+    expect(data).toMatchSnapshot()
+  })
+
+  it('fetchPostSummary with error request', async () => {
+    //@ts-ignore
+    mockAxios.get.mockResolvedValue({
+      data: {
+        error: {
+          code: 204,
+          message: 'Cannot find post'
+        },
+        success: false
+      }
     })
 
     const data = await fetchPostSummary()

modules/blogs/api/fetch.js

@@ -1,13 +1,18 @@
 import axios from 'axios'
-// import { API_END_POINT } from '~/modules/post/consts/api'
+import { API_END_POINT } from '~/modules/core/consts/api'
+import { isSuccess, getData, getError } from '~/modules/core/api/selector'
 
 const fetchPostSummary = async () => {
-  const result = await axios.get(
-    `https://my-json-server.typicode.com/DeKal/fake-porfolio-server/blogs/`
+  const result = await axios.get(`${API_END_POINT}/post/all-post/summary`)
+  const { data: response } = result
+  if (isSuccess(response)) {
+    return getData(response)
+  }
+  const error = getError(response)
+  console.error(
+    `There was an error with code ${error.code} and message "${error.message}"`
   )
-  const { data } = result
-
-  return data
+  return []
 }
 
 export { fetchPostSummary }

modules/blogs/components/Blogs.js

@@ -9,12 +9,12 @@ const Blogs = ({ posts }) => {
       {posts.map(postSummary => {
         return (
           <PostSummary
-            key={postSummary.id}
-            header={postSummary.header}
+            key={postSummary.slug}
+            title={postSummary.title}
             slug={postSummary.slug}
             brief={postSummary.brief}
-            author={postSummary.authorName}
-            date={postSummary.date}
+            author={postSummary.author}
+            time={postSummary.time}
           />
         )
       })}

modules/blogs/components/__test__/__snapshots__/Blogs.spec.tsx.snap

@@ -5,17 +5,15 @@ exports[`Blogs should render without empty posts 1`] = `<Container />`;
 exports[`Blogs should render without throwing an error 1`] = `
 <Container>
   <PostSummary
+    author="test author 1"
     brief="This is test brief 1"
-    date="20/1/2019"
-    header="Test header 1"
-    key="1"
+    key="test-slug-1"
     slug="test-slug-1"
   />
   <PostSummary
+    author="test author 2"
     brief="This is test brief 2"
-    date="20/1/2019"
-    header="Test header 2"
-    key="2"
+    key="test-slug-2"
     slug="test-slug-2"
   />
 </Container>

modules/blogs/components/blogs/PostSummary.js

@@ -5,28 +5,28 @@ import Content from './post-summary/Content'
 import Extra from './post-summary/Extra'
 import Article from './post-summary/Article'
 
-const PostSummary = ({ header, author, date, brief, slug }) => {
+const PostSummary = ({ title, author, time, brief, slug }) => {
   return (
     <Container>
       <Content>
         <Extra
           author={author}
-          date={date}
+          date={time}
           minRead={'6'}
           avatar={'/images/blogs/default-avatar.png'}
         />
-        <Article header={header} brief={brief} slug={slug} />
+        <Article title={title} brief={brief} slug={slug} />
       </Content>
     </Container>
   )
 }
 
 PostSummary.propTypes = {
-  header: PropTypes.string,
+  title: PropTypes.string,
   slug: PropTypes.string,
   brief: PropTypes.string,
   author: PropTypes.string,
-  date: PropTypes.string
+  time: PropTypes.string
 }
 
 export default PostSummary

modules/blogs/components/blogs/__test__/__snapshots__/PostSummary.spec.tsx.snap

@@ -6,12 +6,10 @@ exports[`Blogs PostSummary should render without throwing an error 1`] = `
     <Extra
       author="post author"
       avatar="/images/blogs/default-avatar.png"
-      date="20/11/2020"
       minRead="6"
     />
     <Article
       brief="post brief"
-      header="post header"
       slug="post"
     />
   </Content>

modules/blogs/components/blogs/post-summary/Article.js

@@ -18,15 +18,15 @@ const AllowedClickContainer = styled(Container)`
   cursor: pointer;
 `
 
-const Article = ({ header, brief, slug }) => (
+const Article = ({ title, brief, slug }) => (
   <AllowedClickContainer
     data-test-id="article-container"
     onClick={() => {
       document.location.href = `blogs/${slug}`
     }}
   >
     <Row>
-      <Title>{header}</Title>
+      <Title>{title}</Title>
     </Row>
     <Row>
       <Summary>{brief}</Summary>
@@ -35,7 +35,7 @@ const Article = ({ header, brief, slug }) => (
 )
 
 Article.propTypes = {
-  header: PropTypes.string,
+  title: PropTypes.string,
   brief: PropTypes.string,
   slug: PropTypes.string
 }

modules/blogs/components/blogs/post-summary/__test__/__snapshots__/Article.spec.tsx.snap

@@ -8,9 +8,7 @@ exports[`Blogs Article should render without throwing an error 1`] = `
   <ForwardRef
     noGutters={false}
   >
-    <Article__Title>
-      test header
-    </Article__Title>
+    <Article__Title />
   </ForwardRef>
   <ForwardRef
     noGutters={false}

modules/core/api/__test__/selector.spec.tsx

@@ -0,0 +1,45 @@
+import { getData, getError, isSuccess } from '../selector'
+
+describe('selector test', () => {
+  describe('getData', () => {
+    it('should return data', function() {
+      const response = {
+        data: 'test data'
+      }
+      expect(getData(response)).toBe('test data')
+    })
+
+    it('should return empty', function() {
+      const response = {}
+      expect(getData(response)).toEqual({})
+    })
+  })
+
+  describe('getError', () => {
+    it('should return data', function() {
+      const response = {
+        error: 'error data'
+      }
+      expect(getError(response)).toBe('error data')
+    })
+
+    it('should return empty', function() {
+      const response = {}
+      expect(getError(response)).toEqual({})
+    })
+  })
+
+  describe('isSuccess', () => {
+    it('should return success = true', function() {
+      const response = {
+        success: true
+      }
+      expect(isSuccess(response)).toBe(true)
+    })
+
+    it('should return empty', function() {
+      const response = {}
+      expect(isSuccess(response)).toBe(false)
+    })
+  })
+})

modules/core/api/selector.js

@@ -0,0 +1,5 @@
+export const getData = response => response.data || {}
+
+export const getError = response => response.error || {}
+
+export const isSuccess = response => response.success || false

modules/post/api/__tests__/__snapshots__/fetch.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fetch  fetchPostFromSlug with error request 1`] = `Object {}`;