From 19f75f2253aa3164b95d8f55164e6af2c8edcddc Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Wed, 10 Jun 2020 21:04:22 +0200 Subject: [PATCH 1/4] Added types --- package-lock.json | 22 ++++ package.json | 3 + src/App.tsx | 67 ++++++------- src/components/Calendar/index.tsx | 160 +++++++++++------------------- src/components/RightBar/index.tsx | 1 + src/components/TopBar/index.tsx | 2 +- 6 files changed, 119 insertions(+), 136 deletions(-) diff --git a/package-lock.json b/package-lock.json index e7e54e9..8ff59d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1101,6 +1101,11 @@ "resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz", "integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A==" }, + "@devexpress/dx-grid-core": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/@devexpress/dx-grid-core/-/dx-grid-core-2.6.3.tgz", + "integrity": "sha512-hYgBM/vv70gjIpuHzS80CagzDenoT20ddIcFOLJQinsAk3mdFJr/fkJAMB819wop225S0Rtb+Z157EGNgMCAXA==" + }, "@devexpress/dx-react-core": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz", @@ -1110,6 +1115,23 @@ "prop-types": "^15.7.2" } }, + "@devexpress/dx-react-grid": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid/-/dx-react-grid-2.6.3.tgz", + "integrity": "sha512-s2RMhn6Ctbe/Tp066sWgscC2eZVTTQfKs2VOR/p9gD1vMIQFPGUkSS/XyDwMPb5MD7DRvFYJ2U8oQryobB2yoQ==", + "requires": { + "@devexpress/dx-grid-core": "2.6.3" + } + }, + "@devexpress/dx-react-grid-material-ui": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid-material-ui/-/dx-react-grid-material-ui-2.6.3.tgz", + "integrity": "sha512-7tVQVrbGQNrkbOOF/xd8mTk7vAsDwQ8URRvRJGILthcnewPCJZqzmjsMV4GRQ1bEAQKAiCnRDbPunvR4vW0GEw==", + "requires": { + "clsx": "^1.0.4", + "prop-types": "^15.7.2" + } + }, "@devexpress/dx-react-scheduler": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz", diff --git a/package.json b/package.json index 7bb8896..db22b16 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,10 @@ "private": true, "dependencies": { "-": "0.0.1", + "@devexpress/dx-grid-core": "^2.6.3", "@devexpress/dx-react-core": "^2.6.3", + "@devexpress/dx-react-grid": "^2.6.3", + "@devexpress/dx-react-grid-material-ui": "^2.6.3", "@devexpress/dx-react-scheduler": "^2.6.3", "@devexpress/dx-react-scheduler-material-ui": "^2.6.3", "@material-ui/core": "^4.10.0", diff --git a/src/App.tsx b/src/App.tsx index bf12808..9becd7f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,45 +2,42 @@ import React, { useState } from "react"; import TopBar from "./components/TopBar/"; import Transfer from "./components/Transfer/"; import "./App.scss"; -import Schedule from "./components/Calendar/"; +import Calendar from "./components/Calendar"; import { appointments } from "./components/Calendar/appointments"; import RightBar from "./components/RightBar"; - function App() { - const [isOpenTransfer, setOpenTransfer] = useState(false); - const [text, setText] = useState(""); + const [isOpenTransfer, setOpenTransfer] = useState(false); + const [text, setText] = useState(""); - return ( -
- { - setText(e.target.value); - }} - handleTransfer={(e) => { - setOpenTransfer(!isOpenTransfer); - }} - onLangChange={(e) => { - console.log(e); - }} - /> - { - setOpenTransfer(!isOpenTransfer); - }} - /> -
-
- -
-
- -
-
- -

{text}

