y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor again

Browse Source
This commit is contained in:
Maciek Głowacki 2020-08-12 20:52:53 +02:00
parent 48992b7e04
commit 3fba8a4a23
14 changed files with 163 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/RightBar/LectureCard/expand.png → src/components/RightBar/CourseCard/expand.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 535 B

0
src/components/RightBar/LectureCard/index.scss → src/components/RightBar/CourseCard/index.scss
View File

50
src/components/RightBar/CourseCard/index.tsx Normal file
View File

@ -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>
);
}

45
src/components/RightBar/LectureCard/index.tsx
View File

@ -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>
);
}

16
src/components/RightBar/index.tsx
View File

@ -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}

12
src/components/Scheduler/SchedulerEvents/index.tsx
View File

@ -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,

2
src/components/Scheduler/SchedulerRow/index.tsx
View File

@ -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>
))}

5
src/components/TopBar/Results/index.scss
View File

@ -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%;
}

92
src/components/TopBar/Results/index.tsx
View File

@ -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;
if (target.id && target.textContent) {
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);
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>

32
src/contexts/CoursesProvider.tsx Normal file
View File

@ -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>
);
};

32
src/contexts/LecturesProvider.tsx
View File

@ -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>
);
};

8
src/contexts/reducers.ts
View File

@ -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',
}

6
src/index.tsx
View File

@ -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'),
);

18
src/types/index.ts
View File

@ -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;
}