Merge pull request 'Cleaned up' (#8) from cleanup into master

Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>

src/App.tsx

@@ -5,84 +5,48 @@ import "./App.scss";
 import Schedule from "./components/Calendar/";
 import { appointments } from "./components/Calendar/appointments";
 import RightBar from "./components/RightBar";
-
+import { lectures } from "./lectures";
 function App() {
-  const [isOpenTransfer, setOpenTransfer] = useState(false);
+	const [isOpenTransfer, setOpenTransfer] = useState(false);
-  const [text, setText] = useState("");
+	const [text, setText] = useState("");
 
-  var data = [
+	return (
-    {
+		<div className="App">
-      classname: "E-gospodarka - narzędzia i bezpieczeństwo",
+			<TopBar
-      classgroups: [
+				textChangeHandler={(e) => {
-        {
+					setText(e.target.value);
-          group_id: "1CB",
+				}}
-          day: "Pn",
+				handleTransfer={(e) => {
-          time: "10:00",
+					setOpenTransfer(!isOpenTransfer);
-          lecturer: "dr inż. Michał Ren",
+				}}
-          room: "A2-01",
+				onLangChange={(e) => {
-        },
+					console.log(e);
-        {
+				}}
-          group_id: "1XD",
+			/>
-          day: "Wt",
+			<Transfer
-          time: "12:00",
+				isOpen={isOpenTransfer}
-          lecturer: "dr inż. Michał Ren",
+				handleClose={(e) => {
-          room: "A3-01",
+					setOpenTransfer(!isOpenTransfer);
-        },
+				}}
-      ],
+			/>
-    },
+			<div className="wraper">
-    {
+				<div className="wraper__calendar">
-      classname: "Statystyka",
+					<Schedule data={appointments} />
-      classgroups: [
+				</div>
-        {
+				<div className="wraper__rightbar">
-          group_id: "2CB",
+					<RightBar
-          day: "Pn",
+						lectures={lectures}
-          time: "10:00",
+						onGroupMouseOver={(id, name) => {
-          lecturer: "dr inż. Michał Ren",
+							console.log("XD");
-          room: "A2-01",
+						}}
-        },
+						onGroupClick={(id, name) => {}}
-        {
+					/>
-          group_id: "2XD",
+				</div>
-          day: "Wt",
+			</div>
-          time: "12:00",
-          lecturer: "dr inż. Michał Ren",
-          room: "A3-01",
-        },
-      ],
-    },
-  ];
 
-  return (
+			<h1>{text}</h1>
-    <div className="App">
+		</div>
-      <TopBar
+	);
-        textChangeHandler={(e) => {
-          setText(e.target.value);
-        }}
-        handleTransfer={(e) => {
-          setOpenTransfer(!isOpenTransfer);
-        }}
-        onLangChange={(e) => {
-          console.log(e);
-        }}
-      />
-      <Transfer
-        isOpen={isOpenTransfer}
-        handleClose={(e) => {
-          setOpenTransfer(!isOpenTransfer);
-        }}
-      />
-      <div className="wraper">
-        <div className="wraper__calendar">
-          <Schedule data={appointments} />
-        </div>
-        <div className="wraper__rightbar">
-          <RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}
-          onClassClick={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}}/>
-        </div>
-      </div>
-
-      <h1>{text}</h1>
-    </div>
-  );
 }
 
 export default App;

