y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

additional changes, setup localStorage

Browse Source
This commit is contained in:
Maciek Głowacki
2020-12-12 17:54:13 +01:00
parent 8ba07f5c07
commit 597f17695d
16 changed files with 12141 additions and 15123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/App.tsx
View File

@ -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>
</>
);
};

23
src/components/CourseCard.tsx
View File

@ -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>

8
src/components/SchedulerRow.tsx
View File

@ -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);
`;

33
src/components/Topbar.tsx
View File

@ -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>

9
src/constants/index.ts
View File

@ -42,3 +42,12 @@ export const courseStartTimeToEventRow: { [time: string]: number } = {
//groupTimeToEventRowMapping - 1;
export const ROWS_COUNT = 6;
export const dayMapping: { [key: number]: string } = {
0: 'poniedziałek',
1: 'wtorek',
2: 'środa',
3: 'czwartek',
4: 'piątek',
5: 'sobota',
6: 'niedziela',
};

8
src/contexts/CASProvider.tsx
View File

@ -25,12 +25,12 @@ export const CASProvider = ({ children }: CASProviderProps) => {
redirectToCASLoginService();
}
try {
if (!sessionStorage.getItem('userToken')) {
if (!localStorage.getItem('userToken')) {
const { data: token } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
sessionStorage.setItem('userToken', token.token);
sessionStorage.setItem('userPrivilage', token.authorityRole)
localStorage.setItem('userToken', token.token);
localStorage.setItem('userPrivilige', token.authorityRole);
}
const tokenTMP:any = JSON.parse(sessionStorage.getItem('userToken')as string);
const tokenTMP: any = JSON.parse(localStorage.getItem('userToken') as string);
const token: Token = {
authorityRole: tokenTMP.authorityRole,
email: tokenTMP.email,

39
src/contexts/CoursesProvider.tsx
View File

@ -18,14 +18,15 @@ interface CourseContext {
courses: Array<Course>;
basket: Array<Basket>;
hoveredGroup: Group | undefined | null;
userID:string;
userID: string;
isDataLoading: boolean;
addCourseToBasket: (courses: Course) => void;
changeHoveredGroup: (group: Group | null) => void;
changeGroupInBasket: (group: Group, courseId: number) => void;
restoreGroupInBasket: (restoreGroup: Group, courseId: number) => void;
deleteFromBasket: (id: number) => void;
saveBasket: (userID: string) => Promise<void>
getUserID: (userID: string) => Promise<void>
saveBasket: (userID: string) => Promise<void>;
getUserID: (userID: string) => Promise<void>;
selectSchedulerEvents: () => Array<SchedulerEvent>;
selectBasketNames: () => Array<string>;
selectBasketCourses: () => Array<Course>;
@ -45,8 +46,10 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
//fetch courses with groups
const [courses, setCourses] = useState<Array<Course>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]);
const [userID, setUserID] = useState("");
const [userID, setUserID] = useState('');
const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
const [isDataLoading, setIsDataLoading] = useState(false);
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);
@ -101,11 +104,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
const getUserID = async (userID:string) => {
const getUserID = async (userID: string) => {
setUserID(userID);
}
};
const saveBasket = async (userID:string) => {
const saveBasket = async (userID: string) => {
const basketIds = selectBasketIds();
const action = (key: any) => (
<>
@ -118,7 +121,10 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
);
try {
await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`, JSON.stringify(basketIds));
await axiosInstance.post(
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`,
JSON.stringify(basketIds),
);
enqueueSnackbar('Plan został zapisany', {
variant: 'success',
action,
@ -163,9 +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/assignments/user`);
const basket = data === '' ? [] : data;
setBasket(basket);
} catch (e) {
@ -173,16 +177,14 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
}
};
const getUserTimetable = async (userID:string) => {
const getUserTimetable = async (userID: string) => {
try {
const {data} = await axiosInstance.get(
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`,
);
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`);
console.log(data);
} catch (e) {
console.log(e);
}
}
};
const fetchCourses = async () => {
try {
@ -197,10 +199,12 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
};
useEffect(() => {
setIsDataLoading(true);
setTimeout(() => {
fetchCourses();
getNewestTimetable();
}, 10);
setIsDataLoading(false);
}, 500);
}, []);
return (
@ -210,6 +214,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
courses,
basket,
hoveredGroup,
isDataLoading,
addCourseToBasket,
changeHoveredGroup,
changeGroupInBasket,

8
src/contexts/UsersProvider.tsx
View File

@ -14,19 +14,21 @@ interface UsersProviderProps {
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`);
const { data } = await axiosInstance.get<Array<User>>(`${process.env.REACT_APP_API_URL}/api/v1/users/students`);
setUsers(data);
console.log(data);
} catch(e){
} catch (e) {
console.log(e);
}
};
useEffect(() => {
setTimeout(() => {
getUsers();
}, 500);
}, []);
return (

4
src/utils/axiosInstance.ts
View File

@ -4,9 +4,9 @@ export const axiosInstance = axios.create();
axiosInstance.interceptors.request.use(
(config) => {
const token = sessionStorage.getItem('userToken');
config.headers['Authorization'] = 'Bearer ' + token;
const token = localStorage.getItem('userToken');
config.headers['Content-Type'] = 'application/json';
config.headers['Authorization'] = token ? `Bearer ${token}` : '';
return config;
},
(error) => {

4
src/utils/index.ts
View File

@ -13,6 +13,10 @@ export const selectGroupsToShow = (schedulerEvents: Array<SchedulerEvent>, index
return schedulerEvents.filter(({ time }: { time: [string, string] }) => courseStartTimeToEventRow[time[0]] === index);
};
//debounce declaration and implementation
type Procedure = (...args: any[]) => any;
interface Debounce {