From c27d53cbdd5360d966547fbc3a334998b0bdcbef Mon Sep 17 00:00:00 2001 From: Robin Singh Date: Fri, 12 Mar 2021 20:58:55 +0530 Subject: [PATCH 1/6] added google auth and chatroom functionality --- package-lock.json | 490 +++++++++++++++++++++++++++++++----- package.json | 5 +- src/App.css | 91 +------ src/App.js | 123 +++------ src/Messages.css | 48 ---- src/Messages.js | 68 ----- src/StateProvider.js | 12 + src/components/Chatroom.css | 115 +++++++++ src/components/Chatroom.js | 104 ++++++++ src/components/Chats.css | 25 ++ src/components/Chats.js | 57 +++++ src/components/Login.css | 25 ++ src/components/Login.js | 41 +++ src/components/Sideroom.css | 60 +++++ src/components/Sideroom.js | 58 +++++ src/firebase.js | 10 +- src/index.js | 4 + src/reducer.js | 24 ++ 18 files changed, 1002 insertions(+), 358 deletions(-) delete mode 100644 src/Messages.css delete mode 100644 src/Messages.js create mode 100644 src/StateProvider.js create mode 100644 src/components/Chatroom.css create mode 100644 src/components/Chatroom.js create mode 100644 src/components/Chats.css create mode 100644 src/components/Chats.js create mode 100644 src/components/Login.css create mode 100644 src/components/Login.js create mode 100644 src/components/Sideroom.css create mode 100644 src/components/Sideroom.js create mode 100644 src/reducer.js diff --git a/package-lock.json b/package-lock.json index 119493f..cd65aaa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2037,14 +2037,73 @@ } } }, + "@mapbox/node-pre-gyp": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.1.tgz", + "integrity": "sha512-CUBdThIZMoLEQQxACwhLsPg/puxBca0abTH3ixuvBQkhjJ80Hdp99jmVjxFCOa52/tZqN9d70IbGUf+OuKDHGA==", + "requires": { + "detect-libc": "^1.0.3", + "http-proxy-agent": "^4.0.1", + "make-dir": "^3.1.0", + "node-fetch": "^2.6.1", + "nopt": "^5.0.0", + "npmlog": "^4.1.2", + "rimraf": "^3.0.2", + "semver": "^7.3.4", + "tar": "^6.1.0" + }, + "dependencies": { + "make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "requires": { + "semver": "^6.0.0" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + } + } + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==" + }, + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "requires": { + "lru-cache": "^6.0.0" + } + }, + "tar": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz", + "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==", + "requires": { + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "minipass": "^3.0.0", + "minizlib": "^2.1.1", + "mkdirp": "^1.0.3", + "yallist": "^4.0.0" + } + } + } + }, "@material-ui/core": { - "version": "4.11.2", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz", - "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==", + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz", + "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==", "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.11.2", - "@material-ui/system": "^4.11.2", + "@material-ui/styles": "^4.11.3", + "@material-ui/system": "^4.11.3", "@material-ui/types": "^5.1.0", "@material-ui/utils": "^4.11.2", "@types/react-transition-group": "^4.2.0", @@ -2065,9 +2124,9 @@ } }, "@material-ui/styles": { - "version": "4.11.2", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz", - "integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==", + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", + "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==", "requires": { "@babel/runtime": "^7.4.4", "@emotion/hash": "^0.8.0", @@ -2076,21 +2135,21 @@ "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", + "jss": "^10.5.1", + "jss-plugin-camel-case": "^10.5.1", + "jss-plugin-default-unit": "^10.5.1", + "jss-plugin-global": "^10.5.1", + "jss-plugin-nested": "^10.5.1", + "jss-plugin-props-sort": "^10.5.1", + "jss-plugin-rule-value-function": "^10.5.1", + "jss-plugin-vendor-prefixer": "^10.5.1", "prop-types": "^15.7.2" } }, "@material-ui/system": { - "version": "4.11.2", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz", - "integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==", + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz", + "integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==", "requires": { "@babel/runtime": "^7.4.4", "@material-ui/utils": "^4.11.2", @@ -2558,6 +2617,11 @@ "@babel/runtime": "^7.12.5" } }, + "@tootallnate/once": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", + "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==" + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", @@ -2722,25 +2786,26 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==" }, "@types/react": { - "version": "17.0.0", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz", - "integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz", + "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==", "requires": { "@types/prop-types": "*", + "@types/scheduler": "*", "csstype": "^3.0.2" }, "dependencies": { "csstype": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", - "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==" + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" } } }, "@types/react-transition-group": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", - "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==", "requires": { "@types/react": "*" } @@ -2753,6 +2818,11 @@ "@types/node": "*" } }, + "@types/scheduler": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", + "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -3089,6 +3159,11 @@ "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==" }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" + }, "abort-controller": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", @@ -3239,6 +3314,39 @@ "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" }, + "are-we-there-yet": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", + "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", + "requires": { + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" + }, + "dependencies": { + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + } + } + } + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -3937,6 +4045,15 @@ "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=" }, + "bcrypt": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.0.1.tgz", + "integrity": "sha512-9BTgmrhZM2t1bNuDtrtIMVSmmxZBrJ71n8Wg+YgdjHuIWYF7SjjmCPZFB+/5i/o/PIeRpwVJR3P+NrpIItUjqw==", + "requires": { + "@mapbox/node-pre-gyp": "^1.0.0", + "node-addon-api": "^3.1.0" + } + }, "bcrypt-pbkdf": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", @@ -4042,6 +4159,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4504,6 +4626,11 @@ "q": "^1.1.2" } }, + "code-point-at": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -4682,6 +4809,11 @@ "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz", "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==" }, + "console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -5188,9 +5320,9 @@ } }, "csstype": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", - "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + "version": "2.6.16", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz", + "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==" }, "cyclist": { "version": "1.0.1", @@ -5395,6 +5527,11 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, + "delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=" + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -5414,6 +5551,11 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=" + }, "detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -5531,9 +5673,9 @@ }, "dependencies": { "csstype": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", - "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==" + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" } } }, @@ -7301,6 +7443,54 @@ "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, + "gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "requires": { + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + }, + "is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "requires": { + "number-is-nan": "^1.0.0" + } + }, + "string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "requires": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + } + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "requires": { + "ansi-regex": "^2.0.0" + } + } + } + }, "gaxios": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.1.0.tgz", @@ -7541,6 +7731,11 @@ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==" }, + "has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=" + }, "has-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", @@ -7624,6 +7819,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", @@ -7833,6 +8041,16 @@ "requires-port": "^1.0.0" } }, + "http-proxy-agent": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", + "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==", + "requires": { + "@tootallnate/once": "1", + "agent-base": "6", + "debug": "4" + } + }, "http-proxy-middleware": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", @@ -10166,9 +10384,9 @@ } }, "jss": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", - "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz", + "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==", "requires": { "@babel/runtime": "^7.3.1", "csstype": "^3.0.2", @@ -10178,77 +10396,77 @@ }, "dependencies": { "csstype": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", - "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==" + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" } } }, "jss-plugin-camel-case": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz", - "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz", + "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==", "requires": { "@babel/runtime": "^7.3.1", "hyphenate-style-name": "^1.0.3", - "jss": "10.5.0" + "jss": "10.5.1" } }, "jss-plugin-default-unit": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz", - "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz", + "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0" + "jss": "10.5.1" } }, "jss-plugin-global": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz", - "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz", + "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0" + "jss": "10.5.1" } }, "jss-plugin-nested": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz", - "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz", + "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0", + "jss": "10.5.1", "tiny-warning": "^1.0.2" } }, "jss-plugin-props-sort": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz", - "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz", + "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0" + "jss": "10.5.1" } }, "jss-plugin-rule-value-function": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz", - "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz", + "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0", + "jss": "10.5.1", "tiny-warning": "^1.0.2" } }, "jss-plugin-vendor-prefixer": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz", - "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==", + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz", + "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==", "requires": { "@babel/runtime": "^7.3.1", "css-vendor": "^2.0.8", - "jss": "10.5.0" + "jss": "10.5.1" } }, "jsx-ast-utils": { @@ -10653,6 +10871,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", @@ -10916,6 +11143,11 @@ } } }, + "node-addon-api": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.1.0.tgz", + "integrity": "sha512-flmrDNB06LIl5lywUz7YlNGZH/5p0M7W28k8hzd9Lshtdh1wshD2Y+U4h9LD6KObOy1f+fEVdgprPrEymjM5uw==" + }, "node-fetch": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", @@ -11027,6 +11259,14 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz", "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==" }, + "nopt": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", + "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", + "requires": { + "abbrev": "1" + } + }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -11074,6 +11314,17 @@ "path-key": "^2.0.0" } }, + "npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "requires": { + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" + } + }, "nth-check": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz", @@ -11087,6 +11338,11 @@ "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=" }, + "number-is-nan": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + }, "nwsapi": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", @@ -13122,6 +13378,52 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "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.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.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz", @@ -13609,6 +13911,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", @@ -15269,6 +15576,11 @@ "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", @@ -15744,6 +16056,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", @@ -16921,6 +17238,43 @@ "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" }, + "wide-align": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", + "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", + "requires": { + "string-width": "^1.0.2 || 2" + }, + "dependencies": { + "ansi-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" + }, + "string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "requires": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + } + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "requires": { + "ansi-regex": "^3.0.0" + } + } + } + }, "word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", diff --git a/package.json b/package.json index 7da34b3..6ebc58a 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { - "@material-ui/core": "^4.11.2", + "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.6.0", + "bcrypt": "^5.0.1", + "bootstrap": "^4.6.0", "firebase": "^8.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "web-vitals": "^0.2.4" }, diff --git a/src/App.css b/src/App.css index 88405cf..c40d4e4 100644 --- a/src/App.css +++ b/src/App.css @@ -1,83 +1,18 @@ -.App { - text-align: center; +* { + margin: 0; } -.Logo{ - width:50px; - position:fixed; - right:70px; - top:25px; +.app { + /* background-color: #e9e9e3; */ + height: 100vh; + display: grid; + place-items: center; } -::placeholder{ - font-weight: bold; - color:white; - opacity:1; -} - -.NavBar{ - background-color:#014293; - width:100%; - border-bottom:2px solid black; - height:100px; - position:fixed; - top:0px; -} - -input{ - background-color: black; - line-height: 30px; - width:250px; -} - -.messenger{ - display:inline-block; - position:fixed; - top:0px; - left:30px; - font-weight: bold; - font-size: 40px; -} - -.dark{ -position:fixed; -top:0px; -right:-150px; -outline: none; -} - -footer{ - position: fixed; - bottom:0; - height:10%; - width:100%; - background-color: #014293; - border-top:2px solid black; -} - -.input{ -margin-top:10px; -flex:1; -} - -.blackName{ - color:white !important; -} - -.BlackNavBar{ - background-color:black!important; -} - -.dark_input{ - color:white; -} - -.footer_dark{ - background-color: black; -} - - -.iconButton{ - top:10px; - left:10px; +.app__container { + box-shadow: -1px 4px 20px -6px rgba(0, 0, 0, 0.3); + display: flex; + width: 85vw; + height: 90vh; + background-color: rgb(250, 250, 250); } diff --git a/src/App.js b/src/App.js index 56beff0..519893d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,102 +1,41 @@ -import './App.css'; -import {useState,useEffect,useRef} from 'react'; -import {Button, Input,FormControl} from "@material-ui/core"; -import Brightness4Icon from "@material-ui/icons/Brightness4" -import SendIcon from '@material-ui/icons/Send' -import logo from './logo.png'; -import Messages from './Messages.js' -import db from "./firebase.js" -import firebase from "firebase"; +import React, { useState } from "react"; +import "./App.css"; +import Sideroom from "./components/Sideroom"; +import Chatroom from "./components/Chatroom"; +import { Switch, BrowserRouter as Router, Route } from "react-router-dom"; +import Login from "./components/Login"; +import { useStateValue } from "./StateProvider"; function App() { - - const [input,setInput]=useState(""); - const [messages,setMessages]=useState([]); - const [username,setUsername]=useState(""); - const [dark,setDark]=useState(false); - const messagesEndRef=useRef(null); - - useEffect(()=>{ - setUsername(prompt("Kindly Enter Your Name")); - },[]) - - useEffect(()=>{db.collection('messages').orderBy("timestamp","asc").onSnapshot(snapshot=>setMessages(snapshot.docs.map(doc=>doc.data())))},[]) - - useEffect(() => { scrollToBottom() }, [messages]); - - const scrollToBottom = () => { - messagesEndRef.current?.scrollIntoView({ behavior: "auto" }) - } - - const newMessage= (event)=>{ - event.preventDefault(); - //setMessages([...messages,{message:input,username:username}]); - if(input!=="") - { - db.collection('messages').add({username:username,message:input,timestamp:firebase.firestore.FieldValue.serverTimestamp()}) - } - setInput(""); - } - - - const theme=(event)=>{ - if(dark===false) - { - document.body.classList.add('dark-bg'); - setDark(true); - } - else - { - document.body.classList.remove('dark-bg'); - setDark(false); - } - } - - let but; - if(dark) - { - but=setInput(event.target.value)} /> - } - else - { - but=setInput(event.target.value)} /> - } + const [{ user }, dispatch] = useStateValue(); return ( -
- -
-




- { - messages.map(message=>) - } -
-




-
-
-
-
- - {but} - - -
-
+
+ {!user ? ( + + ) : ( +
+ {/*
*/} + + {/* sidebar */} + + + + {/* chat */} + + + + + {/*

Home Screen

*/} + + + + {/*
*/} +
+ )}
); } -// keys generator:- every new call to this function will give numbs like 0,1,2,3.... -const genKey = (function (){ - var keyCode = 0 - return function incKey(){ - return keyCode++; - } -})(); - export default App; diff --git a/src/Messages.css b/src/Messages.css deleted file mode 100644 index 2a12705..0000000 --- a/src/Messages.css +++ /dev/null @@ -1,48 +0,0 @@ -.msgs{ - background-color:lightblue; - border-radius:10px; - max-width:60%; - width: fit-content; - height:fit-content; - min-width: 200px; - margin-top:10px; - text-align: left; - padding: 15px; - font-family: 'Hind Madurai', sans-serif; - font-weight:bold; - font-size: 1.1rem; -} - -.sender{ - font-family: 'Fjord One', serif; - font-size: 1.2rem; - text-align: left; - margin-bottom:0; - margin-top:25px; - margin-left: 10px; - text-transform: capitalize; -} - -.senderDark{ - color:white !important; -} - -.message_div{ - margin-top:25px; -} - -.user{ - background-color: lightpink; - margin-left:auto; - margin-right: 10px; -} - -.guest{ - margin-left: 10px; -} - -.time-stamp{ - text-align: right; - margin: 0; - color: rgb(126, 126, 126) -} diff --git a/src/Messages.js b/src/Messages.js deleted file mode 100644 index 5f0eea7..0000000 --- a/src/Messages.js +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import './Messages.css'; - -function Messages(props){ - const isUser=props.messages.username===props.username; - return ( -
-
{`${isUser?"":props.messages.username===null?"Unknown user":props.messages.username}`}
-
- {props.messages.message} -

