From 09ec89f8f8d7760bf74e030cae49c639d06488df Mon Sep 17 00:00:00 2001
From: Kit Loong <kitloong1008@gmail.com>
Date: Wed, 20 Dec 2023 18:07:40 +0800
Subject: [PATCH] Add form

---
 src/components/Form/FormError.tsx             |   8 +
 src/components/Form/index.ts                  |   2 +
 src/components/Pokemon/PokemonForm.tsx        | 339 ++++++++++++++++++
 src/components/Pokemon/PokemonList.tsx        |  49 +--
 src/components/Pokemon/PokemonTypeLabel.tsx   |  44 +++
 src/components/Pokemon/index.ts               |   2 +-
 src/layout/AdminLayout/AdminLayout.tsx        |   2 +-
 src/models/pokemon.ts                         |  49 ++-
 src/pages/_app.tsx                            |   4 +
 src/pages/pokemons/[id]/edit.tsx              |  64 ++++
 .../pokemons/{client.tsx => client/index.tsx} |   0
 src/pages/pokemons/create.tsx                 |  17 +
 12 files changed, 533 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Form/FormError.tsx
 create mode 100644 src/components/Form/index.ts
 create mode 100644 src/components/Pokemon/PokemonForm.tsx
 create mode 100644 src/components/Pokemon/PokemonTypeLabel.tsx
 create mode 100644 src/pages/pokemons/[id]/edit.tsx
 rename src/pages/pokemons/{client.tsx => client/index.tsx} (100%)
 create mode 100644 src/pages/pokemons/create.tsx

