implement wihslist and secret santa

frontend/src/components/SecretSanta.tsx

@@ -1,7 +1,36 @@
 import CenteredContainer from "./ChildrenContainer";
+import useFetchUser from "../utils/fetchUser.tsx"
+import type { SantaInfo } from "../types/index";
+import { useEffect, useState } from "react";
+import { useNotification } from "../NotificationContext.tsx";
 
 function SecretSanta() {
 
+    const { updateWishlist, getSantaInfo } = useFetchUser()
+    const [ santaInfo, setSantaInfo ] = useState<SantaInfo | null>(null)
+    const [ wishListUrl, setWishListUrl ] = useState('')
+
+    const notify = useNotification();
+
+    const fetchSecretSanta = async () => {
+        const santaInfoData = await getSantaInfo()
+        setSantaInfo(santaInfoData)
+    }
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        const updated = await updateWishlist(wishListUrl)
+
+        if (updated) {
+            notify('Вишлсит обновлен', 'success')
+        } else {
+            notify('Не удалось обновить вишлист, все вопросы к админу', 'error')
+        }
+    }
+
+    useEffect(() => {
+        fetchSecretSanta()
+    }, [])
+
     return (
         <>
             <CenteredContainer>
@@ -9,11 +38,33 @@ function SecretSanta() {
                 <p className="mainText">
                     Тут вы сможете узнать кому вы дарите свой подарок, а так же увидеть его вишлист, если он его добавит. Вы тоже сможете добавить свой вишлист, если захотите, чтобы ваш санта его видел!
                     <br/><br/>
-                    Таблица в производстве... Ожидайте к <b>середине-концу ноября</b>
+                    <h3>Добавить свой вишлист</h3>
+                    <form onSubmit={handleSubmit}>
+                        <div>
+                            <label>
+                                Ссылка на вишлист:
+                                <input
+                                    type="url"
+                                    value={wishListUrl}
+                                    onChange={(e) => setWishListUrl(e.target.value)}
+                                    required
+                                />
+                            </label>
+                        </div>
+                        <button type="submit">
+                            {'Отправить'}
+                        </button>
+                    </form>
+                    <p>Вы санта для Пятки: <b>{santaInfo?.santa_to}</b></p> 
+                    {santaInfo?.wishlist ? (
+                      <h4>Пятка оставила вам <a href={santaInfo.wishlist}>вишлсит</a></h4>
+                    ): (
+                        <h4>Пятка не оставила вам вишлист, используйте свое воображение. Либо ждите пока добавит....</h4>
+                    )}
                 </p>
             </CenteredContainer>
         </>
     )
 }
 
-export default SecretSanta;
+export default SecretSanta;