Bl 935 fe i want to approve instructor course proposals

src/components/pages/AdminHome/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../styles/InstructorStyles/index.less';
+import '../../../styles/AdminStyles/index.less';
 import AdminSidebar from './AdminSidebar';
 import AdminHomeContent from './AdminHomeContent';
 import { Layout } from 'antd';

src/components/pages/AdminPrograms/AdminPrograms.js

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Layout, Button, Badge, Modal, Tabs } from 'antd';
+import { FileDoneOutlined } from '@ant-design/icons';
+import { connect } from 'react-redux';
+import AdminSidebar from '../AdminHome/AdminSidebar';
+import ModalHeader from './CoursesModalHeader';
+
+import '../../../styles/AdminDashboardHome/index.less';
+
+function AdminPrograms(props) {
+  const [courses, setCourses] = useState(props.courses.courses);
+
+  const [showCourses, setShowCourses] = useState(false);
+
+  const showModal = () => setShowCourses(true);
+  const hideModal = () => setShowCourses(false);
+
+  const { Content } = Layout;
+
+  return (
+    <Layout>
+      <AdminSidebar />
+      <Content>
+        <div id="programs-header">
+          <h3>Programs</h3>
+          <Badge offset={[30, 0]} count={4} color={'red'}>
+            <Button onClick={showModal} icon={<FileDoneOutlined />}>
+              Manage Courses
+            </Button>
+          </Badge>
+        </div>
+      </Content>
+      {/* TODO - Height for modal */}
+      <Modal
+        title={<ModalHeader />}
+        visible={showCourses}
+        open={true}
+        onOk={hideModal}
+        onCancel={hideModal}
+        centered={true}
+        width={1000}
+        footer={null}
+      >
+        {/* TODO - Tabs formatting, styling, and refactoring courses map */}
+        <Tabs tabPosition={'bottom'} type="card">
+          <Tabs.TabPane key="1" tab="Approved">
+            {courses.map(item => {
+              if (item.status.approval === 'accepted') {
+                return (
+                  <div className="course-modal-item">
+                    <p>{item.course_name} </p>
+                    <p>{item.program_name} </p>
+                    <p>{item.max_size} </p>
+                    <p>{item.instructor_name} </p>
+                  </div>
+                );
+              }
+            })}
+          </Tabs.TabPane>
+          <Tabs.TabPane key="2" tab="Pending">
+            {courses.map(item => {
+              if (item.status.approval === 'pending') {
+                return (
+                  <div className="course-modal-item">
+                    <p>{item.course_name} </p>
+                    <p>{item.program_name} </p>
+                    <p>{item.max_size} </p>
+                    <p>{item.instructor_name} </p>
+                  </div>
+                );
+              }
+            })}
+          </Tabs.TabPane>
+        </Tabs>
+      </Modal>
+    </Layout>
+  );
+}
+
+function mapStateToProps(state) {
+  return { courses: state.coursesReducer };
+}
+
+export default connect(mapStateToProps)(AdminPrograms);

src/components/pages/AdminPrograms/CoursesModalHeader.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Drawer, Checkbox, Button } from 'antd';
+import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+
+function ModalHeader() {
+  const [open, setOpen] = useState(false);
+
+  const openDrawer = () => setOpen(true);
+  const onClose = () => setOpen(false);
+
+  function handleSubmit(evt) {
+    evt.preventDefault();
+  }
+
+  return (
+    <div id="modal-header">
+      <h3 className="modal-header-title">Pending</h3>
+      <form class="courses-search-form" onSubmit={handleSubmit}>
+        <Button
+          id="filter-button"
+          size={'large'}
+          icon={<FilterOutlined />}
+          onClick={openDrawer}
+          block={true}
+        >
+          Filter
+        </Button>
+        <input
+          className="courses-search-bar"
+          type="text"
+          placeholder="Search..."
+        />
+        <button id="courses-search-button">
+          <SearchOutlined />
+        </button>
+      </form>
+      <div id="modal-button-holder"></div>
+      <Drawer
+        title="Filters"
+        placement={'left'}
+        closeable={'true'}
+        onClose={onClose}
+        visible={open}
+      >
+        <Checkbox>
+          <p>Check One</p>
+        </Checkbox>
+        <Checkbox>
+          <p>Check Two</p>
+        </Checkbox>
+      </Drawer>
+    </div>
+  );
+}
+
+export default ModalHeader;

src/dummyData.js

