src/__stubs__/landing-data.json

@@ -0,0 +1,38 @@
+[
+  {
+    "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: 26px;
+  font-size: 12px;
 `;

src/components/error-boundary.tsx

@@ -1,21 +0,0 @@
-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, onChange, inputRef }) => {
+export const InputField = ({ id, placeHolder, value, label }) => {
   return (
     <FieldWrapper>
       <FieldLabel htmlFor={id}>
         {label}
       </FieldLabel>
-      <FieldInput ref={inputRef} id={id} type="text" placeholder={placeHolder} value={value} onChange={onChange} />
+      <FieldInput id={id} type="text" placeholder={placeHolder} value={value} />
     </FieldWrapper>
   );
 };

src/pages/landing.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React 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";
@@ -8,8 +9,6 @@ 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,
@@ -24,40 +23,30 @@ 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 (
     <>
-      <ErrorBoundary>
+      <PageHeader>
-        <PageHeader>
+        <Logo
-          <Logo
+          height="44px"
-            height="44px"
+          width="227"
-            width="227"
+          src={logo4x}
-            src={logo4x}
+          alt="Логотип. Надпись Рик и Морти"
-            alt="Логотип. Надпись Рик и Морти"
+          srcSet={`
-            srcSet={`
             ${logo} 220w,
             ${logo2x} 445w,
             ${logo4x} 880w,
           `}
-            sizes="
+          sizes="
           (max-width: 240px) 100px,
           (min-width: 320px) 440px,
           (min-width: 520px) 880px
         "
-          />
+        />
-          <NavPanel currentNavElement={"Home"} />
+        <NavPanel currentNavElement={'Home'} />
-        </PageHeader>
+      </PageHeader>
-      </ErrorBoundary>
+
       <Main>
-        {/* <MainCardWrapper as="header">
+        <MainCardWrapper as="header">
           <MainCardText>
             <Header1>
               Персонажи из <br />
@@ -74,65 +63,22 @@ export const LandingPage = () => {
             </MainCardTextP>
           </MainCardText>
           <MainCardImg src={cucumber} alt="" />
-        </MainCardWrapper> */}
+        </MainCardWrapper>
-        <ErrorBoundary>
+        {data.map((item, index) => (
-          <Cards cards={data} />
+          <Card
-        </ErrorBoundary>
+            directionReverse={index % 2 === 0}
+            key={item.id}
+            title={item.title}
+            image={item.image}
+            link={item.link}
+            subTitle={item.subTitle}
+          >
+            {item.body}
+          </Card>
+        ))}
       </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, { useEffect, useState, useRef } from "react";
+import React from "react";
 import { Link as Connectedlink } from "react-router-dom";
 
 import data from "../__stubs__/characters.json";
@@ -6,9 +6,6 @@ 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,
@@ -22,29 +19,11 @@ 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>
@@ -72,18 +51,11 @@ export const SearchCharacterPage = () => {
             <BrandText>Поиск</BrandText> персонажей
           </Header1>
           <SearchForm>
-            <InputField
+            <InputField label="Поиск" placeHolder="Напишите имя для поиска" />
-              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}>
@@ -92,7 +64,7 @@ export const SearchCharacterPage = () => {
               </CharacterItem>
             </Connectedlink>
           ))}
-        </CharacterList> */}
+        </CharacterList>
       </Main>
     </>
   );

src/routes.tsx

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

stubs/api/index.js

@@ -1,7 +1,3 @@
 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

@@ -1,40 +0,0 @@
-{
-  "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\"!"
-    }
-  ]  
-}