created store and slices

frontend/src/main.tsx

@@ -2,9 +2,16 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
+import { BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import store from './store/store'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  <BrowserRouter>
+    <Provider store={store}>
       <App />
-  </React.StrictMode>,
+    </Provider>
+  </BrowserRouter>
+
+
 )

frontend/src/store/comments/ICommentState.ts

+import IComment from "../../interfaces/IComment"
+
+export default interface ICommentState {
+    comments: IComment[]
+    loadingComments: boolean
+    messageComments: string
+}
\ No newline at end of file

frontend/src/store/comments/comments.slice.ts

+import { createSlice } from '@reduxjs/toolkit'
+import { createAppAsyncThunk } from '../createAppAsyncThunk'
+import IResponse from '../../interfaces/IResponse'
+import IComment from '../../interfaces/IComment'
+import ICommentState from './ICommentState'
+import { commentsApi } from '../../api/commentApi'
+import ICommentDto from '../../interfaces/ICommentDto'
+
+
+const namespace = 'comments'
+
+export const getCommentsByPost = createAppAsyncThunk(
+    `${namespace}/getCommentsByPost`,
+    async (postId: string): Promise<IResponse<IComment[] | undefined>> => {
+        return commentsApi.getCommentsByPost(postId)
+    }
+)
+
+export const createComment = createAppAsyncThunk(
+    `${namespace}/createComment`,
+    async (comment: ICommentDto) => {
+        return commentsApi.createComment(comment)
+    }
+)
+
+export const deleteCommentById = createAppAsyncThunk(
+    `${namespace}/deleteCommentById`,
+    async (id: string) => {
+        return commentsApi.deleteCommentById(id)
+    }
+)
+
+export const commentsSlice = createSlice({
+    name: namespace,
+    initialState: {
+        comments: [] as IComment[],
+        loadingComments: false,
+        messageComments: ''
+    } as ICommentState,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(getCommentsByPost.rejected, (state) => {
+                state.loadingComments = false
+            })
+            .addCase(getCommentsByPost.pending, (state) => {
+                state.loadingComments = true
+            })
+            .addCase(getCommentsByPost.fulfilled, (state, action) => {
+                state.loadingComments = false
+                state.comments = action.payload.result as IComment[]
+                state.messageComments = action.payload.message
+            })
+            .addCase(createComment.rejected, (state) => {
+                state.loadingComments = false
+            })
+            .addCase(createComment.pending, (state) => {
+                state.loadingComments = true
+            })
+            .addCase(createComment.fulfilled, (state, action) => {
+                state.loadingComments = false
+                state.messageComments = action.payload.message
+            })
+            .addCase(deleteCommentById.rejected, (state) => {
+                state.loadingComments = false
+            })
+            .addCase(deleteCommentById.pending, (state) => {
+                state.loadingComments = true
+            })
+            .addCase(deleteCommentById.fulfilled, (state, action) => {
+                state.loadingComments = false
+                state.messageComments = action.payload.message
+            })
+    }
+})
\ No newline at end of file

frontend/src/store/createAppAsyncThunk.ts

+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { AppDispatch, AppState } from "./store"
+
+export const createAppAsyncThunk = createAsyncThunk.withTypes<{
+    state: AppState
+    dispatch: AppDispatch
+    rejectValue: string
+}>()
\ No newline at end of file

frontend/src/store/posts/IPostState.ts

+import IPost from "../../interfaces/IPost"
+
+export default interface IPostState {
+    posts: IPost[]
+    post: IPost
+    loadingPosts: boolean
+    messagePosts: string
+}
\ No newline at end of file

frontend/src/store/posts/posts.slice.ts

+import { createSlice } from '@reduxjs/toolkit'
+import IPost from '../../interfaces/IPost'
+import IPostState from './IPostState'
+import { createAppAsyncThunk } from '../createAppAsyncThunk'
+import { postApi } from '../../api/postApi'
+import IResponse from '../../interfaces/IResponse'
+
+
+const namespace = 'posts'
+
+export const getPosts = createAppAsyncThunk(
+    `${namespace}/getPosts`,
+    async (): Promise<IResponse<IPost[] | undefined>> => {
+        return postApi.getPosts()
+    }
+)
+
+export const getPostById = createAppAsyncThunk(
+    `${namespace}/getPostById`,
+    async (id: string): Promise<IResponse<IPost | undefined>> => {
+        return postApi.getPostById(id)
+    }
+)
+
+export const createPost = createAppAsyncThunk(
+    `${namespace}/createPost`,
+    async (post: FormData) => {
+        return postApi.createPost(post)
+    }
+)
+
+export const deletePostById = createAppAsyncThunk(
+    `${namespace}/deletePostById`,
+    async (id: string) => {
+        return postApi.deletePostById(id)
+    }
+)
+
+export const postsSlice = createSlice({
+    name: namespace,
+    initialState: {
+        posts: [] as IPost[],
+        post: {},
+        loadingPosts: false,
+        messagePosts: ''
+    } as IPostState,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(getPosts.rejected, (state) => {
+                state.loadingPosts = false
+            })
+            .addCase(getPosts.pending, (state) => {
+                state.loadingPosts = true
+            })
+            .addCase(getPosts.fulfilled, (state, action) => {
+                state.loadingPosts = false
+                state.posts = action.payload.result as IPost[]
+                state.messagePosts = action.payload.message
+            })
+            .addCase(getPostById.rejected, (state) => {
+                state.loadingPosts = false
+            })
+            .addCase(getPostById.pending, (state) => {
+                state.loadingPosts = true
+            })
+            .addCase(getPostById.fulfilled, (state, action) => {
+                state.loadingPosts = false
+                state.post = action.payload.result as IPost
+                state.messagePosts = action.payload.message
+            })
+            .addCase(createPost.rejected, (state) => {
+                state.loadingPosts = false
+            })
+            .addCase(createPost.pending, (state) => {
+                state.loadingPosts = true
+            })
+            .addCase(createPost.fulfilled, (state, action) => {
+                state.loadingPosts = false
+                state.messagePosts = action.payload.message
+            })
+            .addCase(deletePostById.rejected, (state) => {
+                state.loadingPosts = false
+            })
+            .addCase(deletePostById.pending, (state) => {
+                state.loadingPosts = true
+            })
+            .addCase(deletePostById.fulfilled, (state, action) => {
+                state.loadingPosts = false
+                state.messagePosts = action.payload.message
+            })
+    }
+})
\ No newline at end of file

