Feat(23UG-41): добавляет API и серверную часть форума #53

EAbashin · 2023-04-29T15:49:42Z

Какую задачу решаем

создание и удаление тем форума
написание сообщений и возможность отвечать на ранее написаные
оставление и удаление реакций на сообщения

…форума

…сообщения

AleksandrMenshchikov · 2023-04-30T06:15:57Z

packages/client/src/pages/ForumPage/ForumMessagesListPage.tsx

+  const { themes, currentMessages } = useSelector(forumSelect);
+  const user = useSelector(authSelect).user as User;
+  const themeId = useParams().themeId as string;
+  const { user_id, title } = themes.find((theme) => theme.id === +themeId) as ThemeType;



При перезагрузке страницы здесь ошибка выходит
TypeError: Cannot destructure property 'user_id' of 'themes.find(...)' as it is undefined.

Вчера до поздней ночи не мог понять происхождение этой ошибки - точки останова, debagger и console.log почему-то не отрабатывали. Когда попробовал решить с помощью sessionStorage и увидел ошибку: sessionStorage - undefined, понял, что код выполняется в node и вспомнил про SSR.
В общем, ошибка возникала из-за того, что при SSR мы, на тот момент, ещё не делали запрос за всеми темами.

Без SSR была бы та же ошибка, только не на странице выведена, а в консоли, поскольку и на клиенте мы еще не делали запрос за всеми темами. Просто SSR раньше отработал - раньше сломался. Точки останова и прочие прелести не работали, т.к. скрипт не загрузился в браузер - в HTML только ошибка с сервера распечатана.

И по итогу, после приделывания авторизации ошибка сохраняется ))

cap-Bernardito · 2023-04-30T15:59:28Z

packages/server/routes/forum.ts

+router.get("/themes/", Forum.getThemes);
+router.post("/themes/", Forum.postTheme);
+router.delete("/themes/:theme_id", Forum.deleteTheme);
+// сообщения
+router.get("/messages/:theme_id", Forum.getMessages);
+router.post("/messages/", Forum.postMessage);
+// реакции
+router.get("/reactions/:theme_id", Forum.getReactions);
+router.post("/reactions/", Forum.postReaction);
+router.delete("/reactions/:reaction_id", Forum.deleteReaction);


Вот это вот все я могу делать не будучи авторизованным. Мне кажется, что это нехорошо ))
Пруф. Сейчас уже реализована возможность получить пользователя и есть пример в routes/index. Возможно в этом же PR имеет смысл приделать проверку пользователя.

Видел твой роут с проверкой авторизации, но почему-то подумал, что он каким-то магическим образом уже работает)))
Спасибо, за наглядное видео и за то, что всё для меня подготовил, подключил эту проверку.

А когда будет проверка авторизации, пользователя, для которого создается тема/сообщение/реакция, надо будет брать не из req.body а из данных авторизации

Извиняюсь, но этот момент не понял..

Первую часть вопроса я тоже не понял - проверка сделана через мидлвару и если пользователь не пользователь, то работать с темами/реакциями/сообщениями возможности не будет.

Что касается второй части вопроса. Возможно речь о том, что сейчас пользователь, для которого создается тема, берется из req.body, а должен из пользователя, которого получили с помощью аутентификационной куки. В этом случае в мидлваре нужно сохранить куда-то пользователя и в местах, где он нужен работать с этим сохраненным пользователем.

@Olegas, поясните пожалуйста подробнее по этому пункту

Что касается второй части вопроса. Возможно речь о том, что сейчас пользователь, для которого создается тема, берется из req.body, а должен из пользователя, которого получили с помощью аутентификационной куки. В этом случае в мидлваре нужно сохранить куда-то пользователя и в местах, где он нужен работать с этим сохраненным пользователем.

@cap-Bernardito @EAbashin да, речь именно об этом. Если у вас действие выполняется для авторизованного пользователя, то надо брать это из достоверного источника. Параметры в запросе - не достоверный источник. Верно - мидлвара должна куда-то в request сохранить данные текущего пользователя и дальше контроллеры должны брать оттуда

Понял, спасибо! Изменил.

…правильное решение)

cap-Bernardito · 2023-05-02T01:21:38Z

packages/client/src/entry-server.tsx


  await loadUser(store.dispatch);
+  await getThemes(store.dispatch);



