From a80784966565ed406a9062493fb7574b7ff4b634 Mon Sep 17 00:00:00 2001
From: Mark Chigrin <ILMPC@ya.ru>
Date: Mon, 7 Feb 2022 21:14:33 +0000
Subject: [PATCH] Add prettier Add favorites page

---
 .prettierrc                   |  7 ++++
 package.json                  |  3 ++
 src/app/hooks.ts              |  5 +++
 src/app/index.tsx             | 10 +++---
 src/app/store.ts              | 16 +++++----
 src/components/Button.tsx     | 39 +++++++++++-----------
 src/components/Column.tsx     |  9 +++++
 src/components/Container.tsx  | 10 ++++++
 src/components/Joke.tsx       | 39 ++++++++++++++++++++++
 src/components/Like.tsx       |  8 +++++
 src/index.css                 |  2 +-
 src/index.tsx                 | 16 ++++-----
 src/pages/Favorites.tsx       | 25 ++++++++++++++
 src/pages/Main.tsx            | 62 +++++++++++------------------------
 src/pages/index.tsx           | 18 ++++++----
 src/services/api.ts           | 19 +++++------
 src/services/favoriteJokes.ts | 24 ++++++++++++++
 src/types/index.ts            |  7 ++--
 yarn.lock                     | 10 +++---
 19 files changed, 222 insertions(+), 107 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 src/app/hooks.ts
 create mode 100644 src/components/Column.tsx
 create mode 100644 src/components/Container.tsx
 create mode 100644 src/components/Joke.tsx
 create mode 100644 src/components/Like.tsx
 create mode 100644 src/pages/Favorites.tsx
 create mode 100644 src/services/favoriteJokes.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..23b8710
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}
diff --git a/package.json b/package.json
index ef8d458..9faa5bf 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.5.1"
   }
 }
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
new file mode 100644
index 0000000..e165076
--- /dev/null
+++ b/src/app/hooks.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 119630d..5a21d19 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,9 +1,9 @@
-import { Provider } from "react-redux";
-import { BrowserRouter } from "react-router-dom";
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
 
-import { Pages } from "pages";
+import { Pages } from 'pages'
 
-import { store } from "./store";
+import { store } from './store'
 
 export const App: React.VFC = () => (
   <Provider store={store}>
@@ -11,4 +11,4 @@ export const App: React.VFC = () => (
       <Pages />
     </BrowserRouter>
   </Provider>
-);
+)
diff --git a/src/app/store.ts b/src/app/store.ts
index 322d203..7891fea 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -1,13 +1,15 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore } from '@reduxjs/toolkit'
 
-import { api } from "services/api";
+import { api } from 'services/api'
+import { favoriteJokes } from 'services/favoriteJokes'
 
 export const store = configureStore({
   reducer: {
     [api.reducerPath]: api.reducer,
+    [favoriteJokes.name]: favoriteJokes.reducer,
   },
-  middleware: (getDefaultMiddleware) => [
-    ...getDefaultMiddleware(),
-    api.middleware,
-  ],
-});
+  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware(), api.middleware],
+})
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e7f99dc..bf65c50 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,22 +1,23 @@
-import clsx from "clsx";
+import clsx from 'clsx'
+import React from 'react'
+import { Link, LinkProps } from 'react-router-dom'
 
 const variants = {
-  primary: "is-primary",
-  success: "is-success",
-  warning: "is-warning",
-  error: "is-error",
-} as const;
+  primary: 'is-primary',
+  success: 'is-success',
+  warning: 'is-warning',
+  error: 'is-error',
+} as const
 