frontend/src/store/store.ts

+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
+import { useDispatch } from 'react-redux'
+import { postsSlice } from "./posts/posts.slice"
+import { commentsSlice } from "./comments/comments.slice"
+import { usersSlice } from "./users/users.slice"
+
+
+const makeStore = () => {
+    return configureStore({
+        reducer: {
+           posts: postsSlice.reducer,
+           comments: commentsSlice.reducer,
+           users: usersSlice.reducer
+        }
+    })
+}
+
+const store = makeStore()
+export type AppDispatch = typeof store.dispatch;
+export type AppStore = ReturnType<typeof makeStore>;
+export type AppState = ReturnType<AppStore["getState"]>;
+export type AppThunk<ReturnType = void> = ThunkAction<
+    ReturnType,
+    AppState,
+    unknown,
+    Action
+>;
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+
+export default store
\ No newline at end of file

frontend/src/store/users/IUserState.ts

+import IUserGetDto from "../../interfaces/IUserGetDto";
+
+export default interface IUsersState {
+    user: IUserGetDto | undefined
+    isAuth: boolean
+    loadingUser: boolean
+    messageUser: string
+}
\ No newline at end of file

frontend/src/store/users/users.slice.ts

+import { createSlice } from "@reduxjs/toolkit";
+import { userApi } from "../../api/userApi";
+import IUser from "../../interfaces/IUser";
+import IUserCreateDto from "../../interfaces/IUserCreateDto";
+import { createAppAsyncThunk } from "../createAppAsyncThunk";
+import IUsersState from './IUserState'
+
+const namespace = 'users'
+
+
+export const login = createAppAsyncThunk(
+    `${namespace}/login`,
+    async (user: IUserCreateDto) => {
+        return userApi.login(user)
+    }
+)
+
+export const register = createAppAsyncThunk(
+    `${namespace}/register`,
+    async (user: IUserCreateDto) => {
+        return userApi.register(user)
+    }
+)
+
+export const checkToken = createAppAsyncThunk(
+    `${namespace}/checkToken`,
+    async () => {
+        return userApi.checkToken()
+    }
+)
+
+
+export const usersSlice = createSlice({
+    name: namespace,
+    initialState: {
+        user: {} as IUser,
+        isAuth: false,
+        loadingUser: false,
+        messageUser: ''
+    } as IUsersState,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(login.rejected, (state) => {
+                state.loadingUser = false
+            })
+            .addCase(login.pending, (state) => {
+                state.loadingUser = true
+            })
+            .addCase(login.fulfilled, (state, action) => {
+                state.loadingUser = false
+                const user = action.payload.result
+                state.user = user
+                state.messageUser = action.payload.message
+                if (user) {
+                    localStorage.setItem('token', user.token)
+                    state.isAuth = true
+                }
+            })
+            .addCase(register.rejected, (state) => {
+                state.loadingUser = false
+            })
+            .addCase(register.pending, (state) => {
+                state.loadingUser = true
+            })
+            .addCase(register.fulfilled, (state, action) => {
+                state.loadingUser = false
+                const user = action.payload.result
+                state.user = user
+                state.messageUser = action.payload.message
+                if (user) {
+                    localStorage.setItem('token', user.token)
+                    state.isAuth = true
+                }
+            })
+            .addCase(checkToken.rejected, (state) => {
+                state.loadingUser = false
+            })
+            .addCase(checkToken.pending, (state) => {
+                state.loadingUser = true
+            })
+            .addCase(checkToken.fulfilled, (state, action) => {
+                state.loadingUser = false
+                const user = action.payload.result
+                state.user = user
+                state.messageUser = action.payload.message
+                if (user) {
+                    state.isAuth = true
+                } else {
+                    state.isAuth = false
+                }
+            })
+    }
+})
+
+export const {} = usersSlice.actions
\ No newline at end of file