@@ -2,37 +2,130 @@ export const dummyData = {
   courses: [
     {
       course_id: 1,
-      course_name: 'CS101',
-      course_description: 'Computer Science fundamentals',
+      course_name: 'Some cheese',
+      course_description:
+        'A course description goes here and I could really just put lorem ipsum but I really just feel like typing stream of consciousness style here.',
       days_of_week: ['Monday'],
-      max_size: '15',
-      min_age: '7',
-      max_age: '18',
-      start_time: '17:00:00',
-      end_time: '18:00:00',
-      start_date: '2021-12-22T07:00:00.000Z',
-      end_date: '2021-10-10T07:00:00.000Z',
-      number_of_sessions: '7',
-      location: 'zoom.us',
-      instructor_id: '1',
-      program_id: '1',
+      max_size: 20,
+      enrolled_students: 2,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 2,
+      program_id: 3,
+      start_time: '05:00:00',
+      end_time: '5:30:00',
+      start_date: '04/04/2022',
+      end_date: '04/28/2022',
+      number_of_sessions: 4,
+      difficulty: 'Easy',
+      session_type: '1-on-1',
+      syllabus_link: 'https://docs.google.com',
+      status: {
+        approval: 'pending',
+        feedback: null,
+      },
+    },
+    {
+      course_id: 2,
+      course_name: 'App alphabet soup',
+      course_description:
+        'It is pretty easy and simple to understand I mean an app going into soup just makes sense intrensically and I dont think anyone should think twice about that whatsoever.',
+      days_of_week: ['Monday', 'Wednesday', 'Friday'],
+      max_size: 30,
+      enrolled_students: 14,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 2,
+      program_id: 1,
+      start_time: '08:00:00',
+      end_time: '12:30:00',
+      start_date: '11/15/2022',
+      end_date: '11/22/2022',
+      number_of_sessions: 6,
+      difficulty: 'Hard',
+      session_type: 'Group',
+      syllabus_link: 'https://docs.google.com/something-ig',
+      status: {
+        approval: 'pending',
+        feedback: null,
+      },
     },
     {
       course_id: 3,
-      course_name: 'JavaScriptB',
-      course_description: 'Intermediate Javascript.',
-      days_of_week: ['Thursday'],
-      max_size: '16',
-      min_age: '9',
-      max_age: '15',
-      start_time: '15:00:00',
-      end_time: '16:00:00',
-      start_date: '2021-12-05T07:00:00.000Z',
-      end_date: '2021-10-11T07:00:00.000Z',
-      number_of_sessions: '7',
-      location: 'zoom.us',
-      instructor_id: '2',
-      program_id: '1',
+      course_name: 'Coding Jumping Jacks',
+      course_description:
+        'If youre going to code you should at least be able to do it while exercising, otherwise are you really a programmer? thought not.',
+      days_of_week: ['Monday', 'Friday'],
+      max_size: 100,
+      enrolled_students: 60,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 3,
+      program_id: 1,
+      start_time: '09:00:00',
+      end_time: '1:45:00',
+      start_date: '11/21/2022',
+      end_date: '11/25/2022',
+      number_of_sessions: 2,
+      difficulty: 'Easy',
+      session_type: 'Group',
+      syllabus_link: 'https://docs.google.com/something-else-ig',
+      status: {
+        approval: 'approved',
+        feedback:
+          'Good job picking the most confusing combination of topics! Maybe next time just do a good job.',
+      },
+    },
+    {
+      course_id: 4,
+      course_name: 'Phoning things in',
+      course_description:
+        'This course will show you the ropes of procrastinating and doing a barely good enough job on your projects, the pastime of most programmers.',
+      days_of_week: ['Monday', 'Tuesday', 'Wednesday', 'Thursdays', 'Friday'],
+      max_size: 15,
+      enrolled_students: 15,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 1,
+      program_id: 1,
+      start_time: '00:00:00',
+      end_time: '11:59:00',
+      start_date: '11/28/2022',
+      end_date: '12/16/2022',
+      number_of_sessions: 15,
+      difficulty: 'Easy',
+      session_type: '1-on-1',
+      syllabus_link: 'https://docs.google.com/something-else-again-ig',
+      status: {
+        approval: 'pending',
+        feedback: null,
+      },
+    },
+    {
+      course_id: 5,
+      course_name: 'This one works',
+      course_description:
+        'This course will be accepted because I decided so while making the mock data, not as if this is a good course idea. Its just late and I would like to get this over with.',
+      days_of_week: ['Monday', 'Thursdays', 'Friday'],
+      max_size: 15,
+      enrolled_students: 9,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 5,
+      program_id: 1,
+      start_time: '00:00:00',
+      end_time: '11:59:00',
+      start_date: '11/28/2022',
+      end_date: '12/16/2022',
+      number_of_sessions: 15,
+      difficulty: 'Easy',
+      session_type: '1-on-1',
+      syllabus_link: 'https://docs.google.com/something-else-again-ig',
+      status: {
+        approval: 'approved',
+        feedback:
+          'Honestly whoever made this mock data is really pulling the leg of whoever reads it, apologies.',
+      },
     },
   ],
 

src/index.js

@@ -30,6 +30,7 @@ import ParentFamilyHome from './components/pages/ParentFamily/ParentFamilyHome';
 import AdminHome from './components/pages/AdminHome/index';
 import AdminAddCourses from './components/pages/AdminAddCourse';
 import AdminCourses from './components/pages/AdminHome/AdminCourses';
+import AdminPrograms from './components/pages/AdminPrograms/AdminPrograms';
 import AdminPurchases from './components/pages/AdminHome/AdminPurchases';
 import AdminInstructors from './components/pages/AdminHome/AdminInstructors';
 import ParentBooking from './components/pages/ParentBooking';
@@ -177,6 +178,7 @@ function App() {
         {/* The above route exists for developmental purposes, but the "/" path will be for the home page ("/landing") in the deployed version */}
         <Route path="/admin-add-course" component={AdminAddCourses} />
         <Route path="/admin-courses" component={AdminCourses} />
+        <Route path="/admin-programs" component={AdminPrograms} />
         <Route path="/admin-edit-course" component={AdminEditCourse} />
         {/* The above route exists for developmental purposes, The dashboard should be determined by the role logging in */}
         <Route path="/admin-purchases" component={AdminPurchases} />