fetch landing data

src/__stubs__/landing-data.json

@@ -1,38 +0,0 @@
-[
-  {
-    "id": "0.9212559272707432",
-    "title": "Рик Санчез",
-    "subTitle": "Главный герой",
-    "body": "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
-    "image": "rick",
-    "link": "https://en.wikipedia.org/wiki/Rick_Sanchez"
-  },
-  {
-    "id": "0.44732992281434125",
-    "title": "Морти Смит",
-    "subTitle": "Внук Рика",
-    "body": "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
-    "image": "morty",
-    "link": "https://en.wikipedia.org/wiki/morty"
-  },
-  {
-    "id": "0.9858955616085823",
-    "title": "Бет Смит",
-    "subTitle": "Мать Морти",
-    "body": "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
-    "image": "beth",
-    "link": "https://en.wikipedia.org/wiki/beth"
-  },
-  {
-    "id": "0.1590784370756242",
-    "title": "Джерри Смит",
-    "subTitle": "Отец Морти",
-    "body": "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
-    "image": "jerry",
-    "link": "https://en.wikipedia.org/wiki/beth"
-  },
-  {
-    "id": "0.29021795027285324",
-    "body": "Семья Смитов - это только часть персонажей, представленных в сериале \"Rick and Morty\". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир \"Rick and Morty\"!"
-  }
-]

src/components/button/button.style.ts

@@ -7,5 +7,5 @@ export const ButtonStyled = styled.button`
   border-radius: 5px;
   background-image: var(--gradient-cucumber);
   color: white;
-  font-size: 12px;
+  font-size: 26px;
 `;

src/components/error-boundary.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export class ErrorBoundary extends React.Component {
+  state = {
+    error: false
+  }
+
+  static getDerivedStateFromError() {
+    return {
+      error: true
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return <h1>Something went wrong.</h1>
+    }
+
+    return this.props.children
+  }
+}

src/components/field/field.tsx

@@ -2,13 +2,13 @@ import React from "react";
 
 import { FieldInput, FieldLabel, FieldWrapper } from "./field.style";
 
