diff --git a/frontend/src/api/chatApi.js b/frontend/src/api/chatApi.js index 15ee894..3ac41e2 100644 --- a/frontend/src/api/chatApi.js +++ b/frontend/src/api/chatApi.js @@ -2,6 +2,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; export const chatApi = createApi({ reducerPath: 'chatApi', + tagTypes: ['Channels', 'Messages'], baseQuery: fetchBaseQuery({ baseUrl: '/api/v1', prepareHeaders: (headers) => { @@ -13,16 +14,60 @@ export const chatApi = createApi({ } }), endpoints: (builder) => ({ - getChannels: builder.query({ - query: () => 'channels', + getChannels: builder.query({ // Каналы + query: () => '/channels', + providesTags: ['Channels'], + }), + addChannel: builder.mutation ({ + query: (channel) => ({ + url: '/channels', + method: 'POST', + body: channel, + }), + invalidatesTags: ['Channels'], + }), + renameChannel: builder.mutation ({ + query: ({ id, name }) => ({ + url: `/channels/${id}`, + method: 'PATCH', + body: { name }, + }), + invalidatesTags: ['Channels', 'Messages'], + }), + removeChannel: builder.mutation ({ + query: (id) => ({ + url: `/channels/${id}`, + method: 'DELETE', + }), + invalidatesTags: ['Channels', 'Messages'], + }), + getMessages: builder.query({ // Сообщения + query: () => '/messages', + providesTags: ['Messages'], + }), + addMessage: builder.mutation ({ + query: (newMessege) => ({ + url: 'messages', + method: 'POST', + body: newMessege, + }), + invalidatesTags: ['Messages'], + }), + removeMessage: builder.mutation ({ + query: (id) => ({ + url: `/messages/${id}`, + method: 'DELETE', + }), + invalidatesTags: ['Messages'], }), - getMessages: builder.query({ - query: () => 'messages', - }) }), }); export const { useGetChannelsQuery, useGetMessagesQuery, + useAddChannelMutation, + useAddMessageMutation, + useRemoveChannelMutation, + useRemoveMessageMutation, } = chatApi; \ No newline at end of file diff --git a/frontend/src/components/MessageField.jsx b/frontend/src/components/MessageField.jsx index 110b1ca..8e7239a 100644 --- a/frontend/src/components/MessageField.jsx +++ b/frontend/src/components/MessageField.jsx @@ -1,17 +1,20 @@ -import { useSelector, useDispatch } from 'react-redux'; +import { useRef } from 'react'; +import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { activeChannelSelector } from '../store/activeChannelSlice.js'; import MessageForm from './MessageForm.jsx'; -import { useGetMessagesQuery } from '../api/chatApi.js'; +import useAuth from '../hooks/index.jsx'; +import { useGetMessagesQuery, useAddMessageMutation } from '../api/chatApi.js'; const MessageField = () => { - const { t } = useTranslation(); - const { data, error, isLoading, refetch } = useGetMessagesQuery(); + const { t } = useTranslation(); + const { data: messages = [], error, isLoading, refetch } = useGetMessagesQuery(); + const [ addMessage ] = useAddMessageMutation(); const activeChannel = useSelector(activeChannelSelector); - const dispatch = useDispatch(); - const messages = data; + const messagesEl = useRef(null); + const { username } = useAuth(); const countMessages = messages?.length || 0; - console.log(messages) + console.log(messages); return (
@@ -23,8 +26,19 @@ const MessageField = () => { {t('countMessages.messages', { count: countMessages })}
-
{messages}
- +
+ {messages?.map(({ id, username, body}) => ( +
+ {username} + {`: ${body}`} +
+ ))} +
+ ); }; diff --git a/frontend/src/components/MessageForm.jsx b/frontend/src/components/MessageForm.jsx index 6eda45e..16fbfbf 100644 --- a/frontend/src/components/MessageForm.jsx +++ b/frontend/src/components/MessageForm.jsx @@ -1,23 +1,51 @@ import { Button, Form } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; +import { useRef } from 'react'; +import { useFormik } from 'formik'; -const MessageForm = () => { +const MessageForm = ({ activeChannelId, username, addMessage }) => { + const { t } = useTranslation(); + const formControlEl = useRef(null); + const formik = useFormik({ + initialValues: { + body: '', + }, + onSubmit: async (values, { setFieldValue }) => { + try { + const newMessege = { body: values.body, channelId: activeChannelId, username }; + console.log(newMessege) + await addMessage(newMessege); + setFieldValue('body', newMessege.body); + formik.resetForm(); + } catch (error) { + + } + }, + }); return (
-
- + + - diff --git "a/frontend/src/components/\320\241hannels.jsx" "b/frontend/src/components/\320\241hannels.jsx" index f17b7b3..487fe87 100644 --- "a/frontend/src/components/\320\241hannels.jsx" +++ "b/frontend/src/components/\320\241hannels.jsx" @@ -1,24 +1,29 @@ -import { Nav, Button } from 'react-bootstrap'; +import { Nav, Button, Spinner } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; import { useGetChannelsQuery } from '../api/chatApi.js'; import { useRef, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { selectActiveTab, activeChannelSelector } from '../store/activeChannelSlice.js'; const Channels = () => { - const { data, error, isLoading, refetch } = useGetChannelsQuery(); + const { data: channels = [], error, isLoading, refetch } = useGetChannelsQuery(); + const { t } = useTranslation(); const dispatch = useDispatch(); - const channels = data; const channelsRef = useRef(null); const activeChannel = useSelector(activeChannelSelector); - useEffect(() => { - try { - if (isLoading) { - - } - } catch (err) { - console.log(err); - } - }, []); + // useEffect(() => { + // try { + // if (isLoading) { + // return ( + // + // Loading... + // + // ); + // } + // } catch (error) { + // console.log(error.messege); + // } + // }, []); return (