fetch landing data

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-05-11 14:39:59 +03:00
parent c70b0e7236
commit d435ec06be
7 changed files with 142 additions and 59 deletions

View File

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

View File

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

View File

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

View File

@ -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 { NavPanel } from "../components/nav-panel";
import logo from "../assets/logo_1x.png"; import logo from "../assets/logo_1x.png";
import cucumber from "../assets/cucumber.png"; import cucumber from "../assets/cucumber.png";
@ -9,6 +8,8 @@ import logo4x from "../assets/logo_4x.png";
import { Link } from "../components/link"; import { Link } from "../components/link";
import { Card } from "../components/card"; import { Card } from "../components/card";
import { Header1 } from "../components/common"; import { Header1 } from "../components/common";
import { ErrorBoundary } from "../components/error-boundary";
import { Button } from "../components/button";
import { import {
BrandText, BrandText,
@ -21,9 +22,17 @@ import {
PageFooter, PageFooter,
PageHeader, PageHeader,
} from "./style"; } from "./style";
import { ErrorBoundary } from "../components/error-boundary";
export const LandingPage = () => { export const LandingPage = () => {
const [data, setData] = useState([])
useEffect(() => {
fetch('/api/landing-data')
.then(response => response.json())
.then(data => {
setData(data.data)
})
}, [])
return ( return (
<> <>
<ErrorBoundary> <ErrorBoundary>
@ -48,7 +57,7 @@ export const LandingPage = () => {
</PageHeader> </PageHeader>
</ErrorBoundary> </ErrorBoundary>
<Main> <Main>
<MainCardWrapper as="header"> {/* <MainCardWrapper as="header">
<MainCardText> <MainCardText>
<Header1> <Header1>
Персонажи из <br /> Персонажи из <br />
@ -65,8 +74,10 @@ export const LandingPage = () => {
</MainCardTextP> </MainCardTextP>
</MainCardText> </MainCardText>
<MainCardImg src={cucumber} alt="" /> <MainCardImg src={cucumber} alt="" />
</MainCardWrapper> </MainCardWrapper> */}
<ErrorBoundary><Cards /></ErrorBoundary> <ErrorBoundary>
<Cards cards={data} />
</ErrorBoundary>
</Main> </Main>
<PageFooter></PageFooter> <PageFooter></PageFooter>
@ -74,16 +85,54 @@ export const LandingPage = () => {
); );
}; };
const Cards = () => const Cards = ({ cards }) => {
data.map((item, index) => ( // 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 <Card
directionReverse={index % 2 === 0} directionReverse={index % 2 === 0}
key={item.id} key={card.id}
title={item.title} title={card.title}
image={item.image} image={card.image}
link={item.link} link={card.link}
subTitle={item.subTitle} subTitle={card.subTitle}
> >
{item.body} {card.body}
</Card> </Card>
)); ));
};

View File

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

View File

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

View File

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