post stubs example

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-05-18 14:41:38 +03:00
parent 0f3ddfb9f5
commit 2ce27bf8de
6 changed files with 94 additions and 5 deletions

View File

@ -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} />;
};

View File

@ -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>

View File

@ -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;

View File

@ -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"
}
]
}

View File

@ -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"
}
]
}

View File

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