Data as Json Array

src/App.tsx

@@ -10,6 +10,47 @@ function App() {
   const [isOpenTransfer, setOpenTransfer] = useState(false);
   const [text, setText] = useState("");
 
+  var data = [
+    {
+      classname: "E-gospodarka - narzędzia i bezpieczeństwo",
+      classgroups: [
+        {
+          group_id: "1CB",
+          day: "Pn",
+          time: "10:00",
+          lecturer: "dr inż. Michał Ren",
+          room: "A2-01",
+        },
+        {
+          group_id: "1XD",
+          day: "Wt",
+          time: "12:00",
+          lecturer: "dr inż. Michał Ren",
+          room: "A3-01",
+        },
+      ],
+    },
+    {
+      classname: "Statystyka",
+      classgroups: [
+        {
+          group_id: "2CB",
+          day: "Pn",
+          time: "10:00",
+          lecturer: "dr inż. Michał Ren",
+          room: "A2-01",
+        },
+        {
+          group_id: "2XD",
+          day: "Wt",
+          time: "12:00",
+          lecturer: "dr inż. Michał Ren",
+          room: "A3-01",
+        },
+      ],
+    },
+  ];
+
   return (
     <div className="App">
       <TopBar
@@ -34,7 +75,7 @@ function App() {
           <Schedule data={appointments} />
         </div>
         <div className="wraper__rightbar">
-          <RightBar />
+          <RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}/>
         </div>
       </div>
 

src/components/Calendar/index.tsx

@@ -114,7 +114,7 @@ export default class Calendar extends React.PureComponent<
           startDayHour={8}
           endDayHour={20}
           excludedDays={[0, 6]}
-          cellDuration={45}
+          cellDuration={60}
           dayScaleCellComponent={DayScaleCell}
           timeTableLayoutComponent={TimeTableLayout}
           timeTableCellComponent={TimeTableCell}

src/components/Class/index.scss

@@ -8,6 +8,5 @@
     margin-top: 10px;
     padding:10px;
     border-radius: 10px;
-    width: 90%;
     cursor: pointer;
   }

src/components/Class/index.tsx

@@ -10,13 +10,14 @@ type ClassType = {
   room: string;
 };
 
-type group = {
-  classname:string;
-  classgroups:Array<ClassType>
-}
+export type Group = {
+  classname: string;
+  classgroups: Array<ClassType>;
+};
 
 interface ClassProps {
-  data: group;
+  onClassHover: (group_id: String, class_id: String) => void;
+  data: Group;
 }
 
 interface ClassState {
@@ -44,26 +45,21 @@ export default class Class extends React.Component<ClassProps, ClassState> {
       <div className="class" onClick={this.Open}>
         {this.props.data.classname}
         <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-          <p>
-            {this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day}
-            {this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room}
-            <br></br> {this.props.data.classgroups[0].lecturer}
-          </p>
-          <p>
-            {this.props.data.classgroups[1].group_id} {this.props.data.classgroups[1].day}
-            {this.props.data.classgroups[1].time} {this.props.data.classgroups[1].room}
-            <br></br> {this.props.data.classgroups[1].lecturer}
-          </p>
-          <p>
-            {this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day}
-            {this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room}
-            <br></br> {this.props.data.classgroups[0].lecturer}
-          </p>
-          <p>
-            {this.props.data.classgroups[1].group_id} {this.props.data.classgroups[1].day}
-            {this.props.data.classgroups[1].time} {this.props.data.classgroups[1].room}
-            <br></br> {this.props.data.classgroups[1].lecturer}
-          </p>
+          <div className="class__group">
+            {this.props.data.classgroups.map((classgroup, index) => (
+              <p
+                onMouseOver={() =>
+                  this.props.onClassHover(
+                    this.props.data.classname,
+                    this.props.data.classgroups[index].group_id
+                  )
+                }
+              >
+                {classgroup.group_id} {classgroup.day} {classgroup.time}{" "}
+                {classgroup.room} <br></br> {classgroup.lecturer}
+              </p>
+            ))}
+          </div>
         </Collapse>
       </div>
     );

src/components/RightBar/index.scss

@@ -2,13 +2,13 @@
     padding-top: 10px;
     padding-left: 15px;
     padding-right: 15px;
-    display: flex;
-    flex-direction: column;
     align-items: center;
     text-align: center;
     font-family: Lato;
     &__text {
       border-bottom: 1px solid;
     }
-  
-  }
+    height:85vh;
+    overflow-y: scroll;
+
+  }

src/components/RightBar/index.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import "./index.scss";
-import Class from "../Class";
+import Class, { Group } from "../Class";
 
-interface RightBarProps {}
+interface RightBarProps {
+  onClassHover: (group_id: String, class_id: String) => void;
+  // onClick(group_id:String,class_id:String):() => void;
+  lectures: Array<Group>;
+}
 
 interface RightBarState {}
 
@@ -11,59 +15,19 @@ export default class RightBar extends React.Component<
   RightBarState
 > {
   render() {
-    var data = [
-      {
-        classname: "E-gospodarka - narzędzia i bezpieczeństwo",
-        classgroups: [
-          {
-            group_id: "1CB",
-            day: "Pn",
-            time: "10:00",
-            lecturer: "dr inż. Michał Ren",
-            room: "A2-01",
-          },
-          {
-            group_id: "1CC",
-            day: "Wt",
-            time: "12:00",
-            lecturer: "dr inż. Michał Ren",
-            room: "A3-01",
-          },
-        ],
-      },
-      {
-        classname: "Statystyka",
-        classgroups: [
-          {
-            group_id: "1CB",
-            day: "Pn",
-            time: "10:00",
-            lecturer: "dr inż. Michał Ren",
-            room: "A2-01",
-          },
-          {
-            group_id: "1CC",
-            day: "Wt",
-            time: "12:00",
-            lecturer: "dr inż. Michał Ren",
-            room: "A3-01",
-          },
-        ],
-      },
-    ];
-
     return (
       <div className="right-bar">
         <div className="right-bar__text">
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </div>
-        <Class data={data[0]} />
-        <Class data={data[1]} />
-        <Class data={data[0]} />
-        <Class data={data[1]} />
-        <Class data={data[0]} />
-        <Class data={data[1]} />
+        {this.props.lectures.map((classgroup, index) => (
+          <Class
+            onClassHover={this.props.onClassHover}
+            data={classgroup}
+            key={index}
+          />
+        ))}
       </div>
     );
   }

src/components/Transfer/index.scss

@@ -45,9 +45,9 @@
 
   }
   input:focus {
-    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-    -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
+    -webkit-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
     
   }
 }

src/components/Transfer/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Modal from "@material-ui/core/Modal";
 import "./index.scss";
+import Fade from '@material-ui/core/Fade';
 
 interface TransferProps {
   handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -33,6 +34,7 @@ export default class Transfer extends React.Component<
           aria-labelledby="simple-modal-title"
           aria-describedby="simple-modal-description"
         >
+          <Fade in={this.props.isOpen}>
           <div className="transfer">
             <div className="transfer__left">
               {/* <button className="transfer__add">chuj</button> */}
@@ -49,7 +51,9 @@ export default class Transfer extends React.Component<
               <div className="transfer__proposition"></div>
             </div>
           </div>
+          </Fade>
         </Modal>
+        
       </div>
     );
   }

src/index.tsx

@@ -3,8 +3,8 @@ import ReactDOM from "react-dom";
 import App from "./App";
 
 ReactDOM.render(
-	<React.StrictMode>
+	<React.Fragment>
 		<App />
-	</React.StrictMode>,
+	</React.Fragment>,
 	document.getElementById("root")
 );