topbar changes:

This commit is contained in:
Maciek Głowacki 2020-12-16 00:23:31 +01:00
parent 39a7e109c8
commit 8f85d605e1
4 changed files with 31 additions and 14 deletions

View File

@ -59,7 +59,6 @@ const HistoryDiv = styled.div`
margin-left: 20px;
border-radius: 5px;
height: calc(100vh - 120px);
background-color: red;
`;
const StatsDiv = styled.div`
@ -68,7 +67,6 @@ const StatsDiv = styled.div`
margin-left: 20px;
border-radius: 5px;
height: calc(100vh - 120px);
background-color: blue;
`;
const LogoWrapper = styled.div`

View File

@ -50,10 +50,8 @@ interface DropdownProps {
}
export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
const { courses, selectBasketNames, addCourseToBasket, changeStudent } = useContext(
coursesContext,
)!;
const { students } = useContext(studentsContext)!;
const { courses, selectBasketNames, addCourseToBasket, changeStudent } = useContext(coursesContext)!;
const { students, changeSelectedStudent } = useContext(studentsContext)!;
const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
const [filteredStudents, setFilteredStudents] = useState<Array<Student>>([]);
@ -69,7 +67,10 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
const onUserClick = (event: MouseEvent) => {
const target = event.currentTarget;
console.log('target: ', target);
//to be moved to students provider
changeStudent(target.id);
changeSelectedStudent(Number(target.id));
handleCloseDropdown();
};
@ -118,11 +119,9 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
<>
{selectedOption === 'studenci' ? (
<div>
{filteredStudents.map(({ name, surname, id }, index) => (
{filteredStudents.map(({ email, id }, index) => (
<CourseContainer key={index} id={id.toString()} onClick={onUserClick}>
<p>
{name} {surname}
</p>
<p>{email}</p>
</CourseContainer>
))}
</div>

View File

@ -1,4 +1,4 @@
import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback } from 'react';
import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext } from 'react';
import { ReactComponent as Close } from '../assets/close.svg';
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile';
@ -8,6 +8,7 @@ import EnglishIcon from '../assets/united-kingdom.svg';
import styled from 'styled-components/macro';
import ClickAwayListener from 'react-click-away-listener';
import { SelectMenu } from './SelectMenu';
import { studentsContext } from '../contexts/StudentsProvider';
const Topbar = styled.div`
background-color: #e3e5ed;
@ -104,9 +105,10 @@ const CloseIcon = styled(Close)`
const IconWrapper = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: flex-end;
width: 335px;
margin-right: 10px;
`;
const Icon = styled.img`
@ -122,13 +124,21 @@ export const Flexbox = styled.div`
display: flex;
`;
export const SelectedStudent = styled.div`
width: 100%;
display: flex;
justify-content: center;
margin-right: 10px;
margin-left: 10px;
`;
interface TopbarProps {
handleTransfer: (e: MouseEvent) => void;
}
export default function ({ handleTransfer }: TopbarProps) {
const userPrivilige = localStorage.getItem('userPrivilige');
const { selectedStudent } = useContext(studentsContext)!;
const [clearInput, setClearInput] = useState(false);
const [isPolish, setIsPolish] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
@ -195,8 +205,9 @@ export default function ({ handleTransfer }: TopbarProps) {
/>
</ClickAwayListener>
</FlexboxColumn>
<IconWrapper>
<SelectedStudent>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>
{/* <Text>Maciej Głowacki</Text> */}
{/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
{/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}

View File

@ -5,6 +5,8 @@ import { CASContext } from './CASProvider';
interface StudentContext {
students: Array<Student>;
selectedStudent: Student | null;
changeSelectedStudent: (studentId: number) => void;
}
export const studentsContext = createContext<StudentContext | undefined>(undefined);
@ -15,6 +17,7 @@ interface StudentsProviderProps {
export const StudentsProvider = ({ children }: StudentsProviderProps) => {
const [students, setStudents] = useState<Array<Student>>([]);
const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
//not working currently
const userPrivilige = localStorage.getItem('userPrivilige');
@ -32,6 +35,10 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => {
}
};
const changeSelectedStudent = (studentId: number) => {
setSelectedStudent(students.find((student) => student.id === studentId)!);
};
useEffect(() => {
setTimeout(() => {
// user?.authorityRole === 'DEANERY' &&
@ -42,7 +49,9 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => {
return (
<studentsContext.Provider
value={{
selectedStudent,
students,
changeSelectedStudent,
}}
>
{children}