diff --git a/.env b/.env new file mode 100644 index 0000000..deb800d --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +REACT_APP_SERVER_URL=http://localhost:3005 +REACT_APP_domain=dev-1rcx5l4t.us.auth0.com +REACT_APP_clientId=SGPjhjpJ06lcVrTJpLNej8Mywu370Gbk +REACT_APP_ID =750a3def +REACT_APP_KEY =78f65d43585a400ca862a44e196ee9c2 diff --git a/.env.sample b/.env.sample index e69de29..76d391e 100644 --- a/.env.sample +++ b/.env.sample @@ -0,0 +1,5 @@ +REACT_APP_SERVER_URL= +REACT_APP_domain= +REACT_APP_clientId= +const APP_ID = +const APP_KEY = \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4d29575..8b182cf 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.env diff --git a/package-lock.json b/package-lock.json index a3afd1b..3967b81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,28 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@auth0/auth0-react": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-1.7.0.tgz", + "integrity": "sha512-D0JVqt8kvB8t+KkYAVyfTXxkMx0bJBTPNiQKWbiSwy9rm1PNVKgbS1/ABpf6DNbPeSdpOzVOQp0NVw5s6JivXw==", + "requires": { + "@auth0/auth0-spa-js": "^1.17.1" + } + }, + "@auth0/auth0-spa-js": { + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-1.18.0.tgz", + "integrity": "sha512-Z8ZIzrZJKBHa3yFY/vRJYqg9CbLPwb2sRnouBdfPj8Pas08fwig63mfJKaTusIJC3gQ8xCIwfw4QFo83wpmFkg==", + "requires": { + "abortcontroller-polyfill": "^1.7.3", + "browser-tabs-lock": "^1.2.14", + "core-js": "^3.16.3", + "es-cookie": "^1.3.2", + "fast-text-encoding": "^1.0.3", + "promise-polyfill": "^8.2.0", + "unfetch": "^4.2.0" + } + }, "@babel/code-frame": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", @@ -1234,6 +1256,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", + "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.15", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz", + "integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", @@ -1914,6 +1965,59 @@ } } }, + "@popperjs/core": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz", + "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==" + }, + "@react-aria/ssr": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.0.tgz", + "integrity": "sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==", + "requires": { + "@babel/runtime": "^7.6.2" + } + }, + "@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.27", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", + "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==", + "requires": { + "dequal": "^2.0.2" + } + }, + "@restart/ui": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-0.2.2.tgz", + "integrity": "sha512-PgNkiyOaWwx8ttQ45KNABXU3780fB/UxNFxcsCpC4RRAlaByZHHbNLOKfhuFs+ZUU0uLxEH9wYQEhDAZc6ajkA==", + "requires": { + "@babel/runtime": "^7.13.16", + "@popperjs/core": "^2.9.2", + "@react-aria/ssr": "^3.0.1", + "@restart/hooks": "^0.4.0", + "@types/warning": "^3.0.0", + "dequal": "^2.0.2", + "dom-helpers": "^5.2.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "dependencies": { + "@restart/hooks": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.0.tgz", + "integrity": "sha512-+RenTVobiCHPjUTbhQDV8m0PU1xEWqgloMIIOlf86oKnfghKR/l4tKto7TH543shEQZZa7ARSMTvT0cXN9u8+g==", + "requires": { + "dequal": "^2.0.2" + } + } + } + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -2331,6 +2435,11 @@ "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==" }, + "@types/invariant": { + "version": "2.2.35", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", + "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -2505,11 +2614,34 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz", "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==" }, + "@types/prop-types": { + "version": "15.7.4", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" }, + "@types/react": { + "version": "17.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.21.tgz", + "integrity": "sha512-GzzXCpOthOjXvrAUFQwU/svyxu658cwu00Q9ugujS4qc1zXgLFaO0kS2SLOaMWLt2Jik781yuHCWB7UcYdGAeQ==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-transition-group": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz", + "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -2518,6 +2650,11 @@ "@types/node": "*" } }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -2556,6 +2693,11 @@ } } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, "@types/webpack": { "version": "4.41.31", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.31.tgz", @@ -2873,6 +3015,11 @@ "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==" }, + "abortcontroller-polyfill": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", + "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==" + }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -3224,6 +3371,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz", "integrity": "sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==" }, + "axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "requires": { + "follow-redirects": "^1.14.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -3772,6 +3927,15 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "optional": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -3837,6 +4001,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.1.tgz", + "integrity": "sha512-/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3864,6 +4033,14 @@ "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==" }, + "browser-tabs-lock": { + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.2.15.tgz", + "integrity": "sha512-J8K9vdivK0Di+b8SBdE7EZxDr88TnATing7XoLw6+nFkXMQ6sVBh92K3NQvZlZU91AIkFRi0w3sztk5Z+vsswA==", + "requires": { + "lodash": ">=4.17.21" + } + }, "browserify-aes": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", @@ -4229,6 +4406,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -4919,6 +5101,11 @@ } } }, + "csstype": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz", + "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" + }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -5119,6 +5306,11 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" }, + "dequal": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz", + "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==" + }, "des.js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", @@ -5240,6 +5432,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -5502,6 +5703,11 @@ "unbox-primitive": "^1.0.1" } }, + "es-cookie": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz", + "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==" + }, "es-to-primitive": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", @@ -6570,6 +6776,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fast-text-encoding": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz", + "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig==" + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -6628,6 +6839,12 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -7194,6 +7411,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", @@ -7204,6 +7434,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -7679,6 +7917,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -10060,6 +10306,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -10251,6 +10506,12 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "nan": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", + "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", + "optional": true + }, "nanoid": { "version": "3.1.25", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz", @@ -12121,6 +12382,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "promise-polyfill": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.0.tgz", + "integrity": "sha512-k/TC0mIcPVF6yHhUvwAp7cvL6I2fFV7TzF1DuGPI8mBh4QQazf36xCKEHKTZKRysEoTQoQdKyP25J8MPJp7j5g==" + }, "prompts": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz", @@ -12140,6 +12406,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -12323,6 +12598,30 @@ "whatwg-fetch": "^3.4.1" } }, + "react-bootstrap": { + "version": "2.0.0-beta.6", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-beta.6.tgz", + "integrity": "sha512-eHEkmESWYYgNLjqbz31G696Eytu+6GeF8CPHQ8t9Se12dUEej8OjBakyQP0OGms9yy1ZZeLG/Fvuo7VxiwMcuQ==", + "requires": { + "@babel/runtime": "^7.14.0", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.26", + "@restart/ui": "^0.2.1", + "@types/invariant": "^2.2.33", + "@types/prop-types": "^15.7.3", + "@types/react": ">=16.14.8", + "@types/react-transition-group": "^4.4.1", + "@types/warning": "^3.0.0", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.1", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -12489,11 +12788,62 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "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-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", + "requires": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.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.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz", + "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==", + "requires": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -12560,6 +12910,17 @@ "workbox-webpack-plugin": "5.1.4" } }, + "react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12912,6 +13273,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, + "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", @@ -14471,6 +14837,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "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.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -14658,6 +15034,22 @@ "which-boxed-primitive": "^1.0.2" } }, + "uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, + "unfetch": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz", + "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==" + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -14931,6 +15323,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", @@ -14970,6 +15367,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.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", @@ -15093,7 +15498,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -15668,7 +16077,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", diff --git a/package.json b/package.json index ca184e8..2da9ac2 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,19 @@ "version": "0.1.0", "private": true, "dependencies": { + "@auth0/auth0-react": "^1.7.0", + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-solid-svg-icons": "^5.15.4", + "@fortawesome/react-fontawesome": "^0.1.15", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", + "axios": "^0.21.4", + "bootstrap": "^5.1.0", "react": "^17.0.2", + "react-bootstrap": "^2.0.0-beta.6", "react-dom": "^17.0.2", + "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" }, diff --git a/public/youtrition.png b/public/youtrition.png new file mode 100644 index 0000000..d07f5af Binary files /dev/null and b/public/youtrition.png differ diff --git "a/public/\342\200\224Pngtree\342\200\224nutrition diet sport icon_5413722.png" "b/public/\342\200\224Pngtree\342\200\224nutrition diet sport icon_5413722.png" new file mode 100644 index 0000000..bfdf027 Binary files /dev/null and "b/public/\342\200\224Pngtree\342\200\224nutrition diet sport icon_5413722.png" differ diff --git a/src/App.css b/src/App.css index 74b5e05..f77237c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,16 +1,13 @@ +body{ + font-family: 'Changa', sans-serif; +} + .App { text-align: center; } .App-logo { height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } } .App-header { @@ -25,14 +22,15 @@ } .App-link { - color: #61dafb; + color: #09d3ac; +} + + +.table { + width: 80%; + margin-left: 10%; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +body{ + background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); } diff --git a/src/App.js b/src/App.js index 9fd5a5a..c896685 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,47 @@ import React, { Component } from 'react' +import { Main } from './components/Main'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import Login from './Login'; +import Profile from './Profile'; +// import DietPlan from './components/dietPlan'; +import { withAuth0 } from "@auth0/auth0-react"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import Callback from './components/Callback'; +import Recipes from './components/Recipes'; +import './App.css'; export class App extends Component { render() { + const isAuth = this.props.auth0.isAuthenticated; + return ( -
- +
+ <> + + {/*
*/} + + + {isAuth ? < Main/> : } + + + {isAuth && } + + + + + + {isAuth && } + + + + {/*
*/} + + +
) } } -export default App; +export default withAuth0(App); diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..a754b20 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/FormTracker.css b/src/FormTracker.css new file mode 100644 index 0000000..99becf7 --- /dev/null +++ b/src/FormTracker.css @@ -0,0 +1,36 @@ +.tableform{ +font-size:20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color:transparent; +border-style: none; +/* border-bottom: rgb(29, 29, 28); */ +} + +.tableform td ,th{ + color:#52734D; + + +} + +.buttonforClear.btn-primary { + color: #fff; + background-color: #198754; + border-color: #198754; +} + .formTracker button { + background-color: #52734d; + color: #feffde; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", + Helvetica, Arial, "Lucida Grande", sans-serif; + text-transform: uppercase; + font-size: 14px; + text-decoration: none; + font-weight: bold; + text-transform: uppercase; + text-shadow: rgba(0, 0, 0, 0.3) 0 -1.25px 0; + margin-right: 80%; + width: 70%; + } + + h5{ + color: #062402; + } + \ No newline at end of file diff --git a/src/Login.css b/src/Login.css new file mode 100644 index 0000000..3e83806 --- /dev/null +++ b/src/Login.css @@ -0,0 +1,53 @@ +.parent{ + position: relative; +} + +.parent img { + position: absolute; + top: 73%; + right: 49%; +} + +/* .card{ + width: 20%; + background-color: blue; + position: absolute; + left: 50%; + top:30% + +} */ + +/* .card{ + margin: auto; + text-align: center; + /* position: absolute; + left: 50%; + top:30% */ + /* } */ */ + /* .card-img-top { + width: 205%; +} */ + + +body{ + background-color:#FEFFDE; + } + +#Login{ + position: absolute; + top: 1000%; + left: 70%; + width: 20%; + height: 50px;} +/* + h2{ + position: absolute; + top: 400%; + left: 73%; + + } */ + /* p{ + position: absolute; + top: 200%; + left: 73%; + } */ \ No newline at end of file diff --git a/src/Login.js b/src/Login.js index e69de29..277ea83 100644 --- a/src/Login.js +++ b/src/Login.js @@ -0,0 +1,16 @@ +import React from "react"; +// import Card from 'react-bootstrap/Card'; +import "./Login.css"; +import LoginForm from "./LoginForm"; + +class Login extends React.Component { + render() { + return ( +
+ +
+ ); + } +} + +export default Login; diff --git a/src/LoginButton.js b/src/LoginButton.js index e69de29..a2e8988 100644 --- a/src/LoginButton.js +++ b/src/LoginButton.js @@ -0,0 +1,10 @@ +import React from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +const LoginButton = () => { + const { loginWithRedirect } = useAuth0(); + + return ; +}; + +export default LoginButton; \ No newline at end of file diff --git a/src/LoginForm.js b/src/LoginForm.js index e69de29..fcf50f4 100644 --- a/src/LoginForm.js +++ b/src/LoginForm.js @@ -0,0 +1,39 @@ +import React from "react"; +import LoginButton from "./LoginButton"; +// import Card from "react-bootstrap/Card"; +class LoginForm extends React.Component { + render() { + return ( +
+
+ {" "} + hi +