src/components/Class/index.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import "./index.scss";
-import Collapse from "@material-ui/core/Collapse";
-import ExpandIcon from "./expand.png";
-
-type ClassType = {
-  group_id: string;
-  day: string;
-  time: string;
-  lecturer: string;
-  room: string;
-};
-
-export type Group = {
-  classname: string;
-  classgroups: Array<ClassType>;
-};
-
-interface ClassProps {
-  onClassHover: (group_id: String, class_id: String) => void;
-  onClassClick: (group_id: String, class_id: String) => void;
-  data: Group;
-}
-
-interface ClassState {
-  open: boolean;
-}
-
-export default class Class extends React.Component<ClassProps, ClassState> {
-  constructor(props: ClassProps) {
-    super(props);
-
-    this.Open = this.Open.bind(this);
-    this.state = {
-      open: false,
-    };
-  }
-
-  Open(e: React.MouseEvent) {
-    this.setState({
-      open: !this.state.open,
-    });
-  }
-
-  render() {
-    return (
-      <div className="class" >
-        <div className="class__name" onClick={this.Open}>{this.props.data.classname}</div>
-        <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-          {this.props.data.classgroups.map((classgroup, index) => (
-            <div key={index} className="class__group">
-              <p
-                onMouseOver={() =>
-                  this.props.onClassHover(
-                    this.props.data.classname,
-                    this.props.data.classgroups[index].group_id
-                  )
-                }
-                onClick={() =>
-                  this.props.onClassClick(
-                    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 onClick={this.Open}>
-          <img alt="expand" src={ExpandIcon} className={`class__expandIcon${this.state.open?"Rotate":""}`} />
-        </div>
-      </div>
-    );
-  }
-}

src/components/RightBar/LectureCard/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import "./index.scss";
+import Collapse from "@material-ui/core/Collapse";
+import ExpandIcon from "./expand.png";
+import { Lecture } from "../../../lectures";
+
+interface LectureCardProps {
+	onGroupMouseOver: (id: string, name: string) => void;
+	onGroupClick: (id: string, name: string) => void;
+	onCardClick: (e: React.MouseEvent) => void;
+	lecture: Lecture;
+	id: string;
+	isSelected: boolean;
+}
+
+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>
+				{lecture.groups.map((group, index) => (
+					<div
+						className="class__group"
+						key={index}
+						onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
+						onClick={() => onGroupClick(group.id, lecture.name)}
+					>
+						<p>
+							{group.id} {group.day} {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" : ""}`} />
+			</div>
+		</div>
+	);
+}

src/components/RightBar/index.tsx

@@ -1,35 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.scss";
-import Class, { Group } from "../Class";
+import { Lecture } from "../../lectures";
+import LectureCard from "./LectureCard";
 
 interface RightBarProps {
-  onClassHover: (group_id: String, class_id: String) => void;
+	onGroupMouseOver: (id: string, name: string) => void;
-  onClassClick: (group_id: String, class_id: String) => void;
+	onGroupClick: (id: string, name: string) => void;
-  lectures: Array<Group>;
+	lectures: Array<Lecture>;
 }
 
-interface RightBarState {}
+export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: RightBarProps) {
+	const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
 
-export default class RightBar extends React.Component<
+	const onCardClick = (e: React.MouseEvent) => {
-  RightBarProps,
+		const target = e.currentTarget as HTMLElement;
-  RightBarState
+		selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
-> {
+	};
-  render() {
+
-    return (
+	return (
-      <div className="right-bar">
+		<div className="right-bar">
-        <div className="right-bar__text">
+			<div className="right-bar__text">
-          Hubert Wrzesiński<br></br>
+				Hubert Wrzesiński<br></br>
-          Semestr zimowy 2020/2021
+				Semestr zimowy 2020/2021
-        </div>
+			</div>
-        {this.props.lectures.map((classgroup, index) => (
+			{lectures.map((lecture, index) => (
-          <Class
+				<LectureCard
-            onClassHover={this.props.onClassHover}
+					lecture={lecture}
-            onClassClick={this.props.onClassClick}
+					key={index}
-            data={classgroup}
+					id={index.toString()}
-            key={index}
+					onGroupMouseOver={onGroupMouseOver}
-          />
+					onGroupClick={onGroupClick}
-        ))}
+					onCardClick={onCardClick}
-      </div>
+					isSelected={selectedCardId === index.toString()}
-    );
+				/>
-  }
+			))}
+		</div>
+	);
 }

src/index.tsx

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

src/lectures.ts

@@ -0,0 +1,53 @@
+export interface Lecture {
+	name: string;
+	groups: Array<Group>;
+}
+
+interface Group {
+	id: string;
+	day: string;
+	time: string;
+	lecturer: string;
+	room: string;
+}
+
+export const lectures: Array<Lecture> = [
+	{
+		name: "E-gospodarka - narzędzia i bezpieczeństwo",
+		groups: [
+			{
+				id: "1CB",
+				day: "Pn",
+				time: "10:00",
+				lecturer: "dr inż. Michał Ren",
+				room: "A2-01",
+			},
+			{
+				id: "1XD",
+				day: "Wt",
+				time: "12:00",
+				lecturer: "dr inż. Michał Ren",
+				room: "A3-01",
+			},
+		],
+	},
+	{
+		name: "Statystyka",
+		groups: [
+			{
+				id: "2CB",
+				day: "Pn",
+				time: "10:00",
+				lecturer: "dr inż. Michał Ren",
+				room: "A2-01",
+			},
+			{
+				id: "2XD",
+				day: "Wt",
+				time: "12:00",
+				lecturer: "dr inż. Michał Ren",
+				room: "A3-01",
+			},
+		],
+	},
+];

tsconfig.json

@@ -1,25 +1,19 @@
 {
-  "compilerOptions": {
+	"compilerOptions": {
-    "target": "es5",
+		"target": "es5",
-    "lib": [
+		"lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
+		"allowJs": true,
-      "dom.iterable",
+		"skipLibCheck": true,
-      "esnext"
+		"esModuleInterop": true,
-    ],
+		"allowSyntheticDefaultImports": true,
-    "allowJs": true,
+		"strict": true,
-    "skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
-    "esModuleInterop": true,
+		"module": "esnext",
-    "allowSyntheticDefaultImports": true,
+		"moduleResolution": "node",
-    "strict": true,
+		"resolveJsonModule": true,
-    "forceConsistentCasingInFileNames": true,
+		"isolatedModules": true,
-    "module": "esnext",
+		"noEmit": true,
-    "moduleResolution": "node",
+		"jsx": "react"
-    "resolveJsonModule": true,
+	},
-    "isolatedModules": true,
+	"include": ["src"]
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "include": [
-    "src"
-  ]
 }