added highlighting of hovered group and updated styles

src/components/CourseCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import { ReactComponent as Expand } from '../assets/expand.svg';
 import { Course, Group, GroupType } from '../types/index';
@@ -7,6 +7,7 @@ import styled, { css } from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 import { ReactComponent as Bin } from '../assets/bin.svg';
 import DeleteIcon from '@material-ui/icons/Delete';
+import { useMemo } from 'react';
 
 const CourseCardWrapper = styled.div`
   position: relative;
@@ -134,13 +135,19 @@ interface CourseCardProps {
 
 export const CourseCard = ({ course }: CourseCardProps) => {
   const classes = useStyles();
-  const { changeGroupInBasket, deleteFromBasket } = useContext(coursesContext)!;
-
+  const {
+    hoveredGroup,
+    changeGroupInBasket,
+    deleteFromBasket,
+    selectBasketCourseGroups,
+    changeHoveredGroup,
+  } = useContext(coursesContext)!;
   const [isSelected, setSelected] = useState(false);
-
   const groups = [...course.lectures!, ...course.classes!];
-
-  const onGroupClick = (group: Group, id: number) => changeGroupInBasket(group, id);
+  const [courseLecture, courseClasses] = selectBasketCourseGroups(course.id);
+  // console.log('lecture is: ', courseLecture);
+  // console.log('class is: ', courseClasses);
+  const onGroupClick = (group: Group, courseId: number) => changeGroupInBasket(group, courseId);
 
   return (
     <CourseCardWrapper>
@@ -156,8 +163,27 @@ export const CourseCard = ({ course }: CourseCardProps) => {
         <ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
       </TitleWrapper>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
-        {groups.map((group, index) => (
-          <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
+        {groups.map((group: Group, index) => (
+          <ClassGroupStyled
+            key={index}
+            onClick={() => onGroupClick(group, course.id)}
+            onMouseEnter={() => {
+              if (group.type === GroupType.CLASS && courseClasses !== undefined) {
+                changeHoveredGroup(courseClasses);
+                changeGroupInBasket(group, course.id);
+              }
+              if (group.type === GroupType.LECTURE && courseLecture !== undefined) {
+                changeHoveredGroup(courseLecture);
+                changeGroupInBasket(group, course.id);
+              }
+            }}
+            onMouseLeave={() => {
+              if (hoveredGroup) {
+                changeGroupInBasket(hoveredGroup, course.id);
+                changeHoveredGroup(null);
+              }
+            }}
+          >
             <StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType>
             <FlexboxWrapper>
               {group.lecturer.replace('UAM', '').length >= 32 ? (

src/components/Rightbar.tsx

@@ -52,7 +52,6 @@ export const Rightbar = () => {
 
   const basketCourses = selectBasketCourses();
   const handleSave = debounce(() => saveBasket(), 500);
-
   return (
     <RightbarWrapper>
       <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>

src/components/SchedulerRow.tsx

@@ -1,9 +1,11 @@
-import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react';
+import React, { Fragment, MouseEvent, useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { GroupType, SchedulerEvent } from '../types';
 import styled, { css } from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import { MONDAY_TO_FRIDAY } from '../constants';
+import { coursesContext } from '../contexts/CoursesProvider';
+import { group } from 'console';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -46,6 +48,7 @@ interface SchedulerEventProps {
   cellWidth: number;
   cellHeight: number;
   groupType: GroupType;
+  isHovered: boolean;
 }
 
 const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
@@ -62,15 +65,22 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   margin-right: 5px;
   padding: 5px 5px 0 5px;
   text-align: center;
-  background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
+  background-color: ${({ groupType, isHovered }) => {
+    if (isHovered) {
+      return groupType === 'CLASS' ? '#ffefb5' : '#d4ecff';
+    } else {
+      return groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff';
+    }
+  }};
   box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
 `;
 
 const threeStyles = () => {
   return css`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 70px;`;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 70px;
+  `;
 };
 
 type BoldParagraphProps = {
@@ -119,6 +129,12 @@ const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
 };
 
 export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
+  const { hoveredGroup, selectBasketNames } = useContext(coursesContext)!;
+  console.log('hovered group is: ', hoveredGroup);
+  console.log('groups: ', groups);
+  const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
+  console.log('basket names: ', basketNames);
+  console.log('groups: ', groups);
   const classes = useStyles();
   const groupsPerDay = getGroupsPerDay(groups);
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
@@ -152,6 +168,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
               group.day === eventIndex && (
                 <Fragment key={index}>
                   <StyledSchedulerEvent
+                    isHovered={group.id === hoveredGroup?.id}
                     groupType={group.type}
                     cellWidth={cellWidth}
                     cellHeight={cellHeight}

src/components/Topbar.tsx

@@ -180,7 +180,6 @@ export default function ({ handleTransfer }: TopbarProps) {
               onChange={handleChange}
               value={input}
               onFocus={() => {
-                console.log('i am in on focus');
                 handleShowDropdown();
               }}
             />

src/contexts/CoursesProvider.tsx

@@ -15,13 +15,17 @@ const StyledCloseIcon = styled(CloseIcon)`
 interface CourseContext {
   courses: Array<Course>;
   basket: Array<Basket>;
+  hoveredGroup: Group | undefined | null;
   addCourseToBasket: (courses: Course) => void;
-  changeGroupInBasket: (group: Group, id: number) => void;
+  changeHoveredGroup: (group: Group | null) => void;
+  changeGroupInBasket: (group: Group, courseId: number) => void;
+  restoreGroupInBasket: (restoreGroup: Group, courseId: number) => void;
   deleteFromBasket: (id: number) => void;
   saveBasket: () => void;
   selectSchedulerEvents: () => Array<SchedulerEvent>;
   selectBasketNames: () => Array<string>;
   selectBasketCourses: () => Array<Course>;
+  selectBasketCourseGroups: (courseId: number) => Array<Group | undefined>;
 }
 export const coursesContext = createContext<CourseContext | undefined>(undefined);
 
@@ -32,10 +36,14 @@ interface CoursesProviderProps {
 export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const { enqueueSnackbar } = useSnackbar();
   const { closeSnackbar } = useSnackbar();
+
   //fetch courses with groups
   const [courses, setCourses] = useState<Array<Course>>([]);
   const [basket, setBasket] = useState<Array<Basket>>([]);
-
+  const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
+  useEffect(() => {
+    console.log('actually hovered group is: ', hoveredGroup);
+  }, [hoveredGroup]);
   const selectBasketIds = () => {
     const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined);
     const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined);
@@ -67,6 +75,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     }, [] as Array<SchedulerEvent>);
   };
 