Youtrition App

+

Track your diet

+
+ + + {/* + + + Card Title + + Some quick example text to build on the card title and make up the + bulk of the card's content. + + + + */} +
+ ); + } +} +export default LoginForm; diff --git a/src/LogoutButton.js b/src/LogoutButton.js index e69de29..92c843e 100644 --- a/src/LogoutButton.js +++ b/src/LogoutButton.js @@ -0,0 +1,14 @@ +import React from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +const LogoutButton = () => { + const { logout } = useAuth0(); + + return ( + + ); +}; + +export default LogoutButton \ No newline at end of file diff --git a/src/News.js b/src/News.js new file mode 100644 index 0000000..0af95a0 --- /dev/null +++ b/src/News.js @@ -0,0 +1,75 @@ +import React from "react"; +import axios from "axios"; +import { Card, Form, Row, Col, Button } from "react-bootstrap"; + +class News extends React.Component { + constructor(props) { + super(props); + this.state = { + newsData: {}, + searchData: "", + info:false + }; + } + + handleSearch = async (e) => { + e.preventDefault(); + console.log("hi"); + await this.setState({ searchData: e.target.value }); + console.log(this.state.searchData); + const serverUrl = `${process.env.REACT_APP_SERVER_URL}/news?q=${this.state.searchData}`; + const getNews = await axios.get(serverUrl); + // this.state.newsData.push(getNews.data); + + await this.setState({ newsData: getNews.data , + info:true}); + console.log(this.state.newsData.results); + }; + render() { + return ( +
+
+ + + + + +
+ {this.state.info && + this.state.newsData.results.map((el) => { + return ( +
+ + + + {el.title} + + Some quick example text to build on the card title and + make up the bulk of the card's content. + + + + +
+ ); + }) + } +
+ ); + } +} + +export default News; diff --git a/src/Profile.js b/src/Profile.js index e69de29..ae5ebb5 100644 --- a/src/Profile.js +++ b/src/Profile.js @@ -0,0 +1,17 @@ +import { Component } from "react"; +import { withAuth0 } from '@auth0/auth0-react'; +class Profile extends Component { + + render() { + const user = this.props.auth0.user; + return ( +
+ Hanin +

{user.email}

+

{user.name}

+
+ ) + } +}; + +export default withAuth0(Profile); \ No newline at end of file diff --git a/src/components/Callback.js b/src/components/Callback.js new file mode 100644 index 0000000..d896648 --- /dev/null +++ b/src/components/Callback.js @@ -0,0 +1,11 @@ +import React from 'react'; +import image from '../images/generating.gif'; + +export default function Callback() { + + return( +
+ Loading.. +
+ ) +} diff --git a/src/components/Card.css b/src/components/Card.css new file mode 100644 index 0000000..460752d --- /dev/null +++ b/src/components/Card.css @@ -0,0 +1,13 @@ + + +.card:hover img{ + transition: .1s ease; + opacity: 0.5; +} + + +.card:hover h2{ + transition: .3s ease; + opacity: .7; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/Card.js b/src/components/Card.js new file mode 100644 index 0000000..df76b31 --- /dev/null +++ b/src/components/Card.js @@ -0,0 +1,16 @@ +import React from 'react'; +import './Card.css'; + +const Card = props => { + return( + +
+
+ Card props.onImageClick(props.searchItem)}/> + {

props.onImageClick(props.searchItem)}>{props.searchItem.toUpperCase()}

} +
+
+ ) +} + +export default Card; \ No newline at end of file diff --git a/src/components/EditDataModel.js b/src/components/EditDataModel.js new file mode 100644 index 0000000..6b9cc21 --- /dev/null +++ b/src/components/EditDataModel.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; + + +export class EditDataModel extends Component { + render() { + return ( +
+ + + Your Information + + +
+ + your Gender + + + + + + + Height + + + + weight + + + + Age + + + + your Pishical Activety + + + + + + + + +
+ + + +
+ ) + } +} + +export default EditDataModel \ No newline at end of file diff --git a/src/components/FormTracker.js b/src/components/FormTracker.js new file mode 100644 index 0000000..d35a103 --- /dev/null +++ b/src/components/FormTracker.js @@ -0,0 +1,155 @@ +import React, { Component } from "react"; +import Form from "react-bootstrap/Form"; +import { Row } from "react-bootstrap"; +import { Col } from "react-bootstrap"; +import Button from "react-bootstrap/Button"; +import axios from "axios"; +import Table from "react-bootstrap/Table"; +import "../FormTracker.css" +export class FormTracker extends Component { + constructor(props) { + super(props); + this.state = { + trackerData: [], + ingredent: [], + serving: [], + totalCalories: 0, + }; + } + handleClickAddItem = async (e) => { + e.preventDefault(); + this.state.ingredent.push(e.target.item.value); + await this.setState({ ingredent: this.state.ingredent }); + this.state.serving.push(e.target.serve.value); + await this.setState({ serving: this.state.serving }); + const serverUrl = `${process.env.REACT_APP_SERVER_URL}/tracker?ingr=${e.target.item.value}`; + const getDataNutrition = await axios.get(serverUrl); + console.log(getDataNutrition); + this.state.trackerData.push(getDataNutrition.data); + + await this.setState({ trackerData: this.state.trackerData }); + console.log(this.state.trackerData); + + let sum = + this.state.trackerData[this.state.trackerData.length - 1].calories * + this.state.serving[this.state.serving.length - 1]; + this.state.totalCalories += sum; + + await this.setState({ totalCalories: this.state.totalCalories }); + }; + handleCompletetracker = async () => { + await this.setState({ trackerData: [], totalCalories: 0 }); + }; + + render() { + return ( +
+
+ + + + + + + + + + + +
+
+
+ Calories Remaining +
+ + + + + + + + + + + + + + + + + + + + + + +
Goal-daily Calories=Remaining
{this.props.limitCals}{this.state.totalCalories}{this.props.limitCals-this.state.totalCalories}
+
+ + + + + + + + + + + {this.state.trackerData.map((el) => { + return ( + + + + + + ); + })} + + + + + + +
#ItemCalories
{this.state.trackerData.indexOf(el) + 1} + {this.state.ingredent[this.state.trackerData.indexOf(el)]} + + {el.calories * + this.state.serving[this.state.trackerData.indexOf(el)]} +
#Total{this.state.totalCalories}
+ +
+ ); + } +} + +export default FormTracker; diff --git a/src/components/Header.css b/src/components/Header.css new file mode 100644 index 0000000..e230ff7 --- /dev/null +++ b/src/components/Header.css @@ -0,0 +1,13 @@ +button { + background-color: #52734d; + color: #feffde; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", + Helvetica, Arial, "Lucida Grande", sans-serif; + text-transform: uppercase; + font-size: 14px; + text-decoration: none; + font-weight: bold; + text-transform: uppercase; + text-shadow: rgba(0, 0, 0, 0.3) 0 -1.25px 0; + margin-right: 80%; +} diff --git a/src/components/Header.js b/src/components/Header.js index e69de29..f2a003e 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Navbar, NavItem } from 'react-bootstrap'; +import { Link } from "react-router-dom"; +import './Header.css'; +import LoginButton from '../LoginButton'; +import LogoutButton from '../LogoutButton'; +import { withAuth0 } from '@auth0/auth0-react'; + +class Header extends React.Component { + render() { + const isAuth = this.props.auth0.isAuthenticated; + return ( + + + logo + + Youtrition + Home + { + isAuth && + Profile + } + { + isAuth ? : + } + + ) + } +} + +export default withAuth0(Header); \ No newline at end of file diff --git a/src/components/Main.js b/src/components/Main.js index 91ccd7f..465aabc 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1 +1,56 @@ -// test haneen +import React, { Component } from 'react'; +import FormTracker from './FormTracker'; +import DietPlan from './dietPlan'; +// import News from '../News' +import { withAuth0 } from "@auth0/auth0-react"; +import Header from './Header'; + +export class Main extends Component { + constructor(props) { + super(props); + this.state = ({ + limitCals: '', + user: null, + }) + } + getTheCalsLimit = async (limitOfCals) => { + await this.setState({ limitCals: limitOfCals }) + + } + + loginHandler = (user) => { + this.setState({ + user, + }); + }; + + logoutHandler = () => { + this.setState({ + user: null, + }); + }; + render() { + + return ( +
+
+ + + + + + {/* */} + +
+ ) + } +} + +export default withAuth0(Main);; + + + + + + + diff --git a/src/components/Recipe.js b/src/components/Recipe.js new file mode 100644 index 0000000..5717f35 --- /dev/null +++ b/src/components/Recipe.js @@ -0,0 +1,20 @@ +import React from 'react' + +export default function Recipe(props) { + return ( +
+
+ {props.recipe.name}/ +
+
+

Recipe Name: {props.recipe.name}

+

Calories: {props.recipe.calories}

+

DietLabels {props.recipe.dietLabels}

+

Ingredients: {props.recipe.ingredients}

+ +
+
+ + ) +} + diff --git a/src/components/Recipes.css b/src/components/Recipes.css new file mode 100644 index 0000000..b8a6811 --- /dev/null +++ b/src/components/Recipes.css @@ -0,0 +1,47 @@ +.row{ + margin-top: 40px !important; + +} + +img{ + height: 200px !important; + +} + +img:hover{ + cursor: pointer; +} + +button{ + color: aqua !important; +} + +.loading{ + padding-top: 100px; +} + +.recipe-login{ + padding-top: 100px; +} + +.backbutton{ + padding-top: 30px; + padding-bottom: 50px;; +} + +.formsearch{ +margin-left: 16%; +width: 120%; + +} + +.form-text{ + + height: 120%; +} +.buttonform +{ + height: 120%; + margin-top: .5%; + margin-left:-3%; +} diff --git a/src/components/Recipes.js b/src/components/Recipes.js new file mode 100644 index 0000000..675c8d5 --- /dev/null +++ b/src/components/Recipes.js @@ -0,0 +1,184 @@ +import React, { Component } from 'react' +import Card from './Card'; +import './Recipes.css'; +import Balanced from '../images/balanced.jpg'; +import High_Fiber from '../images/High fiber.jpg'; +import High_Protein from '../images/high proten.jpg'; +import Low_Carb from '../images/low carb.jpg'; +import Low_Fat from '../images/low fat.jpeg'; +import Low_Sodium from '../images/low sodium.jpg'; +import Recipe from './Recipe'; +import loading from '../images/generating.gif'; +import "bootstrap/dist/css/bootstrap.min.css"; + + +import {Form, Button,Row,Col} from "react-bootstrap"; + +import axios from 'axios'; + + + +export default class Recipes extends Component { + + constructor(props){ + super(props); + this.state = { + displayCategories : true, + displayRecipes: false, + displaysearch:false, + recipes: [], + recipesData: "", + } + } + + onImageClick = (searchKey) => { + this.loadData(searchKey); + this.setState({ + displayCategories : false, + displayRecipes : true, + displaysearch:false + }) + } + + formatRecipe = (recipes) => { + + let tempRecipes = recipes[0].hits.map(recipe => { + let image = recipe.recipe.image; + let name = recipe.recipe.source; + let dietLabels =recipe.recipe.dietLabels; + let ingredients = recipe.recipe.ingredients.map(ingredient => ingredient.text).join(', '); + let calories = recipe.recipe.calories.toFixed(2); + + let tempRecipe = {image, name, ingredients,calories,dietLabels} + return tempRecipe; + }); + + return tempRecipes; + } + + goBack(){ + window.history.go(-1); + } + + loadData = async (searchKey) => { + + + let url =`https://api.edamam.com/search?q=${searchKey}&app_id=${process.env.REACT_APP_ID}&app_key=${process.env.REACT_APP_KEY}`; + console.log(url); + let dietRecipe= await axios.get(url); + + this.setState({ + + recipes:this.formatRecipe([dietRecipe.data]), + displayCategories : false, + displayRecipes : true, + displaysearch:false + }); + + + } + + searchfromApi = async (event) => { + event.preventDefault(); + + try { + let targetrecipe = event.target.targetrecipe.value; + let edamamURL =`https://api.edamam.com/search?q=${targetrecipe}&app_id=${process.env.REACT_APP_ID}&app_key=${process.env.REACT_APP_KEY}`; + let EdamamResult = await axios.get(edamamURL); + + + + this.setState({ + recipesData:this.formatRecipe([EdamamResult.data]), + displayCategories : false, + displayRecipes :false, + displaysearch:true + }); + + + } + catch { + this.setState({ + errorrMsg: "Error Unable to geocode", + displayErrorr: true, + + }); + console.log("invalied"); + } + + }; + + render() { + return ( + <> +
+ + + + + + + + + + +
+ + {this.state.displayCategories ? +
+
+ +
+ + + + +
+
+ + + + + + +
+
+
+ : null + } + + { + this.state.displayRecipes && this.state.recipes ? +
+ {this.state.recipes.map((recipe, id) => { + return + })} + +
+ : (this.state.displayRecipes ? loading.. : null) + } + +{ + this.state.displaysearch && this.state.recipesData ? +
+ {this.state.recipesData.map((recipe) => { + return + })} + + + +
+ : (this.state.displaysearch ? loading.. : null) + } + + + + + ) + } +} diff --git a/src/components/dataModal.js b/src/components/dataModal.js new file mode 100644 index 0000000..7e25105 --- /dev/null +++ b/src/components/dataModal.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react' +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; + +// import Modal from 'react-bootstrap/Modal'; + + +export class DataModal extends Component { + render() { + return ( +
+ + + Your Information + + +
+ + your Gender + + + + + + + Height + + + + weight + + + + Age + + + + your Pishical Activety + + + + + + + + +
+ + + +
+ ) + } +} + +export default DataModal diff --git a/src/components/dietPlan.js b/src/components/dietPlan.js new file mode 100644 index 0000000..7984d51 --- /dev/null +++ b/src/components/dietPlan.js @@ -0,0 +1,188 @@ +import React, { Component } from 'react'; +import DataModal from './dataModal'; +import Button from 'react-bootstrap/Button'; +import Table from 'react-bootstrap/Table'; +import axios from "axios"; +import EditDataModel from './EditDataModel'; + +export class DietPlan extends Component { + + constructor(props) { + super(props); + this.state = ({ + showDataModal: false, + showUpdateModel: false, + dailyCalories: '', + healthStatus: '', + bmi: '', + limitOfCalories: '', + recipeType: '', + userId: '' + }) + } + + handelDisplayDataModal = () => { + this.setState({ + showDataModal: !this.state.showDataModal + + }) + + } + handelDisplayUpdateModel = () => { + this.setState({ + showUpdateModel: !this.state.showUpdateModel + }) + } + + handelBmi = async (email) => { + // e.preventDefault(); + // let email = 'ahmadhamzh@ymail.com'; + let serverUrl = `${process.env.REACT_APP_SERVER_URL}/diet?email=${email}`; + const BmiDataResponce = await axios.get(serverUrl); + + let gender = BmiDataResponce.data[0].gender; + let height = BmiDataResponce.data[0].height; + let weight = BmiDataResponce.data[0].weight; + let age = BmiDataResponce.data[0].age; + let activety = BmiDataResponce.data[0].activety; + + let dailyCal; + let caloreisLimit; + let typeOfRecipe; + let bmi = Math.floor((weight / ((height / 100) * (height / 100)))); + // console.log(weight); + let weightStatus; + if (gender === 'male') { + dailyCal = Math.floor(((10 * weight) + (6.25 * height) - (5 * age) + 5) * activety) + } else { + dailyCal = Math.floor(((10 * weight) + (6.25 * height) - (5 * age) - 161) * activety) + }; + if (bmi < '18.5') { + weightStatus = 'UnderWeight'; + caloreisLimit = dailyCal + 500; + typeOfRecipe = 'high carbs, high fat, high Protein'; + } + else if (bmi >= '18.5' && bmi < '24.9') { + weightStatus = 'Healthy Weight'; + caloreisLimit = dailyCal + typeOfRecipe = 'balanced' + + } else { + weightStatus = `OverWeight ` + caloreisLimit = dailyCal - 500 + typeOfRecipe = 'high fiber, low carbs, low Fat' + } + await this.setState({ + dailyCalories: dailyCal, + // showDataModal:!this.state.showDataModal, + healthStatus: weightStatus, + bmi: bmi, + limitOfCalories: caloreisLimit, + recipeType: typeOfRecipe, + // showUpdateModel: !this.state.showUpdateModel, + userId: BmiDataResponce.data[0]._id + }); + // console.log(this.state); + // console.log(BmiDataResponce.data); + this.props.getTheCalsLimit(this.state.limitOfCalories); + } + handelAdd = (e) => { + console.log('hi'); + e.preventDefault(); + const responseBody = { + gender: e.target.gender.value, + height: e.target.height.value, + weight: e.target.weight.value, + age: e.target.age.value, + activety: e.target.activety.value, + email: 'salsabil@gmail.com', + } + const responsePost = axios.post(`${process.env.REACT_APP_SERVER_URL}/diet`, responseBody); + console.log(responsePost); + this.handelBmi(responseBody.email); + this.handelDisplayDataModal(); + + } + + handelUpdate = (e) => { + e.preventDefault(); + const responseBody = { + gender: e.target.gender.value, + height: e.target.height.value, + weight: e.target.weight.value, + age: e.target.age.value, + activety: e.target.activety.value, + email: 'salsabil@gmail.com', + + } + this.handelBmi(responseBody.email); + const updateResponse = axios.put(`${process.env.REACT_APP_SERVER_URL}/diet/${this.state.userId}`, responseBody); + this.handelBmi(responseBody.email); + this.handelDisplayUpdateModel(); + console.log(updateResponse); + } + + render() { + return ( +
+ + + + <> + {/*

your daily current calories consumption is {this.state.dailyCalories}

+

{this.state.healthStatus}

+

{this.state.bmi}

*/} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + this.state.userId ? + : + } + +
BMI{this.state.bmi}
Health State{this.state.healthStatus}
Body Consumption Calories{this.state.dailyCalories}
Limit Consumption Calories{this.state.limitOfCalories}
your Type of Recipe{this.state.recipeType}
+ + +
+ ) + } +} + +export default DietPlan diff --git a/src/images/High fiber.jpg b/src/images/High fiber.jpg new file mode 100644 index 0000000..2acca0c Binary files /dev/null and b/src/images/High fiber.jpg differ diff --git a/src/images/balanced.jpg b/src/images/balanced.jpg new file mode 100644 index 0000000..7d6e417 Binary files /dev/null and b/src/images/balanced.jpg differ diff --git a/src/images/generating.gif b/src/images/generating.gif new file mode 100644 index 0000000..e172b81 Binary files /dev/null and b/src/images/generating.gif differ diff --git a/src/images/high proten.jpg b/src/images/high proten.jpg new file mode 100644 index 0000000..34f447c Binary files /dev/null and b/src/images/high proten.jpg differ diff --git a/src/images/low carb.jpg b/src/images/low carb.jpg new file mode 100644 index 0000000..258db56 Binary files /dev/null and b/src/images/low carb.jpg differ diff --git a/src/images/low fat.jpeg b/src/images/low fat.jpeg new file mode 100644 index 0000000..87355ed Binary files /dev/null and b/src/images/low fat.jpeg differ diff --git a/src/images/low sodium.jpg b/src/images/low sodium.jpg new file mode 100644 index 0000000..fc52b99 Binary files /dev/null and b/src/images/low sodium.jpg differ diff --git a/src/index.css b/src/index.css index ec2585e..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index ef2edf8..75d03ea 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,21 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +import { Auth0Provider } from "@auth0/auth0-react"; ReactDOM.render( - + - , - document.getElementById('root') + , + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +// reportWebVitals(); + diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..2e5df0d --- /dev/null +++ b/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file