A lot of stuff to refactor, have fun

src/App.scss

@@ -7,8 +7,9 @@ body {
   }
   .wraper{
     display: flex;
-    &__calendar{
+    &__rightbar{
-      width: 85%;
+      width: 80%;
-    }
+    }
+
   }
 

src/App.tsx

@@ -45,7 +45,6 @@ function App() {
 					<RightBar
 						lectures={lectures}
 						onGroupMouseOver={(id, name) => {
-							console.log("XD");
 						}}
 						onGroupClick={(id, name) => {}}
 					/>

src/businesslogic/LecturesProvider.tsx

@@ -11,7 +11,7 @@ export const LecturesProvider : React.FC = (props) => {
 
     const [lectures, setLectures] = useState<Array<Lecture>>([]); 
 
-    const updateLectures = (lecture : Lecture) => {setLectures([...lectures, lecture]); console.log(`Lectures xd are: ${JSON.stringify(lectures)}\n`)}
+    const  updateLectures = (lecture : Lecture) => {  setLectures([...lectures, lecture])}
 
     return (
         <LecturesContext.Provider value={{lectures: lectures, updateLectures : updateLectures}}>

src/components/RightBar/LectureCard/index.scss

@@ -17,7 +17,7 @@
     &:hover {
       cursor: pointer;
       transition: 1s;
-        background-color: #8BC8FB;
+      background-color: #8bc8fb;
     }
   }
   &__name {
@@ -35,4 +35,25 @@
     transition: 0.5s;
     transform: scaleY(-1);
   }
+  .expanded {
+    max-height: 244px;
+    overflow-y: auto;
+  }
+  .expanded::-webkit-scrollbar-track {
+    border-radius: 10px;
+    border-radius: 10px;
+    background-color: #8bc8fb;
+  }
+
+  .expanded::-webkit-scrollbar {
+    width: 12px;
+    border-radius: 10px;
+    background-color: #8bc8fb;
+  }
+
+  .expanded::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #d4b851;
+    border: 1px solid;
+  }
 }

src/components/RightBar/LectureCard/index.tsx

@@ -13,11 +13,23 @@ interface LectureCardProps {
   isSelected: boolean;
 }
 
