From 4adf579e9cc9f191a46a2868a6da3a98e33b95de Mon Sep 17 00:00:00 2001
From: Lucas Alexandre Fell <47724710+fell-lucas@users.noreply.github.com>
Date: Sun, 4 Apr 2021 01:45:04 -0300
Subject: [PATCH] better image upload

---
 package-lock.json              | 94 ++++++++++++++++++++++++++++++++++
 package.json                   |  2 +-
 src/components/Button.tsx      |  7 ++-
 src/components/TimedDialog.tsx | 51 +++++++++++++-----
 src/index.css                  | 15 ++++++
 src/pages/Home/index.tsx       |  6 ++-
 src/pages/Property/new.tsx     | 76 ++++++++++++++++++++++-----
 7 files changed, 217 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 47c31a2..0de09fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,10 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+<<<<<<< Updated upstream
         "@brainhubeu/react-carousel": "^1.19.26",
+=======
+>>>>>>> Stashed changes
         "@craco/craco": "^6.1.1",
         "@fortawesome/fontawesome-svg-core": "^1.2.34",
         "@fortawesome/free-regular-svg-icons": "^5.15.2",
@@ -27,6 +30,7 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.2",
         "typescript": "^4.1.5",
+<<<<<<< Updated upstream
         "web-vitals": "^1.1.0",
         "yup": "^0.32.9"
       },
@@ -37,6 +41,15 @@
         "autoprefixer": "^9.8.6",
         "postcss": "^7.0.35",
         "tailwind-scrollbar": "^1.2.4",
+=======
+        "web-vitals": "^1.1.0"
+      },
+      "devDependencies": {
+        "@tailwindcss/postcss7-compat": "^2.0.3",
+        "@types/react-router-dom": "^5.1.7",
+        "autoprefixer": "^9.8.6",
+        "postcss": "^7.0.35",
+>>>>>>> Stashed changes
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
       }
     },
@@ -1230,6 +1243,7 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+<<<<<<< Updated upstream
     "node_modules/@brainhubeu/react-carousel": {
       "version": "1.19.26",
       "resolved": "https://registry.npmjs.org/@brainhubeu/react-carousel/-/react-carousel-1.19.26.tgz",
@@ -1242,6 +1256,8 @@
         "react-dom": ">0.14.0 || >15.0.0"
       }
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/@cnakazawa/watch": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -1330,6 +1346,10 @@
       "version": "0.2.34",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
       "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==",
+<<<<<<< Updated upstream
+=======
+      "hasInstallScript": true,
+>>>>>>> Stashed changes
       "engines": {
         "node": ">=6"
       }
@@ -1338,6 +1358,10 @@
       "version": "1.2.34",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
       "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
+<<<<<<< Updated upstream
+=======
+      "hasInstallScript": true,
+>>>>>>> Stashed changes
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.34"
       },
@@ -1349,6 +1373,10 @@
       "version": "5.15.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.2.tgz",
       "integrity": "sha512-Uv5NQCYjyisNVTu/1Xjs+z8vwQjbfT6hiqYvQNfF0n8qdgfWLM581bAfVMQ3BCs1SPy+eEUKNcGkK4n0FihFHg==",
+<<<<<<< Updated upstream
+=======
+      "hasInstallScript": true,
+>>>>>>> Stashed changes
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.34"
       },
@@ -1360,6 +1388,10 @@
       "version": "5.15.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
       "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+<<<<<<< Updated upstream
+=======
+      "hasInstallScript": true,
+>>>>>>> Stashed changes
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.34"
       },
@@ -2317,6 +2349,7 @@
         "@babel/types": "^7.3.0"
       }
     },
+<<<<<<< Updated upstream
     "node_modules/@types/brainhubeu__react-carousel": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/brainhubeu__react-carousel/-/brainhubeu__react-carousel-2.0.2.tgz",
