design changes

src/components/CourseCard.tsx

@@ -66,7 +66,7 @@ interface ExpandIconProps {
   selected: boolean;
 }
 
-const ExpandIcon = styled(Expand)<ExpandIconProps>`
+export const ExpandIcon = styled(Expand)<ExpandIconProps>`
   width: 20px;
   height: 20px;
   max-width: 20px;
@@ -144,10 +144,14 @@ export const CourseCard = ({ course }: CourseCardProps) => {
   } = useContext(coursesContext)!;
   const [isSelected, setSelected] = useState(false);
   const groups = [...course.lectures!, ...course.classes!];
-  const [courseLecture, courseClasses] = selectBasketCourseGroups(course.id);
+  const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []);
+  const [previous, setPrevious] = useState(basketCourseGroups);
   // console.log('lecture is: ', courseLecture);
   // console.log('class is: ', courseClasses);
-  const onGroupClick = (group: Group, courseId: number) => changeGroupInBasket(group, courseId);
+  const onGroupClick = (group: Group, courseId: number) => {
+    setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group }));
+    changeGroupInBasket(group, courseId);
+  };
 
   return (
     <CourseCardWrapper>
@@ -168,20 +172,23 @@ export const CourseCard = ({ course }: CourseCardProps) => {
             key={index}
             onClick={() => onGroupClick(group, course.id)}
             onMouseEnter={() => {
-              if (group.type === GroupType.CLASS && courseClasses !== undefined) {
+              if (group.type === GroupType.CLASS) {
                 changeGroupInBasket(group, course.id);
                 // setTimeout(()=> { changeHoveredGroup(courseClasses)},[500])
-
               }
-              if (group.type === GroupType.LECTURE && courseLecture !== undefined) {
+              if (group.type === GroupType.LECTURE) {
                 changeGroupInBasket(group, course.id);
                 // setTimeout(()=> { changeHoveredGroup(courseLecture)},[500])
               }
-
             }}
             onMouseLeave={() => {
               if (hoveredGroup) {
-                changeGroupInBasket(hoveredGroup, course.id);
+                if (hoveredGroup.type === GroupType.CLASS && previous.classes !== undefined) {
+                  changeGroupInBasket(previous.classes, course.id);
+                }
+                if (hoveredGroup.type === GroupType.LECTURE && previous.lecture !== undefined) {
+                  changeGroupInBasket(previous.lecture, course.id);
+                }
                 changeHoveredGroup(null);
               }
             }}

src/components/Dropdown.tsx

@@ -34,7 +34,7 @@ const CourseContainer = styled.div`
   background-color: #f2f4f7;
   font-size: 16px;
   font-weight: 500;
-  scroll-snap-align: end;
+  /* scroll-snap-align: end; */
   :hover {
     background-color: #eceef4;
     cursor: pointer;

src/components/SchedulerRow.tsx

@@ -5,12 +5,11 @@ 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';
+import { ClickAwayListener, Popper } from '@material-ui/core';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     popover: {
-      pointerEvents: 'none',
       fontSize: '14px',
     },
     paper: {
@@ -56,7 +55,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  z-index: 2;
+  z-index: 20000;
   font-size: 0.65vw;
   line-height: normal;
   border-radius: 10px;
@@ -129,28 +128,30 @@ 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 { hoveredGroup } = useContext(coursesContext)!;
   const classes = useStyles();
   const groupsPerDay = getGroupsPerDay(groups);
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
   const [popoverId, setPopoverId] = useState<string | null>(null);
   //looks weird
   const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    console.log('I was clicked!!!!');
     setAnchorEl(event.currentTarget);
     setPopoverId(event.currentTarget.id);
   };
 
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
+  const handlePopoverClose = (e: MouseEvent<any>) => {
+    console.log('current target:', e.currentTarget);
+    console.log(' target:', e.target);
     setPopoverId(null);
+    setAnchorEl(null);
+    console.log('click awayyy');
   };
-
+  useEffect(() => {
+    console.log('anchorEl: ', anchorEl);
+  }, [anchorEl]);
   const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
 
   return (
     <div>
@@ -168,6 +169,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
               group.day === eventIndex && (
                 <Fragment key={index}>
                   <StyledSchedulerEvent
+                    aria-describedby={id}
                     isHovered={group.id === hoveredGroup?.id}
                     groupType={group.type}
                     cellWidth={cellWidth}
@@ -176,8 +178,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                     key={index}
                     aria-owns={open ? `mouse-over-popover` : undefined}
                     aria-haspopup="true"
-                    onMouseEnter={(e) => handlePopoverOpen(e)}
-                    onMouseLeave={handlePopoverClose}
+                    onClick={(e) => handlePopoverOpen(e)}
                   >
                     <ClassWrap>
                       <BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
@@ -194,7 +195,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                     </ClassWrap>
                   </StyledSchedulerEvent>
                   <Popover
-                    id={`mouse-over-popover`}
+                    id={id}
                     className={classes.popover}
                     classes={{
                       paper: classes.paper,
@@ -212,7 +213,12 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                     onClose={handlePopoverClose}
                     disableRestoreFocus
                   >
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <div
+                      style={{ display: 'flex', flexDirection: 'column', zIndex: 20000 }}
+                      onClick={() => {
+                        console.log('XDD');
+                      }}
+                    >
                       <p style={{ margin: '7px 0 7px 0', fontWeight: 'bold' }}>{groups[index].name}</p>
                       <p style={{ margin: '2px 0 2px 0' }}>
                         <PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}

src/components/SelectMenu.tsx

@@ -0,0 +1,95 @@
+import { ClickAwayListener } from '@material-ui/core';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ExpandIcon } from './CourseCard';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 10%;
+  margin-top: 15px;
+  font-family: 'Roboto', sans-serif;
+  background-color: #f1f2f5;
+  color: black;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  &:focus {
+    outline: none;
+  }
+  padding-left: 15px;
+  cursor: pointer;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  user-select: none;
+`;
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const HeaderTitle = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+`;
+const List = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  background-color: #f2f4f7;
+`;
+const ListItem = styled.li`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  user-select: none;
+  font-weight: 400;
+  :hover {
+    background-color: #eceef4;
+  }
+`;
+const ExpandIconSelect = styled(ExpandIcon)`
+  width: 10px;
+  height: 10px;
+`;
+export const SelectMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState('przedmioty');
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        setIsOpen(false);
+      }}
+    >
+      <Wrapper>
+        <Header
+          onClick={() => {
+            console.log('clicked');
+            setIsOpen(!isOpen);
+          }}
+        >
+          <HeaderTitle>{selectedOption}</HeaderTitle>
+          <ExpandIconSelect selected={isOpen} />
+        </Header>
+        {isOpen && (
+          <List>
+            <ListItem
+              onClick={() => {
+                setSelectedOption('przedmioty');
+              }}
+            >
+              przedmioty
+            </ListItem>
+            <ListItem
+              onClick={() => {
+                setSelectedOption('studenci');
+              }}
+            >
+              studenci
+            </ListItem>
+          </List>
+        )}
+      </Wrapper>
+    </ClickAwayListener>
+  );
+};

