setup redux | get data from api

app.js

@@ -3,6 +3,7 @@ import morgan from 'morgan';
 
 const app = express();
 
+import cors from 'cors'
 import AppError from './utils/appError.js';
 import courseRoutes from './routes/courseRoutes.js';
 import sectionRoutes from './routes/sectionRoute.js';
@@ -13,6 +14,13 @@ import termRoutes from './routes/termRoutes.js';
 import courseAllocationRoutes from './routes/courseAllocationRoute.js';
 
 
+// 1) GLOBAL MIDDLEWARES
+// Implement CORS
+app.use(cors());
+
+app.options('*', cors());
+// app.options('/api/v1/tours/:id', cors());
+
 // view engine
 app.set('view engine', 'ejs');
 // app.set('views', path.join(__dirname, 'views'));

client/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.21.0",
     "mdbreact": "^4.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -20,6 +21,9 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+
+  "proxy": "http://localhost:8000",
+
   "eslintConfig": {
     "extends": "react-app"
   },

client/public/index.html

@@ -23,7 +23,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <!-- font -->
-  <link rel="preconnect stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" crossorigin>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
 
   <title>Course Allocation</title>
 </head>

client/src/App.css

@@ -1,20 +1,13 @@
+* {
+  font-family: 'Noto Sans JP', sans-serif;
+}
+
 body {
-  margin: 20px;
-  padding: 20px;
-  height: auto;
-  width: 90%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Poppins', 'Segoe UI',
-    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-    'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: #fdfdfd;
+   background: #fdfdfd;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
 
 .App {
   text-align: center;

client/src/App.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import logo from './logo.svg';
-import { Counter } from './features/counter/Counter';
 import './App.css';
+import Navbar from './features/navbar/Navbar.component.jsx'
 import CourseAllocationTable from './features/CourseAllocation/CourseAllocationTable';
 
 function App() {
   return (
-    <div className="App">
+  <>
+      <Navbar/>
+    <div className="container">
         <CourseAllocationTable />
-
     </div>
+  </>
   );
 }
 

client/src/app/store.js

@@ -1,8 +1,8 @@
 import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+import courseAllocationReducer from '../features/CourseAllocation/courseAllocationSlice';
 
 export default configureStore({
   reducer: {
-    counter: counterReducer,
+    courseAllocation: courseAllocationReducer,
   },
 });

client/src/features/CourseAllocation/CourseAllocationSlice.js

@@ -1,42 +1,41 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-export const counterSlice = createSlice({
-  name: 'counter',
+
+export const courseAllocationSlice = createSlice({
+  name: 'courseAllocation',
   initialState: {
-    value: 0,
+    allData: null,
+    isLoading: false
   },
   reducers: {
-    increment: state => {
-      // Redux Toolkit allows us to write "mutating" logic in reducers. It
-      // doesn't actually mutate the state because it uses the Immer library,
-      // which detects changes to a "draft state" and produces a brand new
-      // immutable state based off those changes
-      state.value += 1;
-    },
-    decrement: state => {
-      state.value -= 1;
-    },
-    incrementByAmount: (state, action) => {
-      state.value += action.payload;
+    getCourseAllocationData: (state, action) => {
+      console.log('payload ', action.payload);
+      state.allData = action.payload;
+      state.isLoading = false;
     },
+
+    setDataLoading: state => {
+      // state = {...state};
+      state.isLoading = true;
+    }
   },
 });
 
-export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export const { setDataLoading, getCourseAllocationData } = courseAllocationSlice.actions;
 
 // The function below is called a thunk and allows us to perform async logic. It
 // can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
 // will call the thunk with the `dispatch` function as the first argument. Async
 // code can then be executed and other actions can be dispatched
-export const incrementAsync = amount => dispatch => {
-  setTimeout(() => {
-    dispatch(incrementByAmount(amount));
-  }, 1000);
-};
+// export const incrementAsync = amount => dispatch => {
+//   setTimeout(() => {
+//     dispatch(incrementByAmount(amount));
+//   }, 1000);
+// };
 
 // The function below is called a selector and allows us to select a value from
 // the state. Selectors can also be defined inline where they're used instead of
 // in the slice file. For example: `useSelector((state) => state.counter.value)`
-export const selectCount = state => state.counter.value;
+export const selectCourseAllocation = state => state.courseAllocation;
 
-export default counterSlice.reducer;
+export default courseAllocationSlice.reducer;

client/src/features/CourseAllocation/CourseAllocationTable.js

@@ -1,24 +1,54 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MDBDataTable } from 'mdbreact';
-import "mdbreact/dist/css/mdb.css";
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "bootstrap-css-only/css/bootstrap.min.css";
-import { courseAllocationDataSample, teachers } from './data';
+
+
+import 'mdbreact/dist/css/mdb.css';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'bootstrap-css-only/css/bootstrap.min.css';
+
+// redux staff
+import { useSelector, useDispatch } from 'react-redux';
+import { selectCourseAllocation } from './courseAllocationSlice';
+import { fetchCourseAllocationData } from './courseAllocationActions';
 
 const CourseAllocationTable = () => {
   let rowsData = [];
 
+  const courseAllocationData = useSelector(selectCourseAllocation);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const featchData = async () => dispatch(await fetchCourseAllocationData());
+    featchData();
+  }, [dispatch]);
+
   // storing users data in rows data
-  courseAllocationDataSample.forEach(cdata =>
-    rowsData.push({
-      TERM: cdata.term,
-      SECTION: cdata.section,
-      CRE: cdata.course.map(el => <p>{el.cre}</p>),
-      CODE: cdata.course.map(el => <p>{el.code}</p>),
-      COURSE_NAME: cdata.course.map(el => <p>{el.name}</p>),
-      TEACHER: cdata.course.map(el => <p title={teachers.find(teacher => teacher.teacherInitial === el.teacherInitial).creditTaken}>{el.teacherInitial}</p>),
-    })
-  );
+  if (courseAllocationData.allData)
+    courseAllocationData.allData.forEach(cdata =>
+      rowsData.push({
+        id: cdata._id,
+        TERM: `${cdata.session.term.term} ${cdata.session.level.level} ${cdata.session.batch.batchName}`,
+        SECTION: cdata.course.map(course =>
+          course.section.map(section => (
+            <p key={section._id}>{section.sectionName}</p>
+          ))
+        ),
+        CRE: cdata.course.map(course => (
+          <p key={course._id}>{course.course.credit}</p>
+        )),
+        CODE: cdata.course.map(course => (
+          <p key={course._id}>{course.course.course_code}</p>
+        )),
+        COURSE_NAME: cdata.course.map(course => (
+          <p key={course._id}>{course.course.course_name}</p>
+        )),
+        TEACHER: cdata.course.map(course => (
+          <p key={course.teacher._id} title={course.teacher.takenCredit}>
+            {course.teacher.teacherInitial}
+          </p>
+        )),
+      })
+    );
   const data = {
     columns: [
       {
@@ -54,7 +84,21 @@ const CourseAllocationTable = () => {
     ],
     rows: rowsData,
   };
-  return <MDBDataTable bordered small data={data} />;
+  return (
+    <div>
+      {courseAllocationData.isLoading ? (
+        <div className='m-5 p-5 mx-auto center text-center'>
+          <span className='sr-only'>Loading...</span>
+          <div className='spinner-border' role='status'></div>
+        </div>
+      ) : (
+        <div className="course-allocation-data-table mt-4 pt-4">
+          <h4>Course Allocation Table : </h4>
+        <MDBDataTable bordered small data={data} />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default CourseAllocationTable;

client/src/features/CourseAllocation/courseAllocationActions.js

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { setDataLoading, getCourseAllocationData } from './courseAllocationSlice';
+
+// get / read
+export const fetchCourseAllocationData = () => dispatch => {
+    dispatch(setDataLoading())
+  axios
+    .get('http://localhost:8000/api/course-allocation/')
+    .then(res => {
+      dispatch(getCourseAllocationData(res.data.data));
+    console.log('cadata ', res);
+    })
+    .catch(err => console.log('err ', err.response));
+};
+
+// // add / create
+// export const newUser = body => dispatch => {
+//   dispatch(addUser(body));
+// };
+
+// // remove / delete
+// export const removeUser = id => dispatch => {
+//   dispatch(deleteUser(id));
+// };
+
+// // update
+// export const modifyUser = body => dispatch => {
+//   dispatch(updateUser(body));
+// };