@@ -2326,6 +2359,8 @@
         "@types/react": "*"
       }
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/@types/eslint": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@@ -2408,11 +2443,14 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+<<<<<<< Updated upstream
     "node_modules/@types/lodash": {
       "version": "4.14.168",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
       "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q=="
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -3730,7 +3768,12 @@
     "node_modules/babel-runtime/node_modules/core-js": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+<<<<<<< Updated upstream
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+=======
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "hasInstallScript": true
+>>>>>>> Stashed changes
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
@@ -4804,7 +4847,12 @@
     "node_modules/core-js": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.0.tgz",
+<<<<<<< Updated upstream
       "integrity": "sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ=="
+=======
+      "integrity": "sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ==",
+      "hasInstallScript": true
+>>>>>>> Stashed changes
     },
     "node_modules/core-js-compat": {
       "version": "3.9.0",
@@ -4826,7 +4874,12 @@
     "node_modules/core-js-pure": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.9.0.tgz",
+<<<<<<< Updated upstream
       "integrity": "sha512-3pEcmMZC9Cq0D4ZBh3pe2HLtqxpGNJBLXF/kZ2YzK17RbKp94w0HFbdbSx8H8kAlZG5k76hvLrkPm57Uyef+kg=="
+=======
+      "integrity": "sha512-3pEcmMZC9Cq0D4ZBh3pe2HLtqxpGNJBLXF/kZ2YzK17RbKp94w0HFbdbSx8H8kAlZG5k76hvLrkPm57Uyef+kg==",
+      "hasInstallScript": true
+>>>>>>> Stashed changes
     },
     "node_modules/core-util-is": {
       "version": "1.0.2",
@@ -5885,6 +5938,10 @@
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
       "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
+<<<<<<< Updated upstream
+=======
+      "hasInstallScript": true,
+>>>>>>> Stashed changes
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8557,9 +8614,15 @@
       }
     },
     "node_modules/immer": {
+<<<<<<< Updated upstream
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
       "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
+=======
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
+      "integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
+>>>>>>> Stashed changes
     },
     "node_modules/import-cwd": {
       "version": "2.1.0",
@@ -10559,11 +10622,14 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+<<<<<<< Updated upstream
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11124,11 +11190,14 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+<<<<<<< Updated upstream
     "node_modules/nanoclone": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
       "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -13616,11 +13685,14 @@
         "react-is": "^16.8.1"
       }
     },
+<<<<<<< Updated upstream
     "node_modules/property-expr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
       "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -13874,9 +13946,15 @@
       }
     },
     "node_modules/react-dev-utils": {
+<<<<<<< Updated upstream
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
       "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
+=======
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.2.tgz",
+      "integrity": "sha512-xG7GlMoYkrgc2M1kDCHKRywXMDbFnjOB+/VzpytQyYBusEzR8NlGTMmUbvN86k94yyKu5XReHB8eZC2JZrNchQ==",
+>>>>>>> Stashed changes
       "dependencies": {
         "@babel/code-frame": "7.10.4",
         "address": "1.1.2",
@@ -13891,7 +13969,11 @@
         "global-modules": "2.0.0",
         "globby": "11.0.1",
         "gzip-size": "5.1.1",
+<<<<<<< Updated upstream
         "immer": "8.0.1",
+=======
+        "immer": "7.0.9",
+>>>>>>> Stashed changes
         "is-root": "2.1.0",
         "loader-utils": "2.0.0",
         "open": "^7.0.2",
@@ -15884,11 +15966,14 @@
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       },
+<<<<<<< Updated upstream
       "bin": {
         "sshpk-conv": "bin/sshpk-conv",
         "sshpk-sign": "bin/sshpk-sign",
         "sshpk-verify": "bin/sshpk-verify"
       },
+=======
+>>>>>>> Stashed changes
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16404,12 +16489,15 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
+<<<<<<< Updated upstream
     "node_modules/tailwind-scrollbar": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-1.2.4.tgz",
       "integrity": "sha512-vnB8U1T+FSsOsdko+3v4qJ2rGo7PwgB08xhN3E6Uvo1Wg91e61v06pXOl3Kyc3zRUE1V4jY/zPtfy4dt3Q3MWQ==",
       "dev": true
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/tailwindcss": {
       "name": "@tailwindcss/postcss7-compat",
       "version": "2.0.3",
@@ -16841,11 +16929,14 @@
         "node": ">=0.6"
       }
     },
