Refactor again

src/components/RightBar/CourseCard/index.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import './index.scss';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandIcon from './expand.png';
+import { Course, Group } from '../../../types/index';
+import { coursesContext } from '../../../contexts/CoursesProvider';
+import { group } from 'console';
+
+interface CourseCardProps {
+  onGroupMouseOver: (id: number, name: string) => void;
+  onCardClick: (e: React.MouseEvent) => void;
+  course: Course;
+  id: string;
+  isSelected: boolean;
+}
+
+export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) {
+  const { addGroup, courses } = useContext(coursesContext)!;
+
+  function onGroupClick(group: Group) {
+    addGroup(group);
+  }
+
+  return (
+    <div className="class" onClick={onCardClick} id={id}>
+      <div className="class__name">{course.name}</div>
+      <Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
+        {courses.map((course, index) => (
+          <>
+            {course.groups.map((group, index) => (
+              <div
+                className="class__group"
+                key={index}
+                onMouseOver={() => onGroupMouseOver(group.id, course.name)}
+                onClick={() => onGroupClick(group)}
+              >
+                <p>
+                  {group.time} {group.room} <br></br> {group.lecturer}
+                </p>{' '}
+              </div>
+            ))}
+          </>
+        ))}
+      </Collapse>
+      <div onClick={onCardClick} id={id}>
+        <img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
+      </div>
+    </div>
+  );
+}

src/components/RightBar/LectureCard/index.tsx

@@ -1,45 +0,0 @@
-import React, { useContext } from 'react';
-import './index.scss';
-import Collapse from '@material-ui/core/Collapse';
-import ExpandIcon from './expand.png';
-import { Lecture, Group } from '../../../types/index';
-import { LecturesContext } from '../../../contexts/LecturesProvider';
-
-interface LectureCardProps {
-  onGroupMouseOver: (id: string, name: string) => void;
-  onCardClick: (e: React.MouseEvent) => void;
-  lecture: Lecture;
-  id: string;
-  isSelected: boolean;
-}
-
-export default function LectureCard({ onGroupMouseOver, onCardClick, lecture, id, isSelected }: LectureCardProps) {
-  const { addGroup } = useContext(LecturesContext)!;
-
-  function onGroupClick(group: Group) {
-    addGroup(group);
-  }
-
-  return (
-    <div className="class" onClick={onCardClick} id={id}>
-      <div className="class__name">{lecture.name}</div>
-      <Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
-        {lecture.groups.map((group, index) => (
-          <div
-            className="class__group"
-            key={index}
-            onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
-            onClick={() => onGroupClick(group)}
-          >
-            <p>
-              {group.time} {group.room} <br></br> {group.lecturer}
-            </p>{' '}
-          </div>
-        ))}
-      </Collapse>
-      <div onClick={onCardClick} id={id}>
-        <img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
-      </div>
-    </div>
-  );
-}

src/components/RightBar/index.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useContext } from 'react';
 import './index.scss';