src/components/Topbar.tsx

@@ -7,6 +7,7 @@ import PolishIcon from '../assets/poland.svg';
 import EnglishIcon from '../assets/united-kingdom.svg';
 import styled from 'styled-components/macro';
 import ClickAwayListener from 'react-click-away-listener';
+import { SelectMenu } from './SelectMenu';
 
 const Topbar = styled.div`
   background-color: #e3e5ed;
@@ -51,11 +52,12 @@ const FlexboxColumn = styled.div`
 `;
 
 const InputWrapper = styled.div`
+  width: 95%;
   display: flex;
   margin-top: 15px;
+  max-height: 40px;
   background-color: #f2f4f7;
-  border-radius: 6px;
-  align-items: center;
+  border-radius: 0 6px 6px 0;
   &:hover {
     background-color: #ffffff;
   }
@@ -91,17 +93,17 @@ const Input = styled.input`
   font-size: 18px;
   background-color: #f1f2f5;
   height: 40px;
+  max-height: 40px;
   width: 100%;
   border: none;
   margin-left: 5px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
   &:focus {
     outline: none;
   }
 `;
 
 const CloseIcon = styled(Close)`
+  align-self: center;
   width: 30px;
   height: 30px;
   margin-right: 5px;
@@ -130,6 +132,10 @@ const Icon = styled.img`
   }
 `;
 
+export const Flexbox = styled.div`
+  display: flex;
+`;
+
 interface TopbarProps {
   handleTransfer: (e: MouseEvent) => void;
 }
@@ -173,13 +179,16 @@ export default function ({ handleTransfer }: TopbarProps) {
       </LogoWrapper>
       <FlexboxColumn>
         <ClickAwayListener onClickAway={handleCloseDropdown}>
+          <Flexbox>
+            <SelectMenu />
+
             <InputWrapper>
-            <SelectSearch value={value} onChange={Change}>
+              {/* <SelectSearch value={value} onChange={Change}>
     <SelectOption value="przedmiot">Przedmiot</SelectOption>
     <SelectOption value="student">Student</SelectOption>
-            </SelectSearch>
+  </SelectSearch> */}
               <Input
-              placeholder={`Wyszukaj ${value}...`}
+                placeholder={`Wyszukaj...`}
                 onChange={handleChange}
                 value={input}
                 onFocus={() => {
@@ -188,6 +197,7 @@ export default function ({ handleTransfer }: TopbarProps) {
               />
               <CloseIcon onClick={handleClearInput} />
             </InputWrapper>
+          </Flexbox>
           <Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
         </ClickAwayListener>
       </FlexboxColumn>

src/contexts/CoursesProvider.tsx

@@ -7,7 +7,9 @@ import CloseIcon from '@material-ui/icons/Close';
 import styled from 'styled-components';
 
 const StyledCloseIcon = styled(CloseIcon)`
+  color: #000000;
   &:hover {
+    color: white;
     cursor: pointer;
   }
 `;
@@ -25,7 +27,7 @@ interface CourseContext {
   selectSchedulerEvents: () => Array<SchedulerEvent>;
   selectBasketNames: () => Array<string>;
   selectBasketCourses: () => Array<Course>;
-  selectBasketCourseGroups: (courseId: number) => Array<Group | undefined>;
+  selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
 }
 export const coursesContext = createContext<CourseContext | undefined>(undefined);
 
@@ -41,9 +43,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   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);
@@ -78,9 +77,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const selectBasketCourseGroups = (courseId: number) => {
     const course = basket.find(({ id }) => id === courseId);
     if (course !== undefined) {
-      return [course.lecture, course.classes];
+      return { lecture: course.lecture, classes: course.classes };
     } else {
-      return [undefined, undefined];
+      return { lecture: undefined, classes: undefined };
     }
   };
 
@@ -172,7 +171,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
         `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
       );
       const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
-      console.log('courses: ', courses);
       setCourses(sortedCourses);
     } catch (e) {
       console.log(e);