fetch landing data

src/pages/landing.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-import data from "../__stubs__/landing-data.json";
 import { NavPanel } from "../components/nav-panel";
 import logo from "../assets/logo_1x.png";
 import cucumber from "../assets/cucumber.png";
@@ -9,6 +8,8 @@ import logo4x from "../assets/logo_4x.png";
 import { Link } from "../components/link";
 import { Card } from "../components/card";
 import { Header1 } from "../components/common";
+import { ErrorBoundary } from "../components/error-boundary";
+import { Button } from "../components/button";
 
 import {
   BrandText,
@@ -21,9 +22,17 @@ import {
   PageFooter,
   PageHeader,
 } from "./style";
-import { ErrorBoundary } from "../components/error-boundary";
 
 export const LandingPage = () => {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    fetch('/api/landing-data')
+    .then(response => response.json())
+    .then(data => {
+      setData(data.data)
+    })
+  }, [])
+
   return (
     <>
       <ErrorBoundary>
@@ -48,7 +57,7 @@ export const LandingPage = () => {
         </PageHeader>
       </ErrorBoundary>
       <Main>
-        <MainCardWrapper as="header">
+        {/* <MainCardWrapper as="header">
           <MainCardText>
             <Header1>
               Персонажи из <br />
@@ -65,8 +74,10 @@ export const LandingPage = () => {
             </MainCardTextP>
           </MainCardText>
           <MainCardImg src={cucumber} alt="" />
-        </MainCardWrapper>
-        <ErrorBoundary><Cards /></ErrorBoundary>
+        </MainCardWrapper> */}
+        <ErrorBoundary>
+          <Cards cards={data} />
+        </ErrorBoundary>
       </Main>
 
       <PageFooter></PageFooter>
@@ -74,16 +85,54 @@ export const LandingPage = () => {
   );
 };
 
-const Cards = () =>
-  data.map((item, index) => (
+const Cards = ({ cards }) => {
+  // const [value, setValue] = useState(0);
+  // const card = cards[value];
+
+  // const handleNextClick = () => {
+  //   setValue(prevValue => (prevValue + 1) % cards.length);
+  // };
+
+  // const handleBackClick = () => {
+  //   setValue((value) => (value - 1 + cards.length) % cards.length);
+  // }
+
+  // return (
+  //   <>
+  //     <div
+  //       style={{
+  //         marginTop: 24,
+  //         display: "flex",
+  //         justifyContent: "space-between",
+  //         fontSize: "26px",
+  //         padding: 10,
+  //       }}
+  //     >
+  //       <Button style={{ visibility: value === 0 ? 'hidden' : 'visible' }} onClick={handleBackClick}>Назад</Button>
+  //       {value !== cards.length - 1 && <Button onClick={handleNextClick}>Вперёд</Button>}
+  //     </div>
+  //     <Card
+  //       directionReverse={value % 2 === 0}
+  //       key={card.id}
+  //       title={card.title}
+  //       image={card.image}
+  //       link={card.link}
+  //       subTitle={card.subTitle}
+  //     >
+  //       {card.body}
+  //     </Card>
+  //   </>
+  // );
+  return cards.map((card, index) => (
     <Card
       directionReverse={index % 2 === 0}
-      key={item.id}
-      title={item.title}
-      image={item.image}
-      link={item.link}
-      subTitle={item.subTitle}
+      key={card.id}
+      title={card.title}
+      image={card.image}
+      link={card.link}
+      subTitle={card.subTitle}
     >
-      {item.body}
+      {card.body}
     </Card>
   ));
+};

src/pages/search-character.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Link as Connectedlink } from "react-router-dom";
 
 import data from "../__stubs__/characters.json";
@@ -24,6 +24,27 @@ import {
 } from "./style";
 
 export const SearchCharacterPage = () => {
+  const [searchValue, setSearchValue] = useState("");
+  const [searchValueError, setSearchValueError] = useState(false);
+  const searchInputRef = useRef<any>();
+
+  useEffect(() => {
+    searchInputRef.current.focus();
+  }, []);
+
+  useEffect(() => {
+    if (/\d/.test(searchValue)) {
+      setSearchValueError(true)
+    } else {
+      setSearchValueError(false)
+    }
+  }, [searchValue])
+
+  const handleSearchChange = (e) => {
+    const value = e.currentTarget.value;
+    setSearchValue(value);
+  };
+
   return (
     <>
       <PageHeader>
@@ -51,11 +72,18 @@ export const SearchCharacterPage = () => {
             <BrandText>Поиск</BrandText> персонажей
           </Header1>
           <SearchForm>
-            <InputField label="Поиск" placeHolder="Напишите имя для поиска" />
+            <InputField
+              inputRef={searchInputRef}
+              onChange={handleSearchChange}
+              value={searchValue}
+              label="Поиск"
+              placeHolder="Напишите имя для поиска"
+            />
+            {searchValueError && <span style={{ color: 'red', display: 'flex'}}>Ай яй</span>}
             <SearchButton>Поиск</SearchButton>
           </SearchForm>
         </MainCardWrapper>
-        <CharacterList>
+        {/* <CharacterList>
           {data?.map((char) => (
             <Connectedlink to={URLs.ui.charDetail.getUrl(char.id)}>
               <CharacterItem key={char.id}>
@@ -64,7 +92,7 @@ export const SearchCharacterPage = () => {
               </CharacterItem>
             </Connectedlink>
           ))}
-        </CharacterList>
+        </CharacterList> */}
       </Main>
     </>
   );