-export const Button: React.FC<
-  React.ComponentPropsWithRef<"button"> & { variant?: keyof typeof variants }
-> = ({ variant, ...props }) => (
-  <button
-    {...props}
-    className={clsx(
-      props.className,
-      "nes-btn",
-      props.disabled && "is-disabled",
-      variant && variants[variant]
-    )}
-  />
-);
+type ButtonProps = React.ComponentPropsWithRef<'button'> & {
+  variant?: keyof typeof variants
+}
+
+const composeClassName = ({ className, disabled, variant }: Pick<ButtonProps, 'className' | 'disabled' | 'variant'>) =>
+  clsx(className, 'nes-btn', disabled && 'is-disabled', variant && variants[variant])
+
+export const Button: React.FC<ButtonProps> = (props) => <button {...props} className={composeClassName(props)} />
+
+export const ButtonLink: React.FC<LinkProps & Pick<ButtonProps, 'variant'>> = (props) => (
+  <Link {...props} className={composeClassName(props)} />
+)
diff --git a/src/components/Column.tsx b/src/components/Column.tsx
new file mode 100644
index 0000000..7c2748c
--- /dev/null
+++ b/src/components/Column.tsx
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled'
+
+export const Column = styled.div<{ gap?: number | string }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: ${({ gap = '2rem' }) => gap};
+  text-align: center;
+`
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
new file mode 100644
index 0000000..d0beffb
--- /dev/null
+++ b/src/components/Container.tsx
@@ -0,0 +1,10 @@
+import styled from '@emotion/styled'
+
+export const Container = styled.div`
+  display: grid;
+  place-items: center;
+  height: 100%;
+  margin: 0 auto;
+  max-width: 30rem;
+  padding: 0 1rem;
+`
diff --git a/src/components/Joke.tsx b/src/components/Joke.tsx
new file mode 100644
index 0000000..4aabc63
--- /dev/null
+++ b/src/components/Joke.tsx
@@ -0,0 +1,39 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+
+import { useAppDispatch, useAppSelector } from 'app/hooks'
+import { useGetJokeQuery } from 'services/api'
+import { Id } from 'types'
+import { Like } from 'components/Like'
+import { favoriteJokes } from 'services/favoriteJokes'
+
+interface JokeProps {
+  id?: Id
+}
+
+export const Joke: React.VFC<JokeProps> = ({ id }) => {
+  const dispatch = useAppDispatch()
+  const { data: joke, isLoading } = useGetJokeQuery(id)
+  const liked = useAppSelector((state) =>
+    state.favoriteJokes.some((favoriteId) => joke != null && favoriteId === joke.id)
+  )
+
+  return (
+    <div>
+      {isLoading && 'Loading...'}
+      {joke != null && (
+        <>
+          {joke.value}
+          <div
+            css={css`
+              display: flex;
+              justify-content: end;
+            `}
+          >
+            <Like liked={liked} onClick={() => dispatch(favoriteJokes.actions.updateJoke(joke.id))} />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Like.tsx b/src/components/Like.tsx
new file mode 100644
index 0000000..9ec1d8b
--- /dev/null
+++ b/src/components/Like.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx'
+
+interface LikeProps extends React.ComponentPropsWithRef<'i'> {
+  liked: boolean
+}
+export const Like: React.VFC<LikeProps> = ({ liked, ...props }) => (
+  <i {...props} className={clsx('nes-icon', 'star', !liked && 'is-empty', props.className)} />
+)
diff --git a/src/index.css b/src/index.css
index f9da897..2432cb6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 #root {
-  font-family: "Press Start 2P", cursive;
+  font-family: 'Press Start 2P', cursive;
   font-size: 16px;
   height: 100vh;
 }
diff --git a/src/index.tsx b/src/index.tsx
index e3c56ad..bf508c6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "modern-normalize/modern-normalize.css";
-import "@fontsource/press-start-2p";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import 'modern-normalize/modern-normalize.css'
+import '@fontsource/press-start-2p'
 
-import { App } from "app";
+import { App } from 'app'
 
-import "./index.css";
+import './index.css'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
-);
+  document.getElementById('root')
+)
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
new file mode 100644
index 0000000..1ab8b0a
--- /dev/null
+++ b/src/pages/Favorites.tsx
@@ -0,0 +1,25 @@
+import { useAppDispatch, useAppSelector } from 'app/hooks'
+import { Button, ButtonLink } from 'components/Button'
+import { Column } from 'components/Column'
+import { Joke } from 'components/Joke'
+import { favoriteJokes } from 'services/favoriteJokes'
+
+export const Favorites: React.VFC = () => {
+  const jokes = useAppSelector((state) => state.favoriteJokes)
+  const dispatch = useAppDispatch()
+  const isListEmpty = jokes.length === 0
+  return (
+    <Column>
+      {isListEmpty && 'Now your list is empty.\nLike jokes to complete your collection!'}
+      {jokes.map((id) => (
+        <Joke id={id} key={id} />
+      ))}
+      <Column gap="0.5rem">
+        <Button variant="warning" disabled={isListEmpty} onClick={() => dispatch(favoriteJokes.actions.purgeList())}>
+          Clear list
+        </Button>
+        <ButtonLink to="/">Back</ButtonLink>
+      </Column>
+    </Column>
+  )
+}
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index e17029e..693faed 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -1,47 +1,25 @@
-import styled from "@emotion/styled";
-import { Button } from "components/Button";
-import { useState } from "react";
-import { useGetRandomJokeQuery } from "services/api";
+import { useState } from 'react'
 
-const Container = styled.div`
-  display: grid;
-  place-items: center;
-  height: 100%;
-  margin: 0 auto;
-  max-width: 30rem;
-`;
-
-const Column = styled.div<{ gap?: number | string }>`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: ${({ gap = "2rem" }) => gap};
-  text-align: center;
-  margin: 0 1rem;
-`;
+import { Button, ButtonLink } from 'components/Button'
+import { Column } from 'components/Column'
+import { Joke } from 'components/Joke'
+import { api } from 'services/api'
 
 export const Main: React.VFC = () => {
-  const [auto, setAuto] = useState<Boolean>(false);
-  const {
-    data: joke,
-    isLoading,
-    isFetching,
-    refetch,
-  } = useGetRandomJokeQuery(undefined, { pollingInterval: auto ? 3000 : 0 });
+  const [auto, setAuto] = useState<Boolean>(false)
+  const [refetch, { isFetching }] = api.endpoints.getJoke.useLazyQuery({
+    pollingInterval: auto ? 3000 : 0,
+  })
   return (
-    <Container>
-      <Column>
-        {isLoading && "Loading..."}
-        {joke?.value}
-        <Column gap="0.5rem">
-          <Button onClick={refetch} disabled={isFetching} variant="primary">
-            Next joke
-          </Button>
-          <Button onClick={() => setAuto((e) => !e)}>
-            {auto ? "Disable" : "Enable"} auto next
-          </Button>
-        </Column>
+    <Column>
+      <Joke />
+      <Column gap="0.5rem">
+        <Button onClick={() => refetch()} disabled={isFetching} variant="primary">
+          Next joke
+        </Button>
+        <Button onClick={() => setAuto((e) => !e)}>{auto ? 'Disable' : 'Enable'} auto next</Button>
+        <ButtonLink to="/favorites">Favorites</ButtonLink>
       </Column>
-    </Container>
-  );
-};
+    </Column>
+  )
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4e55c8b..4987e7a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,15 @@
-import { Route, Routes } from "react-router";
+import { Route, Routes } from 'react-router'
 
-import { Main } from "./Main";
+import { Container } from 'components/Container'
+
+import { Main } from './Main'
+import { Favorites } from './Favorites'
 
 export const Pages = () => (
-  <Routes>
-    <Route path="/" element={<Main />} />
-  </Routes>
-);
+  <Container>
+    <Routes>
+      <Route path="/" element={<Main />} />
+      <Route path="/favorites" element={<Favorites />} />
+    </Routes>
+  </Container>
+)
diff --git a/src/services/api.ts b/src/services/api.ts
index d2faadf..ede4393 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,20 +1,17 @@
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
-import { Joke } from "types";
+import { Joke } from 'types'
 
 export const api = createApi({
-  reducerPath: "chuckNorrisApi",
+  reducerPath: 'chuckNorrisApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: "https://api.chucknorris.io/jokes/",
+    baseUrl: 'https://api.chucknorris.io/jokes/',
   }),
   endpoints: (build) => ({
-    getRandomJoke: build.query<Joke, void>({
-      query: () => "random",
-    }),
-    getJokeById: build.query<Joke, string>({
-      query: (id) => id,
+    getJoke: build.query<Joke, string | void>({
+      query: (id) => id ?? 'random',
     }),
   }),
-});
+})
 
-export const { useGetRandomJokeQuery, useGetJokeByIdQuery } = api;
+export const { useGetJokeQuery } = api
diff --git a/src/services/favoriteJokes.ts b/src/services/favoriteJokes.ts
new file mode 100644
index 0000000..a70a961
--- /dev/null
+++ b/src/services/favoriteJokes.ts
@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { Id } from 'types'
+
+type JokeAction = PayloadAction<Id>
+
+export const favoriteJokes = createSlice({
+  name: 'favoriteJokes',
+  initialState: [] as Id[],
+  reducers: {
+    updateJoke(state, { payload }: JokeAction) {
+      if (state.includes(payload)) {
+        return state.filter((id) => id !== payload)
+      }
+      if (state.length === 10) {
+        state.splice(0, 1)
+      }
+      state.push(payload)
+    },
+    purgeList() {
+      return []
+    },
+  },
+})
diff --git a/src/types/index.ts b/src/types/index.ts
index acc37cd..7bd8944 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,7 +1,8 @@
+export type Id = string
 export interface Joke {
-  id: string;
-  url: string;
-  value: string;
+  id: Id
+  url: string
+  value: string
 
   //  created_at: string;
   //  updated_at: string;
diff --git a/yarn.lock b/yarn.lock
index 81e7134..5d6a5e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5939,11 +5939,6 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-nes.css@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/nes.css/-/nes.css-2.3.0.tgz#112c834dd8a18cda570ab76d66b26b078a94c919"
-  integrity sha512-lCFZs9vj3f5RVdbvTL/kSxiYsOARwSeAdJaMNo+bCgmWOO9x8ay7QpT4yQVKHy3r5Dttzd0uqVdpt3fvvx6EpQ==
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -6888,6 +6883,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"