-export const InputField = ({ id, placeHolder, value, label }) => {
+export const InputField = ({ id, placeHolder, value, label, onChange, inputRef }) => {
   return (
     <FieldWrapper>
       <FieldLabel htmlFor={id}>
         {label}
       </FieldLabel>
-      <FieldInput id={id} type="text" placeholder={placeHolder} value={value} />
+      <FieldInput ref={inputRef} id={id} type="text" placeholder={placeHolder} value={value} onChange={onChange} />
     </FieldWrapper>
   );
 };

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,
@@ -23,30 +24,40 @@ import {
 } from "./style";
 
 export const LandingPage = () => {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    fetch('/api/landing-data')
+    .then(response => response.json())
+    .then(data => {
+      setData(data.data)
+    })
+  }, [])
+
   return (
     <>
-      <PageHeader>
-        <Logo
-          height="44px"
-          width="227"
-          src={logo4x}
-          alt="Логотип. Надпись Рик и Морти"
-          srcSet={`
+      <ErrorBoundary>
+        <PageHeader>
+          <Logo
+            height="44px"
+            width="227"
+            src={logo4x}
+            alt="Логотип. Надпись Рик и Морти"
+            srcSet={`
             ${logo} 220w,
             ${logo2x} 445w,
             ${logo4x} 880w,
           `}
-          sizes="
+            sizes="
           (max-width: 240px) 100px,
           (min-width: 320px) 440px,
           (min-width: 520px) 880px
         "
-        />
-        <NavPanel currentNavElement={'Home'} />
-      </PageHeader>
-
+          />
+          <NavPanel currentNavElement={"Home"} />
+        </PageHeader>
+      </ErrorBoundary>
       <Main>
-        <MainCardWrapper as="header">
+        {/* <MainCardWrapper as="header">
           <MainCardText>
             <Header1>
               Персонажи из <br />
@@ -63,22 +74,65 @@ export const LandingPage = () => {
             </MainCardTextP>
           </MainCardText>
           <MainCardImg src={cucumber} alt="" />
-        </MainCardWrapper>
-        {data.map((item, index) => (
-          <Card
-            directionReverse={index % 2 === 0}
-            key={item.id}
-            title={item.title}
-            image={item.image}
-            link={item.link}
-            subTitle={item.subTitle}
-          >
-            {item.body}
-          </Card>
-        ))}
+        </MainCardWrapper> */}
+        <ErrorBoundary>
+          <Cards cards={data} />
+        </ErrorBoundary>
       </Main>
 
       <PageFooter></PageFooter>
     </>
   );
 };
+
+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={card.id}
+      title={card.title}
+      image={card.image}
+      link={card.link}
+      subTitle={card.subTitle}
+    >
+      {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";
@@ -6,6 +6,9 @@ import logo from "../assets/logo_1x.png";
 import logo2x from "../assets/logo_2x.png";
 import logo4x from "../assets/logo_4x.png";
 import { NavPanel } from "../components/nav-panel";
+import { Header1 } from "../components/common";
+import { InputField } from "../components/field/field";
+import { URLs } from "../__data__/urls";
 
 import {
   BrandText,
@@ -19,11 +22,29 @@ import {
   SearchButton,
   SearchForm,
 } from "./style";
-import { Header1 } from "../components/common";
-import { InputField } from "../components/field/field";
-import { URLs } from "../__data__/urls";
 
 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>
     </>
   );

src/routes.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
-import { Routes, Route } from'react-router-dom';
+import React from "react";
+import { Routes, Route } from "react-router-dom";
 
-import { URLs } from './__data__/urls';
-import { LandingPage } from './pages/landing';
-import { SearchCharacterPage } from './pages/search-character';
+import { URLs } from "./__data__/urls";
+import { LandingPage } from "./pages/landing";
+import { SearchCharacterPage } from "./pages/search-character";
+import { ErrorBoundary } from "./components/error-boundary";
 
 export const PageRoutes = () => (
-  <Routes>
-    <Route path={URLs.ui.charDetail.url} element={<LandingPage />} />
-    <Route path={URLs.baseUrl} element={<LandingPage />} />
-    {URLs.ui.search && <Route path={URLs.ui.search} element={<SearchCharacterPage />} />}
+  <ErrorBoundary>
+    <Routes>
+      <Route path={URLs.ui.charDetail.url} element={<LandingPage />} />
+      <Route path={URLs.baseUrl} element={<LandingPage />} />
+      {URLs.ui.search && (
+        <Route path={URLs.ui.search} element={<SearchCharacterPage />} />
+      )}
 
-    <Route path="*" element={<h1>Page not found</h1>} />
-  </Routes>
-)
+      <Route path="*" element={<h1>Page not found</h1>} />
+    </Routes>
+  </ErrorBoundary>
+);

stubs/api/index.js

@@ -1,3 +1,7 @@
 const router = require('express').Router();
 
+router.get('/landing-data', (request, response) => {
+  response.send(require('../json/landing-data/success.json'))
+})
+
 module.exports = router;

stubs/json/landing-data/success.json

@@ -0,0 +1,40 @@
+{
+  "data": [
+    {
+      "id": "0.9212559272707432",
+      "title": "Рик Санчез",
+      "subTitle": "Главный герой",
+      "body": "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
+      "image": "rick",
+      "link": "https://en.wikipedia.org/wiki/Rick_Sanchez"
+    },
+    {
+      "id": "0.44732992281434125",
+      "title": "Морти Смит",
+      "subTitle": "Внук Рика",
+      "body": "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
+      "image": "morty",
+      "link": "https://en.wikipedia.org/wiki/morty"
+    },
+    {
+      "id": "0.9858955616085823",
+      "title": "Бет Смит",
+      "subTitle": "Мать Морти",
+      "body": "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
+      "image": "beth",
+      "link": "https://en.wikipedia.org/wiki/beth"
+    },
+    {
+      "id": "0.1590784370756242",
+      "title": "Джерри Смит",
+      "subTitle": "Отец Морти",
+      "body": "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
+      "image": "jerry",
+      "link": "https://en.wikipedia.org/wiki/beth"
+    },
+    {
+      "id": "0.29021795027285324",
+      "body": "Семья Смитов - это только часть персонажей, представленных в сериале \"Rick and Morty\". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир \"Rick and Morty\"!"
+    }
+  ]  
+}