inno-js/rick-and-morty
inno-js/rick-and-morty
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects 1 Releases Wiki Activity

Compare commits

base: inno-js:d435ec06be6c65c6efca7095b7a649486e36f7bf
Branches Tags
inno-js:main
inno-js:feature/avatar
inno-js:feature/landing-main-blocks
inno-js:master
inno-js:pre-05
inno-js:v2.0.0
inno-js:v1.1.0
inno-js:v1.0.0
..
compare: inno-js:bae7e174444bba9a0240436e2e269a42ecf2231c
Branches Tags
inno-js:feature/avatar
inno-js:main
inno-js:feature/landing-main-blocks
inno-js:master
inno-js:pre-05
inno-js:v2.0.0
inno-js:v1.1.0
inno-js:v1.0.0

No commits in common. "d435ec06be6c65c6efca7095b7a649486e36f7bf" and "bae7e174444bba9a0240436e2e269a42ecf2231c" have entirely different histories.
d435ec06be ... bae7e17444

9 changed files with 88 additions and 202 deletions
Show Stats Expand all files Collapse all files

38
src/__stubs__/landing-data.json Normal file
View File

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

2
src/components/button/button.style.ts
View File

@ -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;
`;

21
src/components/error-boundary.tsx
View File

@ -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
}
}

4
src/components/field/field.tsx
View File

@ -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>
);
};

110
src/pages/landing.tsx
View File

@ -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>
<Logo
height="44px"
width="227"
src={logo4x}
alt="Логотип. Надпись Рик и Морти"
srcSet={`
<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>
</ErrorBoundary>
/>
<NavPanel currentNavElement={'Home'} />
</PageHeader>
<Main>
{/* <MainCardWrapper as="header">
<MainCardWrapper as="header">
<MainCardText>
<Header1>
Персонажи из <br />
@ -74,65 +63,22 @@ export const LandingPage = () => {
</MainCardTextP>
</MainCardText>
<MainCardImg src={cucumber} alt="" />
</MainCardWrapper> */}
<ErrorBoundary>
<Cards cards={data} />
</ErrorBoundary>
</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>
))}
</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>
));
};

42
src/pages/search-character.tsx
View File

@ -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
inputRef={searchInputRef}
onChange={handleSearchChange}
value={searchValue}
label="Поиск"
placeHolder="Напишите имя для поиска"
/>
{searchValueError && <span style={{ color: 'red', display: 'flex'}}>Ай яй</span>}
<InputField label="Поиск" placeHolder="Напишите имя для поиска" />
<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>
</>
);

29
src/routes.tsx
View File

@ -1,21 +1,16 @@
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 { ErrorBoundary } from "./components/error-boundary";
import { URLs } from './__data__/urls';
import { LandingPage } from './pages/landing';
import { SearchCharacterPage } from './pages/search-character';
export const PageRoutes = () => (
<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 />} />
)}
<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>
</ErrorBoundary>
);
<Route path="*" element={<h1>Page not found</h1>} />
</Routes>
)

4
stubs/api/index.js
View File

@ -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;

40
stubs/json/landing-data/success.json
View File

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