jako tako

src/App.tsx

@@ -7,8 +7,11 @@ import { appointments } from "./components/Calendar/appointments";
 import RightBar from "./components/RightBar";
 
 function App() {
-  const [isOpen, setOpen] = useState(false);
+  const [isOpenTransfer, setOpenTransfer] = useState(false);
+  const [isOpenProfile, setOpenProfile] = useState(false);
+  const [isPolish, setLanguage] = useState(true);
   const [text, setText] = useState("");
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   return (
     <div className="App">
@@ -17,20 +20,27 @@ function App() {
           setText(e.target.value);
         }}
         handleTransfer={(e) => {
-          setOpen(!isOpen);
+          setOpenTransfer(!isOpenTransfer);
         }}
         handleLanguage={(e) => {
-          alert("Language");
+          setLanguage(!isPolish);
         }}
         handleProfile={(e) => {
-          alert("Profile");
+          setOpenProfile(!isOpenProfile);
+          setAnchorEl(e.currentTarget as HTMLElement);
         }}
-        isOpen={isOpen}
+        handleClose={(e) => {
+          setOpenProfile(!isOpenProfile);
+        }}
+        isOpenTransfer={isOpenTransfer}
+        isOpenProfile={isOpenProfile}
+        isPolish={isPolish}
+        anchorEl={anchorEl}
       />
       <Transfer
-        isOpen={isOpen}
+        isOpen={isOpenTransfer}
         handleClose={(e) => {
-          setOpen(!isOpen);
+          setOpenTransfer(!isOpenTransfer);
         }}
       />
       <div className="wraper">

src/components/Calendar/appointments.ts

@@ -20,4 +20,11 @@ export const appointments = [
     id: 0,
     location: 'Room 1',
   },
+  {
+    title: 'Twoja stara beszamel',
+    startDate: new Date(2020, 5, 1, 18, 45),
+    endDate: new Date(2020, 5, 1, 20, 0),
+    id: 0,
+    location: 'Room 1',
+  },
 ];

src/components/Calendar/index.tsx

@@ -1,24 +1,25 @@
 import * as React from "react";
-import { ViewState } from "@devexpress/dx-react-scheduler";
+import { ViewState, IntegratedEditing, EditingState } from "@devexpress/dx-react-scheduler";
 import { AppointmentModel } from "@devexpress/dx-react-scheduler";
 import {
   Scheduler,
   WeekView,
   Appointments,
   AppointmentTooltip,
+  AppointmentForm,
 } 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";
 
-
 interface CalendarProps {
   data: Array<AppointmentModel>;
-  
 }
 
-interface CalendarState {currentDate: Date;}
+interface CalendarState {
+  currentDate: Date;
+}
 
 const formatDayScaleDate = (
   date: moment.MomentInput,
@@ -103,26 +104,34 @@ export default class Calendar extends React.PureComponent<
     };
   }
 
+  commitChanges() {
+
+  }
+
   render() {
     const { data } = this.props;
     const { currentDate } = this.state;
-    
 
     return (
-          <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
-            <ViewState defaultCurrentDate={currentDate} />
-            <WeekView
-              startDayHour={8}
-              endDayHour={20}
-              excludedDays={[0, 6]}
-              cellDuration={60}
-              dayScaleCellComponent={DayScaleCell}
-              timeTableLayoutComponent={TimeTableLayout}
-              timeTableCellComponent={TimeTableCell}
-            />
-            <Appointments appointmentComponent={Appointment} />
-            <AppointmentTooltip />
-          </Scheduler>        
+      <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
+        <ViewState defaultCurrentDate={currentDate} />
+        <EditingState
+          onCommitChanges={this.commitChanges}         
+        />
+        <WeekView
+          startDayHour={8}
+          endDayHour={20}
+          excludedDays={[0, 6]}
+          cellDuration={60}
+          dayScaleCellComponent={DayScaleCell}
+          timeTableLayoutComponent={TimeTableLayout}
+          timeTableCellComponent={TimeTableCell}
+        />
+        <IntegratedEditing/>
+        <Appointments appointmentComponent={Appointment} />
+        <AppointmentTooltip />
+        <AppointmentForm/>
+      </Scheduler>
     );
   }
 }