-
- ); + return ( +
+ { + setText(e.target.value); + }} + handleTransfer={() => { + setOpenTransfer(!isOpenTransfer); + }} + onLangChange={() => { + console.log("Language has been changed"); + }} + /> + { + setOpenTransfer(!isOpenTransfer); + }} + /> +
+
+ +
+
+ +
+
+
+ ); } export default App; diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index 33d3ba3..deb1dd2 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -1,127 +1,87 @@ import * as React from "react"; import { ViewState } from "@devexpress/dx-react-scheduler"; import { AppointmentModel } from "@devexpress/dx-react-scheduler"; -import { - Scheduler, - WeekView, - Appointments, - AppointmentTooltip, -} from "@devexpress/dx-react-scheduler-material-ui"; +import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui"; import moment from "moment"; import "moment/locale/pl"; import "./index.scss"; -import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; +import { makeStyles, createStyles } from "@material-ui/core/styles"; interface CalendarProps { - data: Array; + data: Array; } interface CalendarState { - currentDate: Date; + currentDate: Date; } -const formatDayScaleDate = ( - date: moment.MomentInput, - options: { weekday: any } -) => { - const momentDate = moment(date).locale("pl"); - const { weekday } = options; - return momentDate.format(weekday ? "dddd" : " ").toUpperCase(); +const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => { + const momentDate = moment(date).locale("pl"); + return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase(); }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - dayScaleCell: { - paddingTop: 10, - paddingBottom: 10, - }, - timeTableLayout: { - border: "1px solid rgba(224, 224, 224, 1);", - borderCollapse: "separate", - }, - timeTableCell: { - //borderRadius: 15, - }, - appointmentLayer: { - borderRadius: 15, - marginLeft: 5, - textAlign: "center", - }, - }) +const useStyles = makeStyles(() => + createStyles({ + dayScaleCell: { + paddingTop: 10, + paddingBottom: 10, + }, + timeTableLayout: { + border: "1px solid rgba(224, 224, 224, 1);", + borderCollapse: "separate", + }, + appointmentLayer: { + borderRadius: 15, + marginLeft: 5, + textAlign: "center", + }, + }) ); -//don't know how to set proper type of function arguments -const DayScaleCell = ({ formatDate, ...restProps }: any) => { - const classes = useStyles(); - return ( - - ); +const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => { + const classes = useStyles(); + return ( + + ); }; -const TimeTableCell = ({ ...restProps }: any) => { - const classes = useStyles(); - return ( - - ); +const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => { + const classes = useStyles(); + return ; }; -const TimeTableLayout = ({ ...restProps }: any) => { - const classes = useStyles(); - return ( - - ); +const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => { + const classes = useStyles(); + return ; }; -const Appointment = ({ ...restProps }: any) => { - const classes = useStyles(); - return ( - - ); -}; +export default class Calendar extends React.PureComponent { + constructor(props: CalendarProps) { + super(props); -export default class Calendar extends React.PureComponent< - CalendarProps, - CalendarState -> { + this.state = { + currentDate: new Date("2020-06-01"), + }; + } - constructor(props: CalendarProps) { - super(props); + render() { + const { data } = this.props; + const { currentDate } = this.state; - this.state = { - currentDate: new Date("2020-06-01"), - }; - } - - render() { - const { data } = this.props; - const { currentDate } = this.state; - - return ( - - - - - - - ); - } + return ( + + + + + + + ); + } } diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index ead1d0e..fbad157 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import "./index.scss"; import Paper from "@material-ui/core/Paper"; + interface RightBarProps {} interface RightBarState {} diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index 7d6303b..ac961a0 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -18,7 +18,7 @@ interface TopBarProps { interface TopBarState { isOpenProfile: boolean; - anchorEl: null | HTMLElement; + anchorEl: HTMLElement | null; isPolish: boolean; } From a4ada5fb792a37c57f905edfbf1f018bff5e11bb Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Wed, 10 Jun 2020 21:40:33 +0200 Subject: [PATCH 2/4] Added profile component --- src/components/Profile/index.scss | 0 src/components/Profile/index.tsx | 27 +++++ src/components/TopBar/index.tsx | 169 +++++++++++++----------------- 3 files changed, 97 insertions(+), 99 deletions(-) create mode 100644 src/components/Profile/index.scss create mode 100644 src/components/Profile/index.tsx diff --git a/src/components/Profile/index.scss b/src/components/Profile/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx new file mode 100644 index 0000000..8b0a920 --- /dev/null +++ b/src/components/Profile/index.tsx @@ -0,0 +1,27 @@ +import { Menu, MenuItem } from "@material-ui/core"; +import React, { FC } from "react"; + + +interface ProfileProps { + anchorEl: HTMLElement | null; + handleClose: () => void + +} + +export const Profile : FC = ({anchorEl, handleClose, ...restProps}) => { + + return ( + + Profile + My account + Logout + + ); +}; diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index ac961a0..ed9e16b 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -9,117 +9,88 @@ import User from "./user.png"; import CloseIcon from "./close.svg"; import Menu from "@material-ui/core/Menu"; import MenuItem from "@material-ui/core/MenuItem"; +import { Profile } from "../Profile"; interface TopBarProps { - handleTransfer: (e: React.MouseEvent) => void; - onLangChange: (lang:boolean) => void; - textChangeHandler: (e: React.ChangeEvent) => void; + handleTransfer: (e: React.MouseEvent) => void; + onLangChange: (lang: boolean) => void; + textChangeHandler: (e: React.ChangeEvent) => void; } interface TopBarState { - isOpenProfile: boolean; - anchorEl: HTMLElement | null; - isPolish: boolean; + isPolish: boolean; + anchorEl: HTMLElement | null; } export default class TopBar extends React.Component { - constructor(props: TopBarProps) { - super(props); - this.handleProfile = this.handleProfile.bind(this); - this.handleClose = this.handleClose.bind(this); - this.onLangChange = this.onLangChange.bind(this); - this.handleTransfer = this.handleTransfer.bind(this); - this.state = { - isOpenProfile: false, - anchorEl:null, - isPolish:true, - }; - } + constructor(props: TopBarProps) { + super(props); + this.handleProfile = this.handleProfile.bind(this); + this.handleClose = this.handleClose.bind(this); + this.onLangChange = this.onLangChange.bind(this); + this.handleTransfer = this.handleTransfer.bind(this); + this.state = { + isPolish: true, + anchorEl: null, + }; + } - handleChange(e: React.ChangeEvent) { - this.props.textChangeHandler(e); - } + handleChange(e: React.ChangeEvent) { + this.props.textChangeHandler(e); + } - handleTransfer(e: React.MouseEvent) { - this.props.handleTransfer(e); - } + handleTransfer(e: React.MouseEvent) { + this.props.handleTransfer(e); + } - onLangChange(e: React.MouseEvent) { - this.setState({ - isPolish:!this.state.isPolish, - }) - this.props.onLangChange(this.state.isPolish); - } + onLangChange(e: React.MouseEvent) { + this.setState({ + isPolish: !this.state.isPolish, + }); + this.props.onLangChange(this.state.isPolish); + } - handleProfile(e: React.MouseEvent) { - this.setState({ - isOpenProfile: !this.state.isOpenProfile, - anchorEl:e.currentTarget as HTMLElement, - }); - } + handleProfile(event: React.MouseEvent) { + this.setState({ + anchorEl: event.currentTarget, + }); + } - handleClose(e: React.MouseEvent) { - this.setState({ - isOpenProfile: !this.state.isOpenProfile, - }); - } + handleClose() { + this.setState({ + anchorEl: null, + }); + } - render() { - return ( -
-
- logo -
plan na plan
-
-
- search - - this.handleChange(e as ChangeEvent) - } - /> - close -
-
- transfer - change_language - profile - - Profile - My account - Logout - -
-
- ); - } + render() { + return ( +
+
+ logo +
plan na plan
+
+
+ search + this.handleChange(e)} + /> + close +
+
+ transfer + change_language + profile + +
+
+ ); + } } From 7e3e52fca77c7e8b25a9d631bbde99c52af05908 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Thu, 11 Jun 2020 17:37:43 +0200 Subject: [PATCH 3/4] Moved Profile to TopBar and added text in App.tsx --- src/components/Profile/index.scss | 0 src/components/{Profile/index.tsx => TopBar/Profile.tsx} | 0 src/components/TopBar/index.tsx | 4 +--- 3 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 src/components/Profile/index.scss rename src/components/{Profile/index.tsx => TopBar/Profile.tsx} (100%) diff --git a/src/components/Profile/index.scss b/src/components/Profile/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Profile/index.tsx b/src/components/TopBar/Profile.tsx similarity index 100% rename from src/components/Profile/index.tsx rename to src/components/TopBar/Profile.tsx diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index ed9e16b..4d5c22d 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -7,9 +7,7 @@ import UK from "./UK.png"; import PL from "./PL.png"; import User from "./user.png"; import CloseIcon from "./close.svg"; -import Menu from "@material-ui/core/Menu"; -import MenuItem from "@material-ui/core/MenuItem"; -import { Profile } from "../Profile"; +import { Profile } from "./Profile"; interface TopBarProps { handleTransfer: (e: React.MouseEvent) => void; From a3e3e557afb4440394759c39aa7e5168fd7838a3 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Thu, 11 Jun 2020 17:40:32 +0200 Subject: [PATCH 4/4] Moved Profile to TopBar and added text in App.tsx --- src/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.tsx b/src/App.tsx index 9becd7f..50c568f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,6 +36,7 @@ function App() { +

{text}

); }