feat: add articles list

.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'error',
     'no-param-reassign': 'off',
     'no-undef': 'off',
+    'react/no-array-index-key': 'off',
   },
   globals: {
     __IS_DEV__: true,

extractedTranslations/en/articles.json

@@ -1,7 +1,10 @@
 {
+  "": "",
   "ArticleDetails": "",
   "Комментарии": "",
+  "Назад к списку": "",
   "Произошла ошибка при загрузке статьи": "",
   "Список статей": "",
-  "Статья не найдена": ""
+  "Статья не найдена": "",
+  "Читать далее": ""
 }

extractedTranslations/en/translation.json

@@ -23,6 +23,7 @@
   "Имя пользователя": "Имя пользователя",
   "Комментарии": "Комментарии",
   "Комментарии отсутствуют": "Комментарии отсутствуют",
+  "Назад к списку": "Назад к списку",
   "Неверный логин или пароль": "Неверный логин или пароль",
   "Некорректная страна": "",
   "Некорректные данные": "",
@@ -51,5 +52,6 @@
   "Страна": "Страна",
   "Страница не найдена": "Страница не найдена",
   "Форма авторизации": "Форма авторизации",
+  "Читать далее": "Читать далее",
   "Язык": "Язык"
 }

extractedTranslations/ru/translation.json

@@ -23,6 +23,7 @@
   "Имя пользователя": "Имя пользователя",
   "Комментарии": "Комментарии",
   "Комментарии отсутствуют": "Комментарии отсутствуют",
+  "Назад к списку": "Назад к списку",
   "Неверный логин или пароль": "Неверный логин или пароль",
   "Некорректная страна": "Некорректная страна",
   "Некорректные данные": "Некорректные данные",
@@ -51,5 +52,6 @@
   "Страна": "Страна",
   "Страница не найдена": "Страница не найдена",
   "Форма авторизации": "Форма авторизации",
+  "Читать далее": "Читать далее",
   "Язык": "Язык"
 }

json-server/db.json

@@ -29,6 +29,7 @@
       "img": "https://teknotower.com/wp-content/uploads/2020/11/js.png",
       "views": 1022,
       "createdAt": "01.09.2023",
+      "userId": "1",
       "type": [
         "IT"
       ],

public/locales/en/articles.json

@@ -1,7 +1,8 @@
 {
-  "Список статей": "List of articles",
   "Статья не найдена": "Article not found",
   "Произошла ошибка при загрузке статьи": "An error occurred while loading the article",
   "Articles page": "Articles",
-  "Комментарии": "Comments"
+  "Комментарии": "Comments",
+  "Читать далее": "Read more...",
+  "Назад к списку": "Back"
 }

public/locales/ru/articles.json

@@ -1,7 +1,8 @@
 {
-  "Список статей": "Список статей",
   "Статья не найдена": "Статья не найдена",
   "Произошла ошибка при загрузке статьи": "Произошла ошибка при загрузке статьи",
   "Articles page": "Статьи",
-  "Комментарии": "Комментарии"
+  "Комментарии": "Комментарии",
+  "Читать далее": "Читать далее...",
+  "Назад к списку": "Назад к списку"
 }

src/app/styles/themes/dark.scss

@@ -12,4 +12,7 @@
 
   // code
   --code-bg: #1212a1;
+
+  // article card
+  --card-bg: #0d0d6b;
 }

src/app/styles/themes/light.scss

@@ -13,4 +13,7 @@
 
   // code
   --code-bg: #fff;
+
+  // article card
+  --card-bg: #d5d5d7;
 }

src/app/styles/themes/orange.scss

@@ -12,4 +12,7 @@
 
   // code
   --code-bg: #fff;
+
+  // article card
+  --card-bg: #d5d5d7;
 }

src/entities/Article/index.ts

@@ -1,8 +1,9 @@
 export { ArticleDetails } from './ui/ArticleDetails/ArticleDetails';
