From d435ec06be6c65c6efca7095b7a649486e36f7bf Mon Sep 17 00:00:00 2001 From: primakov Date: Sat, 11 May 2024 14:39:59 +0300 Subject: [PATCH] fetch landing data --- src/__stubs__/landing-data.json | 38 ------------- src/components/button/button.style.ts | 2 +- src/components/field/field.tsx | 4 +- src/pages/landing.tsx | 77 ++++++++++++++++++++++----- src/pages/search-character.tsx | 36 +++++++++++-- stubs/api/index.js | 4 ++ stubs/json/landing-data/success.json | 40 ++++++++++++++ 7 files changed, 142 insertions(+), 59 deletions(-) delete mode 100644 src/__stubs__/landing-data.json create mode 100644 stubs/json/landing-data/success.json diff --git a/src/__stubs__/landing-data.json b/src/__stubs__/landing-data.json deleted file mode 100644 index 6ab8038..0000000 --- a/src/__stubs__/landing-data.json +++ /dev/null @@ -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\"!" - } -] diff --git a/src/components/button/button.style.ts b/src/components/button/button.style.ts index 1a0f093..02edeec 100644 --- a/src/components/button/button.style.ts +++ b/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; `; diff --git a/src/components/field/field.tsx b/src/components/field/field.tsx index bc43642..d973950 100644 --- a/src/components/field/field.tsx +++ b/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 ( {label} - + ); }; diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index d8ff653..7566781 100644 --- a/src/pages/landing.tsx +++ b/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 ( <> @@ -48,7 +57,7 @@ export const LandingPage = () => {
- + {/* Персонажи из
@@ -65,8 +74,10 @@ export const LandingPage = () => { - - + */} + + +
@@ -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 ( + // <> + //
+ // + // {value !== cards.length - 1 && } + //
+ // + // {card.body} + // + // + // ); + return cards.map((card, index) => ( - {item.body} + {card.body} )); +}; diff --git a/src/pages/search-character.tsx b/src/pages/search-character.tsx index e04b1a4..a82ef77 100644 --- a/src/pages/search-character.tsx +++ b/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(); + + 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 ( <> @@ -51,11 +72,18 @@ export const SearchCharacterPage = () => { Поиск персонажей - + + {searchValueError && Ай яй} Поиск - + {/* {data?.map((char) => ( @@ -64,7 +92,7 @@ export const SearchCharacterPage = () => { ))} - + */} ); diff --git a/stubs/api/index.js b/stubs/api/index.js index d2cd565..538fa11 100644 --- a/stubs/api/index.js +++ b/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; diff --git a/stubs/json/landing-data/success.json b/stubs/json/landing-data/success.json new file mode 100644 index 0000000..bb4fd53 --- /dev/null +++ b/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\"!" + } + ] +}