src/components/TopBar/index.scss

@@ -47,6 +47,9 @@
       flex-grow: 1.5;
     }
   }
+  &__menu{
+margin-top: 25px;
+  }
 }
 @media only screen and (max-width: 670px) {
   .top-bar {

src/components/TopBar/index.tsx

@@ -4,49 +4,58 @@ import Input from "@material-ui/core/Input";
 import Transfer from "./transfer.png";
 import Search from "./search.svg";
 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";
 
 interface TopBarProps {
   handleTransfer: (e: React.MouseEvent) => void;
   handleProfile: (e: React.MouseEvent) => void;
+  handleClose: (e: React.MouseEvent) => void;
   handleLanguage: (e: React.MouseEvent) => void;
   textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isOpen: boolean;
+  isOpenTransfer: boolean;
+  isOpenProfile: boolean;
+  isPolish: boolean;
+  anchorEl: null | HTMLElement;
 }
 
 interface TopBarState {}
 
-export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+export default class TopBar extends React.Component<
+  TopBarProps,
+  TopBarState
+> {
   constructor(props: TopBarProps) {
     super(props);
     this.handleProfile = this.handleProfile.bind(this);
+    this.handleClose = this.handleProfile.bind(this);
     this.handleLanguage = this.handleLanguage.bind(this);
     this.handleTransfer = this.handleTransfer.bind(this);
-    this.state = {
-      isOpen: false,
-    };
-  }
-
-  handleTransfer(e: React.MouseEvent) {
-    this.props.handleTransfer(e);
-    this.setState({
-      isOpen: true,
-    });
   }
 
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     this.props.textChangeHandler(e);
   }
 
-  handleProfile(e: React.MouseEvent) {
-    this.props.handleProfile(e);
+  handleTransfer(e: React.MouseEvent) {
+    this.props.handleTransfer(e);
   }
 
   handleLanguage(e: React.MouseEvent) {
     this.props.handleLanguage(e);
   }
 
+  handleProfile(e: React.MouseEvent) {
+    this.props.handleProfile(e);
+  }
+
+  handleClose(e: React.MouseEvent) {
+    this.props.handleClose(e);
+  }
+
   render() {
     return (
       <div className="top-bar">
@@ -59,11 +68,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
           <div className="top-bar__tekst"> plan na plan </div>
         </div>
         <div className="top-bar__input-div">
-        <img
-            className="top-bar__input-icon"
-            alt="search"
-            src={Search}
-          />
+          <img className="top-bar__input-icon" alt="search" src={Search} />
           <Input
             placeholder="Wyszukaj..."
             inputProps={{ "aria-label": "description" }}
@@ -72,11 +77,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
               this.handleChange(e as ChangeEvent<HTMLInputElement>)
             }
           />
-        <img
-            className="top-bar__input-icon"
-            alt="close"
-            src={CloseIcon}
-          />
+          <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
         </div>
         <div className="top-bar__icon-box">
           <img
@@ -88,7 +89,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
           <img
             className="top-bar__icon"
             alt="change_language"
-            src={UK}
+            src={this.props.isPolish ? UK : PL}
             onClick={this.handleLanguage}
           />
           <img
@@ -97,6 +98,17 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
             src={User}
             onClick={this.handleProfile}
           />
+          <Menu className="top-bar__menu"
+            id="simple-menu"
+            anchorEl={this.props.anchorEl}
+            keepMounted
+            open={this.props.isOpenProfile}
+            onClose={this.handleClose}
+          >
+            <MenuItem>Profile</MenuItem>
+            <MenuItem>My account</MenuItem>
+            <MenuItem>Logout</MenuItem>
+          </Menu>
         </div>
       </div>
     );

src/components/Transfer/index.tsx

@@ -17,16 +17,10 @@ export default class Transfer extends React.Component<
     super(props);
 
     this.handleClose = this.handleClose.bind(this);
-    this.state = {
-      isOpen: true,
-    };
   }
 
   handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
     this.props.handleClose(e);
-    this.setState({
-      isOpen: false,
-    });
   }
 
   render() {