user interface changes

src/components/CourseCard.tsx

@@ -50,18 +50,31 @@ const CourseName = styled.div`
   user-select: none;
 `;
 
-const ClassGroupStyled = styled.div`
+type ClassGroupProps = {
+  isSelected: boolean;
+};
+
+const ClassGroupStyled = styled.div<ClassGroupProps>`
   position: relative;
   padding-top: 10px;
   padding-bottom: 10px;
   transition: color 0.3s, background-color 0.3s;
   :hover {
     cursor: pointer;
-    background-color: #9ed3ff;
+    ${({ isSelected }) =>
+      !isSelected &&
+      css`
+        background-color: rgba(223, 238, 245, 0.308);
+      `}
   }
   :last-child {
     border-radius: 0 0 10px 10px;
   }
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background-color: #85aec2;
+    `}
 `;
 
 interface ExpandIconProps {
@@ -171,6 +184,7 @@ export const CourseCard = ({ course }: CourseCardProps) => {
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {groups.map((group: Group, index) => (
           <ClassGroupStyled
+            isSelected={group.id === previous?.classes?.id || group.id === previous?.lecture?.id ? true : false}
             key={index}
             onClick={() => onGroupClick(group, course.id)}
             onMouseEnter={() => {

src/components/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
 import { coursesContext } from '../contexts/CoursesProvider';
-import { usersContext } from '../contexts/UsersProvider';
-import { Course, User } from '../types';
+import { studentsContext } from '../contexts/StudentsProvider';
+import { Course, Student } from '../types';
 import styled from 'styled-components';
 
 const DropdownContainer = styled.div`
@@ -51,11 +51,10 @@ interface DropdownProps {
 
 export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
   const { courses, selectBasketNames, addCourseToBasket, getUserID } = useContext(coursesContext)!;
-  const { users } = useContext(usersContext)!;
+  const { students } = useContext(studentsContext)!;
   const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
-  const [filteredUsers, setFilteredUsers] = useState<Array<User>>([]);
-
+  const [filteredStudents, setFilteredStudents] = useState<Array<Student>>([]);
 
   const onCourseClick = (event: MouseEvent) => {
     const target = event.currentTarget;
@@ -94,7 +93,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
 
   useEffect(() => {
     const filterUsers = (input: string) => {
-      const filteredUsers = users.filter(({ name, surname }) =>
+      const filteredUsers = students.filter(({ name, surname }) =>
         (name + surname)
           .toLowerCase()
           .normalize('NFD')
@@ -106,10 +105,10 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
               .replace(/[\u0300-\u036f]/g, ''),
           ),
       );
-      setFilteredUsers(filteredUsers);
+      setFilteredStudents(filteredUsers);
     };
     filterUsers(input);
-  }, [users, input]);
+  }, [students, input]);
 
   return (
     <DropdownContainer>
@@ -117,7 +116,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
         <>
           {selectedOption === 'studenci' ? (
             <div>
-              {filteredUsers.map(({ name, surname, id }, index) => (
+              {filteredStudents.map(({ name, surname, id }, index) => (
                 <CourseContainer key={index} id={id.toString()} onClick={onUserClick}>
                   <p>
                     {name} {surname}{' '}

src/components/SchedulerRow.tsx

@@ -65,7 +65,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   text-align: center;
   background-color: ${({ groupType, isHovered }) => {
     if (isHovered) {
-      return groupType === 'CLASS' ? '#ffefb5' : '#d4ecff';
+      return groupType === 'CLASS' ? '#FFE485' : '#D2EBFF';
     } else {
       return groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff';
     }
@@ -73,9 +73,9 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   ${({ isHovered }) =>
     isHovered &&
     css`
-      transition: background-color 0.4s ease;
+      transition: background-color ease-in 0.4s;
     `}
-
+  transition: background-color ease-out 0.4s;
   box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
 `;
 
@@ -218,12 +218,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                     onClose={handlePopoverClose}
                     disableRestoreFocus
                   >
-                    <div
-                      style={{ display: 'flex', flexDirection: 'column', zIndex: 20000 }}
-                      onClick={() => {
-                        console.log('XDD');
-                      }}
-                    >
+                    <div style={{ display: 'flex', flexDirection: 'column', zIndex: 20000 }} onClick={() => {}}>
                       <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/contexts/CASProvider.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, createContext, ReactNode } from 'react';
-import { User, Token } from '../types';
+import { LoggedUser } from '../types';
 import { axiosInstance } from '../utils/axiosInstance';
 
 export interface CASContext {
-  user?: User;
+  user: LoggedUser | undefined;
   logout: () => void;
-  token?: string | null;
+  token: string | undefined;
 }
 
 export const CASContext = createContext<CASContext | undefined>(undefined);
@@ -15,8 +15,8 @@ export interface CASProviderProps {
 }
 
 export const CASProvider = ({ children }: CASProviderProps) => {
-  const [user, setUser] = useState<User | undefined>(undefined);
-  const [token, setToken] = useState<string | null>(null);
+  const [user, setUser] = useState<LoggedUser>();
+  const [token, setToken] = useState<string | undefined>();
   useEffect(() => {
     const login = async () => {
       const urlParams = new URLSearchParams(window.location.search);
@@ -26,18 +26,15 @@ export const CASProvider = ({ children }: CASProviderProps) => {
       }
       try {
         if (!localStorage.getItem('userToken')) {
-          const { data: token } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
-          localStorage.setItem('userToken', token.token);
-          localStorage.setItem('userPrivilige', token.authorityRole);
+          const { data: user } = await axiosInstance.get<LoggedUser & { token: string }>(
+            `${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`,
+          );
+          setUser({ authorityRole: user.authorityRole, email: user.email, id: user.id });
+          localStorage.setItem('userToken', user.token);
+          localStorage.setItem('userPrivilige', user.authorityRole);
         }
-        const tokenTMP: any = JSON.parse(localStorage.getItem('userToken') as string);
-        const token: Token = {
-          authorityRole: tokenTMP.authorityRole,
-          email: tokenTMP.email,
-          id: tokenTMP.id,
-          token: tokenTMP.token,
-        };
-        setToken(token.token);
+        const token = localStorage.getItem('userToken');
+        token && setToken(token);
       } catch (e) {
         console.log(e);
       }
@@ -46,6 +43,7 @@ export const CASProvider = ({ children }: CASProviderProps) => {
   }, []);
 
   function logout() {
+    localStorage.removeItem('userToken');
     redirectToCASLogoutService();
   }
 

src/contexts/CoursesProvider.tsx

@@ -169,7 +169,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   const getNewestTimetable = async () => {
     try {
-      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/assignments/user`);
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/schedule`);
       const basket = data === '' ? [] : data;
       setBasket(basket);
     } catch (e) {

src/contexts/StudentsProvider.tsx

@@ -0,0 +1,47 @@
+import React, { useState, createContext, useEffect, ReactNode, useRef } from 'react';
+import { Student } from '../types';
+import { axiosInstance } from '../utils/axiosInstance';
+
+interface StudentContext {
+  students: Array<Student>;
+}
+
+export const studentsContext = createContext<StudentContext | undefined>(undefined);
+
+interface StudentsProviderProps {
+  children: ReactNode;
+}
+
+export const StudentsProvider = ({ children }: StudentsProviderProps) => {
+  const [students, setStudents] = useState<Array<Student>>([]);
+
+  const userPrivilige = localStorage.getItem('userPrivilige');
+
+  const getStudents = async () => {
+    try {
+      const { data } = await axiosInstance.get<Array<Student>>(
+        `${process.env.REACT_APP_API_URL}/api/v1/users/students`,
+      );
+      setStudents(data);
+      console.log(data);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      userPrivilige === 'DEANERY' && getStudents();
+    }, 500);
+  }, []);
+
+  return (
+    <studentsContext.Provider
+      value={{
+        students,
+      }}
+    >
+      {children}
+    </studentsContext.Provider>
+  );
+};

src/contexts/UsersProvider.tsx

@@ -1,43 +0,0 @@
-import React, { useState, createContext, useEffect, ReactNode, useRef } from 'react';
-import { User } from '../types';
-import { axiosInstance } from '../utils/axiosInstance';
-
-interface UserContext {
-  users: Array<User>;
-}
-
-export const usersContext = createContext<UserContext | undefined>(undefined);
-
-interface UsersProviderProps {
-  children: ReactNode;
-}
-
-export const UsersProvider = ({ children }: UsersProviderProps) => {
-  const [users, setUsers] = useState<Array<User>>([]);
-
-  const getUsers = async () => {
-    try {
-      const { data } = await axiosInstance.get<Array<User>>(`${process.env.REACT_APP_API_URL}/api/v1/users/students`);
-      setUsers(data);
-      console.log(data);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  useEffect(() => {
-    setTimeout(() => {
-      getUsers();
-    }, 500);
-  }, []);
-
-  return (
-    <usersContext.Provider
-      value={{
-        users,
-      }}
-    >
-      {children}
-    </usersContext.Provider>
-  );
-};

src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { App } from './components/App';
 import { CASProvider } from './contexts/CASProvider';
 import { CoursesProvider } from './contexts/CoursesProvider';
-import { UsersProvider } from './contexts/UsersProvider';
+import { StudentsProvider } from './contexts/StudentsProvider';
 import { GlobalStyles } from './styles/GlobalStyles';
 import { SnackbarProvider } from 'notistack';
 
@@ -17,12 +17,12 @@ ReactDOM.render(
       }}
     >
       <CASProvider>
-        <UsersProvider>
+        <StudentsProvider>
           <CoursesProvider>
             <GlobalStyles />
             <App />
           </CoursesProvider>
-        </UsersProvider>
+        </StudentsProvider>
       </CASProvider>
     </SnackbarProvider>
   </>,

src/types/index.ts

@@ -27,14 +27,13 @@ export interface Course {
   classes?: Array<Group>;
 }
 
-export interface Token {
-  authorityRole: string,
-  email: string,
-  id: number,
-  token: string,
+export interface LoggedUser {
+  authorityRole: string;
+  email: string;
+  id: number;
 }
 
-export interface User {
+export interface Student {
   email: string;
   id: number;
   name: string;