post stubs example

src/components/button/button.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 import { ButtonStyled } from "./button.style";
 
-export const Button = (props: React.HtmlHTMLAttributes<HTMLButtonElement>) => {
+export const Button = (props: React.HtmlHTMLAttributes<HTMLButtonElement> & { type: "button" | "submit" | "reset" }) => {
   return <ButtonStyled {...props} />;
 };

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>

stubs/api/index.js

@@ -7,10 +7,20 @@ router.get("/landing-data", (request, response) => {
 router.post("/login", (req, res) => {
   const { username, password } = req.body;
   if (username === "admin") {
-    response.send(require("../json/landing-data/success.json"));
+    response.send(require("../json/user/sitter.success.json"));
   } else {
     response.send(require("../json/landing-data/success.json"));
   }
 });
 
+router.post('/search', (req, res) => {
+  const { search } = req.body;
+
+  if (search === "Morty") {
+    return res.send(require("../json/seach/alive.success.json"));
+  }
+
+  res.send(require("../json/seach/success.json"));
+})
+
 module.exports = router;

stubs/json/seach/alive.success.json

@@ -0,0 +1,24 @@
+{
+  "data": [
+    {
+      "id": 14,
+      "name": "Morty",
+      "status": "alive",
+      "species": "Alien",
+      "type": "",
+      "gender": "Male",
+      "origin": {
+        "name": "unknown",
+        "url": ""
+      },
+      "location": {
+        "name": "Citadel of Ricks",
+        "url": "https://rickandmortyapi.com/api/location/3"
+      },
+      "image": "https://rickandmortyapi.com/api/character/avatar/14.jpeg",
+      "episode": ["https://rickandmortyapi.com/api/episode/10"],
+      "url": "https://rickandmortyapi.com/api/character/14",
+      "created": "2017-11-04T20:51:31.373Z"
+    }
+  ]
+}

stubs/json/seach/success.json

@@ -0,0 +1,24 @@
+{
+  "data": [
+    {
+      "id": 14,
+      "name": "Alien Morty",
+      "status": "unknown",
+      "species": "Alien",
+      "type": "",
+      "gender": "Male",
+      "origin": {
+        "name": "unknown",
+        "url": ""
+      },
+      "location": {
+        "name": "Citadel of Ricks",
+        "url": "https://rickandmortyapi.com/api/location/3"
+      },
+      "image": "https://rickandmortyapi.com/api/character/avatar/14.jpeg",
+      "episode": ["https://rickandmortyapi.com/api/episode/10"],
+      "url": "https://rickandmortyapi.com/api/character/14",
+      "created": "2017-11-04T20:51:31.373Z"
+    }
+  ]
+}

stubs/json/user/sitter.success.json

@@ -0,0 +1,6 @@
+{
+  "data": {
+    "role": "sitter",
+    
+  }
+}