-import { Lecture } from '../../types';
-import LectureCard from './LectureCard';
-import { LecturesContext } from '../../contexts/LecturesProvider';
+import { Course } from '../../types';
+import { CourseCard } from './CourseCard/index';
+import { coursesContext } from '../../contexts/CoursesProvider';
 
 interface RightBarProps {
-  onGroupMouseOver: (id: string, name: string) => void;
+  onGroupMouseOver: (id: number, name: string) => void;
 }
 
 export default function RightBar({ onGroupMouseOver }: RightBarProps) {
   const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
 
-  const lecturesContext = useContext(LecturesContext);
+  const { courses } = useContext(coursesContext)!;
 
   const onCardClick = (e: React.MouseEvent) => {
     const target = e.currentTarget as HTMLElement;
@@ -24,9 +24,9 @@ export default function RightBar({ onGroupMouseOver }: RightBarProps) {
         Hubert Wrzesiński<br></br>
         Semestr zimowy 2020/2021
       </div>
-      {lecturesContext?.lectures.map((lecture, index) => (
-        <LectureCard
-          lecture={lecture}
+      {courses.map((course, index) => (
+        <CourseCard
+          course={course}
           key={index}
           id={index.toString()}
           onGroupMouseOver={onGroupMouseOver}

src/components/Scheduler/SchedulerEvents/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { SchedulerRow } from '../SchedulerRow';
-import { LecturesContext } from '../../../contexts/LecturesProvider';
+import { coursesContext } from '../../../contexts/CoursesProvider';
 import { Group } from '../../../types';
 
 interface SchedulerEventsProps {
@@ -9,20 +9,20 @@ interface SchedulerEventsProps {
 }
 
 export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
-  const { choosenGroups } = useContext(LecturesContext)!;
+  const { choosenGroups } = useContext(coursesContext)!;
 
   const [groupsMappedToEvents, setGroupsMappedToEvents] = useState<any>([]);
 
-  // const groups: Array<Group> = [{ id: "5", day: "4", time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3" },
-  // { id: "28", day: "1", time: "13.45", lecturer: "dr Barbara Kołodziejczak", room: "D-3" },
-  // { id: "69", day: "4", time: "15.30", lecturer: "dr Karol Gierszewski", room: "A2-3" }];
+  // const groups: Array<Group> = [{ id: "5", day: "4", time: "11.45", courser: "dr Dorota Blinkiewicz", room: "A2-3" },
+  // { id: "28", day: "1", time: "13.45", courser: "dr Barbara Kołodziejczak", room: "D-3" },
+  // { id: "69", day: "4", time: "15.30", courser: "dr Karol Gierszewski", room: "A2-3" }];
 
   interface GroupTimeToEventRowMapping {
     [time: string]: number;
   }
 
   const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
-    '8.15': 0,
+    '08.15': 0,
     '10.00': 1,
     '11.45': 2,
     '13.45': 3,

src/components/Scheduler/SchedulerRow/index.tsx

@@ -39,7 +39,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
           id={`eventRow${indexRow}eventCol${eventIndex}`}
         >
           {groups.map((group, index) =>
-            parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div> : null,
+            group.day === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div> : null,
           )}
         </SchedulerEvent>
       ))}

src/components/TopBar/Results/index.scss

@@ -1,4 +1,4 @@
-.lecture {
+.course {
   position: relative;
   z-index: 10;
   padding: 5px;
@@ -7,7 +7,7 @@
   font-size: 18px;
   font-family: Lato;
 }
-.lecture:hover{
+.course:hover {
   background-color: #d4b851;
   cursor: pointer;
 }
@@ -21,4 +21,3 @@
 .top-bar__input-field {
   width: 100%;
 }
-

src/components/TopBar/Results/index.tsx

@@ -3,59 +3,48 @@ import axios from 'axios';
 import { Input } from '@material-ui/core';
 import './index.scss';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import { LecturesContext } from '../../../contexts/LecturesProvider';
-import { Lecture, Group } from '../../../types';
+import { coursesContext } from '../../../contexts/CoursesProvider';
+import { Course, Group } from '../../../types';
 
-interface LectureData {
+interface courseData {
   name: string;
   id: number;
 }
 
 export const Results: React.FC = () => {
   const [input, setInput] = useState<string>('');
-  const [lecturesData, setLecturesData] = useState<Array<LectureData>>([]);
-  const [filteredLecturesData, setFilteredLecturesData] = useState<Array<LectureData>>([]);
+  const [coursesData, setcoursesData] = useState<Array<courseData>>([]);
+  const [filteredcoursesData, setFilteredcoursesData] = useState<Array<courseData>>([]);
   const [open, setOpen] = React.useState(false);
 
-  const lecturesContext = useContext(LecturesContext)!;
-
-  //fetch lectures ids and lectures names
-  // useEffect(() => {
-  //   const fetchData = async () => {
-  //     const {lecturesData } = await axios.get(
-  //       `http://localhost:1287/getCourses?name=""`
-  //     );
-  //     setLecturesData(lecturesData);
-  //   };
-  //   fetchData();
-  // }, []);
+  const { courses, addCourse } = useContext(coursesContext)!;
 
   useEffect(() => {
     const fetchData = async () => {
-      const results = await axios.get(`http://localhost:1287/getCourses?name=`);
-      const lecturesData = results.data.map((result: { id: number; name: string }) => ({
+      const results = await axios.get(`http://localhost:1285/getCourses`);
+      const coursesData = results.data.map((result: { id: number; name: string }) => ({
         id: result.id,
         name: result.name,
       }));
 
-      setLecturesData(lecturesData);
+      setcoursesData(coursesData);
     };
     fetchData();
   }, []);
 
   useEffect(() => {
-    const names = lecturesContext.lectures.map((lecture) => lecture.name);
-    const filterLectures = (value: string) => {
-      let filteredLectures = lecturesData.filter(
-        (lecture) => lecture.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(lecture.name),
+    const names = courses.map((course) => course.name);
+    const filtercourses = (value: string) => {
+      let filteredcourses = coursesData.filter(
+        (course) => course.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(course.name),
       );
-      setFilteredLecturesData(filteredLectures);
+      setFilteredcoursesData(filteredcourses);
     };
-    filterLectures(input);
+    filtercourses(input);
   }, [input, open]);
 
-  const getLecturesById = async (id: string) => {
-    const { data } = await axios.get(`http://localhost:1287/getClassesByCourseId?id=${id}`);
+  const getGroupsByCourseId = async (id: string) => {
+    const { data } = await axios.get(`http://localhost:1285/getCourseGroups?id=${id}`);
     return data;
   };
 
@@ -71,27 +60,34 @@ export const Results: React.FC = () => {
     setOpen(false);
   };
 
-  const onLectureClick = async (e: React.MouseEvent) => {
+  const onCourseClick = async (e: React.MouseEvent) => {
     const target = e.currentTarget as HTMLElement;
-    const id = target.id;
-    const result = await getLecturesById(id);
-
-    let groups: Array<Group> = [];
-    let lecture = { groups: groups } as Lecture;
-    lecture.id = result[0].course.id;
-    lecture.name = result[0].course.name;
-    for (let i = 0; i < result.length; i++) {
-      let group = {} as Group;
-      group.id = result[i].id;
-      group.day = result[i].day;
-      group.time = result[i].time;
-      group.lecturer = result[i].lecturer.title + ' ' + result[i].lecturer.name + ' ' + result[i].lecturer.surname;
-      group.room = result[i].room.trim();
-      lecture.groups.push(group);
+    if (target.id && target.textContent) {
+      const id = target.id;
+      const name = target.textContent;
+      const groups = await getGroupsByCourseId(id);
+      const course: Course = {
+        name: name,
+        id: parseInt(id),
+        groups: groups,
+      };
+      addCourse(course);
+      setOpen(false);
     }
 
-    lecturesContext.addLecture(lecture);
-    setOpen(false);
+    // let groups: Array<Group> = [];
+    // let course = { groups: groups } as course;
+    // course.id = result[0].course.id;
+    // course.name = result[0].course.name;
+    // for (let i = 0; i < result.length; i++) {
+    //   let group = {} as Group;
+    //   group.id = result[i].id;
+    //   group.day = result[i].day;
+    //   group.time = result[i].time;
+    //   group.courser = result[i].courser.title + ' ' + result[i].courser.name + ' ' + result[i].courser.surname;
+    //   group.room = result[i].room.trim();
+    //   course.groups.push(group);
+    // }
   };
 
   return (
@@ -107,9 +103,9 @@ export const Results: React.FC = () => {
         />
         {open ? (
           <div className="dropdown">
-            {filteredLecturesData.map((lecture, index) => (
-              <div className="lecture" key={index} id={String(lecture.id)} onClick={onLectureClick}>
-                <p>{lecture.name} </p>
+            {filteredcoursesData.map((course, index) => (
+              <div className="course" key={index} id={String(course.id)} onClick={onCourseClick}>
+                <p>{course.name} </p>
               </div>
             ))}
           </div>

src/contexts/CoursesProvider.tsx

@@ -0,0 +1,32 @@
+import React, { useState, createContext, useEffect } from 'react';
+import { Course, Group } from '../types';
+
+interface courseContext {
+  courses: Array<Course>;
+  choosenGroups: Array<Group>;
+  addCourse: (courses: Course) => void;
+  addGroup: (group: Group) => void;
+}
+export const coursesContext = createContext<courseContext | null>(null);
+
+interface CoursesProviderProps {
+  children: React.ReactNode;
+}
+
+export const CoursesProvider = ({ children }: CoursesProviderProps) => {
+  const [courses, setCourses] = useState<Array<Course>>([]);
+  const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
+
+  const addCourse = (course: Course) => {
+    setCourses([...courses, course]);
+  };
+  const addGroup = (group: Group) => {
+    setChoosenGroups([...choosenGroups, group]);
+  };
+
+  return (
+    <coursesContext.Provider value={{ courses, choosenGroups, addCourse, addGroup }}>
+      {children}
+    </coursesContext.Provider>
+  );
+};

src/contexts/LecturesProvider.tsx

@@ -1,32 +0,0 @@
-import React, { useState, createContext } from 'react';
-import { Lecture, Group } from '../types';
-
-interface LectureContext {
-  lectures: Array<Lecture>;
-  choosenGroups: Array<Group>;
-  addLecture: (lectures: Lecture) => void;
-  addGroup: (group: Group) => void;
-}
-export const LecturesContext = createContext<LectureContext | null>(null);
-
-interface LecturesProviderProps {
-  children: React.ReactNode;
-}
-
-export const LecturesProvider = ({ children }: LecturesProviderProps) => {
-  const [lectures, setLectures] = useState<Array<Lecture>>([]);
-  const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
-
-  const addLecture = (lecture: Lecture) => {
-    setLectures([...lectures, lecture]);
-  };
-  const addGroup = (group: Group) => {
-    setChoosenGroups([...choosenGroups, group]);
-  };
-
-  return (
-    <LecturesContext.Provider value={{ lectures, choosenGroups, addLecture, addGroup }}>
-      {children}
-    </LecturesContext.Provider>
-  );
-};

src/contexts/reducers.ts

@@ -1,8 +1,6 @@
 export enum Types {
-  addLecture = 'ADD_LECTURE',
-  removeLecture = 'REMOVE_LECTURE',
-  addGroup = 'ADD_GROUP',
-  removeGroup = 'ADD_GROUP',
   addCourse = 'ADD_COURSE',
-  removeCourse = 'REMOVE_COURSE',
+  removecourse = 'REMOVE_COURSE',
+  addGroup = 'ADD_GROUP',
+  removeGroup = 'REMOVE_GROUP',
 }

src/index.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';
 import { CASProvider } from './contexts/CASProvider';
-import { LecturesProvider } from './contexts/LecturesProvider';
+import { CoursesProvider } from './contexts/CoursesProvider';
 import { GlobalStyles } from './styles/GlobalStyles';
 
 ReactDOM.render(
   <>
-    <LecturesProvider>
+    <CoursesProvider>
       <CASProvider>
         <GlobalStyles />
         <App />
       </CASProvider>
-    </LecturesProvider>
+    </CoursesProvider>
   </>,
   document.getElementById('root'),
 );

src/types/index.ts

@@ -1,16 +1,24 @@
+export enum GroupType {
+  course = 'course',
+  CLASS = 'class',
+}
+
 export interface Group {
-  id: string;
-  day: string;
+  id: number;
+  day: number;
   time: string;
   lecturer: string;
   room: string;
+  groupType: GroupType;
+  capacity?: number;
 }
-export interface Lecture {
-  id?: number;
+
+export interface Course {
+  id: number;
   name: string;
   groups: Array<Group>;
 }
-export interface LectureInit {
+export interface courseInit {
   name: string;
   id: number;
 }