Connect Course Home Page to API

[ashayp22]

Is your feature request related to a problem? Please describe. We need to connect the Course Home Page to API.

Steps

1. Add the code below for making a request to GET '/course/'in client/src/api/api/js.

   export const getCourse = async (courseID) => {
   const requestString = `/language/course/${courseID}`
   const res = await instance.get(requestString)
   
   if (!res?.data?.success) throw new Error(res?.data?.message)
   return res.data
   }

2. Call this function in pages/CourseHome.The function takes in one parameter, courseID. This value should be saved with Redux. You can fetch it by doing:

import { useSelector, useDispatch } from 'react-redux' // import at the top of the file

const { currentCourseId } = useSelector((state) => state.language) // this should go next to the useState code.

Make sure to wrap this code in a `useEffect`.

3. Once you get the data from the API request, save it to Redux. This will require you to:
       a. Create a new field in redux/slices/language.slice.js called `courseDetails` and `allUnits`. See the [Redux V1 doc](https://docs.google.com/document/d/1DNYym_LFu9753akJ4r9DGUXtSMMv5aAv86j10xV1NhA/edit) for more info.
       b. Write a reducer for updating these two fields.
       c. Call the reducer using `useDispatch`. Search through the codebase for an example of this.
4. Once this is done, set up another useSelector for `courseDetails` and `allUnits` in `pages/CourseHome.` Use this data as props for `LanguageHome`, and remove the dummy data in that file.

Below is half of the code for making the API request.

useEffect(() => { const getCourseData = async () => { await errorWrap(async () => { const { result } = await getCourse() const { course, units } = result; // add the Redux code below // doing course.details gets you courseDetails

  })
}
getCourseData()

}, [])