From e3a1b280e079a292a267798f2a5437f1dbef44e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sat, 12 Dec 2020 19:57:16 +0100 Subject: [PATCH] user interface changes --- src/components/CourseCard.tsx | 18 ++++++++++-- src/components/Dropdown.tsx | 17 ++++++----- src/components/SchedulerRow.tsx | 13 +++------ src/contexts/CASProvider.tsx | 30 +++++++++----------- src/contexts/CoursesProvider.tsx | 2 +- src/contexts/StudentsProvider.tsx | 47 +++++++++++++++++++++++++++++++ src/contexts/UsersProvider.tsx | 43 ---------------------------- src/index.tsx | 6 ++-- src/types/index.ts | 11 ++++---- 9 files changed, 98 insertions(+), 89 deletions(-) create mode 100644 src/contexts/StudentsProvider.tsx delete mode 100644 src/contexts/UsersProvider.tsx diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index bf5442f..1bb855d 100644 --- a/src/components/CourseCard.tsx +++ b/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` 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) => { {groups.map((group: Group, index) => ( onGroupClick(group, course.id)} onMouseEnter={() => { diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 855dbe8..f5c2411 100644 --- a/src/components/Dropdown.tsx +++ b/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>([]); - const [filteredUsers, setFilteredUsers] = useState>([]); - + const [filteredStudents, setFilteredStudents] = useState>([]); 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 ( @@ -117,7 +116,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D <> {selectedOption === 'studenci' ? (
- {filteredUsers.map(({ name, surname, id }, index) => ( + {filteredStudents.map(({ name, surname, id }, index) => (

{name} {surname}{' '} diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index b998bb3..ccf7329 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -65,7 +65,7 @@ const StyledSchedulerEvent = styled.div` 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` ${({ 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 > -

{ - console.log('XDD'); - }} - > +
{}}>

{groups[index].name}

Prowadzący: {groups[index].lecturer} diff --git a/src/contexts/CASProvider.tsx b/src/contexts/CASProvider.tsx index fc2249f..8caf0f0 100644 --- a/src/contexts/CASProvider.tsx +++ b/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(undefined); @@ -15,8 +15,8 @@ export interface CASProviderProps { } export const CASProvider = ({ children }: CASProviderProps) => { - const [user, setUser] = useState(undefined); - const [token, setToken] = useState(null); + const [user, setUser] = useState(); + const [token, setToken] = useState(); 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( + `${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(); } diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 2a6ab59..c169875 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/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) { diff --git a/src/contexts/StudentsProvider.tsx b/src/contexts/StudentsProvider.tsx new file mode 100644 index 0000000..7990a2d --- /dev/null +++ b/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; +} + +export const studentsContext = createContext(undefined); + +interface StudentsProviderProps { + children: ReactNode; +} + +export const StudentsProvider = ({ children }: StudentsProviderProps) => { + const [students, setStudents] = useState>([]); + + const userPrivilige = localStorage.getItem('userPrivilige'); + + const getStudents = async () => { + try { + const { data } = await axiosInstance.get>( + `${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 ( + + {children} + + ); +}; diff --git a/src/contexts/UsersProvider.tsx b/src/contexts/UsersProvider.tsx deleted file mode 100644 index 4ce61bb..0000000 --- a/src/contexts/UsersProvider.tsx +++ /dev/null @@ -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; -} - -export const usersContext = createContext(undefined); - -interface UsersProviderProps { - children: ReactNode; -} - -export const UsersProvider = ({ children }: UsersProviderProps) => { - const [users, setUsers] = useState>([]); - - const getUsers = async () => { - try { - const { data } = await axiosInstance.get>(`${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 ( - - {children} - - ); -}; diff --git a/src/index.tsx b/src/index.tsx index b5bd2c5..60f5df5 100644 --- a/src/index.tsx +++ b/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( }} > - + - + , diff --git a/src/types/index.ts b/src/types/index.ts index 1379203..e4dbc07 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -27,14 +27,13 @@ export interface Course { classes?: Array; } -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;