color croups and lectures

src/components/CourseCard.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext, MouseEvent } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandIcon from '../assets/expand.png';
-import { Course, Group } from '../types/index';
+import { Course, Group, GroupType } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
@@ -32,7 +32,11 @@ const CourseNameStyled = styled.div`
   padding-bottom: 10px;
 `;
 
-const ClassGroupStyled = styled.div`
+interface ClassGroupProps{
+  groupType:GroupType;
+}
+
+const ClassGroupStyled = styled.div<ClassGroupProps>`
   padding-top: 1px;
   padding-bottom: 1px;
   :hover {
@@ -40,6 +44,7 @@ const ClassGroupStyled = styled.div`
     transition: 1s;
     background-color: #8bc8fb;
   }
+  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@@ -97,8 +102,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
       <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
       <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
-        {course.groups.map((group, index) => (
+        {course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
-          <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
+          <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
             <p>
               {group.time} {group.room} <br></br> {group.lecturer}
             </p>

src/components/Rightbar.tsx

@@ -27,9 +27,23 @@ const RightbarStyled = styled.div`
   }
 `;
 const RightbarTextStyled = styled.div`
+  display: flex;
+  flex-direction: column;
   border-bottom: 1px solid;
 `;
 
+const SaveButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(100, 181, 246) !important;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 40px;
+  background-color: red;
+  margin-bottom: 10px;
+`;
+
 export const Rightbar = () => {
   const { courses, basket } = useContext(coursesContext)!;
 
@@ -44,14 +58,14 @@ export const Rightbar = () => {
   return (
     <RightbarStyled>
       <RightbarTextStyled>
+        <p>
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
+        </p>
+        <SaveButton>SAVE</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
-        <CourseCard
+        <CourseCard course={course} key={index} />
-          course={course}
-          key={index}
-        />
       ))}
     </RightbarStyled>
   );

src/components/SchedulerEvents.tsx

@@ -33,13 +33,14 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
       const merged = [...classes, ...lectures];
 
       //deleted if statement, maybe it is needed
-      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
+      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
         id,
         day: day === 5 ? 4 : day,
         lecturer,
         room,
         eventRow: groupTimeToEventRowMapping[time],
         name,
+        type,
       }));
       setChoosenGroupsMappedToEvents(groupsMapped);
     }

src/components/SchedulerRow.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, useEffect, useState } from 'react';
-import { Group } from '../types';
+import { Group, GroupType } from '../types';
 import styled from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
@@ -35,17 +35,24 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   z-index: 2;
 `;
 
-const Classes = styled.div<SchedulerEventProps>`
+interface ClassesProps{
+  cellWidth: number;
+  cellHeight: number;
+  groupType: GroupType;
+}
+
+const Classes = styled.div<ClassesProps>`
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
   border-radius: 10px;
-  background-color: rgb(100, 181, 246);
+  /* background-color: rgb(100, 181, 246); */
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   margin-right: 5px;
   text-align: center;
+  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
 `;
 
 interface SchedulerRowProps {
@@ -61,6 +68,8 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
   const [popoverId, setPopoverId] = useState<string | null>(null);
 
+  console.log("123s"+JSON.stringify(groups));
+
   //looks weird
   const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
     setAnchorEl(event.currentTarget);
@@ -90,8 +99,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
               group.day === eventIndex && (
                 <>
                   <Classes
-                    eventIndex={eventIndex}
+                    groupType={group.type}
-                    cellTop={cellTop}
                     cellWidth={cellWidth}
                     cellHeight={cellHeight}
                     id={`eventRow${indexRow}eventCol${eventIndex}${index}`}