feat: add mockend for data fetching

* feat: use css to switch dark buttons

* chore: remove types for classnames, remove console

* feat: add default style for button group, add i18n in not found, add html bg

* feat: init fetch

* chore: add git attr for text eol

* chore: add spelling and type check in husky

* chore: add missing yarn cmd

* chore: fix spell

* chore: fix spell

* chore: downgrade husky to ~3.1

.cspell.json

@@ -5,7 +5,8 @@
   "words": [
     "vite",
     "testid",
-    "svgr"
+    "svgr",
+    "deduping"
   ],
   "flagWords": [],
   "ignorePaths": [

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

.huskyrc

@@ -1,6 +1,6 @@
 {
   "hooks": {
-    "pre-commit": "echo \"git commit trigger husky pre-commit hook\" && lint-staged",
+    "pre-commit": "echo \"git commit trigger husky pre-commit hook\" && lint-staged && yarn test:spelling && tsc",
     "post-commit": "git update-index --again"
   }
 }

.mockend.json

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

package.json

@@ -22,19 +22,20 @@
     "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",
     "@testing-library/react": "^11.2.6",
-    "@types/classnames": "^2.2.11",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.0",
@@ -56,7 +57,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^5.1.3",
+    "husky": "~3.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",

src/App.tsx

@@ -1,12 +1,21 @@
 import React, { FC } from 'react'
 import AppRouter from '@AppRouter'
-
-console.log('invoke CI')
+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/atoms/FooterButtons.tsx

@@ -4,14 +4,24 @@ import { IoLanguage, IoLogoGithub } from 'react-icons/io5'
 import { useDark } from '@hooks'
 import { useTranslation } from 'react-i18next'
 import './FooterButtons.css'
+import classNames from 'classnames'
 
 export const DarkModeButton: FC = () => {
   const { isDark, toggleDark } = useDark()
 
-  return isDark ? (
-    <BiMoon data-testid="dark-button" onClick={toggleDark} className="footer-button" />
-  ) : (
-    <BiSun data-testid="dark-button" onClick={toggleDark} className="footer-button" />
+  return (
+    <>
+      <BiMoon
+        data-testid="moon-button"
+        onClick={toggleDark}
+        className={classNames('footer-button', { hidden: !isDark })}
+      />
+      <BiSun
+        data-testid="sun-button"
+        onClick={toggleDark}
+        className={classNames('footer-button', { hidden: isDark })}
+      />
+    </>
   )
 }
 

src/components/atoms/__tests__/FooterButtons.test.tsx

@@ -3,22 +3,95 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { DarkModeButton, GitHubButton, LanguageButton } from '@components/atoms'
 import i18n from '@locales/i18n'
 import { handleMatchMedia } from '@utils'
+import { ColorScheme } from '@hooks'
 
 describe('<FooterButtons />', () => {
-  it('<DarkModeButton /> should change color scheme when click', () => {
+  beforeEach(() => {
     handleMatchMedia()
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  const expectColorScheme = (colorScheme: ColorScheme) => {
+    expect(JSON.parse(localStorage.getItem('color-scheme') || '')).toStrictEqual(colorScheme)
+  }
+
+  it('<DarkModeButton /> should change color scheme when click', () => {
+    render(<DarkModeButton />)
+
+    const moonButton = screen.getByTestId('moon-button')
+
+    const sunButton = screen.getByTestId('sun-button')
+
+    expectColorScheme('auto')
+
+    fireEvent.click(sunButton)
+    expectColorScheme('dark')
+
+    fireEvent.click(moonButton)
+    expectColorScheme('light')
+  })
+
+  it('<DarkModeButton /> should hide moon button when color scheme is auto and light', () => {
+    render(<DarkModeButton />)
+
+    const moonButton = screen.getByTestId('moon-button')
+
+    expectColorScheme('auto')
+    expect(moonButton).toHaveClass('hidden')
+
+    fireEvent.click(moonButton)
+    expectColorScheme('dark')
+
+    fireEvent.click(moonButton)
+    expectColorScheme('light')
+
+    expect(moonButton).toHaveClass('hidden')
+  })
+
+  it('<DarkModeButton /> should hide sun button when color scheme is dark', () => {
+    render(<DarkModeButton />)
+
+    const sunButton = screen.getByTestId('sun-button')
+
+    expectColorScheme('auto')
+
+    fireEvent.click(sunButton)
+    expectColorScheme('dark')
+
+    expect(sunButton).toHaveClass('hidden')
+  })
+
+  it('<DarkModeButton /> should show sun button when color scheme is auto and light', () => {
+    render(<DarkModeButton />)
+
+    const sunButton = screen.getByTestId('sun-button')
+
+    expectColorScheme('auto')
+    expect(sunButton.hidden).toBeFalsy()
+
+    fireEvent.click(sunButton)
+    expectColorScheme('dark')
+
+    fireEvent.click(sunButton)
+    expectColorScheme('light')
+
+    expect(sunButton.hidden).toBeFalsy()
+  })
+
+  it('<DarkModeButton /> should show moon button when color scheme is dark', () => {
     render(<DarkModeButton />)
 
-    // button will change due to color-scheme change
-    const button = () => screen.getByTestId('dark-button')
+    const moonButton = screen.getByTestId('moon-button')
 
-    expect(localStorage.getItem('color-scheme')).toStrictEqual('"auto"')
+    expectColorScheme('auto')
 
-    fireEvent.click(button())
-    expect(localStorage.getItem('color-scheme')).toStrictEqual('"dark"')
+    fireEvent.click(moonButton)
+    expectColorScheme('dark')
 
-    fireEvent.click(button())
-    expect(localStorage.getItem('color-scheme')).toStrictEqual('"light"')
+    expect(moonButton.hidden).toBeFalsy()
   })
 
   it('<LanguageButton /> should change language when click', () => {

src/components/molecules/FooterButtonGroup.tsx

@@ -1,8 +1,12 @@
 import React, { FC } from 'react'
 import { DarkModeButton, GitHubButton, LanguageButton } from '@components/atoms'
+import classNames from 'classnames'
 
-export const FooterButtonGroup: FC<React.HTMLAttributes<HTMLDivElement>> = ({ ...rest }) => (
-  <div {...rest}>
+export const FooterButtonGroup: FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...rest
+}) => (
+  <div className={classNames('my-2 flex flex-row', className)} {...rest}>
     <DarkModeButton />
     <LanguageButton />
     <GitHubButton />

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/Landing.tsx

@@ -6,7 +6,7 @@ export const Landing: FC = () => (
   <div className="h-screen flex flex-col items-center justify-center">
     <Logo />
     <Description />
-    <FooterButtonGroup className="my-2 flex flex-row" />
+    <FooterButtonGroup />
     <LinkGroup />
   </div>
 )

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/Fetcher.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 './Fetcher'
+export * from './Post'

src/locales/en/translation.json

@@ -1,5 +1,6 @@
 {
   "desc": "Opinionated React Starter Template",
   "learn": "Learn",
-  "docs": "Docs"
+  "docs": "Docs",
+  "notFound": "Sorry, the page you visited does not exist."
 }