-export { Article } from './model/types/article';
+export { Article, ArticleView } from './model/types/article';
 export { ArticleDetailsSchema } from './model/types/articleDetailsSchema';
 export {
   getArticleDetails,
   getArticleDetailsIsLoading,
   getArticleDetailsError,
 } from './model/selectors/getArticleDetails/getArticleDetails';
+export { ArticleList } from './ui/ArticleList/ArticleList';

src/entities/Article/mocks/data.ts

@@ -0,0 +1,85 @@
+import { Article, ArticleBlockType, ArticleType } from '../model/types/article';
+
+export const article: Article = {
+  id: '1',
+  title: 'JavaScript news',
+  subtitle: 'Что нового в JS за 2023 год',
+  img: 'https://teknotower.com/wp-content/uploads/2020/11/js.png',
+  views: 1022,
+  createdAt: '01.09.2023',
+  user: {
+    id: '1',
+    username: 'admin',
+  },
+  type: [ArticleType.IT],
+  blocks: [
+    {
+      id: '1',
+      type: ArticleBlockType.TEXT,
+      title: 'Заголовок этого блока',
+      paragraphs: [
+        // eslint-disable-next-line max-len
+        'Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.',
+        // eslint-disable-next-line max-len
+        'JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.',
+        // eslint-disable-next-line max-len
+        'Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:',
+      ],
+    },
+    {
+      id: '4',
+      type: ArticleBlockType.CODE,
+      // eslint-disable-next-line max-len
+      code: '<!DOCTYPE html>\n<html>\n  <body>\n    <p id="hello"></p>\n\n    <script>\n      document.getElementById("hello").innerHTML = "Hello, world!";\n    </script>\n  </body>\n</html>;',
+    },
+    {
+      id: '5',
+      type: ArticleBlockType.TEXT,
+      title: 'Заголовок этого блока',
+      paragraphs: [
+        // eslint-disable-next-line max-len
+        'Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.',
+        // eslint-disable-next-line max-len
+        'Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:',
+      ],
+    },
+    {
+      id: '2',
+      type: ArticleBlockType.IMAGE,
+      src: 'https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png',
+      title: 'Рисунок 1 - скриншот сайта',
+    },
+    {
+      id: '3',
+      type: ArticleBlockType.CODE,
+      // eslint-disable-next-line max-len
+      code: "const path = require('path');\n\nconst server = jsonServer.create();\n\nconst router = jsonServer.router(path.resolve(__dirname, 'db.json'));\n\nserver.use(jsonServer.defaults({}));\nserver.use(jsonServer.bodyParser);",
+    },
+    {
+      id: '7',
+      type: ArticleBlockType.TEXT,
+      title: 'Заголовок этого блока',
+      paragraphs: [
+        // eslint-disable-next-line max-len
+        'JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.',
+        // eslint-disable-next-line max-len
+        'Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:',
+      ],
+    },
+    {
+      id: '8',
+      type: ArticleBlockType.IMAGE,
+      src: 'https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png',
+      title: 'Рисунок 1 - скриншот сайта',
+    },
+    {
+      id: '9',
+      type: ArticleBlockType.TEXT,
+      title: 'Заголовок этого блока',
+      paragraphs: [
+        // eslint-disable-next-line max-len
+        'JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.',
+      ],
+    },
+  ],
+};

src/entities/Article/model/types/article.ts

@@ -1,3 +1,5 @@
+import { User } from 'entities/User';
+
 export enum ArticleBlockType {
   TEXT = 'TEXT',
   CODE = 'CODE',
@@ -34,9 +36,15 @@ export enum ArticleType {
   ECONOMICS = 'ECONOMICS'
 }
 
+export enum ArticleView {
+  BIG = 'BIG',
+  SMALL = 'SMALL',
+}
+
 export interface Article {
   id: string;
   title: string;
+  user: User;
   subtitle: string;
   img: string;
   views: number;