add infinite loading and rent agreement work

flatrent/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^10.12.18",
     "@types/react": "^16.7.20",
     "@types/react-dom": "^16.0.11",
+    "@types/react-infinite-scroller": "^1.2.1",
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-toastify": "^4.0.1",
@@ -24,13 +25,16 @@
     "react-dates": "^20.1.0",
     "react-dom": "^16.8.6",
     "react-dropzone": "^10.1.4",
+    "react-infinite-scroller": "^1.2.4",
     "react-inlinesvg": "^0.8.4",
     "react-responsive-carousel": "^3.1.49",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.8",
     "react-spinners": "^0.5.4",
     "react-svg": "^8.0.5",
-    "react-toastify": "^4.5.2"
+    "react-toastify": "^4.5.2",
+    "react-with-styles": "^3.2.1",
+    "react-with-styles-interface-aphrodite": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

flatrent/src/components/FlexDropzone/FlexDropzone.module.css

@@ -35,13 +35,10 @@
   position: relative;
   overflow: hidden;
   border-radius: 4px;
-}
-
-.thumbInner {
   transition: opacity 0.2s;
 }
 
-.thumbInner:hover {
+.thumb:hover {
   cursor: pointer;
   opacity: 0.5;
 }
@@ -59,3 +56,11 @@
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
 }
+
+.textThumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  word-break: break-all;
+  text-overflow: ellipsis;
+}

flatrent/src/components/FlexDropzone/FlexDropzone.tsx

@@ -51,22 +51,29 @@ function FlexDropzone({text, className, onDrop, minSize, maxSize, maxFiles = 8,
     files.forEach((file) => URL.revokeObjectURL(file.preview));
   }, [files]);
 
-  const removeImage = (name: string, size: number) =>
-    () => setFiles(files.filter((f) => f.name !== name && f.size !== size));
+  const removeItem = (name: string, size: number) =>
+    () => setFiles(files.filter((f) => f.name !== name));
+
+  const getThumbContent = (file: IPreviewFile) => {
+    if (file.type.startsWith("image")) {
+      return (<img
+        onClick={removeItem(file.name, file.size)}
+        src={file.preview}
+        className={Styles.img}
+        key={file.name}
+      />);
+    } else {
+      return <span onClick={removeItem(file.name, file.size)} className={Styles.textThumb}>{file.name}</span>;
+    }
+  }
 
   const thumbs = files.map((file) => (
     <div className={Styles.thumb} key={file.name}>
-      <div className={Styles.thumbInner} key={file.name}>
-        <img
-          onClick={removeImage(file.name, file.size)}
-          src={file.preview}
-          className={Styles.img}
-          key={file.name}
-        />
-      </div>
+      {getThumbContent(file)}
     </div>
   ));
 
+
   return (
     <section className={joined(Styles.dropzoneContainer, className)}>
       <div {...getRootProps({className: Styles.dropzone})}>

flatrent/src/components/InputForm/InputAreaForm.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, Component } from "react";
 import Styles from "./InputForm.module.css";
+import { joined } from "../../utilities/Utilities";
 
 interface InputAreaFormProps {
   className?: string;

flatrent/src/components/InputForm/InputForm.module.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   text-align: left;
-  flex: 1;
+  /* flex: 1; */
   min-width: 0;
   position: relative;
   margin-top: 8px;

flatrent/src/index.css

@@ -1,8 +1,38 @@
 html {
   overflow-y: scroll;
+}
+
+/* Date Picker Custom Styles */
+
+.DateRangePicker *, .SingleDatePicker *, .DayPickerRangeController * {
   box-sizing: border-box;
 }
 
+.DateInput_input__focused {
+  border-bottom: 2px solid var(--main-accent-alt-color);
+}
+
+.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
+  background: var(--main-accent-alt-color);
+  border: 1px double var(--main-accent-alt-muted-color);
+}
+
+.CalendarDay__selected_span {
+  background: var(--main-accent-alt-muted-color);
+  border: 1px double var(--main-accent-alt-muted-color);
+}
+
+.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover {
+  background: var(--main-accent-alt-color);
+  border: 1px double var(--main-accent-alt-muted-color);
+}
+
+.CalendarDay__hovered_span, .CalendarDay__hovered_span:hover {
+  background: var(--main-accent-alt-muted-color);
+  border: 1px double var(--main-accent-alt-muted-color);
+  color: white;
+}
+
 body {
   margin: 0;
   padding: 0;

flatrent/src/index.tsx

@@ -2,8 +2,21 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
-import "./variables.css";
 import * as serviceWorker from "./serviceWorker";
+import "./variables.css";
+import Moment from "moment";
+
+// // tslint:disable-next-line: no-submodule-imports
+// import DefaultTheme from "react-dates/lib/theme/DefaultTheme";
+// // tslint:disable-next-line: no-submodule-imports
+// import aphroditeInterface from "react-with-styles-interface-aphrodite";
+// // tslint:disable-next-line: no-submodule-imports
+// import ThemedStyleSheet from "react-with-styles/lib/ThemedStyleSheet";
+
+// ThemedStyleSheet.registerInterface(aphroditeInterface);
+// ThemedStyleSheet.registerTheme(DefaultTheme);
+
+Moment.locale("lt");
 
 ReactDOM.render(<App />, document.getElementById("root"));
 

flatrent/src/scenes/FlatCreate/FlatCreate.module.css

@@ -41,7 +41,7 @@
   margin-top: 24px;
 }
 
