Created logic for creating lists

components/domain/wishes/createWish/CreateWish.tsx

@@ -1,85 +1,75 @@
-import { FC, FormEvent, SyntheticEvent, useState } from 'react'
+import { FC, FormEvent, SyntheticEvent, useEffect, useState } from 'react'
 import { result } from '../../../common/result'
 import { createWish, Wish } from '../models'
+import { v4 as uuid } from 'uuid'
 
 interface CreateWishProps {
   onFocus: () => void
+  hasFocus: boolean
   onSubmit: (wish: Wish) => void
+  wish: Wish
 }
 
 const CreateWish: FC<CreateWishProps> = (props) => {
-  const [focused, setFocused] = useState<boolean>(false)
-
-  const onSubmit = (e: SyntheticEvent) => {
-    e.preventDefault()
-
-    const target = e.target as typeof e.target & {
-      wishName: { value: string }
-      wishDescription: { value?: string }
-      wishLink: { value?: string }
-    }
-
-    const wishRes = createWish(
-      target.wishName.value,
-      target.wishDescription.value,
-      target.wishLink.value
-    )
-
-    result.tap(wishRes, (wish) => {
-      props.onSubmit(wish)
-    })
-  }
-
   return (
-    <div onFocus={() => setFocused(true)}>
-      <BasePrompt>
-        <form onSubmit={onSubmit}>
-          <div className="shadow p-4 space-y-6 bg-white">
-            <div className="p-1 rounded space-y-6 bg-pink-100">
-              <div className="bg-pink-100 transition-all">
-                <input
-                  type="text"
-                  name="wishName"
-                  placeholder="Your wish!"
-                  className="appearance-none w-full bg-pink-100 text-lg text-center p-6 outline-none"
-                />
-                <div className={focused ? 'block' : 'hidden'}>
-                  <InnerWishPrompt />
-                </div>
-              </div>
-            </div>
-            <button
-              type="submit"
-              className="py-2 px-4 bg-pink-400 rounded text-white"
-            >
-              Submit
-            </button>
+    <div onFocus={() => props.onFocus()}>
+      <div className="space-y-6 rounded bg-pink-100 p-1">
+        <div className="bg-pink-100 transition-all">
+          <input
+            type="text"
+            name="wishName"
+            placeholder="Your wish!"
+            className="w-full appearance-none bg-pink-100 p-6 text-center text-lg outline-none"
+            onChange={(e) =>
+              props.onSubmit({ ...props.wish, name: e.target.value })
+            }
+            value={props.wish.name}
+          />
+          <div className={props.hasFocus ? 'block' : 'hidden'}>
+            <InnerWishPrompt wish={props.wish} onChange={props.onSubmit} />
           </div>
-        </form>
-      </BasePrompt>
+        </div>
+      </div>
     </div>
   )
 }
 
-const InnerWishPrompt: FC = (props) => {
+interface InnerWishPromptInterface {
+  wish: Wish
+  onChange: (wish: Wish) => void
+}
+
+const InnerWishPrompt: FC<InnerWishPromptInterface> = (props) => {
   return (
     <div className="space-y-4">
       <textarea
         name="wishDescription"
         placeholder="Description"
-        className="block appearance-none w-full resize-none rounded py-3 px-4 outline-none bg-pink-100"
+        className="block w-full resize-none appearance-none rounded bg-pink-100 py-3 px-4 outline-none"
+        onChange={(e) =>
+          props.onChange({ ...props.wish, description: e.target.value })
+        }
+        value={props.wish.description}
       />
-      <div className="h-0.5 w-3/4 m-auto w-content bg-gray-300" />
+      <div className="w-content m-auto h-0.5 w-3/4 bg-gray-300" />
       <input
         type="text"
         name="wishLink"
         placeholder="https://example.mywish"
-        className="block appearance-none w-full rounded py-3 px-4 outline-none bg-pink-100"
+        className="block w-full appearance-none rounded bg-pink-100 py-3 px-4 outline-none"
+        onChange={(e) =>
+          props.onChange({ ...props.wish, link: e.target.value })
+        }
+        value={props.wish.link}
       />
     </div>
   )
 }
 
-const BasePrompt: FC = (props) => <div>{props.children}</div>
+export const BasePrompt: FC = (props) => (
+  <div>
+    <div className="space-y-6 bg-white p-4 shadow">{props.children}</div>
+  </div>
+)
 
 export default CreateWish

components/domain/wishes/models.ts

@@ -1,18 +1,21 @@
 import { result } from '../../common/result'
 
 export type Wish = {
+  id: string
   name: string
   description?: string
   link?: string
 }
 
 export const createWish = (
+  id: string,
   name: string,
-  description?: string,
-  link?: string
+  description: string = '',
+  link: string = ''
 ): result.Result<Wish, string> => {
-  if (typeof name !== 'undefined' && name.length > 0) {
+  if (typeof name !== 'undefined') {
     return result.ok({
+      id,
       name,
       description,
       link,

components/layout/home/HomeLayout.tsx

@@ -7,13 +7,15 @@ interface HomeLayoutProps {
 }
 const HomeLayout: FC<HomeLayoutProps> = (props) => {
   return (
-    <div className={styles.root + ' space-x-6 pt-14'}>
-      <h1 className="text-2xl space-x-2">
-        <span>Wishes</span>
-        <span>/</span>
-        <span>{props.page}</span>
-      </h1>
-      <main className="pt-20">{props.children}</main>
+    <div className="bg-pink-50 min-h-screen">
+      <div className={styles.root + ' space-x-6 pt-14'}>
+        <h1 className="text-2xl space-x-2">
+          <span>Wishes</span>
+          <span>/</span>
+          <span>{props.page}</span>
+        </h1>
+        <main className="pt-20">{props.children}</main>
+      </div>
     </div>
   )
 }