From aabafac2bba387da82b1a9cf99a386eb4bb7b070 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Wed, 17 Jun 2020 19:53:30 +0200 Subject: [PATCH 1/3] Cleaned up --- src/App.tsx | 116 ++++++------------ src/components/Class/index.tsx | 78 ------------ .../LectureCard}/expand.png | Bin .../LectureCard}/index.scss | 0 src/components/RightBar/LectureCard/index.tsx | 39 ++++++ src/components/RightBar/index.tsx | 61 ++++----- src/index.tsx | 4 +- src/lectures.ts | 53 ++++++++ tsconfig.json | 40 +++--- 9 files changed, 184 insertions(+), 207 deletions(-) delete mode 100644 src/components/Class/index.tsx rename src/components/{Class => RightBar/LectureCard}/expand.png (100%) rename src/components/{Class => RightBar/LectureCard}/index.scss (100%) create mode 100644 src/components/RightBar/LectureCard/index.tsx create mode 100644 src/lectures.ts diff --git a/src/App.tsx b/src/App.tsx index 9e8ec54..e5ab92c 100644 --- a/src/App.tsx +++ b/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 [text, setText] = useState(""); + 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 ( +
+ { + setText(e.target.value); + }} + handleTransfer={(e) => { + setOpenTransfer(!isOpenTransfer); + }} + onLangChange={(e) => { + console.log(e); + }} + /> + { + setOpenTransfer(!isOpenTransfer); + }} + /> +
+
+ +
+
+ { + console.log("XD"); + }} + onGroupClick={(id, name) => {}} + /> +
+
- return ( -
- { - setText(e.target.value); - }} - handleTransfer={(e) => { - setOpenTransfer(!isOpenTransfer); - }} - onLangChange={(e) => { - console.log(e); - }} - /> - { - setOpenTransfer(!isOpenTransfer); - }} - /> -
-
- -
-
- {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)}}/> -
-
- -

{text}

-
- ); +

{text}

+
+ ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/components/Class/index.tsx b/src/components/Class/index.tsx deleted file mode 100644 index 4cd8bd6..0000000 --- a/src/components/Class/index.tsx +++ /dev/null @@ -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; -}; - -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 { - 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 ( -
-
{this.props.data.classname}
- - {this.props.data.classgroups.map((classgroup, index) => ( -
-

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

{classgroup.lecturer} -

{" "} -
- ))} - -
- expand -
-
- ); - } -} diff --git a/src/components/Class/expand.png b/src/components/RightBar/LectureCard/expand.png similarity index 100% rename from src/components/Class/expand.png rename to src/components/RightBar/LectureCard/expand.png diff --git a/src/components/Class/index.scss b/src/components/RightBar/LectureCard/index.scss similarity index 100% rename from src/components/Class/index.scss rename to src/components/RightBar/LectureCard/index.scss diff --git a/src/components/RightBar/LectureCard/index.tsx b/src/components/RightBar/LectureCard/index.tsx new file mode 100644 index 0000000..382c3a1 --- /dev/null +++ b/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 ( +
+
{lecture.name}
+ + {lecture.groups.map((group, index) => ( +
onGroupMouseOver(group.id, lecture.name)} + onClick={() => onGroupClick(group.id, lecture.name)} + > +

+ {group.id} {group.day} {group.time} {group.room}

{group.lecturer} +

{" "} +
+ ))} + +
+ expand +
+
+ ); +} diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index 3d1377a..ae0fdc5 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -1,35 +1,40 @@ -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; - onClassClick: (group_id: String, class_id: String) => void; - lectures: Array; + onGroupMouseOver: (id: string, name: string) => void; + onGroupClick: (id: string, name: string) => void; + lectures: Array; } -interface RightBarState {} +export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: RightBarProps) { + const [selectedCardId, setSelectedCardId] = useState(null); -export default class RightBar extends React.Component< - RightBarProps, - RightBarState -> { - render() { - return ( -
-
- Hubert Wrzesiński

- Semestr zimowy 2020/2021 -
- {this.props.lectures.map((classgroup, index) => ( - - ))} -
- ); - } + const onCardClick = (e: React.MouseEvent) => { + const target = e.target as HTMLElement; + console.log(`Target id is: ${target.id}`); + selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id); + }; + + return ( +
+
+ Hubert Wrzesiński

+ Semestr zimowy 2020/2021 +
+ {lectures.map((lecture, index) => ( + + ))} +
+ ); } diff --git a/src/index.tsx b/src/index.tsx index 5200822..652b446 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,8 +3,8 @@ import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render( - + <> - , + , document.getElementById("root") ); diff --git a/src/lectures.ts b/src/lectures.ts new file mode 100644 index 0000000..fbc7068 --- /dev/null +++ b/src/lectures.ts @@ -0,0 +1,53 @@ +export interface Lecture { + name: string; + groups: Array; +} + +interface Group { + id: string; + day: string; + time: string; + lecturer: string; + room: string; +} + +export const lectures: Array = [ + { + 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", + }, + ], + }, +]; diff --git a/tsconfig.json b/tsconfig.json index f2850b7..97ba7e5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,25 +1,19 @@ { - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react" - }, - "include": [ - "src" - ] + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": ["src"] } From 3f5e672e5c3c3634899cb2fa69f77840ef913576 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Thu, 18 Jun 2020 17:12:30 +0200 Subject: [PATCH 2/3] Removed console log --- src/components/RightBar/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index ae0fdc5..89f5e61 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -14,7 +14,6 @@ export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: R const onCardClick = (e: React.MouseEvent) => { const target = e.target as HTMLElement; - console.log(`Target id is: ${target.id}`); selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id); }; From 9c7900b022ca060ae860e90233a039f0a16cb6fd Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Thu, 18 Jun 2020 17:38:36 +0200 Subject: [PATCH 3/3] Changed target to current target --- src/components/RightBar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index 89f5e61..4007716 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -13,7 +13,7 @@ export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: R const [selectedCardId, setSelectedCardId] = useState(null); const onCardClick = (e: React.MouseEvent) => { - const target = e.target as HTMLElement; + const target = e.currentTarget as HTMLElement; selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id); };