diff --git a/.gitignore b/.gitignore index d30f40ef4..4654d7bc3 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +# skipping preflight check and setting port to 3001 +.env diff --git a/package-lock.json b/package-lock.json index 2207e63b9..4367cf133 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1162,6 +1162,16 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.19", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.19.tgz", + "integrity": "sha512-8bskLEkiDvuZztnfGN+vM56q2HQV8dyXS/Eb0nhXPx6fonii3hQLxfNVA2r5NTMbvEkwDo59bAau3idUXaGvww==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -1337,11 +1347,25 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.8.tgz", "integrity": "sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg==" }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + }, "@types/q": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==" }, + "@types/react": { + "version": "16.9.16", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.16.tgz", + "integrity": "sha512-dQ3wlehuBbYlfvRXfF5G+5TbZF3xqgkikK7DWAsQXe2KnzV+kjD4W2ea+ThCrKASZn9h98bjjPzoTYzfRqyBkw==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -1902,6 +1926,38 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -2396,6 +2452,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", + "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3327,6 +3388,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3948,6 +4014,11 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz", + "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==" + }, "cyclist": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz", @@ -4234,6 +4305,25 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz", + "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==", + "requires": { + "@babel/runtime": "^7.6.3", + "csstype": "^2.6.7" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.7.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.6.tgz", + "integrity": "sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -5603,6 +5693,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -5777,6 +5872,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5787,6 +5895,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -7701,6 +7817,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8134,6 +8255,16 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -8983,6 +9114,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz", + "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -9924,6 +10060,25 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "property-information": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz", @@ -10096,6 +10251,28 @@ "whatwg-fetch": "3.0.0" } }, + "react-bootstrap": { + "version": "1.0.0-beta.16", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.16.tgz", + "integrity": "sha512-wjb+3CwviDWAaz4O3gQpd2XMDNqbOiqOOzpLm5aLPcp1wTsQsVRhyM+rTPmO3hYU8auA2eNpTYLz08/fAcMqDA==", + "requires": { + "@babel/runtime": "^7.4.2", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.11", + "@types/react": "^16.8.23", + "classnames": "^2.2.6", + "dom-helpers": "^5.1.2", + "invariant": "^2.2.4", + "keycode": "^2.2.0", + "popper.js": "^1.16.0", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^2.1.0", + "react-transition-group": "^4.0.0", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz", @@ -10194,6 +10371,81 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-2.1.0.tgz", + "integrity": "sha512-tHPGTZosbQSo82yb9x4YCsmJJtspKvAPL5kXVnyoB2Z5UoAU3VetIuh2VblfVT408us5nLJd9uDtwI3xWDHS6w==", + "requires": { + "@babel/runtime": "^7.4.5", + "@restart/hooks": "^0.3.12", + "dom-helpers": "^5.1.0", + "popper.js": "^1.15.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.7.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.6.tgz", + "integrity": "sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", @@ -10254,6 +10506,27 @@ "workbox-webpack-plugin": "4.2.0" } }, + "react-transition-group": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", + "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.7.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.6.tgz", + "integrity": "sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -10575,6 +10848,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -11685,6 +11963,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "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==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -11847,6 +12135,27 @@ } } }, + "uncontrollable": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz", + "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": "^16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.7.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.6.tgz", + "integrity": "sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -12122,6 +12431,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -12212,6 +12526,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index e7e4a7c62..26896daa8 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.19.0", + "bootstrap": "^4.4.1", "react": "^16.8.6", + "react-bootstrap": "^1.0.0-beta.16", "react-dom": "^16.8.6", + "react-router-dom": "^5.1.2", "react-scripts": "3.0.1" }, "scripts": { @@ -12,5 +16,17 @@ "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/src/App.css b/src/App.css index c5c6e8a68..9cad4c556 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ .App { text-align: center; + font-family: Arial, Helvetica, sans-serif; } .App-logo { @@ -8,21 +9,72 @@ } .App-header { - background-color: #222; - height: 150px; + display: grid; + grid-template-columns: 1fr 10fr; + background-color: white; + height: auto; padding: 20px; color: white; } +.App-header nav ul { + display: flex; + padding-top: 60px; + list-style: none; +} + +.App-header nav li { + display: inline; + padding: 14px 20px; +} + +.App-header nav li:hover { + background-color: #00B295; + color: white; +} + +.App-header nav li:hover a { + color: inherit; +} + + +.App-header nav li a { + color: darkgreen; + font-size: 1.5em; + text-decoration: none; +} + .App-title { font-size: 1.5em; + color: red; } .App-intro { font-size: large; } +.navbar { + background-color: white; +} + +.ul { + float: left; +} + +.li { + list-style: none; + display: inline; +} + +.nav-item { + padding: 1em; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +.App-header-logo { + width: 200px; +} diff --git a/src/App.js b/src/App.js index 203067e4d..b912168ab 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,186 @@ import React, { Component } from 'react'; +import axios from 'axios'; import logo from './logo.svg'; +import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; +import Home from './components/Home'; +import Customers from './components/Customers'; +import Search from './components/Search'; +import Library from './components/Library'; +import { + BrowserRouter as Router, + Switch, + Route, + Link +} from "react-router-dom"; class App extends Component { + + constructor(props) { + super(props); + + this.state = { + libraryMovies: [], + libraryCustomers: [], + selectedCustomer: undefined, + selectedMovie: undefined, + successMessage: '', + error: '', + }; + } + + componentDidMount () { + axios.get('http://localhost:3000/movies') + .then((response) => { + this.setState({ + libraryMovies: response.data + }) + }) + .catch((error) => { + this.setState({ + error: error + }) + }) + + axios.get('http://localhost:3000/customers') + .then((response) => { + this.setState({ + libraryCustomers: response.data + }) + }) + .catch((error) => { + this.setState({ + error: error + }) + }) + } + + + selectMovie = (movie) => { + const { libraryMovies } = this.state; + + const selectedMovie = libraryMovies.find((theMovie) => { + return theMovie.id === movie.id; + }) + + this.setState({ + selectedMovie, + }) + } + + selectCustomer = (customerID) => { + const { libraryCustomers } = this.state; + + const selectedCustomer = libraryCustomers.find((customer) => { + return customer.id === customerID; + }) + + this.setState({ + selectedCustomer, + }) + } + + addToLibrary = (movie) => { + console.log('trying to add movie to library') + const libraryMovies = this.state.libraryMovies; + libraryMovies.push(movie); + this.setState({ + libraryMovies, + }) + } + + callethUponThyAxios = () => { + + console.log('customer id', this.state.selectedCustomer.id) + console.log('movie title', this.state.selectedMovie.title) + + let dueDate = new Date(); + dueDate.setDate(dueDate.getDate() + 7); + console.log('dueDate', dueDate) + + axios.post(`http://localhost:3000/rentals/${this.state.selectedMovie.title}/check-out/`, { + customer_id: this.state.selectedCustomer.id, + due_date: dueDate, + + }) + .then((response) => { + console.log('Successfully checked out movie!', response) + this.setState({ + selectedCustomer: "", + selectedMovie: "", + successMessage: "Successfully Checked Out!", + } + ) + }) + .catch((error) => { + console.log('There was an error, unable to checkout movie', error) + }) + } + render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
- ); + +
+
+ + + + +
+
+ +
+ {this.state.selectedMovie ?

Selected Movie: {this.state.selectedMovie.title}

: "" } +
+
+ {this.state.selectedCustomer ?

Selected Customer: {this.state.selectedCustomer.name}

: "" } +
+ { this.state.selectedMovie && this.state.selectedCustomer ? + + : "" + } + + + + + + + + + + + + + + + + + )} } -} export default App; diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..b43529e10 --- /dev/null +++ b/src/components/Customer.css @@ -0,0 +1,27 @@ +.customer-card { + display: inline-block; + color: white; + padding: .5em; + text-align: center; + margin: 2em; + } + +.customer-card-header { + color: white; + background-color: #00B295; + text-align: center; +} + +.customer-card-body { + color: darkgreen; + background-color: #FEFDFF; + padding: .5em; + text-align: center; +} + +.btn { + color: white; + background-color: #008C75; + +} + diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..06302b57d --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,27 @@ +import React, { Component } from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import './Customer.css' + +const Customer = (props) => { + + const { name, address, city, state, postalCode, phone, credit, buttonText, onButtonClick } = props; + + return ( +
+
+ {name} +
+
+

{address}

+

{city} {state} {postalCode}

+

{phone}

+

{credit}

+
+ + +
+ ) +} +export default Customer; diff --git a/src/components/Customers.css b/src/components/Customers.css new file mode 100644 index 000000000..cca1af0c9 --- /dev/null +++ b/src/components/Customers.css @@ -0,0 +1,6 @@ +.card-list { + display: inline-block; + width: 100%; + margin: 0; +} + diff --git a/src/components/Customers.js b/src/components/Customers.js new file mode 100644 index 000000000..01b61bcff --- /dev/null +++ b/src/components/Customers.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import Customer from './Customer'; + + + +const Customers = ({customers, selectCustomer}) => { + const customerComponents = customers.map((customer) => { + return ( + selectCustomer(customer.id)} + /> + ) + }) + + return ( +
+ {customerComponents} +
+ ) +} + +export default Customers; diff --git a/src/components/Home.css b/src/components/Home.css new file mode 100644 index 000000000..ff43b942f --- /dev/null +++ b/src/components/Home.css @@ -0,0 +1,3 @@ +.home-page-image { + width: 100vw; +} diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 000000000..756dd2841 --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,16 @@ + +import React, { Component } from 'react'; +import './Home.css' + + +const Home = () => { + return ( + + ) + +} + + +export default Home; diff --git a/src/components/Library.css b/src/components/Library.css new file mode 100644 index 000000000..751085500 --- /dev/null +++ b/src/components/Library.css @@ -0,0 +1,7 @@ +.card { + display:inline-block; + width: 50rem; +} + + + diff --git a/src/components/Library.js b/src/components/Library.js new file mode 100644 index 000000000..39d231039 --- /dev/null +++ b/src/components/Library.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import Movie from './Movie'; + +const Library = ({movies, buttonText, onMovieButtonClick}) => { + const movieComponents = movies.map((movie) => { + return ( + onMovieButtonClick(movie)} + /> + ) + }) + + return ( +
+ {movieComponents} +
+ ) +} + + +export default Library; diff --git a/src/components/Movie.css b/src/components/Movie.css new file mode 100644 index 000000000..76d65f497 --- /dev/null +++ b/src/components/Movie.css @@ -0,0 +1,37 @@ +.movie-card { + display: inline-block; + color: white; + padding: 2em; + margin-left: 20em; + margin-right: 20em; + margin-bottom: 2em; +} + +.img-fluid { + max-width: 50%; + max-height: 50%; + object-fit: contain; +} + +.movie-card-header { + color: white; + background-color: #00B295; + text-align: center; + max-width: 100%; + max-height: 50%; +} + +.movie-card-body { + color: darkgreen; + background-color: #FEFDFF; + padding: .5em; + text-align: left; +} + +.btn { + color: white; + background-color: #008C75; +} + + + diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..a2391b991 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,28 @@ +import React from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import './Movie.css' + +const Movie = (props) => { + + const { title, imageUrl, overview, releaseDate, buttonText, onButtonClick } = props; + + return ( +
+
+ {title} -- {releaseDate} +
+ Movie Image + +
+ {overview} +
+ + +
+ ) +} + +export default Movie; + diff --git a/src/components/Search.css b/src/components/Search.css new file mode 100644 index 000000000..b1eadaa74 --- /dev/null +++ b/src/components/Search.css @@ -0,0 +1,4 @@ +.btn { + color: white; + background-color: #FFF5D0 +} \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..5ab2703f7 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,109 @@ +import React, { Component } from 'react'; +import axios from 'axios'; +import Button from 'react-bootstrap/Button'; +import Library from './Library'; +class Search extends Component { + + constructor(props) { + super(props); + this.state = { + titleSearch: "", + searchResults: [], + success: "", + error: "", + } + } + + onSubmitSearch = (event) => { + event.preventDefault(); + + let searchTerm = this.state.titleSearch; + + axios.get(`http://localhost:3000/movies?query=${searchTerm}`) + + .then((response) => { + console.log(response.data) + this.setState({ + searchResults: response.data + }); + }) + .catch((error) => { + this.setState({ events: error }) + }) + } + + onInputChange = (event) => { + const updatedState = {}; + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + callUponAxios = (movieData) => { + axios.post('http://localhost:3000/movies', movieData) + .then((response) => { + console.log('response', response) + this.props.addMovie(movieData) + this.setState( + {success: `added ${movieData.title} to database`} + ) + }) + .catch((error) => { + console.log('error',error) + this.setState( + {error: `got an error when trying to add movie to database`} + ) + }) + + } + + render() { + + return ( + + +
+
+
+ + + +
+
+ +
+ +
+ +
+ {this.state.searchResults ? + + : "" + } +
+ +
+ )} + } + +export default Search;