Groups are added to state

src/App.tsx

@@ -45,7 +45,6 @@ function App() {
 						lectures={lectures}
 						onGroupMouseOver={(id, name) => {
 						}}
-						onGroupClick={(id, name) => {}}
 					/>
 				</div>
 			</div>

src/businesslogic/LecturesProvider.tsx

@@ -1,26 +1,34 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { lectures } from "./mockData/lectures";
 import { Lecture } from "./types/lecture";
-
+import { Group } from "./types/group";
 interface ILectureContext {
   lectures: Array<Lecture>;
   updateLectures: (lectures: Lecture) => void;
 }
 export const LecturesContext = React.createContext({
   lectures: Array<Lecture>(),
-  updateLectures: (lectures: Lecture) => {},
+  choosenGroups: Array<Group>(),
+  updateLectures: (lecture: Lecture) => {},
+  updateGroups: (group : Group) => {}
 });
 
 export const LecturesProvider: React.FC = (props) => {
   const [lectures, setLectures] = useState<Array<Lecture>>([]);
-
+  const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
   const updateLectures = (lecture: Lecture) => {
     setLectures([...lectures, lecture]);
   };
+  const updateGroups = (group : Group) => {
+    setChoosenGroups([...choosenGroups, group]);
+  };
+
+
+  useEffect(()=>{console.log(`Groups have changed: ${JSON.stringify(choosenGroups)}`)},[choosenGroups]);
 
   return (
     <LecturesContext.Provider
-      value={{ lectures: lectures, updateLectures: updateLectures }}
+      value={{ lectures, choosenGroups, updateLectures, updateGroups }}
     >
       {props.children}
     </LecturesContext.Provider>

src/components/RightBar/LectureCard/index.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, {useContext} from "react";
 import "./index.scss";
 import Collapse from "@material-ui/core/Collapse";
 import ExpandIcon from "./expand.png";
 import { Lecture } from "../../../businesslogic/types/lecture";
+import { Group } from "../../../businesslogic/types/group";
+import { LecturesContext } from "../../../businesslogic/LecturesProvider";
 
 interface LectureCardProps {
   onGroupMouseOver: (id: string, name: string) => void;
-  onGroupClick: (id: string, name: string) => void;
   onCardClick: (e: React.MouseEvent) => void;
   lecture: Lecture;
   id: string;
@@ -15,12 +16,21 @@ interface LectureCardProps {
 
 export default function LectureCard({
   onGroupMouseOver,
-  onGroupClick,
   onCardClick,
   lecture,
   id,
   isSelected,
 }: LectureCardProps) {
+
+  const {updateGroups} = useContext(LecturesContext);
+
+
+  function onGroupClick(group : Group){
+      console.log(`group is: ${JSON.stringify(group)}`)
+      updateGroups(group);
+  }
+
+
   return (
     <div className="class" onClick={onCardClick} id={id}>
       <div className="class__name">{lecture.name}</div>
@@ -35,7 +45,7 @@ export default function LectureCard({
             className="class__group"
             key={index}
             onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
-            onClick={() => onGroupClick(group.id, lecture.name)}
+            onClick={() => onGroupClick(group)}
           >
             <p>
               {group.time} {group.room} <br></br> {group.lecturer}

src/components/RightBar/index.tsx

@@ -6,14 +6,12 @@ import { LecturesContext } from "../../businesslogic/LecturesProvider";
 
 interface RightBarProps {
   onGroupMouseOver: (id: string, name: string) => void;
-  onGroupClick: (id: string, name: string) => void;
   lectures: Array<Lecture>;
 }
 
 export default function RightBar({
   lectures,
   onGroupMouseOver,
-  onGroupClick,
 }: RightBarProps) {
   const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
 
@@ -28,9 +26,6 @@ export default function RightBar({
 
   return (
     <div className="right-bar">
-      {/* <BusinessLogicContext.Consumer>
-				{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
-			</BusinessLogicContext.Consumer> */}
       <div className="right-bar__text">
         Hubert Wrzesiński<br></br>
         Semestr zimowy 2020/2021
@@ -41,7 +36,6 @@ export default function RightBar({
           key={index}
           id={index.toString()}
           onGroupMouseOver={onGroupMouseOver}
-          onGroupClick={onGroupClick}
           onCardClick={onCardClick}
           isSelected={selectedCardId === index.toString()}
         />

src/components/Scheduler/SchedulerEvent/index.tsx

@@ -13,17 +13,16 @@ export const SchedulerEvent = ({ events, colIndex }: SchedulerEventProps) => {
 
   return (
     <>
-      {events.map((event, index) => (
+      {events.map((_, index) => (
         <div
           id={`eventCol${colIndex}eventRow${index}`}
           style={{
             position: "absolute",
-            top: 80 * index + 5,
-            left:5,
+            top: 80 * index + 10,
+            left: 5,
             backgroundColor: "#839FE6",
             color: "white",
             borderRadius: 5,
-            padding:5,
             width: "80%",
             height: 60,
             display: "none",

src/components/Scheduler/index.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
 import { useState } from "react";
 import "./index.scss";
 import { SchedulerEvent } from "./SchedulerEvent";
 import { Column } from "./Column";
+import { LecturesContext } from "../../businesslogic/LecturesProvider";
 const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
 
 const hours = [
@@ -31,11 +32,16 @@ let terms = ["Zawsze", "jest pora", "na kurde", "lody", "koral"];
 
 export const Scheduler = () => {
   const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
+
+  const { choosenGroups } = useContext(LecturesContext);
+
   useEffect(() => {
     const displayEvents = () => {
       currentEventsIds.map((eventId: string) => {
         const event = document.getElementById(eventId);
-        event!.style.display = "block";
+        if (event) {
+          event.style.display = "block";
+        }
       });
     };
     displayEvents();
@@ -52,7 +58,7 @@ export const Scheduler = () => {
 
   return (
     <>
-      <div className="scheduler">
+      <div className="scheduler" >
         <div className="thead">
           {days.map((day, index) => (
             <div className="th" key={index}>
@@ -61,15 +67,18 @@ export const Scheduler = () => {
           ))}
         </div>
         <div className="tbody">
-          <Column hours={hours}  isEventable={false}/>
+          <Column hours={hours} isEventable={false} />
           {terms.map((_, colIndex) => (
-            <Column hours={hours} handleClick={handleClick} colIndex={colIndex} isEventable={true} >
+            <Column
+              hours={hours}
+              handleClick={handleClick}
+              colIndex={colIndex}
+              isEventable={true}
+            >
               <SchedulerEvent events={events} colIndex={colIndex} />
             </Column>
           ))}
         </div>
-        
-
       </div>
     </>
   );

src/components/TopBar/Results/index.tsx

@@ -35,7 +35,7 @@ export const Results: React.FC = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const results = await axios.get(`http://localhost:1287/getCourses?name=`);
+      const results = await axios.get(`http://localhost:1285/getCourses?name=`);
       const lecturesData = results.data.map(
         (result: { id: number; name: string }) => ({
           id: result.id,
@@ -49,18 +49,19 @@ export const Results: React.FC = () => {
   }, []);
 
   useEffect(() => {
+    const names = lecturesContext.lectures.map((lecture) => lecture.name);
     const filterLectures = (value: string) => {
-      const filteredLectures = lecturesData.filter((lecture) =>
-        lecture.name.toLowerCase().includes(value.toLowerCase())
+      let filteredLectures = lecturesData.filter((lecture) =>
+        lecture.name.toLowerCase().includes(value.toLowerCase()) &&  !names.includes(lecture.name)
       );
       setFilteredLecturesData(filteredLectures);
     };
     filterLectures(input);
-  }, [input]);
+  }, [input, open]);
 
   const getLecturesById = async (id: string) => {
     const { data } = await axios.get(
-      `http://localhost:1287/getClassesByCourseId?id=${id}`
+      `http://localhost:1285/getClassesByCourseId?id=${id}`
     );
     return data;
   };
@@ -81,6 +82,7 @@ export const Results: React.FC = () => {
     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;