{giveTimePassed(props.messages.timestamp)}

-
-
- ) -} - -function giveTimePassed(timestamp){ - if(!timestamp){ - return "just now"; - } - // time difference in millisec - var timeDiff = new Date() - timestamp.toDate(); - - // seconds - timeDiff /= 1000; - timeDiff = Math.floor(timeDiff) - if(timeDiff < 5){ - return "just now" - } - if(timeDiff < 60){ - return `${timeDiff} second${timeDiff===1?"":"s"} ago`; - } - - // minutes - timeDiff /= 60; - timeDiff = Math.floor(timeDiff) - if(timeDiff < 60){ - return `${timeDiff} minute${timeDiff===1?"":"s"} ago`; - } - - // hours - timeDiff /= 60; - timeDiff = Math.floor(timeDiff) - if(timeDiff < 60){ - return `${timeDiff} hour${timeDiff===1?"":"s"} ago`; - } - - // days - timeDiff /= 24; - timeDiff = Math.floor(timeDiff) - if(timeDiff < 30){ - return `${timeDiff} day${timeDiff===1?"":"s"} ago`; - } - - // months - timeDiff /= 30; - timeDiff = Math.floor(timeDiff) - if(timeDiff < 12){ - return `${timeDiff} month${timeDiff===1?"":"s"} ago`; - } - - // years - timeDiff /= 12; - timeDiff = Math.floor(timeDiff) - return `${timeDiff} year${timeDiff===1?"":"s"} ago`; -} - -export default Messages; diff --git a/src/StateProvider.js b/src/StateProvider.js new file mode 100644 index 0000000..0fccc6e --- /dev/null +++ b/src/StateProvider.js @@ -0,0 +1,12 @@ +import React, { createContext, useReducer, useContext } from "react"; + +export const StateContext = createContext(); + + + export const StateProvider = ({ reducer, initialState, children }) => ( + + {children} + +); + +export const useStateValue = () => useContext(StateContext); diff --git a/src/components/Chatroom.css b/src/components/Chatroom.css new file mode 100644 index 0000000..f2fe1ad --- /dev/null +++ b/src/components/Chatroom.css @@ -0,0 +1,115 @@ +.chatroom { + flex: 0.7; + /* background-color: lightsalmon; */ + display: flex; + flex-direction: column; + } + + .chatroom__header { + display: flex; + padding: 15px; + align-items: center; + /* justify-content: space-between; */ + border-bottom: 1px solid rgb(241, 240, 240); + } + + .chatroom__headerinfoleft { + flex: 1; + padding-left: 15px; + } + + .chatroom__headerinfoleft > p { + color: gray; + } + + .chatroom__header__inforight { + display: flex; + align-items: center; + min-width: 80px; + } + + .chatroom__body { + flex: 1; + background-image: url("https://preview.redd.it/qwd83nc4xxf41.jpg?width=640&crop=smart&auto=webp&s=e82767fdf47158e80604f407ce4938e44afc6c25") !important; + background-repeat: repeat; + padding: 25px; + overflow-y: scroll; + background-position: center; + } + + .chatroom__message { + position: relative; + font-size: 15px; + margin-bottom: 10px; + padding: 10px; + background-color: rgb(243, 240, 240); + border-radius: 15px; + + width: fit-content; + margin-top: 25px; + } + + .chatroom__username { + position: absolute; + top: -15px; + font-weight: bold; + font-size: xx-small; + } + + .chatroom__messagetimestamp { + margin-left: 10px; + font-weight: bold; + font-size: xx-small; + color: black; + } + + .chatroom__messagerecierver { + margin-left: auto; + background-color: rgb(139, 141, 253); + } + + /* last div */ + .chatroom__footer { + display: flex; + align-items: center; + justify-content: space-between; + height: 55px; + border-top: 1px solid rgb(223, 222, 222); + } + + .chatroom__footer > form { + flex: 1; + display: flex; + } + + .chatroom__footer > form > input { + flex: 1; + border-radius: 50px; + padding: 15px; + border: none; + width: 90%; + } + + .chatroom__footer > form > button { + border: none; + background-color: rgb(88, 91, 255); + color: white; + padding: 10px; + border-radius: 50%; + } + + .chatroom__footer > form > input:focus { + outline-width: 0; + } + .chatroom__footer > form > button:focus { + outline-width: 0; + } + /* .chatroom__footer > form > button { + display: none; + } */ + + .chatroom__footer > .MuiSvgIcon-root { + padding: 10px; + color: gray; + } + \ No newline at end of file diff --git a/src/components/Chatroom.js b/src/components/Chatroom.js new file mode 100644 index 0000000..17b12dd --- /dev/null +++ b/src/components/Chatroom.js @@ -0,0 +1,104 @@ +import React, { useState, useEffect } from "react"; +import firebase from "firebase"; +import "./Chatroom.css"; +import { Avatar } from "@material-ui/core"; +import SearchIcon from "@material-ui/icons/Search"; +import SendIcon from "@material-ui/icons/Send"; +import AttachFileIcon from "@material-ui/icons/AttachFile"; +import MoreVertIcon from "@material-ui/icons/MoreVert"; +import SentimentVerySatisfiedIcon from "@material-ui/icons/SentimentVerySatisfied"; +import MicIcon from "@material-ui/icons/Mic"; +import { useParams } from "react-router-dom"; +import { database } from "../firebase"; +import { useStateValue } from "../StateProvider"; +function Chatroom() { + const [input, setinput] = useState(""); + const { roomid } = useParams(); + const [roomname, setroomname] = useState(""); + const [message, setmessages] = useState([]); + const [{ user }, dispatch] = useStateValue(); + + + useEffect(() => { + if (roomid) { + database + .collection("rooms") + .doc(roomid) + .onSnapshot((snapshot) => setroomname(snapshot.data().name)); + database + .collection("rooms") + .doc(roomid) + .collection("messages") + .orderBy("timestamp", "asc") + .onSnapshot((snapshot) => + setmessages(snapshot.docs.map((doc) => doc.data())) + ); + } + }, [roomid]); + + const SendMessage = (event) => { + event.preventDefault(); + + database.collection("rooms").doc(roomid).collection("messages").add({ + message: input, + name: user.displayName, + timestamp: firebase.firestore.FieldValue.serverTimestamp(), + + }); + setinput(""); + }; + + return ( +
+
+ +
+

{roomname}

+

+ last seen{" "} + {new Date( + message[message.length - 1]?.timestamp?.toDate() + ).toUTCString()} +

+
+
+ + + +
+
+
+ {message.map((message) => ( +

+ {message.name} + {message.message} + + {new Date(message.timestamp?.toDate()).toUTCString()} + +

+ ))} +
+
+ +
+ setinput(event.target.value)} + placeholder="Type your message here" + /> + +
+ +
+
+ ); +} + +export default Chatroom; diff --git a/src/components/Chats.css b/src/components/Chats.css new file mode 100644 index 0000000..91aa71d --- /dev/null +++ b/src/components/Chats.css @@ -0,0 +1,25 @@ +.chats { + display: flex; + align-items: center; + padding: 20px; + cursor: pointer; + border: 1px solid rgb(250, 249, 249); + } + + .chats:hover { + background-color: rgb(236, 233, 233); + } + + .chats__info > h3 { + margin-bottom: 8px; + } + + .chats__info { + margin-left: 10px; + } + + a { + text-decoration: none !important; + color: black; + } + \ No newline at end of file diff --git a/src/components/Chats.js b/src/components/Chats.js new file mode 100644 index 0000000..df635ce --- /dev/null +++ b/src/components/Chats.js @@ -0,0 +1,57 @@ + +import React, { useEffect, useState } from "react"; +import "./Chats.css"; +import { Avatar } from "@material-ui/core"; +import { database } from "../firebase"; +import { Link } from "react-router-dom"; + +function Chats({ addChat, id, name }) { + const [avatars, setavatars] = useState(""); + const [messages, setmessages] = useState(""); + + useEffect(() => { + setavatars(Math.floor(Math.random() * 5000)); + }, []); + + useEffect(() => { + if (id) { + database + .collection("rooms") + .doc(id) + .collection("messages") + .orderBy("timestamp", "desc") + .onSnapshot((snapshot) => + setmessages(snapshot.docs.map((doc) => doc.data())) + ); + } + }, [id]); + + const addnewChat = () => { + const chatName = prompt("Enter A name"); + + if (chatName) { + //Here this will add the new chat room doc + database.collection("rooms").add({ + name: chatName, + }); + } + }; + + return !addChat ? ( + +
+ +
+

{name}

+

{messages[0]?.message}

+
+
+ + ) : ( +
+

Add New Chat

+
+ ); +} + +export default Chats; diff --git a/src/components/Login.css b/src/components/Login.css new file mode 100644 index 0000000..92415b9 --- /dev/null +++ b/src/components/Login.css @@ -0,0 +1,25 @@ +.login__body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + } + + .login__body > img { + object-fit: contain; + width: 300px; + margin-bottom: 40px; + } + + .login__body > button { + margin-top: 50px; + background-color: rgb(88, 91, 255); + text-transform: inherit; + } + + .login__body > button:hover { + color: black; + background-color: white; + } + \ No newline at end of file diff --git a/src/components/Login.js b/src/components/Login.js new file mode 100644 index 0000000..21f7f79 --- /dev/null +++ b/src/components/Login.js @@ -0,0 +1,41 @@ +import React from "react"; +import "./Login.css"; +import { Button } from "@material-ui/core"; +import { authentication, provider } from "../firebase"; +import { useStateValue } from "../StateProvider"; +import { actionTypes } from "../reducer"; + +function Login() { + const [{ user }, dispatch] = useStateValue(); + + const signIn = () => { + authentication + .signInWithPopup(provider) + .then((result) => { + dispatch({ + type: actionTypes.SET_USER, + user: result.user, + }); + }) + .catch((error) => alert(error.message)); + }; + + return ( +
+
+ React Messenger +
+

Welcome To React Messenger

+
+ + + +
+
+ ); +} + +export default Login; diff --git a/src/components/Sideroom.css b/src/components/Sideroom.css new file mode 100644 index 0000000..56e9693 --- /dev/null +++ b/src/components/Sideroom.css @@ -0,0 +1,60 @@ +.sidebar { + flex: 0.3; + /* flex-direction: column; */ + flex-direction: column; + display: flex; + } + + .sidebar__header { + display: flex; + align-items: center; + justify-content: space-between; + border-right: 1px solid lightgray; + background-color: rgb(88, 91, 255); + padding: 15px; + } + + .sidebar__headerright { + display: flex; + /* align-items: center; */ + cursor: pointer; + justify-content: space-between; + min-width: 7vw; + margin-left: 7px; + } + + .siebar__search { + display: flex; + background-color: rgb(250, 243, 243); + height: 40px; + align-items: center; + padding: 10px; + } + + .sidebar__searchcontainer { + display: flex; + background-color: white; + width: 100%; + height: 35px; + border-radius: 999px; + align-items: center; + } + + .sidebar__searchcontainer > input { + width: 80%; + border: none; + margin-left: 15px; + color: gray; + } + .sidebar__searchcontainer > .MuiSvgIcon-root { + margin-left: 15px; + color: gray; + font-size: 18px !important; + } + + .sidebar__chhatsGroups { + flex: 1; + background-color: white; + overflow-y: scroll; + } + \ No newline at end of file diff --git a/src/components/Sideroom.js b/src/components/Sideroom.js new file mode 100644 index 0000000..e2b8573 --- /dev/null +++ b/src/components/Sideroom.js @@ -0,0 +1,58 @@ +import React, { useState, useEffect } from "react"; +import "./Sideroom.css"; +import { Avatar } from "@material-ui/core"; +import ChatIcon from "@material-ui/icons/Chat"; +import DonutLargeIcon from "@material-ui/icons/DonutLarge"; +import MoreVertIcon from "@material-ui/icons/MoreVert"; +import SearchIcon from "@material-ui/icons/Search"; +import Chats from "./Chats"; +import { database } from "../firebase"; +import { useStateValue } from "../StateProvider"; +function Sideroom() { + const [rooms, setrooms] = useState([]); + const [{ user }, dispatch] = useStateValue(); + + + useEffect(() => { + const unsubsctibe = database.collection("rooms").onSnapshot((snapshot) => + setrooms( + snapshot.docs.map((doc) => ({ + id: doc.id, + data: doc.data(), + })) + ) + ); + + return () => { + unsubsctibe(); + }; + }, []); + + return ( +
+
+ +
+ + + +
+
+
+
+ + +
+
+ +
+ + {rooms.map((room) => ( + + ))} +
+
+ ); +} + +export default Sideroom; diff --git a/src/firebase.js b/src/firebase.js index 3ec82f8..ec17260 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -11,7 +11,11 @@ const firebaseConfig={ measurementId:"G-HVDGKL164W" } -const firebaseApp=firebase.initializeApp(firebaseConfig); -const db=firebaseApp.firestore(); -export default db; + +const firebaseApp = firebase.initializeApp(firebaseConfig); +const database = firebaseApp.firestore(); +const authentication = firebaseApp.auth(); +const provider = new firebase.auth.GoogleAuthProvider(); + +export { database, authentication, provider }; diff --git a/src/index.js b/src/index.js index ef2edf8..0eb9231 100644 --- a/src/index.js +++ b/src/index.js @@ -3,10 +3,14 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { StateProvider } from './StateProvider'; +import reducer, { initialState } from './reducer'; ReactDOM.render( + + , document.getElementById('root') ); diff --git a/src/reducer.js b/src/reducer.js new file mode 100644 index 0000000..b29f513 --- /dev/null +++ b/src/reducer.js @@ -0,0 +1,24 @@ +export const initialState = { + user: null, + }; + + export const actionTypes = { + SET_USER: "SET_USER", + }; + + const reducer = (state, action) => { + console.log(action); + switch (action.type) { + case actionTypes.SET_USER: + return { + ...state, + user: action.user, + }; + + default: + return state; + } + }; + + export default reducer; + \ No newline at end of file From 993e5bb355ac42e4809e687f73ba4ee0f3285df7 Mon Sep 17 00:00:00 2001 From: Robin Singh Date: Fri, 12 Mar 2021 21:03:43 +0530 Subject: [PATCH 2/6] deleted comments --- src/App.css | 1 - src/App.js | 10 +++++----- src/components/Chatroom.css | 6 ------ src/components/Chatroom.js | 9 ++------- src/components/Chats.js | 1 - src/components/Sideroom.js | 2 +- 6 files changed, 8 insertions(+), 21 deletions(-) diff --git a/src/App.css b/src/App.css index c40d4e4..1616abb 100644 --- a/src/App.css +++ b/src/App.css @@ -3,7 +3,6 @@ } .app { - /* background-color: #e9e9e3; */ height: 100vh; display: grid; place-items: center; diff --git a/src/App.js b/src/App.js index 519893d..38ee801 100644 --- a/src/App.js +++ b/src/App.js @@ -16,22 +16,22 @@ function App() { ) : (
- {/*
*/} + - {/* sidebar */} + - {/* chat */} + - {/*

Home Screen

*/} + - {/*
*/} +
)}
diff --git a/src/components/Chatroom.css b/src/components/Chatroom.css index f2fe1ad..64b4814 100644 --- a/src/components/Chatroom.css +++ b/src/components/Chatroom.css @@ -1,6 +1,5 @@ .chatroom { flex: 0.7; - /* background-color: lightsalmon; */ display: flex; flex-direction: column; } @@ -9,7 +8,6 @@ display: flex; padding: 15px; align-items: center; - /* justify-content: space-between; */ border-bottom: 1px solid rgb(241, 240, 240); } @@ -68,7 +66,6 @@ background-color: rgb(139, 141, 253); } - /* last div */ .chatroom__footer { display: flex; align-items: center; @@ -104,9 +101,6 @@ .chatroom__footer > form > button:focus { outline-width: 0; } - /* .chatroom__footer > form > button { - display: none; - } */ .chatroom__footer > .MuiSvgIcon-root { padding: 10px; diff --git a/src/components/Chatroom.js b/src/components/Chatroom.js index 17b12dd..66a16c6 100644 --- a/src/components/Chatroom.js +++ b/src/components/Chatroom.js @@ -2,10 +2,8 @@ import React, { useState, useEffect } from "react"; import firebase from "firebase"; import "./Chatroom.css"; import { Avatar } from "@material-ui/core"; -import SearchIcon from "@material-ui/icons/Search"; import SendIcon from "@material-ui/icons/Send"; -import AttachFileIcon from "@material-ui/icons/AttachFile"; -import MoreVertIcon from "@material-ui/icons/MoreVert"; + import SentimentVerySatisfiedIcon from "@material-ui/icons/SentimentVerySatisfied"; import MicIcon from "@material-ui/icons/Mic"; import { useParams } from "react-router-dom"; @@ -62,15 +60,12 @@ function Chatroom() {

- - - +
{message.map((message) => (

{rooms.map((room) => ( - + ))}

From bb7fd21c23a09299dd69381d35e9142a0aa1812f Mon Sep 17 00:00:00 2001 From: Robin Singh Date: Fri, 19 Mar 2021 09:51:01 +0530 Subject: [PATCH 3/6] removed sending button --- src/components/Chatroom.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Chatroom.css b/src/components/Chatroom.css index 64b4814..270f4d9 100644 --- a/src/components/Chatroom.css +++ b/src/components/Chatroom.css @@ -93,6 +93,7 @@ color: white; padding: 10px; border-radius: 50%; + display: none; } .chatroom__footer > form > input:focus { From 671087e4340bd9b45892b91b2f949c086afae976 Mon Sep 17 00:00:00 2001 From: Robin Singh Date: Fri, 19 Mar 2021 09:51:34 +0530 Subject: [PATCH 4/6] removed sending button --- src/components/Chatroom.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Chatroom.js b/src/components/Chatroom.js index 66a16c6..5fdc4d2 100644 --- a/src/components/Chatroom.js +++ b/src/components/Chatroom.js @@ -40,6 +40,7 @@ function Chatroom() { database.collection("rooms").doc(roomid).collection("messages").add({ message: input, name: user.displayName, + sendEmail:user.email, timestamp: firebase.firestore.FieldValue.serverTimestamp(), }); @@ -49,7 +50,7 @@ function Chatroom() { return (
- +

{roomname}

@@ -67,7 +68,7 @@ function Chatroom() { {message.map((message) => (

{message.name} From 285b49f19404db12c3f5703b8ab2a1fe24df2372 Mon Sep 17 00:00:00 2001 From: Robin Singh Date: Fri, 19 Mar 2021 09:51:48 +0530 Subject: [PATCH 5/6] removed sending button --- src/components/Chats.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Chats.js b/src/components/Chats.js index bfda3a6..fe1ff71 100644 --- a/src/components/Chats.js +++ b/src/components/Chats.js @@ -6,12 +6,9 @@ import { database } from "../firebase"; import { Link } from "react-router-dom"; function Chats({ addChat, id, name }) { - const [avatars, setavatars] = useState(""); + const [messages, setmessages] = useState(""); - useEffect(() => { - setavatars(Math.floor(Math.random() * 5000)); - }, []); useEffect(() => { if (id) { @@ -39,7 +36,7 @@ function Chats({ addChat, id, name }) { return !addChat ? (

- +

{name}

{messages[0]?.message}

From 4c80753ac638927a8121de7ee3a1f4d7e0ab90af Mon Sep 17 00:00:00 2001 From: Robin Singh Date: Fri, 19 Mar 2021 09:51:55 +0530 Subject: [PATCH 6/6] removed sending button --- src/components/Sideroom.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Sideroom.css b/src/components/Sideroom.css index 56e9693..b1986e2 100644 --- a/src/components/Sideroom.css +++ b/src/components/Sideroom.css @@ -1,6 +1,5 @@ .sidebar { flex: 0.3; - /* flex-direction: column; */ flex-direction: column; display: flex; } @@ -16,7 +15,6 @@ .sidebar__headerright { display: flex; - /* align-items: center; */ cursor: pointer; justify-content: space-between; min-width: 7vw;