Add prettier

Add favorites page

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

package.json

@@ -40,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.5.1"
   }
 }

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

src/app/index.tsx

@@ -1,14 +1,14 @@
-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}>
     <BrowserRouter>
       <Pages />
     </BrowserRouter>
   </Provider>
-);
+)

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

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)} />
+)

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;
+`

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;
+`

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>
+  )
+}

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)} />
+)

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;
 }

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')
+)

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>
+  )
+}

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>
+  )
+}

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>
+)

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

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 []
+    },
+  },
+})

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;