From 0ae374a0fbbd499fad41f2cecfcc48b8f507ea20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Fri, 18 Sep 2020 23:00:11 +0200 Subject: [PATCH] Simplified import starting with React. Added name property to group object passed to table. changed group interface shape. ; ; l ; d --- src/components/Dropdown.tsx | 2 +- src/components/SchedulerEvents.tsx | 17 ++++++++++++----- src/components/SchedulerRow.tsx | 10 +++++----- src/contexts/CoursesProvider.tsx | 4 ++-- src/types/index.ts | 4 ++-- 5 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 4defa11..e421c36 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -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); diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx index 3c69856..0e9e813 100644 --- a/src/components/SchedulerEvents.tsx +++ b/src/components/SchedulerEvents.tsx @@ -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) { - const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array; - const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array; + 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); } diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index a2545e4..259ca63 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -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` 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; + groups: Array; 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} ), )} diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 722b80b..0c64967 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -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(null); interface CoursesProviderProps { - children: React.ReactNode; + children: ReactNode; } export const CoursesProvider = ({ children }: CoursesProviderProps) => { diff --git a/src/types/index.ts b/src/types/index.ts index cdec17f..09c6f40 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -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 {