implement wihslist and secret santa

frontend/src/components/SecretSanta.tsx

@@ -1,14 +1,14 @@
 import CenteredContainer from "./ChildrenContainer";
 import useFetchUser from "../utils/fetchUser.tsx"
 import type { SantaInfo } from "../types/index";
-import { useEffect, useState } from "react";
+import { 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 [santaInfo, setSantaInfo] = useState<SantaInfo | null>(null)
+    const [wishListUrl, setWishListUrl] = useState('')
 
     const notify = useNotification();
 
@@ -27,18 +27,25 @@ function SecretSanta() {
         }
     }
 
-    useEffect(() => {
-        fetchSecretSanta()
-    }, [])
-
     return (
         <>
             <CenteredContainer>
                 <h2>Secret Santa</h2>
                 <p className="mainText">
-                    Тут вы сможете узнать кому вы дарите свой подарок, а так же увидеть его вишлист, если он его добавит. Вы тоже сможете добавить свой вишлист, если захотите, чтобы ваш санта его видел!
-                    <br/><br/>
-                    <h3>Добавить свой вишлист</h3>
+                    {santaInfo ? (
+                        <>
+                            <p>Вы санта для Пятки: <b>{santaInfo.santa_to}</b></p>
+                            {santaInfo.wishlist ? (
+                                <h4>Пятка оставила вам <a href={santaInfo.wishlist}>вишлист</a></h4>
+                            ) : (
+                                <h4>Пятка не оставила вам вишлист, используйте свое воображение. Либо ждите, пока добавит...</h4>
+                            )}
+                        </>
+                    ) : (
+                        <button type="submit" onClick={fetchSecretSanta}>Показать чей я Санта!</button>
+                    )}
+                    <hr style={{ color: 'white'}}/>
+                    <b>Добавить свой вишлист</b>
                     <form onSubmit={handleSubmit}>
                         <div>
                             <label>
@@ -50,17 +57,13 @@ function SecretSanta() {
                                     required
                                 />
                             </label>
+                            <button type="submit" style={{ margin: '20px 0.5em' }}>
+                                {'Отправить'}
+                            </button>
                         </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>
         </>