feat: init fetch

.mockend.json

@@ -0,0 +1,8 @@
+{
+  "Post": {
+    "title": "string",
+    "views": "int",
+    "published": "boolean",
+    "createdAt": "date"
+  }
+}

package.json

@@ -22,14 +22,16 @@
     "fix:lint": "eslint src --ext .ts,.tsx --fix"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "i18next": "^20.2.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-i18next": "^11.8.13",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
-    "react-use": "^17.2.3"
+    "react-use": "^17.2.3",
+    "swr": "^0.5.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.10",

src/App.tsx

@@ -1,10 +1,21 @@
 import React, { FC } from 'react'
 import AppRouter from '@AppRouter'
+import { SWRConfig as SWRConfigProvider } from 'swr'
+import { get } from '@data'
 
 const App: FC = () => (
-  <div className="app-body">
-    <AppRouter />
-  </div>
+  <SWRConfigProvider
+    // https://swr.vercel.app/docs/global-configuration
+    value={{
+      fetcher: get,
+      shouldRetryOnError: false,
+      revalidateOnFocus: false,
+    }}
+  >
+    <div className="app-body">
+      <AppRouter />
+    </div>
+  </SWRConfigProvider>
 )
 
 export default App

src/AppRouter.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'
-import { Landing, NotFound } from '@pages'
+import { Landing, NotFound, Post } from '@pages'
 
 const AppRouter: React.FC = () => (
   <Router>
@@ -9,6 +9,8 @@ const AppRouter: React.FC = () => (
 
       <Route exact path="/landing" render={() => <Landing />} />
 
+      <Route exact path="/post" render={() => <Post />} />
+
       <Route path="*" render={() => <NotFound />} />
     </Switch>
   </Router>

src/components/molecules/Home/Post.tsx

@@ -0,0 +1,3 @@
+import React, { FC } from 'react'
+
+export const Post: FC = () => <div>Hello, World!</div>

src/components/molecules/Home/index.ts

@@ -0,0 +1 @@
+export { Post } from './Post'

src/components/molecules/index.ts

@@ -1,2 +1,3 @@
+export * from './Home'
 export * from './Landing'
 export { FooterButtonGroup } from './FooterButtonGroup'

src/components/organisms/Home/Post.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react'
+import { usePost } from '@data'
+
+export const Post: FC = () => {
+  const { data: post, loading, error } = usePost(1)
+
+  return (
+    <div className="h-screen flex flex-col items-center justify-center">
+      {loading && <div>Loading...</div>}
+      {/* usually error could be handle in axios like show a message, but feel free if you want to add error display when request error */}
+      {error && <div>Error</div>}
+      <div>{post?.title}</div>
+    </div>
+  )
+}

src/components/organisms/Home/index.ts

@@ -0,0 +1 @@
+export { Post as PostOrganisms } from './Post'

src/components/organisms/Landing/index.ts

@@ -1 +1 @@
-export { Landing } from './Landing'
+export { Landing as LandingOrganisms } from './Landing'

src/components/organisms/index.ts

@@ -1 +1,2 @@
+export * from './Home'
 export * from './Landing'

src/data/Featcher.ts

@@ -0,0 +1,54 @@
+import axios from 'axios'
+
+export const fetcher = axios.create({
+  // baseURL: 'https://mockend.com/wwwenjie/react-starter/',
+  baseURL: 'https://jsonplaceholder.typicode.com/',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+  },
+})
+
+const onRequestError = async (error: any) => {
+  // logic when request error
+}
+
+const onResponseError = async (error: any) => {
+  if (error?.response?.status) {
+    await onResponseStatus(error.response.status)
+  }
+
+  // logic when response error
+}
+
+const onResponseStatus = async (status: number) => {
+  const statusMapper = new Map<number, () => void>()
+    .set(401, () => {
+      // redirect to login or anything you want
+    })
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    .set(404, () => {})
+
+  const func = statusMapper.get(status)
+  if (func) {
+    await func()
+  }
+}
+
+fetcher.interceptors.request.use(
+  (config) => config,
+  async (error) => {
+    await onRequestError(error)
+    return Promise.reject(error)
+  },
+)
+
+fetcher.interceptors.response.use(
+  async (response) => response.data,
+  async (error) => {
+    await onResponseError(error)
+    return Promise.reject(error)
+  },
+)
+
+export const { get, post, patch, delete: deleteFetch } = fetcher

src/data/Post.ts

@@ -0,0 +1,30 @@
+import useSWR from 'swr'
+
+export type Post = {
+  readonly title: string
+  readonly views: number
+  readonly published: boolean
+  readonly createdAt: Date
+}
+
+export const usePosts = () => {
+  const { data, error } = useSWR<readonly Post[]>('posts')
+
+  return {
+    data,
+    loading: !error && !data,
+    error,
+  }
+}
+
+export const usePost = (postId: number) => {
+  const { data, error } = useSWR<Post>(`posts/${postId}`, {
+    dedupingInterval: 600,
+  })
+
+  return {
+    data,
+    loading: !error && !data,
+    error,
+  }
+}

src/data/index.ts

@@ -0,0 +1,2 @@
+export * from './Featcher'
+export * from './Post'

src/pages/Home/Post.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react'
+import { PostOrganisms } from '@components/organisms'
+
+export const Post: FC = () => <PostOrganisms />

src/pages/Home/index.ts

@@ -0,0 +1 @@
+export { Post } from './Post'

src/pages/Landing/Landing.tsx

@@ -1,4 +1,4 @@
 import React, { FC } from 'react'
-import { Landing as LandingOrganisms } from '@components/organisms'
+import { LandingOrganisms } from '@components/organisms'
 
 export const Landing: FC = () => <LandingOrganisms />

src/pages/index.ts

@@ -1,2 +1,3 @@
+export * from './Home'
 export * from './Landing'
 export * from './NotFound'

yarn.lock

@@ -1452,6 +1452,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.4.tgz#f19cd99a84ee32a318b9c5b5bb8ed373ad94f143"
   integrity sha512-Pdgfv6iP0gNx9ejRGa3zE7Xgkj/iclXqLfe7BnatdZz0QnLZ3jrRHUVH8wNSdN68w05Sk3ShGTb3ydktMTooig==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -2207,6 +2214,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -2882,6 +2894,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
+follow-redirects@^1.10.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6193,6 +6210,13 @@ svg-parser@^2.0.2:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+swr@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.5.tgz#c72c1615765f33570a16bbb13699e3ac87eaaa3a"
+  integrity sha512-u4mUorK9Ipt+6LEITvWRWiRWAQjAysI6cHxbMmMV1dIdDzxMnswWo1CyGoyBHXX91CchxcuoqgFZ/ycx+YfhCA==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"