feat(view-course): fetch author data #wip

app/redux/slices/author.ts

@@ -0,0 +1,45 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import moment from 'moment'
+import instance from '~/axios'
+
+export const fetchAuthor = createAsyncThunk(
+  'author/fetchAuthor',
+  async (params: any) => {
+    const { data } = await instance.post('/Course/AuthorInfo', params)
+
+    return data
+  }
+)
+
+const initialState = {
+  author: {
+    data: null,
+    status: 'loading',
+  },
+}
+
+const authorSlice = createSlice({
+  name: 'author',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(fetchAuthor.pending, (state, action) => {
+      state.author.status = 'loading'
+
+      // @ts-ignore
+      state.author.data = null
+    })
+    builder.addCase(fetchAuthor.fulfilled, (state, action) => {
+      state.author.status = 'loaded'
+      state.author.data = action.payload
+    })
+    builder.addCase(fetchAuthor.rejected, (state, action) => {
+      state.author.status = 'error'
+
+      // @ts-ignore
+      state.author.data = null
+    })
+  },
+})
+
+export const authorReducer = authorSlice.reducer

app/redux/store.ts

@@ -3,13 +3,15 @@ import { authReducer } from "./slices/auth";
 import { courseReducer } from "./slices/courses";
 import { userReducer } from "./slices/user";
 import { courseItemReducer } from "./slices/course";
+import { authorReducer } from "./slices/author";
 
 const store = configureStore({
   reducer: {
     courses: courseReducer,
     course: courseItemReducer,
     auth: authReducer,
     user: userReducer,
+    author: authorReducer,
   },
 });
 

app/routes/courses.$course.tsx

@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { whatYouWillLearn } from '~/data/view-course'
 import { ListElement } from '~/features'
 import { CourseElement } from '~/features/course-element'
+import { fetchAuthor } from '~/redux/slices/author'
 import { fetchCourse } from '~/redux/slices/courses'
 import { fetchUser } from '~/redux/slices/user'
 import { FilledButton, Header2, Header3, Header4, Text } from '~/shared'
@@ -26,14 +27,19 @@ export default function Course() {
     formData.append('CourseID', params.course as string)
     formData.append('UserID', window.localStorage.getItem('userId') as string)
     dispatch(fetchCourse(formData))
-
-
   }, [])
 
   useEffect(() => {
     if (course.status === 'loading') setIsPostLoading(true)
 
     if (course.status === 'loaded') setIsPostLoading(false)
+
+    if (course.data != null) {
+      let authorFormData = new FormData()
+      authorFormData.append('encriptId', (course.data.authorId).toString() as string)
+
+      dispatch(fetchAuthor(authorFormData))
+    }
   })
 
   return (
@@ -129,8 +135,8 @@ export default function Course() {
             <div className="mt-[92px] w-[1200px]">
               <Header3>Ваш викладач</Header3>
 
-              <div className='flex flex-row gap-[42px]'>
-                    <img src="" alt="" />
+              <div className="flex flex-row gap-[42px]">
+                <img src="" alt="" />
               </div>
             </div>
           </div>