+<<<<<<< Updated upstream
     "node_modules/toposort": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
       "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
     },
+=======
+>>>>>>> Stashed changes
     "node_modules/tough-cookie": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
@@ -19163,6 +19254,7 @@
       "engines": {
         "node": ">=10"
       }
+<<<<<<< Updated upstream
     },
     "node_modules/yup": {
       "version": "0.32.9",
@@ -19180,6 +19272,8 @@
       "engines": {
         "node": ">=10"
       }
+=======
+>>>>>>> Stashed changes
     }
   },
   "dependencies": {
diff --git a/package.json b/package.json
index d1c3912..915a2a6 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "BROWSER=none craco start",
+    "start": "BROWSER=vivaldi-stable craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 921df7d..901864f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -3,14 +3,13 @@ import { ButtonHTMLAttributes } from "react";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactChild;
   color?: string;
+  hover?: string;
 }
 
-export function Button({ children, color, className, ...rest }: ButtonProps) {
+export function Button({ children, color, hover, className, ...rest }: ButtonProps) {
   return (
     <button
-      className={`flex py-2 px-4 transition duration-150 ease-in-out
-      hover:bg-opacity-70 bg-${color ?? "red"}-200 dark:bg-${color ?? "red"}-400
-      rounded-lg h-10 dark:text-white ${className}`}
+      className={`flex py-2 px-4 transition duration-150 ease-in-out ${hover ? `hover:bg-${hover}-400 dark:hover:bg-${hover}-500` : 'hover:bg-opacity-70'}  bg-${color ?? "red"}-200 dark:bg-${color ?? "red"}-400 rounded-lg h-10 dark:text-white ${className}`}
       {...rest}
     >
       <p className="flex gap-2 items-center flex-1 justify-center">{children}</p>
diff --git a/src/components/TimedDialog.tsx b/src/components/TimedDialog.tsx
index a01a784..b87b21f 100644
--- a/src/components/TimedDialog.tsx
+++ b/src/components/TimedDialog.tsx
@@ -4,9 +4,10 @@ interface TimedDialogProps {
   timeout: number
   msg: string[]
   start: boolean
+  dialogStyle?: string
 }
 
-export function TimedDialog({timeout, msg, start}: TimedDialogProps) {
+export function TimedDialog({timeout, msg, dialogStyle = 'success', start}: TimedDialogProps) {
   const [cooldownWidth, setCooldownWidth] = useState(0)
 
   if(start)
@@ -18,17 +19,41 @@ export function TimedDialog({timeout, msg, start}: TimedDialogProps) {
     }, 10)
   }
 
-  return <div style={{
-    transition: 'opacity 0.5s',
-    opacity: `${cooldownWidth / 100}`
-  }} className="bg-green-100 rounded-t-none rounded-lg mb-5">
-    <div style={{
-      transition: `width linear ${timeout / 1000}s`,
-      width: `${cooldownWidth}%`
-    }}
-    className="h-1 bg-green-500"></div>
-    <div className="p-5">
-      {msg.map((e: string, index) => (<p key={index} className="text-green-700 font-bold">{e}</p>))}
+  if(dialogStyle === 'error') {
+    return (
+    <div
+    style={{
+      transition: 'opacity 0.5s',
+      opacity: `${cooldownWidth / 100}`}}
+    className="bg-red-100 rounded-t-none rounded-lg mb-5"
+    >
+      <div
+      style={{
+        transition: `width linear ${timeout / 1000}s`,
+        width: `${cooldownWidth}%`}}
+      className="h-1 bg-red-500"></div>
+      <div className="p-5">
+        {msg.map((e: string, index) => (<p key={index} className="text-red-700 font-bold">{e}</p>))}
+      </div>
     </div>
-  </div>
+    )
+  } else {
+    return (
+    <div
+    style={{
+      transition: 'opacity 0.5s',
+      opacity: `${cooldownWidth / 100}`}}
+    className="bg-green-100 rounded-t-none rounded-lg mb-5"
+    >
+      <div
+      style={{
+        transition: `width linear ${timeout / 1000}s`,
+        width: `${cooldownWidth}%`}}
+      className="h-1 bg-green-500"></div>
+      <div className="p-5">
+        {msg.map((e: string, index) => (<p key={index} className="text-green-700 font-bold">{e}</p>))}
+      </div>
+    </div>
+    )
+  }
 }
diff --git a/src/index.css b/src/index.css
index 060871c..bb107ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -39,3 +39,18 @@
   background: rgba(253, 242, 248);
 }
 
+.newPropertyFileButton .fa-hover-show,
+.newPropertyFileButton:hover .fa-hover-hidden {
+  display: none;
+}
+.newPropertyFileButton:hover .fa-hover-show {
+  display: inline-block;
+}
+
+.newPropertyFileButton:hover > .tooltip {
+  visibility: visible;
+}
+
+.tooltip {
+  visibility: hidden;
+}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 3a464db..c3c3f67 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -7,7 +7,9 @@ import {
   faWindowMinimize,
   faPlus,
   faTimes,
-  faSearch
+  faSearch,
+  faFileImage,
+  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import Search from "../../components/Search";
 import { PropertySample } from "../../components/PropertySample";
@@ -17,7 +19,7 @@ import { Button } from "../../components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
 
-library.add(faGreaterThan, faWindowMinimize, faPlus, faTimes, faSearch);
+library.add(faGreaterThan, faWindowMinimize, faPlus, faTimes, faSearch, faFileImage, faTrash);
 
 interface Property {
   id: string;
diff --git a/src/pages/Property/new.tsx b/src/pages/Property/new.tsx
index 28ab10f..4dda520 100644
--- a/src/pages/Property/new.tsx
+++ b/src/pages/Property/new.tsx
@@ -1,6 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
 import { Button } from "../../components/Button";
 import Chat from "../../components/Chat";
 import { FormError } from "../../components/FormError";
@@ -30,11 +29,12 @@ interface Property {
 
 export function NewProperty() {
   const [generalErrors, setGeneralErrors] = useState<string[]>([])
-  const [successMsg, setSuccessMsg] = useState<string[]>([])
+  const [msg, setMsg] = useState<string[]>([])
   const [msgStart, setMsgStart] = useState(false)
+  const [dialogStyle, setDialogStyle] = useState('success')
   const msgTimeout = 2500
 
-  const [files, setFiles] = useState([])
+  const [files, setFiles] = useState<FileList | null>(null)
 
   const [data, setData] = useState({
     Área: 0,
@@ -89,11 +89,11 @@ export function NewProperty() {
         const r = await apiProperty.post(`/${data.Tipo}`, toSend);
 
         let formData = new FormData();
-        //@ts-ignore
+        //@ts-expect-error
         formData.append("img1", files[0]);
-        //@ts-ignore
+        //@ts-expect-error
         formData.append("img2", files[1]);
-        //@ts-ignore
+        //@ts-expect-error
         formData.append("img3", files[2]);
 
         await apiProperty.post(
@@ -102,10 +102,11 @@ export function NewProperty() {
           headers: { 'Content-Type': 'multipart/form-data;' }
         })
 
-        setSuccessMsg(['Imóvel cadastrado com sucesso.'])
+        setDialogStyle('success')
+        setMsg(['Imóvel cadastrado com sucesso.'])
         setMsgStart(true)
         setTimeout(() => {
-          setSuccessMsg([])
+          setMsg([])
         }, msgTimeout)
       } catch (error) {
         console.log(error)
@@ -123,6 +124,15 @@ export function NewProperty() {
     try {
       await schema.validate(data, { abortEarly: false })
       setGeneralErrors([])
+      if(!files?.item(0)) {
+        setMsg(['Deve existir ao menos 1 foto do imóvel.'])
+        setDialogStyle('error')
+        setMsgStart(true)
+        setTimeout(() => {
+          setMsg([])
+        }, msgTimeout)
+        return false
+      }
       return true
     } catch (error) {
       setGeneralErrors(error.errors)
@@ -130,6 +140,28 @@ export function NewProperty() {
     }
   }
 
+  function handleFiles(e: React.ChangeEvent<HTMLInputElement>) {
+    setFiles(null)
+    if(e.target.files) {
+      let list = new DataTransfer()
+      for (let index = 0; index < e.target.files.length; index++) {
+        if (index > 2) break
+        // @ts-expect-error
+        list.items.add(e.target.files.item(index))
+      }
+      setFiles(list.files)
+    }
+  }
+
+  function updateFileList(f: FileList, toRemove: number) {
+    let list = new DataTransfer()
+    for (let index = 0; index < f.length; index++) {
+      if(index === toRemove) continue
+      list.items.add(f[index])
+    }
+    setFiles(list.files)
+  }
+
   return (
     <>
       <Chat></Chat>
@@ -152,7 +184,7 @@ export function NewProperty() {
                 </div>
               </>)}
             <div>
-              {successMsg[0] && (<TimedDialog timeout={msgTimeout} msg={successMsg} start={msgStart} />)}
+              {msg[0] && (<TimedDialog dialogStyle={dialogStyle} timeout={msgTimeout} msg={msg} start={msgStart} />)}
               <div className="flex max-w-3xl shadow-md rounded-xl
                 justify-around items-center gap-12 bg-white dark:bg-gray-800
                 p-5 mb-8 dark:text-white"
@@ -314,22 +346,38 @@ export function NewProperty() {
                         Enviar
                       </Button>
                     </div>
-                    <div className="grid col-span-3"></div>
-                    <div className="grid col-span-2 cursor-pointer">
-                      <Button color="blue" className="relative cursor-pointer">
+                    <div className="grid col-span-1"></div>
+                    <div className="grid col-span-1 cursor-pointer">
+                      <Button color="blue" className="relative cursor-pointer" type="button">
                         <>
                           <FontAwesomeIcon icon="plus" />
-                          Fotos max: (3)
+                          Fotos
                           <input
                             className="text-0 absolute z-10 cursor-pointer opacity-0 right-0 top-0 h-full w-full text-xs"
                             type="file"
                             multiple={true}
                             // @ts-ignore
-                            onChange={(e) => setFiles(e.target.files)}
+                            onChange={(e) => handleFiles(e)}
                           />
                         </>
                       </Button>
                     </div>
+                    {files && Array.from(files).map((file, index) => (
+                    <>
+                      <div className="grid col-span-1 cursor-pointer newPropertyFileButton relative">
+                        <div className="tooltip bg-pink-100 text-center rounded-lg text-sm p-1 max-h-14 absolute overflow-hidden -mt-16 z-10 w-36 -left-5 break-words dark:text-white dark:bg-pink-500 leading-tight">
+                          {file.name}
+                        </div>
+                        <Button color="green" hover="red" className="cursor-pointer" type="button" onClick={() => updateFileList(files, index)}>
+                          <>
+                            <FontAwesomeIcon icon="file-image" className="fa-hover-hidden" />
+                            <FontAwesomeIcon icon="trash" className="fa-hover-show" />
+                            <p className="">{file.name.substring(0, 5)}...</p>
+                          </>
+                        </Button>
+                      </div>
+                    </>
+                    ))}
                   </form>
                 </div>
               </div>