+  const selectBasketCourseGroups = (courseId: number) => {
+    const course = basket.find(({ id }) => id === courseId);
+    if (course !== undefined) {
+      return [course.lecture, course.classes];
+    } else {
+      return [undefined, undefined];
+    }
+  };
+
+  const changeHoveredGroup = (group: Group | null) => setHoveredGroup(group);
+
   const addCourseToBasket = (course: Course) => {
     const courseToBasket: Basket = {
       name: course.name,
@@ -106,8 +125,8 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     }
   };
 
-  const changeGroupInBasket = (choosenGroup: Group, id: number) => {
-    const basketCourse = basket.filter((course) => course.id === id)[0];
+  const changeGroupInBasket = (choosenGroup: Group, courseId: number) => {
+    const basketCourse = basket.filter((course) => course.id === courseId)[0];
     const { type } = choosenGroup;
     if (type === GroupType.CLASS) {
       setBasket(
@@ -120,6 +139,20 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     }
   };
 
+  const restoreGroupInBasket = (restoreGroup: Group, courseId: number) => {
+    const basketCourse = basket.filter((course) => course.id === courseId)[0];
+    const { type } = restoreGroup;
+    if (type === GroupType.CLASS) {
+      setBasket(
+        basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: restoreGroup } : basket)),
+      );
+    } else if (type === GroupType.LECTURE) {
+      setBasket(
+        basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: restoreGroup } : basket)),
+      );
+    }
+  };
+
   const getNewestTimetable = async () => {
     try {
       const { data } = await axiosInstance.get(
@@ -157,13 +190,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
       value={{
         courses,
         basket,
+        hoveredGroup,
         addCourseToBasket,
+        changeHoveredGroup,
         changeGroupInBasket,
         deleteFromBasket,
+        restoreGroupInBasket,
         saveBasket,
         selectSchedulerEvents,
         selectBasketNames,
         selectBasketCourses,
+        selectBasketCourseGroups,
       }}
     >
       {children}