additional changes, setup localStorage

src/components/App.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React, { ElementType, useContext, useState } from 'react';
 import Topbar from './Topbar';
 import { Transfer } from './Transfer';
 import { Admin } from './Admin';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
 import styled from 'styled-components';
-
+import { coursesContext } from '../contexts/CoursesProvider';
+import LoadingOverlay from 'react-loading-overlay';
+import { SyncLoader } from 'react-spinners';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
@@ -16,21 +18,31 @@ const Wrapper = styled.div`
 `;
 
 export const App = () => {
+  const { isDataLoading } = useContext(coursesContext)!;
   const [isOpenTransfer, setOpenTransfer] = useState(false);
 
   const handleTransfer = () => {
     setOpenTransfer(!isOpenTransfer);
   };
 
+  const userPrivilige = localStorage.getItem('userPrivilige');
+
   return (
     <>
-      <Topbar handleTransfer={handleTransfer} />
-      <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
-      <Wrapper>
-        
-        {sessionStorage.getItem('userPrivilage')=== "STUDENT" ? <><Scheduler />
-        <Rightbar /></>: <Admin/>}
-      </Wrapper>
+      <LoadingOverlay active={isDataLoading} spinner={<SyncLoader />}>
+        <Topbar handleTransfer={handleTransfer} />
+        <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
+        <Wrapper>
+          {userPrivilige === 'STUDENT' ? (
+            <>
+              <Scheduler />
+              <Rightbar />
+            </>
+          ) : (
+            <Admin />
+          )}
+        </Wrapper>
+      </LoadingOverlay>
     </>
   );
 };

src/components/CourseCard.tsx

@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { useMemo } from 'react';
 import { createClassTime } from '../utils';
+import { dayMapping } from '../constants';
 
 const CourseCardWrapper = styled.div`
   position: relative;
@@ -51,9 +52,9 @@ const CourseName = styled.div`
 
 const ClassGroupStyled = styled.div`
   position: relative;
-  padding-top: 1px;
-  padding-bottom: 5px;
-  transition: background-color 0.4s ease;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  transition: color 0.3s, background-color 0.3s;
   :hover {
     cursor: pointer;
     background-color: #9ed3ff;
@@ -147,8 +148,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
   const groups = [...course.lectures!, ...course.classes!];
   const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []);
   const [previous, setPrevious] = useState(basketCourseGroups);
-  // console.log('lecture is: ', courseLecture);
-  // console.log('class is: ', courseClasses);
+
+  console.log('course is: ', course);
   const onGroupClick = (group: Group, courseId: number) => {
     setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group }));
     changeGroupInBasket(group, courseId);
@@ -175,11 +176,9 @@ export const CourseCard = ({ course }: CourseCardProps) => {
             onMouseEnter={() => {
               if (group.type === GroupType.CLASS) {
                 changeGroupInBasket(group, course.id);
-                // setTimeout(()=> { changeHoveredGroup(courseClasses)},[500])
               }
               if (group.type === GroupType.LECTURE) {
                 changeGroupInBasket(group, course.id);
-                // setTimeout(()=> { changeHoveredGroup(courseLecture)},[500])
               }
             }}
             onMouseLeave={() => {
@@ -205,8 +204,14 @@ export const CourseCard = ({ course }: CourseCardProps) => {
                   {group.lecturer.replace('UAM', '')}
                 </FlexItem>
               )}
-              <FlexItem style={{ justifyContent: 'center', margin: '0 50px' }}>
-                <span> {createClassTime(group.time)[0] + " - " + createClassTime(group.time)[1]} {/* Sala: {group.room} */}</span>
+              <FlexItem style={{ justifyContent: 'center', flexDirection: 'column' }}>
+                {/* <span>
+                  {dayMapping[group.day]} {createClassTime(group.time)[0]} - {createClassTime(group.time)[1]}
+                </span> */}
+                <div>{dayMapping[group.day]}</div>
+                <div>
+                  {createClassTime(group.time)[0]} - {createClassTime(group.time)[1]}
+                </div>
               </FlexItem>
             </FlexboxWrapper>
           </ClassGroupStyled>

src/components/SchedulerRow.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, MouseEvent, useState, useEffect,  useContext } from 'react';
+import React, { Fragment, MouseEvent, useState, useEffect, useContext } from 'react';
 import { GroupType, SchedulerEvent } from '../types';
 import styled, { css } from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
@@ -70,6 +70,12 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
       return groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff';
     }
   }};
+  ${({ isHovered }) =>
+    isHovered &&
+    css`
+      transition: background-color 0.4s ease;
+    `}
+
   box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
 `;
 

