Merge branch 'PBI-6/frontend_ajukan_acara_donor' into 'PBI-6-ajukan-acara-donor-fix'

Pbi 6/frontend ajukan acara donor Fix #67

See merge request !103

frontend/package-lock.json

@@ -1041,6 +1041,24 @@
         "minimist": "^1.2.0"
       }
     },
+    "@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.27",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.27.tgz",
@@ -1510,6 +1528,124 @@
         }
       }
     },
+    "@material-ui/core": {
+      "version": "4.9.13",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.13.tgz",
+      "integrity": "sha512-GEXNwUr+laZ0N+F1efmHB64Fyg+uQIRXLqbSejg3ebSXgLYNpIjnMOPRfWdu4rICq0dAIgvvNXGkKDMcf3AMpA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/react-transition-group": "^4.3.0",
+        "@material-ui/styles": "^4.9.13",
+        "@material-ui/system": "^4.9.13",
+        "@material-ui/types": "^5.0.1",
+        "@material-ui/utils": "^4.9.12",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "^1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "@material-ui/pickers": {
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
+      "integrity": "sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      }
+    },
+    "@material-ui/react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-CwQ0aXrlUynUTY6sh3UvKuvye1o92en20VGAs6TORnSxUYeRmkX8YeTUN3lAkGiBX1z222FxLFO36WWh6q73rQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+          "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^2.6.7"
+          },
+          "dependencies": {
+            "@babel/runtime": {
+              "version": "7.9.6",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
+              "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
+              "requires": {
+                "regenerator-runtime": "^0.13.4"
+              }
+            }
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.13",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.13.tgz",
+      "integrity": "sha512-lWlXJanBdHQ18jW/yphedRokHcvZD1GdGzUF/wQxKDsHwDDfO45ZkAxuSBI202dG+r1Ph483Z3pFykO2obeSRA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.0.1",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.13",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.13.tgz",
+      "integrity": "sha512-6AlpvdW6KJJ5bF1Xo2OD13sCN8k+nlL36412/bWnWZOKIfIMo/Lb8c8d1DOIaT/RKWxTEUaWnKZjabVnA3eZjA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.1.tgz",
+      "integrity": "sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw=="
+    },
+    "@material-ui/utils": {
+      "version": "4.9.12",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.12.tgz",
+      "integrity": "sha512-/0rgZPEOcZq5CFA4+4n6Q6zk7fi8skHhH2Bcra8R3epoJEYy5PL55LuMazPtPH1oKeRausDV/Omz4BbgFsn1HQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@mikaelkristiansson/domready": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/@mikaelkristiansson/domready/-/domready-1.0.10.tgz",
@@ -1966,12 +2102,28 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
+      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
       "dev": true
     },
+    "@types/styled-jsx": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.8.tgz",
+      "integrity": "sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/testing-library__dom": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-7.0.1.tgz",
@@ -4193,6 +4345,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4833,6 +4990,15 @@
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -10202,6 +10368,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -13773,6 +13944,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz",
+      "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz",
+      "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz",
+      "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz",
+      "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz",
+      "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz",
+      "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz",
+      "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz",
+      "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "10.1.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -17063,6 +17311,14 @@
         }
       }
     },
+    "react-dropzone-uploader": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/react-dropzone-uploader/-/react-dropzone-uploader-2.11.0.tgz",
+      "integrity": "sha512-1DpdPMGKP7vYL5SeCh13HCl+Xrz0F6jGrDPU5Tj2ojEIXGMCtfflrZhyXdr7u40IkQ+hYjAUEEtJW24SiY8WRA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "react-error-overlay": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
@@ -17746,6 +18002,14 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
     "rimraf": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz",
@@ -19391,6 +19655,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",

frontend/package.json

@@ -5,9 +5,12 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
+    "@date-io/moment": "^1.3.13",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/pickers": "^3.2.10",
     "apexcharts": "^3.18.1",
     "bootstrap": "^4.4.1",
     "gatsby": "^2.19.7",