diff --git a/src/components/Form/FormError.tsx b/src/components/Form/FormError.tsx
new file mode 100644
index 0000000..f4607ad
--- /dev/null
+++ b/src/components/Form/FormError.tsx
@@ -0,0 +1,8 @@
+import { Form } from 'react-bootstrap'
+import React from 'react'
+
+export default function FormError(props: { message?: string }) {
+  const { message } = props
+
+  return message && <Form.Control.Feedback type="invalid">{message}</Form.Control.Feedback>
+}
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
new file mode 100644
index 0000000..24a3a69
--- /dev/null
+++ b/src/components/Form/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as FormError } from './FormError'
diff --git a/src/components/Pokemon/PokemonForm.tsx b/src/components/Pokemon/PokemonForm.tsx
new file mode 100644
index 0000000..dce5d07
--- /dev/null
+++ b/src/components/Pokemon/PokemonForm.tsx
@@ -0,0 +1,339 @@
+import {
+  Pokemon,
+  PokemonEggGroup,
+  pokemonEggGroups,
+  PokemonType,
+  pokemonTypes,
+} from '@models/pokemon'
+import { PokemonTypeLabel } from '@components/Pokemon/index'
+import {
+  Alert, Button, Col, Form, Row,
+} from 'react-bootstrap'
+import { Controller, SubmitHandler, useForm } from 'react-hook-form'
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import Image from 'next/image'
+import { FormError } from '@components/Form'
+
+type Inputs = {
+  name: string;
+  types: PokemonType[];
+  eggGroups: PokemonEggGroup[];
+  hp: number | null;
+  attack: number | null;
+  defense: number | null;
+  special_attack: number | null;
+  special_defense: number | null;
+  speed: number | null;
+}
+
+type Props = {
+  pokemon?: Pokemon;
+}
+
+export default function PokemonForm(props: Props) {
+  const { pokemon } = props
+
+  const defaultValues = (): Inputs => {
+    if (pokemon) {
+      return {
+        name: pokemon.name,
+        types: pokemon.types,
+        eggGroups: pokemon.egg_groups,
+        hp: pokemon.hp,
+        attack: pokemon.attack,
+        defense: pokemon.defense,
+        special_attack: pokemon.special_attack,
+        special_defense: pokemon.special_defense,
+        speed: pokemon.speed,
+      }
+    }
+
+    return {
+      name: '',
+      types: [],
+      eggGroups: [],
+      hp: null,
+      attack: null,
+      defense: null,
+      special_attack: null,
+      special_defense: null,
+      speed: null,
+    }
+  }
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+    reset,
+  } = useForm<Inputs>({
+    defaultValues: defaultValues(),
+  })
+
+  const [submitting, setSubmitting] = useState(false)
+  const [showNotification, setShowNotification] = useState(false)
+  const [notificationMessage, setNotificationMessage] = useState('')
+
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    setSubmitting(true)
+
+    // Change to your real submit here
+    const fakeSubmit = () => new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(data)
+      }, 1500)
+    })
+
+    const res = await fakeSubmit()
+
+    setSubmitting(false)
+    window.scrollTo(0, 0)
+    setShowNotification(true)
+
+    if (res) {
+      setNotificationMessage('Record saved successfully.')
+      return
+    }
+
+    setNotificationMessage('Unexpected error occurred, please try again.')
+  }
+
+  return (
+    <Form
+      noValidate
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      {showNotification && (
+        <Alert variant="success" onClose={() => setShowNotification(false)} dismissible>
+          {notificationMessage}
+        </Alert>
+      )}
+
+      {pokemon && (
+        <div
+          className="position-relative mx-auto"
+          style={{
+            width: '150px',
+            height: '150px',
+          }}
+        >
+          <Image
+            fill
+            style={{ objectFit: 'contain' }}
+            alt={pokemon.pokemondb_identifier}
+            sizes="5vw"
+            src={`https://img.pokemondb.net/sprites/home/normal/2x/${pokemon.pokemondb_identifier}.jpg`}
+          />
+        </div>
+      )}
+
+      <Form.Group className="mb-3">
+        <Form.Label>Name</Form.Label>
+        <Form.Control
+          type="text"
+          {...register('name', { required: 'This field is required' })}
+          isInvalid={!!errors.name}
+        />
+        <FormError message={errors.name?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Types</Form.Label>
+        <div className={classNames({ 'is-invalid': !!errors.types })}>
+          <Row>
+            {pokemonTypes.map((type) => (
+              <Col xs={6} sm={4} md={3} lg={2} key={type}>
+                <Form.Check id={`type-${type}`}>
+                  <Form.Check.Input
+                    type="checkbox"
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...register('types', { required: 'This field is required' })}
+                    value={type}
+                  />
+                  <Form.Check.Label>
+                    <span className="position-relative" style={{ top: '-.1rem' }}>
+                      <PokemonTypeLabel type={type} />
+                    </span>
+                  </Form.Check.Label>
+                </Form.Check>
+              </Col>
+            ))}
+          </Row>
+        </div>
+        <FormError message={errors.types?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Egg groups</Form.Label>
+        <div className={classNames({ 'is-invalid': !!errors.eggGroups })}>
+          <Row>
+            {pokemonEggGroups.map((eggGroup) => (
+              <Col xs={6} sm={4} md={3} lg={2} key={eggGroup}>
+                <Form.Check
+                  id={`eg-${eggGroup}`}
+                  type="checkbox"
+                  {...register('eggGroups', { required: 'This field is required' })}
+                  value={eggGroup}
+                  label={eggGroup}
+                />
+              </Col>
+            ))}
+          </Row>
+        </div>
+        <FormError message={errors.eggGroups?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Hp</Form.Label>
+        <Form.Control
+          className="w-auto"
+          type="number"
+          {...register('hp', {
+            required: 'This field is required',
+            min: {
+              value: 0,
+              message: 'This input must be at least 0',
+            },
+            max: {
+              value: 255,
+              message: 'This input must be at most 255',
+            },
+            valueAsNumber: true,
+          })}
+          isInvalid={!!errors.hp}
+        />
+        <FormError message={errors.hp?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Attack</Form.Label>
+        <Form.Control
+          className="w-auto"
+          type="number"
+          {...register('attack', {
+            required: 'This field is required',
+            min: {
+              value: 0,
+              message: 'This input must be at least 0',
+            },
+            max: {
+              value: 255,
+              message: 'This input must be at most 255',
+            },
+            valueAsNumber: true,
+          })}
+          isInvalid={!!errors.attack}
+        />
+        <FormError message={errors.attack?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Defense</Form.Label>
+        <Form.Control
+          className="w-auto"
+          type="number"
+          {...register('defense', {
+            required: 'This field is required',
+            min: {
+              value: 0,
+              message: 'This input must be at least 0',
+            },
+            max: {
+              value: 255,
+              message: 'This input must be at most 255',
+            },
+            valueAsNumber: true,
+          })}
+          isInvalid={!!errors.defense}
+        />
+        <FormError message={errors.defense?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Special attack</Form.Label>
+        <Form.Control
+          className="w-auto"
+          type="number"
+          {...register('special_attack', {
+            required: 'This field is required',
+            min: {
+              value: 0,
+              message: 'This input must be at least 0',
+            },
+            max: {
+              value: 255,
+              message: 'This input must be at most 255',
+            },
+            valueAsNumber: true,
+          })}
+          isInvalid={!!errors.special_attack}
+        />
+        <FormError message={errors.special_attack?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Special defense</Form.Label>
+        <Form.Control
+          className="w-auto"
+          type="number"
+          {...register('special_defense', {
+            required: 'This field is required',
+            min: {
+              value: 0,
+              message: 'This input must be at least 0',
+            },
+            max: {
+              value: 255,
+              message: 'This input must be at most 255',
+            },
+            valueAsNumber: true,
+          })}
+          isInvalid={!!errors.special_defense}
+        />
+        <FormError message={errors.special_defense?.message} />
+      </Form.Group>
+
+      <Form.Group className="mb-3">
+        <Form.Label>Speed</Form.Label>
+        <Controller
+          control={control}
+          name="speed"
+          rules={{
+            required: 'This field is required',
+            min: {
+              value: 0,
+              message: 'This input must be at least 0',
+            },
+            max: {
+              value: 255,
+              message: 'This input must be at most 255',
+            },
+          }}
+          render={({ field }) => (
+            <Form.Control
+              className="w-auto"
+              type="number"
+              {...field}
+              isInvalid={!!errors.speed}
+              value={field.value ?? ''}
+              onChange={(e) => {
+                if (e.target.value === '') {
+                  setValue('speed', null)
+                  return
+                }
+                setValue('speed', Number(e.target.value))
+              }}
+            />
+          )}
+        />
+        <FormError message={errors.speed?.message} />
+      </Form.Group>
+
+      <Button className="me-3" type="submit" variant="success" disabled={submitting}>Submit</Button>
+      <Button type="button" variant="secondary" onClick={() => reset()}>Reset</Button>
+    </Form>
+  )
+}
diff --git a/src/components/Pokemon/PokemonList.tsx b/src/components/Pokemon/PokemonList.tsx
index c0da04d..d077d71 100644
--- a/src/components/Pokemon/PokemonList.tsx
+++ b/src/components/Pokemon/PokemonList.tsx
@@ -5,47 +5,8 @@ import React from 'react'
 import Image from 'next/image'
 import { Pokemon } from '@models/pokemon'
 import { THSort } from '@components/TableSort'
-
-const typeColorMap: Record<string, string> = {
-  normal: '#aa9',
-  fighting: '#b54',
-  flying: '#89f',
-  poison: '#a59',
-  ground: '#db5',
-  rock: '#ba6',
-  bug: '#ab2',
-  ghost: '#66b',
-  steel: '#aab',
-  fire: '#f42',
-  water: '#39f',
-  grass: '#7c5',
-  electric: '#fc3',
-  psychic: '#f59',
-  ice: '#6cf',
-  dragon: '#76e',
-  dark: '#754',
-  fairy: '#e9e',
-  unknown: '#aa9',
-  shadow: '#aa9',
-}
-
-type TypeLabelProps = {
-  type: string;
-}
-
-const TypeLabel = ({ type }: TypeLabelProps) => (
-  <span
-    className="text-white d-inline-block text-uppercase text-center rounded-1 shadow-sm me-2"
-    style={{
-      backgroundColor: typeColorMap[type],
-      textShadow: '1px 1px 2px rgb(0 0 0 / 70%)',
-      fontSize: '.7rem',
-      width: '70px',
-    }}
-  >
-    {type}
-  </span>
-)
+import PokemonTypeLabel from '@components/Pokemon/PokemonTypeLabel'
+import Link from 'next/link'
 
 type Props = {
   pokemons: Pokemon[];
@@ -90,7 +51,7 @@ export default function PokemonList(props: Props) {
             </td>
             <td>{pokemon.name}</td>
             <td>
-              {pokemon.types.map((type) => <TypeLabel key={type} type={type} />)}
+              {pokemon.types.map((type) => <span key={type} className="me-2"><PokemonTypeLabel type={type} /></span>)}
             </td>
             <td className="text-center" style={{ whiteSpace: 'pre' }}>{pokemon.egg_groups.join('\n')}</td>
             <td className="text-end">{pokemon.hp}</td>
@@ -113,7 +74,9 @@ export default function PokemonList(props: Props) {
 
                 <Dropdown.Menu>
                   <Dropdown.Item href="#/action-1">Info</Dropdown.Item>
-                  <Dropdown.Item href="#/action-2">Edit</Dropdown.Item>
+                  <Link href={`pokemons/${pokemon.id}/edit`} passHref legacyBehavior>
+                    <Dropdown.Item>Edit</Dropdown.Item>
+                  </Link>
                   <Dropdown.Item
                     className="text-danger"
                     href="#/action-3"
diff --git a/src/components/Pokemon/PokemonTypeLabel.tsx b/src/components/Pokemon/PokemonTypeLabel.tsx
new file mode 100644
index 0000000..0af7b0d
--- /dev/null
+++ b/src/components/Pokemon/PokemonTypeLabel.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+
+const typeColorMap: Record<string, string> = {
+  normal: '#aa9',
+  fighting: '#b54',
+  flying: '#89f',
+  poison: '#a59',
+  ground: '#db5',
+  rock: '#ba6',
+  bug: '#ab2',
+  ghost: '#66b',
+  steel: '#aab',
+  fire: '#f42',
+  water: '#39f',
+  grass: '#7c5',
+  electric: '#fc3',
+  psychic: '#f59',
+  ice: '#6cf',
+  dragon: '#76e',
+  dark: '#754',
+  fairy: '#e9e',
+  unknown: '#aa9',
+  shadow: '#aa9',
+}
+
+type Props = {
+  type: string;
+}
+
+export default function PokemonTypeLabel({ type }: Props) {
+  return (
+    <span
+      className="text-white d-inline-block text-uppercase text-center rounded-1 shadow-sm"
+      style={{
+        backgroundColor: typeColorMap[type],
+        textShadow: '1px 1px 2px rgb(0 0 0 / 70%)',
+        fontSize: '.7rem',
+        width: '70px',
+      }}
+    >
+      {type}
+    </span>
+  )
+}
diff --git a/src/components/Pokemon/index.ts b/src/components/Pokemon/index.ts
index 7f99819..5189a41 100644
--- a/src/components/Pokemon/index.ts
+++ b/src/components/Pokemon/index.ts
@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as PokemonList } from './PokemonList'
+export { default as PokemonTypeLabel } from './PokemonTypeLabel'
diff --git a/src/layout/AdminLayout/AdminLayout.tsx b/src/layout/AdminLayout/AdminLayout.tsx
index 858cfa2..95d522a 100644
--- a/src/layout/AdminLayout/AdminLayout.tsx
+++ b/src/layout/AdminLayout/AdminLayout.tsx
@@ -58,7 +58,7 @@ export default function AdminLayout({ children }: PropsWithChildren) {
       <div className="wrapper d-flex flex-column min-vh-100 bg-light">
         <Header toggleSidebar={toggleIsShowSidebar} toggleSidebarMd={toggleIsShowSidebarMd} />
         <div className="body flex-grow-1 px-sm-2 mb-4">
-          <Container fluid="lg">
+          <Container fluid>
             {children}
           </Container>
         </div>
diff --git a/src/models/pokemon.ts b/src/models/pokemon.ts
index de6b0ea..1d56fd1 100644
--- a/src/models/pokemon.ts
+++ b/src/models/pokemon.ts
@@ -3,8 +3,8 @@ export interface Pokemon {
   identifier: string;
   pokemondb_identifier: string;
   name: string;
-  types: string[];
-  egg_groups: string[];
+  types: PokemonType[];
+  egg_groups: PokemonEggGroup[];
   hp: number;
   attack: number;
   defense: number;
@@ -13,3 +13,48 @@ export interface Pokemon {
   speed: number;
   total: number;
 }
+
+export const pokemonTypes = [
+  'normal',
+  'fighting',
+  'flying',
+  'poison',
+  'ground',
+  'rock',
+  'bug',
+  'ghost',
+  'steel',
+  'fire',
+  'water',
+  'grass',
+  'electric',
+  'psychic',
+  'ice',
+  'dragon',
+  'dark',
+  'fairy',
+  'unknown',
+  'shadow',
+] as const
+
+export type PokemonType = typeof pokemonTypes[number]
+
+export const pokemonEggGroups = [
+  'Monster',
+  'Water 1',
+  'Bug',
+  'Flying',
+  'Field',
+  'Fairy',
+  'Grass',
+  'Human-Like',
+  'Water 3',
+  'Mineral',
+  'Amorphous',
+  'Water 2',
+  'Ditto',
+  'Dragon',
+  'Undiscovered',
+] as const
+
+export type PokemonEggGroup = typeof pokemonEggGroups[number]
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a621748..20380e2 100755
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -6,6 +6,8 @@ import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 import { SSRProvider } from 'react-bootstrap'
 import { ProgressBar } from '@components/ProgressBar'
+import axios from 'axios'
+import axiosRetry from 'axios-retry'
 
 // You change this configuration value to false so that the Font Awesome core SVG library
 // will not try and insert <style> elements into the <head> of the page.
@@ -13,6 +15,8 @@ import { ProgressBar } from '@components/ProgressBar'
 // See https://fontawesome.com/v6/docs/web/use-with/react/use-with#next-js
 config.autoAddCss = false
 
+axiosRetry(axios, { retries: 3 })
+
 function MyApp({ Component, pageProps }: AppProps) {
   // In server-side rendered applications, a SSRProvider must wrap the application in order
   // to ensure that the auto-generated ids are consistent between the server and client.
diff --git a/src/pages/pokemons/[id]/edit.tsx b/src/pages/pokemons/[id]/edit.tsx
new file mode 100644
index 0000000..797bef3
--- /dev/null
+++ b/src/pages/pokemons/[id]/edit.tsx
@@ -0,0 +1,64 @@
+import { GetServerSideProps, NextPage } from 'next'
+import { AdminLayout } from '@layout'
+import { Card } from 'react-bootstrap'
+import PokemonForm from '@components/Pokemon/PokemonForm'
+import { Pokemon } from '@models/pokemon'
+import axios from 'axios'
+
+type Props = {
+  pokemon: Pokemon;
+}
+
+const PokemonsEdit: NextPage<Props> = (props) => {
+  const { pokemon } = props
+
+  return (
+    <AdminLayout>
+      <Card>
+        <Card.Header>
+          Edit Pokémon -&nbsp;
+          {pokemon.name}
+        </Card.Header>
+        <Card.Body>
+          <PokemonForm pokemon={pokemon} />
+        </Card.Body>
+      </Card>
+    </AdminLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
+  const { id: idQuery } = context.query
+
+  if (!idQuery) {
+    return {
+      notFound: true,
+    }
+  }
+
+  if (typeof idQuery !== 'string') {
+    return {
+      notFound: true,
+    }
+  }
+
+  const id = Number(idQuery)
+
+  const pokemonURL = `${process.env.NEXT_PUBLIC_POKEMON_LIST_API_BASE_URL}pokemons/${id}` || ''
+
+  try {
+    const { data: pokemon } = await axios.get<Pokemon>(pokemonURL)
+
+    return {
+      props: {
+        pokemon,
+      },
+    }
+  } catch (error) {
+    return {
+      notFound: true,
+    }
+  }
+}
+
+export default PokemonsEdit
diff --git a/src/pages/pokemons/client.tsx b/src/pages/pokemons/client/index.tsx
similarity index 100%
rename from src/pages/pokemons/client.tsx
rename to src/pages/pokemons/client/index.tsx
diff --git a/src/pages/pokemons/create.tsx b/src/pages/pokemons/create.tsx
new file mode 100644
index 0000000..4c0d5cf
--- /dev/null
+++ b/src/pages/pokemons/create.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next'
+import { AdminLayout } from '@layout'
+import { Card } from 'react-bootstrap'
+import PokemonForm from '@components/Pokemon/PokemonForm'
+
+const PokemonsCreate: NextPage = () => (
+  <AdminLayout>
+    <Card>
+      <Card.Header>Add new Pokémon</Card.Header>
+      <Card.Body>
+        <PokemonForm />
+      </Card.Body>
+    </Card>
+  </AdminLayout>
+)
+
+export default PokemonsCreate