merge to master

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",

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",

src/App.tsx

@@ -85,4 +85,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

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 {
+import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui";
-  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<AppointmentModel>;
+	data: Array<AppointmentModel>;
 }
 
 interface CalendarState {
-  currentDate: Date;
+	currentDate: Date;
 }
 
-const formatDayScaleDate = (
+const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => {
-  date: moment.MomentInput,
+	const momentDate = moment(date).locale("pl");
-  options: { weekday: any }
+	return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase();
-) => {
-  const momentDate = moment(date).locale("pl");
-  const { weekday } = options;
-  return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
 };
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
-  createStyles({
+	createStyles({
-    dayScaleCell: {
+		dayScaleCell: {
-      paddingTop: 10,
+			paddingTop: 10,
-      paddingBottom: 10,
+			paddingBottom: 10,
-    },
+		},
-    timeTableLayout: {
+		timeTableLayout: {
-      border: "1px solid rgba(224, 224, 224, 1);",
+			border: "1px solid rgba(224, 224, 224, 1);",
-      borderCollapse: "separate",
+			borderCollapse: "separate",
-    },
+		},
-    timeTableCell: {
+		appointmentLayer: {
-      //borderRadius: 15,
+			borderRadius: 15,
-    },
+			marginLeft: 5,
-    appointmentLayer: {
+			textAlign: "center",
-      borderRadius: 15,
+		},
-      marginLeft: 5,
+	})
-      textAlign: "center",
-    },
-  })
 );
 
-//don't know how to set proper type of function arguments
+const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => {
-const DayScaleCell = ({ formatDate, ...restProps }: any) => {
+	const classes = useStyles();
-  const classes = useStyles();
+	return (
-  return (
+		<WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} today={false} className={classes.dayScaleCell} />
-    <WeekView.DayScaleCell
+	);
-      {...restProps}
-      formatDate={formatDayScaleDate}
-      today={false}
-      className={classes.dayScaleCell}
-    />
-  );
 };
 
