Groups are added to state

This commit is contained in:
unknown 2020-07-30 18:06:27 +02:00
parent bef314120a
commit 376aca837c
7 changed files with 53 additions and 32 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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