post stubs example

src/pages/search-character.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
-import { Link as Connectedlink } from "react-router-dom";
+import { Link as Connectedlink, useNavigate } from "react-router-dom";
 
 import data from "../__stubs__/characters.json";
 import logo from "../assets/logo_1x.png";
@@ -27,6 +27,7 @@ export const SearchCharacterPage = () => {
   const [searchValue, setSearchValue] = useState("");
   const [searchValueError, setSearchValueError] = useState(false);
   const searchInputRef = useRef<any>();
+  const nav = useNavigate()
 
   useEffect(() => {
     searchInputRef.current.focus();
@@ -45,6 +46,30 @@ export const SearchCharacterPage = () => {
     setSearchValue(value);
   };
 
+  const handleSubmitSearchFrom = (event) => {
+    event.preventDefault();
+
+    fetch(`${URLs.api.main}/search`, {
+      method: 'POST',
+      body: JSON.stringify({
+        search: searchValue
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    .then((response) => response.json())
+    .then((data) => {
+      const isAlive = data.data[0].status === "alive";
+
+      if (isAlive) {
+        nav(URLs.baseUrl)
+      } else {
+        nav(URLs.ui.charDetail.getUrl(data.data[0].id))
+      }
+    })
+  }
+
   return (
     <>
       <PageHeader>
@@ -71,7 +96,7 @@ export const SearchCharacterPage = () => {
           <Header1>
             <BrandText>Поиск</BrandText> персонажей
           </Header1>
-          <SearchForm>
+          <SearchForm onSubmit={handleSubmitSearchFrom}>
             <InputField
               inputRef={searchInputRef}
               onChange={handleSearchChange}
@@ -80,7 +105,7 @@ export const SearchCharacterPage = () => {
               placeHolder="Напишите имя для поиска"
             />
             {searchValueError && <span style={{ color: 'red', display: 'flex'}}>Ай яй</span>}
-            <SearchButton>Поиск</SearchButton>
+            <SearchButton type="submit">Поиск</SearchButton>
           </SearchForm>
         </MainCardWrapper>
         <CharacterList>