shortened the code of the "TitleInfo.tsx" component

GGO-web · Sep 23, 2023 · 21f39cc · 21f39cc
1 parent 3966910
commit 21f39cc
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -309,7 +309,7 @@ export const MOBILE_POINT = 769;
 export const MOBILE_SMALL_POINT = 480;
 
 export interface ICurrentAnime {
-  name: string;
+  [name: string]: any;
   image: string;
   rating: number;
   year: number;
@@ -375,3 +375,18 @@ export const DESCRIPTION_ANIME = {
   paragraph:
     'Між живим і мертвим світом дуже тонка грань. Нерідко породження пекла порушують цю межу. Вони проникають в тіла в чоловіків, жінок і навіть дітей, починаючи творити щось жахливе. Окультист і мисливець за усілякою нечистю Джон Костянтин не зовсім звичайна людина. На ньому лежить жахлива печать самогубці. Джон побував на тому світі і зміг повернутися в нормальне життя. Тепер за сюжетом мультсеріалу "Костянтин" він володіє древніми знаннями, які допомагають йому відправляти демонів назад у пекло. Людям він допомагає позбутися від темної сутності, проводячи необхідні обряди екзорцизму.\n Звичайно у Джона є маса недоліків. Він багато курить, що негативно позначається на його здоров\'ї. Однак безвідмовний дробовик завжди з ним. Темні сили природно бажають з ним розправитися. Вони придумують різні витончені способи знищити Костянтина. У цій боротьбі мисливцеві допомагає гострий розум і чудове знання свого супротивника. Часто доводиться діяти одному, оскільки навіть кохана дівчина не зовсім розуміє Джона.'
 };
+
+export interface ITitleInfo {
+  id: string;
+  characteristic: string;
+  [key: string]: any;
+}
+
+export const TITLE_INFO: ITitleInfo[] = [
+  { id: v4(), characteristic: 'Рік виходу:', key: 'year' },
+  { id: v4(), characteristic: 'Країна:', key: 'country' },
+  { id: v4(), characteristic: 'Жанр:', key: 'genre' },
+  { id: v4(), characteristic: 'Режисер:', key: 'producer' },
+  { id: v4(), characteristic: 'Актори:', key: 'actors' },
+  { id: v4(), characteristic: 'Озвучення:', key: 'subtitles' }
+];
diff --git a/src/pages/Title/components/TitleInfo/TitleInfo.tsx b/src/pages/Title/components/TitleInfo/TitleInfo.tsx
@@ -1,9 +1,9 @@
+import React from 'react';
+
 import { FlexGroup } from '@components/FlexGroup/FlexGroup';
 import { Heading } from '@components/Heading/Heading';
 import { Paragraph } from '@components/Paragraph/Paragraph';
-import React from 'react';
-import { ICurrentAnime } from 'src/constants';
-import { NextSeasons } from '../NextSeasons/NextSeasons';
+import { ICurrentAnime, TITLE_INFO } from '../../../../constants';
 
 export const TitleInfo = ({ anime }: { anime: ICurrentAnime }) => {
   return (
@@ -26,29 +26,17 @@ export const TitleInfo = ({ anime }: { anime: ICurrentAnime }) => {
 
         <div className="title-info__description pb-[28px] mt-[48px]">
           <FlexGroup gap={28} column>
-            <Paragraph>
-              <strong>Рік виходу:</strong> {anime.year}
-            </Paragraph>
-
-            <Paragraph>
-              <strong>Країна:</strong> {anime.country}
-            </Paragraph>
-
-            <Paragraph>
-              <strong>Жанр:</strong> {anime.genre}
-            </Paragraph>
-
-            <Paragraph>
-              <strong>Режисер:</strong> {anime.producer}
-            </Paragraph>
-
-            <Paragraph>
-              <strong>Актори:</strong> {anime.actors}
-            </Paragraph>
+            {TITLE_INFO.map((item) => {
+              const showSubtitles =
+                item.key === 'subtitles' && item.key ? 'Субтитри' : '-';
 
-            <Paragraph>
-              <strong>Озвучення:</strong> {anime.subtitles ? 'Субтитри' : '-'}
-            </Paragraph>
+              return (
+                <Paragraph key={item.id}>
+                  <strong>{item.characteristic}</strong>{' '}
+                  {item.key !== 'subtitles' ? anime[item.key] : showSubtitles}
+                </Paragraph>
+              );
+            })}
           </FlexGroup>
         </div>
       </main>