Groups are added to state
This commit is contained in:
		@@ -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}
 | 
			
		||||
 
 | 
			
		||||
@@ -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()}
 | 
			
		||||
        />
 | 
			
		||||
 
 | 
			
		||||
@@ -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",
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user