Тут темы для форума нездорово получать, т.к. они не для всех страниц нужны (а пользователь для всех). Для этой цели ниже добавлена обработка метода load для роутов.

Ну и оно так просто не работает, нужно добавлять методы в UserService, аналогично работе с пользователем. Отправлю коммит, как я думал, это должно работать. Посмотри в нем TODO по типам - нужно дописать

Исправил

packages/client/src/constants.ts

Olegas · 2023-05-03T18:46:11Z

packages/client/src/pages/ForumPage/ForumMessagesListPage.tsx

+      parent_message_id,
+      parent_message_text,
+    };
+    dispatch(forumThunks.postMessage(data));


А что если достать все нужные данные (типа данных о пользователе) внутри action creator'а, а передать в него только данные о посте (родитель, текст).

Кстати, а зачем нужен текст родительского поста?

В данном случае, мы ранее уже получили данные user для сравнения id создателя темы и id текущего пользователя и, на мой взгляд, будет лишним дополнительно получать данные user ещё и в санке, удобнее сразу передать уже готовые данные с диспатчем.

Нужен для отображения при ответе на это сообщение, чтобы не делать лишний запрос. Очень удобно - например, если на странице 20 сообщений с ответами, то не нужно делать 20 лишних запросов.

Про родительский пост. Так это я тогда могу писать ответы на то чего не было (опять же подложить в вызов какой-то свой текст и будет выглядеть как будто это был текст поста, на который я пишу ответ). Плохая история. А где там 20 запросов? Почему нельзя вытянуть все одним запросом? Вроде даже ORM позволяет связанные сущности вытаскивать.

Не учёл эту уязвимость и, наверное, уставший был, когда писал про запросы)) У нас же в стейте уже есть все сообщения выбранной темы, надо просто найти нужное по id.
Исправил.

packages/client/src/pages/ForumPage/ForumMessagesListPage.tsx

packages/client/src/pages/ForumPage/ForumThemesListPage.tsx

packages/client/src/pages/ForumPage/MessageItem/MessageItem.tsx

Olegas · 2023-05-03T18:57:30Z

packages/server/controllers/forum.ts

+      res.status(400).json({ error: (error as Error).message });
+    }
+  },
+};


А где сделана проверка что я могу удалять только свои сообщения/темы/реакции?

На фронте:

если теме не твоя, то не увидишь кнопку удаления.
{user_id && user?.id === user_id && ( <IconButton aria-label="delete" color="error" onClick={handleClickOpen}> <DeleteIcon /> </IconButton> )}

если ещё не оставлял реакцию, то сердечко без фона и при клике на него отправляется запрос на добавление реакции, если уже оставлял, то при клике - удаление реакции.
`const likesCount = useSelector(
(state) =>
state.forum.currentReactions.filter(
(reaction) => reaction.message_id === messageData.id && reaction.reaction === "like"
).length
);
const myLike = useSelector((state) =>
state.forum.currentReactions.filter(
(reaction) =>
reaction.message_id === messageData.id &&
reaction.reaction === "like" &&
reaction.user_id === user.id
)
)[0];
.....

{myLike?.id ? : } {likesCount} `

Проверка на фронте это ок, но еще проверка должна быть на стороне бэка, т.к. я могу сформировать запрос к API руками и, если проверки нет, удалить чужую тему.

Согласен. Сделал дополнительную проверку на беке.

packages/server/db.ts

Olegas · 2023-05-03T18:58:46Z

packages/server/routes/forum.ts

+router.get("/themes/", Forum.getThemes);
+router.post("/themes/", Forum.postTheme);
+router.delete("/themes/:theme_id", Forum.deleteTheme);
+// сообщения
+router.get("/messages/:theme_id", Forum.getMessages);
+router.post("/messages/", Forum.postMessage);
+// реакции
+router.get("/reactions/:theme_id", Forum.getReactions);
+router.post("/reactions/", Forum.postReaction);
+router.delete("/reactions/:reaction_id", Forum.deleteReaction);


А когда будет проверка авторизации, пользователя, для которого создается тема/сообщение/реакция, надо будет брать не из req.body а из данных авторизации

…мы/сообщения/реакции, при добавлении сообщения имя пользователя и аватар берёт из данных авторизации, добавляет поиск и мемоизацию текста родительского сообщения

EAbashin · 2023-05-07T17:53:44Z

Все замечания исправлены.

Evgeniy Abashin and others added 16 commits April 20, 2023 19:20

