Simplified import starting with React. Added name property to group object passed to table. changed group interface shape.

;

;

l
;
d
This commit is contained in:
Maciek Głowacki 2020-09-18 23:00:11 +02:00
parent e90ffbe04d
commit 0ae374a0fb
5 changed files with 22 additions and 15 deletions

View File

@ -83,7 +83,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
const name = target.textContent;
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint
const course: Basket = { name: name.trim(), id: parseInt(id), lecture: null, classes: null };
const course: Basket = { name: name.trim(), id: parseInt(id) };
addToBasket(course);
setOpen(false);

View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect, useState, MouseEvent } from 'react';
import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types';
@ -7,7 +7,7 @@ interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
onClick: (e: React.MouseEvent) => void
onClick: (e: MouseEvent) => void;
}
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
@ -29,17 +29,24 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
useEffect(() => {
function mapGroupTimeToEventRow(basket: Array<Basket>) {
const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array<Group>;
const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array<Group>;
const classes = basket.map(({ classes, name }) => ({ ...classes, name })).filter((cl) => cl !== null) as Array<
Group & { name: string }
>;
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })).filter((lec) => lec !== null) as Array<
Group & { name: string }
>;
const merged = [...classes, ...lectures];
console.log('merged');
console.log(merged);
if (merged.length >= 1) {
const groupsMapped = merged.map(({ id, day, lecturer, room, time }) => ({
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
id,
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
name,
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { MouseEvent } from 'react';
import { Group } from '../types';
import styled from 'styled-components';
@ -21,17 +21,17 @@ const ClassDiv = styled.div<SchedulerEventProps>`
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
z-index: 2;
border-radius: 10px;
padding-left:5px;
padding-left: 5px;
background-color: rgb(100, 181, 246);
`;
interface SchedulerRowProps {
groups: Array<Group>;
groups: Array<Group & { name: string }>;
indexRow: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
onClick: (e: React.MouseEvent) => void;
onClick: (e: MouseEvent) => void;
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
@ -58,7 +58,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
id={`eventRow${indexRow}eventCol${eventIndex}`}
key={index}
>
{groups[index]?.lecturer}
{groups[index].name}
</ClassDiv>
),
)}

View File

@ -1,4 +1,4 @@
import React, { useState, createContext, useEffect } from 'react';
import React, { useState, createContext, useEffect, ReactNode } from 'react';
import { Course, Group, Basket, GroupType } from '../types';
import axios from 'axios';
@ -11,7 +11,7 @@ interface CourseContext {
export const coursesContext = createContext<CourseContext | null>(null);
interface CoursesProviderProps {
children: React.ReactNode;
children: ReactNode;
}
export const CoursesProvider = ({ children }: CoursesProviderProps) => {

View File

@ -6,8 +6,8 @@ export enum GroupType {
export interface Basket {
id: number;
name: string;
lecture: Group | null;
classes: Group | null;
lecture?: Group;
classes?: Group;
}
export interface Group {