From 5e2be76ef931194e48aec1dd82d4949ee1769982 Mon Sep 17 00:00:00 2001
From: sashtje <sashtje.lefevre@gmail.com>
Date: Wed, 6 Sep 2023 15:33:49 +0300
Subject: [PATCH] feat: add article view selector

---
 json-server/db.json                           | 144 ++++++++++++++++++
 .../StoreProvider/config/StateSchema.ts       |   2 +
 src/entities/Article/index.ts                 |   1 +
 .../ArticleListItem.module.scss               |   1 +
 .../ArticleViewSelector.module.scss           |   3 +
 .../ArticleViewSelector.stories.tsx           |  16 ++
 .../ArticleViewSelector.tsx                   |  58 +++++++
 src/pages/ArticlesPage/index.ts               |   1 +
 .../model/selectors/articlesPageSelectors.ts  |   6 +
 .../fetchArticlesList/fetchArticlesList.ts    |  28 ++++
 .../model/slices/articlesPageSlice.ts         |  56 +++++++
 .../model/types/articlesPageSchema.ts         |  10 ++
 .../ui/ArticlesPage/ArticlesPage.tsx          |  52 +++++--
 src/shared/assets/icons/view-big.svg          |   5 +
 src/shared/assets/icons/view-small.svg        |   5 +
 src/shared/const/localStorage.ts              |   1 +
 16 files changed, 380 insertions(+), 9 deletions(-)
 create mode 100644 src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.module.scss
 create mode 100644 src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.stories.tsx
 create mode 100644 src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.tsx
 create mode 100644 src/pages/ArticlesPage/model/selectors/articlesPageSelectors.ts
 create mode 100644 src/pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList.ts
 create mode 100644 src/pages/ArticlesPage/model/slices/articlesPageSlice.ts
 create mode 100644 src/pages/ArticlesPage/model/types/articlesPageSchema.ts
 create mode 100644 src/shared/assets/icons/view-big.svg
 create mode 100644 src/shared/assets/icons/view-small.svg

diff --git a/json-server/db.json b/json-server/db.json
index 676e497f..9d798f4b 100644
--- a/json-server/db.json
+++ b/json-server/db.json
@@ -93,6 +93,150 @@
           ]
         }
       ]