@@ -17,13 +20,14 @@
     "gatsby-plugin-root-import": "^2.0.5",
     "gatsby-source-filesystem": "^2.1.46",
     "inquirer": "^6.5.2",
-    "moment": "2.24.0",
+    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-apexcharts": "^1.3.7",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-calendar": "^2.19.2",
     "react-dom": "^16.13.0",
+    "react-dropzone-uploader": "^2.11.0",
     "react-google-login": "^5.1.1",
     "react-helmet": "^5.2.1",
     "react-hook-form": "^5.3.1",

frontend/src/components/ModalChangeProfile.js

@@ -5,6 +5,7 @@ import { ProfileSchema } from "./form-validation-schema"
 import ModalCompleteProfile from "./complete-profile"
 import { useAuth } from "../hooks/authenticate"
 import { withAuthenticated } from "./authenticated-only"
+import moment from "moment"
 
 const ModalChangeProfile = ({ show, handleClose }) => {
   const { user, getAndSetUserProfile } = useAuth()
@@ -19,6 +20,8 @@ const ModalChangeProfile = ({ show, handleClose }) => {
   }, [reset, user])
 
   const onSubmit = data => {
+    data.birthdate = moment(data.birthdate).format("YYYY-MM-DD")
+
     putUserProfile(data)
       .then(() => {
         window.alert("Data berhasil diubah.")

frontend/src/components/ModalEventDonorSubmissionHelper.js

 import { fireEvent, screen } from "@testing-library/react"
+import moment from "moment"
 
 export const fillEventDonorSubmission = async () => {
   expect(await screen.getByLabelText(/Alamat Institusi/i)).toBeInTheDocument()
-  expect(
-    await screen.getByLabelText(/Alamat Lokasi Donor/i)
-  ).toBeInTheDocument()
+  expect(await screen.getByText(/Informasi Acara Donor/i)).toBeInTheDocument()
+
   fireEvent.change(screen.getByPlaceholderText(/Nama Institusi\/Organisasi/i), {
     target: {
       value: "Pacilkom",
@@ -25,6 +25,7 @@ export const fillEventDonorSubmission = async () => {
       value: "+6281234535434",
     },
   })
+
   fireEvent.change(screen.getByLabelText(/Nama Koordinator/i), {
     target: {
       value: "M. Fairuzi",
@@ -40,14 +41,44 @@ export const fillEventDonorSubmission = async () => {
       value: "+6281234535434",
     },
   })
-  fireEvent.change(screen.getByLabelText(/Alamat Lokasi Donor/i), {
+
+  fireEvent.change(screen.getByLabelText(/Kategori/i), {
+    target: {
+      value: "Terbuka",
+    },
+  })
+  fireEvent.change(screen.getByLabelText(/Alamat Lokasi/i), {
     target: {
       value: "Pacilkom",
     },
   })
-  fireEvent.change(screen.getByLabelText(/Waktu Donor/i), {
+  fireEvent.change(screen.getByLabelText(/Kecamatan/i), {
+    target: {
+      value: "Beji",
+    },
+  })
+  fireEvent.change(screen.getByLabelText(/Tanggal Pelaksanaan/i), {
+    target: {
+      value: moment()
+        .endOf("day")
+        .add(1, "seconds")
+        .format("DD/MM/YYYY"),
+    },
+  })
+  fireEvent.change(screen.getByLabelText(/Jam Mulai/i), {
+    target: {
+      value: moment()
+        .endOf("day")
+        .add(5, "hours")
+        .format("HH:mm"),
+    },
+  })
+  fireEvent.change(screen.getByLabelText(/Jam Berakhir/i), {
     target: {
-      value: "2040-05-07T12:23",
+      value: moment()
+        .endOf("day")
+        .add(7, "hours")
+        .format("HH:mm"),
     },
   })
   fireEvent.change(screen.getByLabelText(/Perkiraan Jumlah Donor/i), {
@@ -55,4 +86,12 @@ export const fillEventDonorSubmission = async () => {
       value: "666",
     },
   })
+  fireEvent.change(
+    screen.getByText("Seret dan Lepas atau Tekan untuk Memilih Sebuah Foto"),
+    {
+      target: {
+        files: [new File(["／(≧ x ≦)＼"], "foto.png", { type: "image/png" })],
+      },
+    }
+  )
 }

frontend/src/components/ModalGoogleCompleteProfile.js

@@ -5,6 +5,7 @@ import { postUserProfile } from "../api"
 import { ProfileSchema } from "./form-validation-schema"
 import ModalCompleteProfile from "./complete-profile"
 import { withAuthenticated } from "./authenticated-only"
+import moment from "moment"
 
 const ModalGoogleCompleteProfile = ({ show, handleClose }) => {
   const { user, logout, getAndSetUserProfile } = useAuth()
@@ -20,6 +21,8 @@ const ModalGoogleCompleteProfile = ({ show, handleClose }) => {
   })
 
   const onSubmit = async data => {
+    data.birthdate = moment(data.birthdate).format("YYYY-MM-DD")
+
     await postUserProfile(data)
       .then(() => {
         window.alert("Profil Anda sudah disimpan.")

frontend/src/components/ModalRegister.js

@@ -4,6 +4,7 @@ import { postRegisterFull } from "../api"
 import { RegisterSchema } from "./form-validation-schema"
 import ModalCompleteProfile from "./complete-profile"
 import ModalRegisterAccount from "./ModalRegisterAccount"
+import moment from "moment"
 
 const ModalRegister = ({ show, handleClose }) => {
   const [showModalCompleteProfile, setShowModalCompleteProfile] = useState(
@@ -27,6 +28,8 @@ const ModalRegister = ({ show, handleClose }) => {
   })
 
   const onSubmit = async data => {
+    data.birthdate = moment(data.birthdate).format("YYYY-MM-DD")
+
     await postRegisterFull(data)
       .then(response => {
         window.alert(

frontend/src/components/dropzone.css

+@import "../styles/global.css";
+
+@keyframes shake {
+  0% {
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-3px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(0px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(2px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+.dzu-dropzone {
+  overflow: hidden;
+  border: 2px solid var(--red);
+  border-radius: 0.3rem;
+  border-style: dashed;
+}
+.dzu-dropzone:hover {
+  border: 2px solid var(--dark-red);
+  box-shadow: 0 0 2px 1px var(--dark-red);
+}
+
+.dzu-inputLabel {
+  color: var(--blue);
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+.dzu-inputLabel:hover {
+  text-shadow: 0.7px 0 0 currentColor;
+}
+
+.dzu-previewImage {
+  max-height: 200px;
+  max-width: 200px;
+}
+
+.dzu-previewContainer {
+  pointer-events: none;
+  padding: 20px;
+  justify-content: center;
+  border-bottom: 0;
+  flex-wrap: wrap;
+  text-align: center;
+}
+
+.dzu-previewContainer span {
+  color: red;
+  font-size: 14px;
+}
+
+.dzu-previewStatusContainer {
+  pointer-events: auto;
+}
+
+.dzu-previewButton {
+  pointer-events: auto;
+  background-size: auto;
+}
+
+.dzu-previewContainer:hover {
+  animation: shake 1s linear infinite;
+}
+
+.dzu-previewFileNameError {
+  color: var(--blue) !important;
+  margin-right: 10px;
+}

frontend/src/components/form-validation-schema.js

@@ -4,20 +4,20 @@ import moment from "moment"
 const AccountSchema = yup.object().shape({
   email: yup
     .string()
-    .email("Masukkan email yang valid.")
-    .required("Masukkan email."),
+    .required("Masukkan email.")
+    .email("Masukkan email yang valid."),
   password: yup
     .string()