-const TimeTableCell = ({ ...restProps }: any) => {
+const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => {
-  const classes = useStyles();
+	const classes = useStyles();
-  return (
+	return <WeekView.TimeTableLayout {...restProps} className={classes.timeTableLayout} />;
-    <WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
-  );
 };
 
-const TimeTableLayout = ({ ...restProps }: any) => {
+const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => {
-  const classes = useStyles();
+	const classes = useStyles();
-  return (
+	return <Appointments.Appointment {...restProps} className={classes.appointmentLayer} />;
-    <WeekView.TimeTableLayout
-      {...restProps}
-      className={classes.timeTableLayout}
-    />
-  );
 };
 
-const Appointment = ({ ...restProps }: any) => {
+export default class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
-  const classes = useStyles();
+	constructor(props: CalendarProps) {
-  return (
+		super(props);
-    <Appointments.Appointment
-      {...restProps}
-      className={classes.appointmentLayer}
-    />
-  );
-};
 
-export default class Calendar extends React.PureComponent<
+		this.state = {
-  CalendarProps,
+			currentDate: new Date("2020-06-01"),
-  CalendarState
+		};
-> {
+	}
 
-  constructor(props: CalendarProps) {
+	render() {
-    super(props);
+		const { data } = this.props;
+		const { currentDate } = this.state;
 
-    this.state = {
+		return (
-      currentDate: new Date("2020-06-01"),
+			<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
-    };
+				<ViewState defaultCurrentDate={currentDate} />
-  }
+				<WeekView
-
+					startDayHour={8}
-  render() {
+					endDayHour={20}
-    const { data } = this.props;
+					excludedDays={[0, 6]}
-    const { currentDate } = this.state;
+					cellDuration={60}
-
+					dayScaleCellComponent={DayScaleCell}
-    return (
+					timeTableLayoutComponent={TimeTableLayout}
-      <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
+				/>
-        <ViewState defaultCurrentDate={currentDate} />
+				<Appointments appointmentComponent={Appointment} />
-        <WeekView
+				<AppointmentTooltip />
-          startDayHour={8}
+			</Scheduler>
-          endDayHour={20}
+		);
-          excludedDays={[0, 6]}
+	}
-          cellDuration={60}
-          dayScaleCellComponent={DayScaleCell}
-          timeTableLayoutComponent={TimeTableLayout}
-          timeTableCellComponent={TimeTableCell}
-        />
-        <Appointments appointmentComponent={Appointment} />
-        <AppointmentTooltip />
-      </Scheduler>
-    );
-  }
 }

src/components/TopBar/Profile.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<ProfileProps> = ({anchorEl, handleClose, ...restProps}) => {
+
+	return (
+		<Menu
+			className="top-bar__menu"
+			id="simple-menu"
+			anchorEl={anchorEl}
+			keepMounted
+			open={Boolean(anchorEl)}
+			onClose={handleClose}
+		>
+			<MenuItem>Profile</MenuItem>
+			<MenuItem>My account</MenuItem>
+			<MenuItem>Logout</MenuItem>
+		</Menu>
+	);
+};

src/components/TopBar/index.tsx

@@ -7,119 +7,88 @@ 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 { Profile } from "./Profile";
-import MenuItem from "@material-ui/core/MenuItem";
 
 interface TopBarProps {
-  handleTransfer: (e: React.MouseEvent) => void;
+	handleTransfer: (e: React.MouseEvent) => void;
-  onLangChange: (lang:boolean) => void;
+	onLangChange: (lang: boolean) => void;
-  textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 interface TopBarState {
-  isOpenProfile: boolean;
+	isPolish: boolean;
-  anchorEl: null | HTMLElement;
+	anchorEl: HTMLElement | null;
-  isPolish: boolean;
 }
 
 export default class TopBar extends React.Component<TopBarProps, TopBarState> {
-  constructor(props: TopBarProps) {
+	constructor(props: TopBarProps) {
-    super(props);
+		super(props);
-    this.handleProfile = this.handleProfile.bind(this);
+		this.handleProfile = this.handleProfile.bind(this);
-    this.handleClose = this.handleClose.bind(this);
+		this.handleClose = this.handleClose.bind(this);
-    this.onLangChange = this.onLangChange.bind(this);
+		this.onLangChange = this.onLangChange.bind(this);
-    this.handleTransfer = this.handleTransfer.bind(this);
+		this.handleTransfer = this.handleTransfer.bind(this);
-    this.state = {
+		this.state = {
-      isOpenProfile: false,
+			isPolish: true,
-      anchorEl:null,
+			anchorEl: null,
-      isPolish:true,
+		};
-    };
+	}
-  }
 
-  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+	handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    this.props.textChangeHandler(e);
+		this.props.textChangeHandler(e);
-  }
+	}
 
-  handleTransfer(e: React.MouseEvent) {
+	handleTransfer(e: React.MouseEvent) {
-    this.props.handleTransfer(e);
+		this.props.handleTransfer(e);
-  }
+	}
 
-  onLangChange(e: React.MouseEvent) {
+	onLangChange(e: React.MouseEvent) {
-    this.setState({
+		this.setState({
-      isPolish:!this.state.isPolish,
+			isPolish: !this.state.isPolish,
-    })
+		});
-    this.props.onLangChange(this.state.isPolish);
+		this.props.onLangChange(this.state.isPolish);
-  }
+	}
 
-  handleProfile(e: React.MouseEvent) {
+	handleProfile(event: React.MouseEvent<HTMLImageElement>) {
-    this.setState({
+		this.setState({
-      isOpenProfile: !this.state.isOpenProfile,
+			anchorEl: event.currentTarget,
-      anchorEl:e.currentTarget as HTMLElement,
+		});
-    });
+	}
-  }
 
-  handleClose(e: React.MouseEvent) {
+	handleClose() {
-    this.setState({
+		this.setState({
-      isOpenProfile: !this.state.isOpenProfile,
+			anchorEl: null,
-    });
+		});
-  }
+	}
 
-  render() {
+	render() {
-    return (
+		return (
-      <div className="top-bar">
+			<div className="top-bar">
-        <div className="top-bar__logo">
+				<div className="top-bar__logo">
-          <img
+					<img className="top-bar__logo-image" alt="logo" src="https://plannaplan.pl/img/logo.svg" />
-            className="top-bar__logo-image"
+					<div className="top-bar__tekst"> plan na plan </div>
-            alt="logo"
+				</div>
-            src="https://plannaplan.pl/img/logo.svg"
+				<div className="top-bar__input-div">
-          />
+					<img className="top-bar__input-icon" alt="search" src={Search} />
-          <div className="top-bar__tekst"> plan na plan </div>
+					<Input
-        </div>
+						placeholder="Wyszukaj..."
-        <div className="top-bar__input-div">
+						inputProps={{ "aria-label": "description" }}
-          <img className="top-bar__input-icon" alt="search" src={Search} />
+						className="top-bar__input-field"
-          <Input
+						onChange={(e) => this.handleChange(e)}
-            placeholder="Wyszukaj..."
+					/>
-            inputProps={{ "aria-label": "description" }}
+					<img className="top-bar__input-icon" alt="close" src={CloseIcon} />
-            className="top-bar__input-field"
+				</div>
-            onChange={(e) =>
+				<div className="top-bar__icon-box">
-              this.handleChange(e as ChangeEvent<HTMLInputElement>)
+					<img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
-            }
+					<img
-          />
+						className="top-bar__icon"
-          <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
+						alt="change_language"
-        </div>
+						src={this.state.isPolish ? UK : PL}
-        <div className="top-bar__icon-box">
+						onClick={this.onLangChange}
-          <img
+					/>
-            className="top-bar__icon"
+					<img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
-            alt="transfer"
+					<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
-            src={Transfer}
+				</div>
-            onClick={this.handleTransfer}
+			</div>
-          />
+		);
-          <img
+	}
-            className="top-bar__icon"
-            alt="change_language"
-            src={this.state.isPolish ? UK : PL}
-            onClick={this.onLangChange}
-          />
-          <img
-            className="top-bar__icon"
-            alt="profile"
-            src={User}
-            onClick={this.handleProfile}
-          />
-          <Menu
-            className="top-bar__menu"
-            id="simple-menu"
-            anchorEl={this.state.anchorEl}
-            keepMounted
-            open={this.state.isOpenProfile}
-            onClose={this.handleClose}
-          >
-            <MenuItem>Profile</MenuItem>
-            <MenuItem>My account</MenuItem>
-            <MenuItem>Logout</MenuItem>
-          </Menu>
-        </div>
-      </div>
-    );
-  }
 }