feat: создаёт таблицы и get-запрос, при запросе на сервере ошибка

806a662

feat: for

485dc8e

feat: добавляет endpoint для запроса сообщений по id темы

bc87ba6

feat: добавляет API запроса сообщений и API + endpoint удаления темы …

36fbf33

…форума

feat: добавляет API + endpoint отправки сообщения

4d54d1f

feat: добавляет дополнительную верстку сообщений, реализует ответ на …

8705146

…сообщения

fix: устраняет ошибки типизации и делает рефакторинг

4fbf412

feat: добавляет endpoints для работы с реакциями на сообщения

af77679

feat: добавляет extraReduses в forum-slice

03cc324

feat: добавляет связи в таблицы

8e97a31

feat: добавляет API реакций (не закончено)

9136e29

feat: добавляет API реакций

d28659e

fix: исправляет ошибку при работе с реакциями

de1a50b

feat: добавляет подтверждение при удалении темы

a8b084a

Merge branch 'dev' into dev-backend-forum

a0d71e2

fix: merge

90e0aeb

EAbashin requested review from cap-Bernardito, AleksandrMenshchikov, MakhovRoman and KozlovAleksandr April 29, 2023 16:30

AleksandrMenshchikov requested changes Apr 30, 2023

View reviewed changes

cap-Bernardito reviewed Apr 30, 2023

View reviewed changes

Evgeniy Abashin added 2 commits May 1, 2023 10:35

fix: исправляет ошибку при перезагрузке ForumMessagesListPage

a7cbd6b

fix: исправляет ошибку при перезагрузке ForumMessagesListPage (более …

cfa6163

…правильное решение)

AleksandrMenshchikov approved these changes May 1, 2023

View reviewed changes

MakhovRoman approved these changes May 1, 2023

View reviewed changes

feat: добавляет проверку авторизации пользователя при запросах к /forum

b1cf3c9

EAbashin requested a review from Olegas May 1, 2023 11:19

cap-Bernardito reviewed May 2, 2023

View reviewed changes

fix: исправляет получение тем форума для SSR

f269409

fix: исправляет типизацию

f80fb94

cap-Bernardito approved these changes May 3, 2023

View reviewed changes

Olegas requested changes May 3, 2023

View reviewed changes

KozlovAleksandr approved these changes May 4, 2023

View reviewed changes

Evgeniy Abashin added 6 commits May 4, 2023 19:31

fix: исправляет loader в ROUTES

eb5dd71

fix: исправляет ЗК

93260b6

fix: исправляет замечения по PR

cb24b2d

feat: добавляет мемоизацию реакций

ef15bd9

fix: исправляет проверку id пользователя при удалении темы/реакции

7416685

Olegas approved these changes May 10, 2023

View reviewed changes

EAbashin merged commit 3a79692 into dev May 10, 2023

EAbashin deleted the dev-backend-forum branch May 10, 2023 15:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat(23UG-41): добавляет API и серверную часть форума #53

Feat(23UG-41): добавляет API и серверную часть форума #53

EAbashin commented Apr 29, 2023

AleksandrMenshchikov Apr 30, 2023

EAbashin May 1, 2023

cap-Bernardito May 2, 2023

cap-Bernardito Apr 30, 2023

EAbashin May 1, 2023

Olegas May 3, 2023

EAbashin May 5, 2023

cap-Bernardito May 5, 2023

Olegas May 7, 2023

EAbashin May 7, 2023

cap-Bernardito May 2, 2023 •

edited

Loading

EAbashin May 4, 2023

Olegas May 3, 2023

EAbashin May 5, 2023 •

edited

Loading

Olegas May 6, 2023

EAbashin May 7, 2023

Olegas May 3, 2023

EAbashin May 5, 2023

Olegas May 6, 2023

EAbashin May 7, 2023

Olegas May 3, 2023

EAbashin commented May 7, 2023


		await loadUser(store.dispatch);
		await getThemes(store.dispatch);

Feat(23UG-41): добавляет API и серверную часть форума #53

Feat(23UG-41): добавляет API и серверную часть форума #53

Conversation

EAbashin commented Apr 29, 2023

Какую задачу решаем

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cap-Bernardito May 2, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EAbashin May 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EAbashin commented May 7, 2023

cap-Bernardito May 2, 2023 •

edited

Loading

EAbashin May 5, 2023 •

edited

Loading