-export default function LectureCard({ onGroupMouseOver, onGroupClick, onCardClick, lecture, id, isSelected }: LectureCardProps) {
+export default function LectureCard({
+  onGroupMouseOver,
+  onGroupClick,
+  onCardClick,
+  lecture,
+  id,
+  isSelected,
+}: LectureCardProps) {
   return (
     <div className="class" onClick={onCardClick} id={id}>
       <div className="class__name">{lecture.name}</div>
-			<Collapse in={isSelected} timeout="auto" unmountOnExit>
+      <Collapse
+        className="expanded"
+        in={isSelected}
+        timeout="auto"
+        unmountOnExit
+      >
         {lecture.groups.map((group, index) => (
           <div
             className="class__group"
@@ -26,13 +38,17 @@ export default function LectureCard({ onGroupMouseOver, onGroupClick, onCardClic
             onClick={() => onGroupClick(group.id, lecture.name)}
           >
             <p>
-							{group.id} {group.day} {group.time} {group.room} <br></br> {group.lecturer}
+              {group.time} {group.room} <br></br> {group.lecturer}
             </p>{" "}
           </div>
         ))}
       </Collapse>
       <div onClick={onCardClick} id={id}>
-				<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? "Rotate" : ""}`} />
+        <img
+          alt="expand"
+          src={ExpandIcon}
+          className={`class__expandIcon${isSelected ? "Rotate" : ""}`}
+        />
       </div>
     </div>
   );

src/components/RightBar/index.scss

@@ -4,10 +4,28 @@
     padding-right: 15px;
     text-align: center;
     font-family: Lato;
+    width: 300px;
     &__text {
       border-bottom: 1px solid;
     }
     height:85vh;
     overflow-y: scroll;
-
+  }
+  .right-bar::-webkit-scrollbar-track
+{
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+
+.right-bar::-webkit-scrollbar
+{
+    width: 12px;
+    background-color: #F5F5F5;
+}
+
+.right-bar::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    background-color: #d4b851;
+    border: 1px solid;
 }

src/components/RightBar/index.tsx

@@ -2,8 +2,6 @@ import React, { useState, useContext } from "react";
 import "./index.scss";
 import { Lecture } from "../../lectures";
 import LectureCard from "./LectureCard";
-import BusinessLogicContext from "../../businesslogic/BusinessLogicContext";
-import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider";
 import { LecturesContext } from "../../businesslogic/LecturesProvider";
 
 interface RightBarProps {
@@ -25,9 +23,9 @@ export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: R
 
 	return (
 		<div className="right-bar">
-			<BusinessLogicContext.Consumer>
+			{/* <BusinessLogicContext.Consumer>
 				{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
-			</BusinessLogicContext.Consumer>
+			</BusinessLogicContext.Consumer> */}
 			<div className="right-bar__text">
 				Hubert Wrzesiński<br></br>
 				Semestr zimowy 2020/2021

src/components/TopBar/Results/index.scss

@@ -2,8 +2,10 @@
   position: relative;
   z-index: 10;
   padding: 5px;
+  padding-left: 20px;
   background-color: #e6c759;
   font-size: 18px;
+  font-family: Lato;
 }
 .lecture:hover{
   background-color: #d4b851;
@@ -19,3 +21,4 @@
 .top-bar__input-field {
   width: 100%;
 }
+

src/components/TopBar/Results/index.tsx

@@ -5,8 +5,7 @@ import "./index.scss";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import { LecturesContext } from "../../../businesslogic/LecturesProvider";
 import { Lecture, Group } from "../../../lectures";
-import { GroupingPanel } from "@devexpress/dx-react-scheduler";
+import { EDEADLK } from "constants";
-import { group } from "console";
 
 interface data {
   id: number;
@@ -30,20 +29,29 @@ export const Results: React.FC = () => {
     setInput(event.target.value);
     //query should be updated on backend to not accept empty string
     if (event.target.value !== "") {
-      console.log(event.target.value);
+      console.log("Jeste w okej")
       search(event.target.value);
     } else {
+      console.log("Jeste w dupuie")
       search("xxxxxxxxxxxxxxx");
+
     }
   };
   const search = (text: string) => {
     axios
       .get(`http://localhost:1287/getCourses?name=${text}`)
-      .then((response) => setData(response.data));
+      .then((response) => {
+        const names = lecturesContext.lectures.map(lecture => lecture.name);
+        console.log(`Names: ${names}`)
+        const filteredData = response.data.filter((el : any) => !names.includes(el.name));
+        console.log("D")
+        setData(filteredData)
+      });
   };
 
   const handleClick = () => {
     setOpen(true);
+    console.log("OPWENEE")
   };
 
   const handleClickAway = () => {
@@ -56,13 +64,10 @@ export const Results: React.FC = () => {
 
     const lecture = {name: "", groups: []} as Lecture;
 
-    console.log(id);
     axios
     .get(`http://localhost:1287/getClassesByCourseId?id=${id}`)
     .then((response) => {
       for(let data of response.data){
-        console.log("XDD");
-        console.log(data);
         let group = {} as Group;
         lecture.name = data.course.name;
         group.id = data.id;
@@ -71,13 +76,10 @@ export const Results: React.FC = () => {
         group.lecturer =  `${data.lecturer.title} ${data.lecturer.name} ${data.lecturer.surname}`;
         group.room = data.room.trim();
         lecture.groups.push(group);
-        console.log("XDDD");
-        console.log(lecture.groups);
        lecturesContext.updateLectures(lecture);
       }
- 
     setOpen(false);
-    });
+    }).then(()=>{search(input)});
   }
 
   return (
@@ -89,6 +91,7 @@ export const Results: React.FC = () => {
           className="top-bar__input-field"
           onChange={handleChange}
           onClick={handleClick}
+          value={input}
         />
         {open ? (
           <div className="dropdown">

src/components/Transfer/index.scss

@@ -3,51 +3,67 @@
   justify-content: center;
   text-align: center;
   align-items: center;
-
 }
 
 .transfer {
   display: flex;
+  
+  flex-direction: row;
+
   outline: none;
-  width: 80%;
+  min-width: 35%;
   height: 70%;
   padding-top: 40px;
-  background: rgba(255, 220, 97, 0.6);
+  background: #006b96;
+  box-shadow: 0px 0px 0px 4px #006b96;
+  border: 4px solid #ffc400;
+  margin: 0 auto;
+  border-top-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 
-  border: 3px solid #000000;
-  border-radius: 15px;
   text-transform: uppercase;
   letter-spacing: 0.3ch;
 
-  &__left {
+  &__give {
-    display: flex;
-    justify-content: space-around;
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
-  &__right {
+  &__receive {
-    flex-grow: 4;
+    flex-grow: 1;
   }
   &__text {
     font-family: Lato;
-    font-size: 50px;
+    font-size: 30px;
     margin-bottom: 10px;
   }
   &__input {
-    width: 300px;
+    width: 250px;
-    height: 45px;
+    height: 25px;
     background: #ffc400;
     outline: none;
     border: 1px solid;
-    border-radius: 22px ;
+    border-radius: 10px;
     padding: 10px;
     font-size: 24px;
     transition-duration: 0.3s;
-
   }
-  input:focus {
+  &__input:focus {
-    -webkit-box-shadow: 0px 0px 18px 8px #ffae00;
+    -webkit-box-shadow: 0px 0px 34px 1px #ffae00;
-    -moz-box-shadow: 0px 0px 18px 8px #ffae00;
+    -moz-box-shadow: 0px 0px 34px 1px #ffae00;
-    box-shadow: 0px 0px 18px 8px #ffae00;
+    box-shadow: 0px 0px 34px 1px #ffae00;
-    
+  }
+  &__input2 {
+    width: 250px;
+    height: 25px;
+    padding: 10px;
+    font-size: 24px;
+    transition-duration: 0.3s;
+  }
+  input::placeholder{
+    color: black;
+    font-weight: bold;
+    text-align: center;
   }
 }

src/components/Transfer/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Modal from "@material-ui/core/Modal";
 import "./index.scss";
 import Fade from '@material-ui/core/Fade';
-
+import Input from "@material-ui/core/Input";
 interface TransferProps {
   handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isOpen: boolean;
@@ -36,21 +36,19 @@ export default class Transfer extends React.Component<
         >
           <Fade in={this.props.isOpen}>
           <div className="transfer">
-            <div className="transfer__left">
-              {/* <button className="transfer__add">chuj</button> */}
               <div className="transfer__give">
                 <div className="transfer__text">Oddam</div>
-                <input className="transfer__input"></input>
+                <div className="transfer__input2">					<Input
+						placeholder="Wyszukaj..."
+						inputProps={{ "aria-label": "description" }}
+						className="top-bar__input-field"
+					/></div>
                 </div>
               <div className="transfer__receive">
                 <div className="transfer__text">Przyjmę</div>
                 <input className="transfer__input"></input>
               </div>
           </div>
-            <div className="transfer__right">
-              <div className="transfer__proposition"></div>
-            </div>
-          </div>
           </Fade>
         </Modal>