-.input, .requirementsArea, .descriptionArea {
+.input, .requirementsArea, .descriptionArea, .button {
   margin-left: 4px;
   margin-right: 4px;
 }

flatrent/src/scenes/FlatCreate/FlatCreate.tsx

@@ -271,10 +271,10 @@ class CreateFlat extends Component<RouteComponentProps, ICreateFlatState> {
         />
 
         <FlexRow className={Styles.buttonRow}>
-          <Button disabled={this.state.requesting} onClick={this.createFlat}>
+          <Button className={Styles.button} disabled={this.state.requesting} onClick={this.createFlat}>
             Sukurti
           </Button>
-          <Button disabled={this.state.requesting} onClick={this.createFlat}>
+          <Button className={Styles.button} disabled={this.state.requesting} onClick={this.createFlat}>
             Išsaugoti
           </Button>
         </FlexRow>

flatrent/src/scenes/FlatDetails/FlatDetails.module.css

@@ -169,19 +169,30 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-content: center;
 }
 
 .modal {
   pointer-events: all;
-  width: 350px;
+  width: var(--main-width);
+  max-width: var(--main-max-width);
   height: 500px;
   background: white;
   align-self: center;
-  justify-self: center;
 }
 
 .editLink {
   color: var(--text-color);
   font-family: var(--title-font-family);
 }
+
+.datepickerWrapper {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.infoInPicker {
+  width: 100%;
+  text-align: center;
+  padding: 0px 4px 12px 4px;
+}

flatrent/src/scenes/FlatDetails/FlatDetails.tsx

@@ -14,6 +14,7 @@ import RentModal from "./RentModal";
 import FlexColumn from "../../components/FlexColumn";
 import { flatEditUrl } from "../../utilities/Utilities";
 import UserService from "../../services/UserService";
+import { StaticContext } from "react-router";
 
 interface IFlatDetailsState {
   loading: boolean;
@@ -33,11 +34,14 @@ class FlatDetails extends Component<RouteComponentProps<{ id: string }>, IFlatDe
   public render() {
     const { flat } = this.state;
 
-    const editNode = flat !== undefined && UserService.canEdit(flat.owner.id) ? (
-      <Link className={Styles.editLink} to={flatEditUrl(flat.id)}>Redaguoti</Link>
-    ) : (
-      <></>
-    );
+    const editNode =
+      flat !== undefined && UserService.canEdit(flat.owner.id) ? (
+        <Link className={Styles.editLink} to={flatEditUrl(flat.id)}>
+          Redaguoti
+        </Link>
+      ) : (
+        <></>
+      );
 
     return (
       <>
@@ -47,7 +51,7 @@ class FlatDetails extends Component<RouteComponentProps<{ id: string }>, IFlatDe
         />
         <FlexRow className={Styles.contentWrapper}>
           <FlexRow className={Styles.detailsContainer}>
-          {editNode}
+            {editNode}
             <FlexRow className={Styles.sectionEnd}>
               <FlatShortInfo flat={flat} />
               <FlexColumn>
@@ -59,16 +63,28 @@ class FlatDetails extends Component<RouteComponentProps<{ id: string }>, IFlatDe
           </FlexRow>
           <RentPanel flat={flat} />
         </FlexRow>
-        <Route exact={true} path={`${this.props.match.path}/rent`} component={RentModal} />
+        {this.getRentRoute()}
       </>
     );
   }
 
+  private getRentRoute = () => {
+    return this.state.flat !== undefined ? (
+      <Route exact={true} path={`${this.props.match.path}/rent`} render={this.getRentModal} />
+    ) : (
+      <></>
+    );
+  };
+
+  private getRentModal = (props: RouteComponentProps<any, StaticContext, any>) => (
+    this.state.flat !== undefined ? <RentModal flat={this.state.flat} {...props} /> : <></>
+  );
+
   private fetchFlat = (id: string) => {
     FlatService.getFlat(id)
       .then(this.handleResult)
       .catch(this.handleFail);
-  }
+  };
 
   private handleResult = (result: IFlatDetailsResponse) => {
     if (result.errors !== undefined) {
@@ -77,7 +93,7 @@ class FlatDetails extends Component<RouteComponentProps<{ id: string }>, IFlatDe
     } else if (result.flat !== undefined) {
       this.setState({ flat: result.flat, loading: false });
     }
-  }
+  };
 
   private handleFail() {
     toast.error("Įvyko nežinoma klaida.");