topbar changes:
This commit is contained in:
parent
39a7e109c8
commit
8f85d605e1
@ -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`
|
||||
|
@ -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>
|
||||
|
@ -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} /> */}
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user