+    },
+    {
+      "id": "2",
+      "title": "Python news",
+      "subtitle": "Что нового в JS за 2023 год",
+      "img": "https://logowik.com/content/uploads/images/python.jpg",
+      "views": 3005,
+      "createdAt": "04.09.2023",
+      "userId": "2",
+      "type": [
+        "IT"
+      ],
+      "blocks": [
+        {
+          "id": "1",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "4",
+          "type": "CODE",
+          "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": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "2",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "3",
+          "type": "CODE",
+          "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": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "8",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "9",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы."
+          ]
+        }
+      ]
+    },
+    {
+      "id": "3",
+      "title": "ML news",
+      "subtitle": "Что нового в JS за 2023 год",
+      "img": "https://bernardmarr.com/wp-content/uploads/2023/05/Explainable-AI_-Challenges-And-Opportunities-In-Developing-Transparent-Machine-Learning-Models-1.jpg",
+      "views": 5300,
+      "createdAt": "05.09.2023",
+      "userId": "2",
+      "type": [
+        "IT"
+      ],
+      "blocks": [
+        {
+          "id": "1",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "4",
+          "type": "CODE",
+          "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": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "2",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "3",
+          "type": "CODE",
+          "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": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "8",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "9",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы."
+          ]
+        }
+      ]
     }
   ],
   "comments": [
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
index 879ee389..6fba90d8 100644
--- a/src/app/providers/StoreProvider/config/StateSchema.ts
+++ b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -11,6 +11,7 @@ import { ProfileSchema } from 'entities/Profile';
 import { ArticleDetailsSchema } from 'entities/Article';
 import { ArticleDetailsCommentsSchema } from 'pages/ArticleDetailsPage';
 import { AddCommentFormSchema } from 'features/addCommentForm';
+import { ArticlesPageSchema } from 'pages/ArticlesPage';
 
 export interface StateSchema {
   counter: CounterSchema,
@@ -22,6 +23,7 @@ export interface StateSchema {
   articleDetails?: ArticleDetailsSchema,
   articleDetailsComments?: ArticleDetailsCommentsSchema,
   addCommentForm?: AddCommentFormSchema,
+  articlesPage?: ArticlesPageSchema,
 }
 
 export type StateSchemaKey = keyof StateSchema;
diff --git a/src/entities/Article/index.ts b/src/entities/Article/index.ts
index a9654beb..8c300d0f 100644
--- a/src/entities/Article/index.ts
+++ b/src/entities/Article/index.ts
@@ -7,3 +7,4 @@ export {
   getArticleDetailsError,
 } from './model/selectors/getArticleDetails/getArticleDetails';
 export { ArticleList } from './ui/ArticleList/ArticleList';
+export { ArticleViewSelector } from './ui/ArticleViewSelector/ArticleViewSelector';
diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss b/src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss
index 218bf6e5..8ce82547 100644
--- a/src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss
+++ b/src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss
@@ -68,6 +68,7 @@
   .img {
     width: 200px;
     height: 200px;
+    object-fit: cover;
   }
 
   .infoWrapper {
diff --git a/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.module.scss b/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.module.scss
new file mode 100644
index 00000000..f0db00e1
--- /dev/null
+++ b/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.module.scss
@@ -0,0 +1,3 @@
+.notSelected {
+  fill: var(--secondary-color);
+}
diff --git a/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.stories.tsx b/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.stories.tsx
new file mode 100644
index 00000000..f484a244
--- /dev/null
+++ b/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticleViewSelector } from './ArticleViewSelector';
+
+export default {
+  title: 'entities/Article/ArticleViewSelector',
+  component: ArticleViewSelector,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticleViewSelector>;
+
+const Template: ComponentStory<typeof ArticleViewSelector> = (args) => <ArticleViewSelector {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};
diff --git a/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.tsx b/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.tsx
new file mode 100644
index 00000000..f52c39e7
--- /dev/null
+++ b/src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.tsx
@@ -0,0 +1,58 @@
+import { memo } from 'react';
+
+import { Button, ButtonTheme } from 'shared/ui/Button';
+import { Icon } from 'shared/ui/Icon';
+import { classNames } from 'shared/lib/classNames';
+import ViewSmallIcon from 'shared/assets/icons/view-small.svg';
+import ViewBigIcon from 'shared/assets/icons/view-big.svg';
+
+import { ArticleView } from '../../model/types/article';
+import cls from './ArticleViewSelector.module.scss';
+
+interface ArticleViewSelectorProps {
+  className?: string;
+  view: ArticleView;
+  onViewClick?: (view: ArticleView) => void;
+}
+
+const viewTypes = [
+  {
+    view: ArticleView.SMALL,
+    icon: ViewSmallIcon,
+  },
+  {
+    view: ArticleView.BIG,
+    icon: ViewBigIcon,
+  },
+];
+
+export const ArticleViewSelector = memo((props: ArticleViewSelectorProps) => {
+  const {
+    className,
+    view,
+    onViewClick,
+  } = props;
+
+  const onClick = (newView: ArticleView) => () => {
+    onViewClick?.(newView);
+  };
+
+  return (
+    <div className={classNames(cls.articleViewSelector, {}, [className])}>
+      {viewTypes.map((viewType) => (
+        <Button
+          key={viewType.view}
+          theme={ButtonTheme.CLEAR}
+          onClick={onClick(viewType.view)}
+        >
+          <Icon
+            className={classNames('', { [cls.notSelected]: viewType.view !== view }, [])}
+            Svg={viewType.icon}
+          />
+        </Button>
+      ))}
+    </div>
+  );
+});
+
+ArticleViewSelector.displayName = 'ArticleViewSelector';
diff --git a/src/pages/ArticlesPage/index.ts b/src/pages/ArticlesPage/index.ts
index 2846da1f..7246ec9f 100644
--- a/src/pages/ArticlesPage/index.ts
+++ b/src/pages/ArticlesPage/index.ts
@@ -1 +1,2 @@
 export { ArticlesPageAsync as ArticlesPage } from './ui/ArticlesPage/ArticlesPage.async';
+export { ArticlesPageSchema } from './model/types/articlesPageSchema';
diff --git a/src/pages/ArticlesPage/model/selectors/articlesPageSelectors.ts b/src/pages/ArticlesPage/model/selectors/articlesPageSelectors.ts
new file mode 100644
index 00000000..2c5b8e6a
--- /dev/null
+++ b/src/pages/ArticlesPage/model/selectors/articlesPageSelectors.ts
@@ -0,0 +1,6 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { ArticleView } from 'entities/Article';
+
+export const getArticlesPageIsLoading = (state: StateSchema) => state.articlesPage?.isLoading || false;
+export const getArticlesPageError = (state: StateSchema) => state.articlesPage?.error;
+export const getArticlesPageView = (state: StateSchema) => state.articlesPage?.view || ArticleView.SMALL;
diff --git a/src/pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList.ts b/src/pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList.ts
new file mode 100644
index 00000000..4b0f28c8
--- /dev/null
+++ b/src/pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import { ThunkConfig } from 'app/providers/StoreProvider';
+
+import { Article } from 'entities/Article';
+
+export const fetchArticlesList = createAsyncThunk<Article[], void, ThunkConfig<string>>(
+  'articlesPage/fetchArticlesList',
+  async (_, thunkAPI) => {
+    const { extra, rejectWithValue } = thunkAPI;
+
+    try {
+      const response = await extra.api.get<Article[]>('/articles', {
+        params: {
+          _expand: 'user',
+        },
+      });
+
+      if (!response.data) {
+        throw new Error();
+      }
+
+      return response.data;
+    } catch (e) {
+      return rejectWithValue('error');
+    }
+  },
+);
diff --git a/src/pages/ArticlesPage/model/slices/articlesPageSlice.ts b/src/pages/ArticlesPage/model/slices/articlesPageSlice.ts
new file mode 100644
index 00000000..ed64aa1d
--- /dev/null
+++ b/src/pages/ArticlesPage/model/slices/articlesPageSlice.ts
@@ -0,0 +1,56 @@
+import { createEntityAdapter, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { Article, ArticleView } from 'entities/Article';
+import { StateSchema } from 'app/providers/StoreProvider';
+import { ARTICLES_VIEW_LOCALSTORAGE_KEY } from 'shared/const/localStorage';
+
+import { fetchArticlesList } from '../../model/services/fetchArticlesList/fetchArticlesList';
+import { ArticlesPageSchema } from '../types/articlesPageSchema';
+
+const articlesAdapter = createEntityAdapter<Article>({
+  selectId: (article) => article.id,
+});
+
+export const getArticles = articlesAdapter.getSelectors<StateSchema>(
+  (state) => state.articlesPage || articlesAdapter.getInitialState(),
+);
+
+const articlesPageSlice = createSlice({
+  name: 'articlesPageSlice',
+  initialState: articlesAdapter.getInitialState<ArticlesPageSchema>({
+    isLoading: false,
+    error: undefined,
+    ids: [],
+    entities: {},
+    view: ArticleView.SMALL,
+  }),
+  reducers: {
+    setView: (state, action: PayloadAction<ArticleView>) => {
+      state.view = action.payload;
+      localStorage.setItem(ARTICLES_VIEW_LOCALSTORAGE_KEY, action.payload);
+    },
+    initState: (state) => {
+      state.view = localStorage.getItem(ARTICLES_VIEW_LOCALSTORAGE_KEY) as ArticleView || ArticleView.SMALL;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchArticlesList.pending, (state) => {
+        state.error = undefined;
+        state.isLoading = true;
+      })
+      .addCase(fetchArticlesList.fulfilled, (state, action: PayloadAction<Article[]>) => {
+        state.isLoading = false;
+        articlesAdapter.setAll(state, action.payload);
+      })
+      .addCase(fetchArticlesList.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export const {
+  reducer: articlesPageReducer,
+  actions: articlesPageActions,
+} = articlesPageSlice;
diff --git a/src/pages/ArticlesPage/model/types/articlesPageSchema.ts b/src/pages/ArticlesPage/model/types/articlesPageSchema.ts
new file mode 100644
index 00000000..45a31b00
--- /dev/null
+++ b/src/pages/ArticlesPage/model/types/articlesPageSchema.ts
@@ -0,0 +1,10 @@
+import { EntityState } from '@reduxjs/toolkit';
+
+import { Article, ArticleView } from 'entities/Article';
+
+export interface ArticlesPageSchema extends EntityState<Article>{
+  isLoading?: boolean;
+  error?: string;
+
+  view: ArticleView;
+}
diff --git a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
index 45ed648d..943e97e2 100644
--- a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
+++ b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
@@ -1,25 +1,59 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { useSelector } from 'react-redux';
 
 import { classNames } from 'shared/lib/classNames';
-import { ArticleList, ArticleView } from 'entities/Article';
+import { ArticleList, ArticleView, ArticleViewSelector } from 'entities/Article';
+import { DynamicModuleLoader, ReducersList } from 'shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
+import { useInitialEffect } from 'shared/lib/hooks/useInitialEffect/useInitialEffect';
+import { useAppDispatch } from 'shared/lib/hooks/useAppDispatch/useAppDispatch';
 
+import {
+  getArticlesPageError,
+  getArticlesPageIsLoading,
+  getArticlesPageView,
+} from '../../model/selectors/articlesPageSelectors';
+import { fetchArticlesList } from '../../model/services/fetchArticlesList/fetchArticlesList';
+import { articlesPageActions, articlesPageReducer, getArticles } from '../../model/slices/articlesPageSlice';
 import cls from './ArticlesPage.module.scss';
 
 interface ArticlesPageProps {
   className?: string;
 }
 
+const reducers: ReducersList = {
+  articlesPage: articlesPageReducer,
+};
+
 export const ArticlesPage = memo((props: ArticlesPageProps) => {
   const { className } = props;
+  const dispatch = useAppDispatch();
+  const articles = useSelector(getArticles.selectAll);
+
+  const isLoading = useSelector(getArticlesPageIsLoading);
+  const error = useSelector(getArticlesPageError);
+  const view = useSelector(getArticlesPageView);
+
+  const onChangeView = useCallback((view: ArticleView) => {
+    dispatch(articlesPageActions.setView(view));
+  }, [dispatch]);
+
+  useInitialEffect(() => {
+    dispatch(fetchArticlesList());
+    dispatch(articlesPageActions.initState());
+  });
 
   return (
-    <div className={classNames(cls.articlesPage, {}, [className])}>
-      <ArticleList
-        isLoading
-        view={ArticleView.BIG}
-        articles={[]}
-      />
-    </div>
+    <DynamicModuleLoader reducers={reducers}>
+      <div className={classNames(cls.articlesPage, {}, [className])}>
+        <ArticleViewSelector view={view} onViewClick={onChangeView} />
+
+        <ArticleList
+          isLoading={isLoading}
+          view={view}
+          articles={articles}
+        />
+      </div>
+    </DynamicModuleLoader>
   );
 });
 
diff --git a/src/shared/assets/icons/view-big.svg b/src/shared/assets/icons/view-big.svg
new file mode 100644
index 00000000..d7b111da
--- /dev/null
+++ b/src/shared/assets/icons/view-big.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="bi:list">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M3.75 18C3.75 17.8011 3.82902 17.6103 3.96967 17.4697C4.11032 17.329 4.30109 17.25 4.5 17.25H19.5C19.6989 17.25 19.8897 17.329 20.0303 17.4697C20.171 17.6103 20.25 17.8011 20.25 18C20.25 18.1989 20.171 18.3897 20.0303 18.5303C19.8897 18.671 19.6989 18.75 19.5 18.75H4.5C4.30109 18.75 4.11032 18.671 3.96967 18.5303C3.82902 18.3897 3.75 18.1989 3.75 18ZM3.75 12C3.75 11.8011 3.82902 11.6103 3.96967 11.4697C4.11032 11.329 4.30109 11.25 4.5 11.25H19.5C19.6989 11.25 19.8897 11.329 20.0303 11.4697C20.171 11.6103 20.25 11.8011 20.25 12C20.25 12.1989 20.171 12.3897 20.0303 12.5303C19.8897 12.671 19.6989 12.75 19.5 12.75H4.5C4.30109 12.75 4.11032 12.671 3.96967 12.5303C3.82902 12.3897 3.75 12.1989 3.75 12ZM3.75 6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6C20.25 6.19891 20.171 6.38968 20.0303 6.53033C19.8897 6.67098 19.6989 6.75 19.5 6.75H4.5C4.30109 6.75 4.11032 6.67098 3.96967 6.53033C3.82902 6.38968 3.75 6.19891 3.75 6Z" />
+</g>
+</svg>
diff --git a/src/shared/assets/icons/view-small.svg b/src/shared/assets/icons/view-small.svg
new file mode 100644
index 00000000..ebb8e26c
--- /dev/null
+++ b/src/shared/assets/icons/view-small.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="fe:tiled">
+<path id="Vector" d="M6 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4ZM13 13V18H18V13H13ZM6 13V18H11V13H6ZM13 6V11H18V6H13ZM6 6V11H11V6H6Z" />
+</g>
+</svg>
diff --git a/src/shared/const/localStorage.ts b/src/shared/const/localStorage.ts
index 8a61f398..6394d763 100644
--- a/src/shared/const/localStorage.ts
+++ b/src/shared/const/localStorage.ts
@@ -1 +1,2 @@
 export const USER_LOCALSTORAGE_KEY = 'user';
+export const ARTICLES_VIEW_LOCALSTORAGE_KEY = 'articles_view';