src/components/Topbar.tsx

@@ -54,13 +54,17 @@ const FlexboxColumn = styled.div`
   flex: 12;
 `;
 
-const InputWrapper = styled.div`
+type InputWrapperProps = {
+  isStudent: boolean;
+};
+
+const InputWrapper = styled.div<InputWrapperProps>`
   width: 100%;
   display: flex;
   margin-top: 15px;
   max-height: 40px;
   background-color: #f2f4f7;
-  border-radius: 0px 6px 6px 0px;
+  border-radius: ${({ isStudent }) => (isStudent ? ` 6px 6px 6px 6px` : ` 0px 6px 6px 0px`)};
   padding-left: 6px;
   &:hover {
     background-color: #ffffff;
@@ -123,6 +127,8 @@ interface TopbarProps {
 }
 
 export default function ({ handleTransfer }: TopbarProps) {
+  const userPrivilige = localStorage.getItem('userPrivilige');
+
   const [clearInput, setClearInput] = useState(false);
   const [isPolish, setIsPolish] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
@@ -130,7 +136,7 @@ export default function ({ handleTransfer }: TopbarProps) {
   const [input, setInput] = useState('');
   const [selectedOption, setSelectedOption] = useState('przedmioty');
 
-  const changeSelectedOption = (option:string) => setSelectedOption(option);
+  const changeSelectedOption = (option: string) => setSelectedOption(option);
 
   const onLangChange = () => setIsPolish(!isPolish);
 
@@ -162,10 +168,16 @@ export default function ({ handleTransfer }: TopbarProps) {
       <FlexboxColumn>
         <ClickAwayListener onClickAway={handleCloseDropdown}>
           <Flexbox>
-            {sessionStorage.getItem('userPrivilage')=== "STUDENT" ? (<div></div>): <SelectMenu changeSelectedOption={changeSelectedOption} selectedOption={selectedOption} changeDropdownOpen={setOpen}/>}
-            <InputWrapper>
+            {userPrivilige !== 'STUDENT' && (
+              <SelectMenu
+                changeSelectedOption={changeSelectedOption}
+                selectedOption={selectedOption}
+                changeDropdownOpen={setOpen}
+              />
+            )}
+            <InputWrapper isStudent={userPrivilige === 'STUDENT'}>
               <Input
-                placeholder={`Wyszukaj ${selectedOption === "studenci" ? "studentów..." : "przedmioty..."}`}
+                placeholder={`Wyszukaj ${selectedOption === 'studenci' ? 'studentów...' : 'przedmioty...'}`}
                 onChange={handleChange}
                 value={input}
                 onFocus={() => {
@@ -175,14 +187,19 @@ export default function ({ handleTransfer }: TopbarProps) {
               <CloseIcon onClick={handleClearInput} />
             </InputWrapper>
           </Flexbox>
-          <Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} selectedOption={selectedOption}/>
+          <Dropdown
+            open={open}
+            input={input}
+            handleCloseDropdown={handleCloseDropdown}
+            selectedOption={selectedOption}
+          />
         </ClickAwayListener>
       </FlexboxColumn>
 
       <IconWrapper>
         {/* <Text>Maciej Głowacki</Text> */}
         {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
-        <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
+        {/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
         <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
         <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} />
       </IconWrapper>