Merge pull request 'topbar changes:' (#37) from Admin into master

Reviewed-on: http://git.plannaplan.pl/y0rune/frontend/pulls/37
Reviewed-by: wrzesinski-hubert <wrzesinski.hubert@gmail.com>

src/components/Admin.tsx

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

src/components/Dropdown.tsx

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

src/components/Topbar.tsx

@@ -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} /> */}

src/contexts/StudentsProvider.tsx

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