From 862d95e07b8cd093620f37546dabf43de9d66d39 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Fri, 20 Mar 2020 17:51:02 +0530 Subject: [PATCH 01/51] committing code --- .firebase/hosting.YnVpbGQ.cache | 34 +++---- package-lock.json | 29 ++++++ package.json | 3 + src/components/Backdrop/Backdrop.css | 9 ++ src/components/Backdrop/Backdrop.js | 9 ++ src/components/{ => Header}/Header.js | 0 src/components/SideDrawer/SideDrawer.css | 78 +++++++++++++++ src/components/SideDrawer/SideDrawer.js | 27 +++++ src/config/firebase-config.js | 4 +- src/containers/App.css | 4 + src/containers/App.js | 6 +- src/containers/pages/Coding.js | 46 ++++++++- src/containers/pages/Home.js | 33 ++++--- src/containers/pages/Login.js | 119 ++++++++++++++++++----- 14 files changed, 342 insertions(+), 59 deletions(-) create mode 100644 src/components/Backdrop/Backdrop.css create mode 100644 src/components/Backdrop/Backdrop.js rename src/components/{ => Header}/Header.js (100%) create mode 100644 src/components/SideDrawer/SideDrawer.css create mode 100644 src/components/SideDrawer/SideDrawer.js diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 3a96652..95402ec 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,17 +1,17 @@ -index.html,1584440977945,4a6e784316f8ddc0f0c81ad0182a50fdfffbbd7f1ebced0e66137dbcea2dae17 -asset-manifest.json,1584440977946,79ca0fa23d0a6a884eb7aca584e5e72ccbbc7444a12d4f3dfe9eaa1247bc06c8 -static/css/2.fba55a0b.chunk.css,1584440977992,924c60cbb1fca274040a2a2c55942950e947e8e61f69e8802b30d3476d8eacff -static/css/main.d8a4147f.chunk.css,1584440977989,bac81478843f9fbddbdff9a1d72d6be7dfb808043a4417a0cc00533b0005cdd7 -service-worker.js,1584440977945,8317aa7ad4218d9b6226af223cf1584702332500a77d3d27c592782fcab4d0d2 -precache-manifest.f72ce769d1b7e696ce0db0701320908d.js,1584440977945,d1f3ae731daa15217ebd16557b220acb73555b1c7c4e72631400600924c96c05 -static/css/main.d8a4147f.chunk.css.map,1584440977992,752746cdd91442746a96efafffd79bf909b679c2c2ba7b2d8d7be0e1c152a5ac -static/js/2.4584098a.chunk.js.LICENSE.txt,1584440977992,faf342c917769a205d99b2a900b027858d73851af8df1fa3c051475ebff59070 -static/css/2.fba55a0b.chunk.css.map,1584440977992,aef0708a2c016b136c003417e6a3741e4d99065ef70d706b0c67b676c5b1ae2f -static/js/main.8de944e0.chunk.js,1584440977946,fb673321c463c1ebc8f105050181afb889ff9b9ad3a8779d8e65dc5f91750444 -favicon_CN.ico,1584440960136,2f5e8db0721f2d0efe10f64b8099530466cedf37a9a92d57c3f7ed2b27ff8de5 -static/js/runtime-main.e13d1eff.js,1584440977990,1d2dbb0095a527cc8dcbb8746b42e14550f4543a28480671bc5821e47c552fd9 -static/js/main.8de944e0.chunk.js.map,1584440977992,d0a2215125f080537648641cc989625df5a404c5a5478cd20aa2870234adff87 -static/media/CNLOGO.c149ff8b.svg,1584440977986,bd340e9acd31b3bdf5732250d141ccb8e2e6247670834b5605a10e4e91a5fb9f -static/js/runtime-main.e13d1eff.js.map,1584440977990,1b8351c356a25c434cb32880147976019bcc9e1553fad7e6afb83bee61160729 -static/js/2.4584098a.chunk.js,1584440977993,8dba1b39dd2cf5fa8a42622c0ac5159ba41bbf1c132ba26bd7f03cc06e93f728 -static/js/2.4584098a.chunk.js.map,1584440977992,a615cf8a0bd5ad4ced78ca3f84c7a10b979aaeb3fcbe4a428a12be1f630a2268 +index.html,1584705891514,b2d25483b7f60f26debbda42e7ea4be74bb3935e89f03de3fb0acc1ea954365a +asset-manifest.json,1584705891518,3e814ab02424a99fa00c16c87de97011b6d0e4969a95efcb98891065bf4d3f76 +precache-manifest.d3a49c2ce609d369c76451973298c338.js,1584705891514,601201615dc1ff8a1d03eb3a1c5799219eb2fbb0ed2c3375ca518988571deda5 +service-worker.js,1584705891514,5a5745e485e99456bc7fe6835b5755b658eb68d4fff50fc73db24952c709033e +static/css/main.ac8e5b7d.chunk.css.map,1584705891553,3dd4e3a4f1f11e81598ebf7b8ad49003bd793a6733929fae1e74fe519b7fb772 +static/css/2.fba55a0b.chunk.css,1584705891555,924c60cbb1fca274040a2a2c55942950e947e8e61f69e8802b30d3476d8eacff +static/css/main.ac8e5b7d.chunk.css,1584705891553,77748b0be7a3ef610424575d43c7781d9af95f4c0a7e0268b6d97b23cfb1b87b +static/css/2.fba55a0b.chunk.css.map,1584705891553,aef0708a2c016b136c003417e6a3741e4d99065ef70d706b0c67b676c5b1ae2f +static/js/main.7b849d4d.chunk.js,1584705891555,03fe5aaf2e12f6c022d6c390316c860937111c6e7308c2d1b48dea31c46aed7c +static/js/2.1092463d.chunk.js.LICENSE.txt,1584705891555,a59751de43bebf1e734f41600b2bb03dcde3a18abea1c0474ef7ac60ff302b79 +static/js/runtime-main.e13d1eff.js,1584705891515,1d2dbb0095a527cc8dcbb8746b42e14550f4543a28480671bc5821e47c552fd9 +favicon_CN.ico,1584705861336,2f5e8db0721f2d0efe10f64b8099530466cedf37a9a92d57c3f7ed2b27ff8de5 +static/js/runtime-main.e13d1eff.js.map,1584705891553,1b8351c356a25c434cb32880147976019bcc9e1553fad7e6afb83bee61160729 +static/media/CNLOGO.c149ff8b.svg,1584705891553,bd340e9acd31b3bdf5732250d141ccb8e2e6247670834b5605a10e4e91a5fb9f +static/js/main.7b849d4d.chunk.js.map,1584705891555,2ae2351f4b1673498e3aec67fb02bda748a76b6fea701b7d16135fe62bfc57d3 +static/js/2.1092463d.chunk.js,1584705891553,9b77d59c7aa04b444416c2fb7af3744410862e33f9b2609f3078a2fba9e5c11c +static/js/2.1092463d.chunk.js.map,1584705891555,d30d2d84a5747596b2f2fe615b580398a8e11e5a7ea5e6e480aaf7a1d3d59a8a diff --git a/package-lock.json b/package-lock.json index 069d56f..4c01fc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1376,6 +1376,35 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.35.tgz", "integrity": "sha512-7njiGBbFW0HCnuKNEJLcQt9EjfOzG8EJiXlFJwA3XfgiFxPVHmXrcF4d5yold2wfiwCwrXpeNTGZ854oRr6Hcw==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.27", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.27.tgz", + "integrity": "sha512-97GaByGaXDGMkzcJX7VmR/jRJd8h1mfhtA7RsxDBN61GnWE/PPCZhOdwG/8OZYktiRUF0CvFOr+VgRkJrt6TWg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.27", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.27.tgz", + "integrity": "sha512-sOD3DKynocnHYpuw2sLPnTunDj7rLk91LYhi2axUYwuGe9cPCw7Bsu9EWtVdNJP+IYgTCZIbyARKXuy5K/nv+Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.27" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.1.tgz", + "integrity": "sha512-k3MwRFFUhyL4cuCJSaHDA0YNYMELDXX0h8JKtWYxO5XD3Dn+maXOMrVAAiNGooUyM2v/wz/TOaM0jxYVKeXX7g==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.27" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz", + "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@google-cloud/paginator": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-2.0.3.tgz", diff --git a/package.json b/package.json index e4d555c..de19159 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.27", + "@fortawesome/free-solid-svg-icons": "^5.12.1", + "@fortawesome/react-fontawesome": "^0.1.9", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/src/components/Backdrop/Backdrop.css b/src/components/Backdrop/Backdrop.css new file mode 100644 index 0000000..4045a88 --- /dev/null +++ b/src/components/Backdrop/Backdrop.css @@ -0,0 +1,9 @@ +.backdrop { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0,0,0,0.3); + z-index: 100; +} \ No newline at end of file diff --git a/src/components/Backdrop/Backdrop.js b/src/components/Backdrop/Backdrop.js new file mode 100644 index 0000000..8c03cbc --- /dev/null +++ b/src/components/Backdrop/Backdrop.js @@ -0,0 +1,9 @@ +import React from 'react'; + +import './Backdrop.css'; + +const backdrop = props => ( +
+); + +export default backdrop; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header/Header.js similarity index 100% rename from src/components/Header.js rename to src/components/Header/Header.js diff --git a/src/components/SideDrawer/SideDrawer.css b/src/components/SideDrawer/SideDrawer.css new file mode 100644 index 0000000..4fa04f3 --- /dev/null +++ b/src/components/SideDrawer/SideDrawer.css @@ -0,0 +1,78 @@ +.side-drawer { + height: 100%; + background: white; + box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + /* left: 0; */ + right: 0; + width: 70%; + max-width: 300px; + z-index: 200; + /* transform: translateX(-100%); */ + transform: translateX(100%); + transition: transform 0.3s ease-out; +} + +.side-drawer.open { + transform: translateX(0); +} + +.side-drawer .heading { + display: flex; + align-items: center; + justify-content: center; + margin-top: 8px; + padding: 6px 0px; + color: #000000; + font-size: 1.2rem; + text-decoration: none; + vertical-align: center; +} + +.side-drawer .divider { + margin: 8px auto; + height: 1px; + width: 80%; + background-color: #757575; +} + +.side-drawer ul { + margin: 0; + padding: 0 40px; + height: 100%; + list-style: none; + display: flex; + flex-direction: column; +} + +.side-drawer ul li { + margin: 3px 0; + display: flex; + align-items: center; + /* justify-content: center; */ +} + +.side-drawer ul li img { + height: 2.3rem; + width: 2.3rem; + border-radius: 50%; + border: 1px solid #222; +} + +.side-drawer ul li span { + color: #000000; + font-size: 1rem; + margin-left: 10px; +} + +.side-drawer ul li span:hover { + color: #800000; + cursor: default; +} + +/* @media (min-width: 769px) { + .side-drawer { + display: none; + } +} */ \ No newline at end of file diff --git a/src/components/SideDrawer/SideDrawer.js b/src/components/SideDrawer/SideDrawer.js new file mode 100644 index 0000000..57b0c25 --- /dev/null +++ b/src/components/SideDrawer/SideDrawer.js @@ -0,0 +1,27 @@ +import React from 'react'; + +import './SideDrawer.css'; +import { usersList } from '../../containers/pages/Login'; + +const sideDrawer = props => { + + let drawerClasses = 'side-drawer'; + + if (props.show) { + drawerClasses = 'side-drawer open'; + } + + return ( + + ); +}; + +export default sideDrawer; \ No newline at end of file diff --git a/src/config/firebase-config.js b/src/config/firebase-config.js index 31737d5..15605e2 100644 --- a/src/config/firebase-config.js +++ b/src/config/firebase-config.js @@ -1,4 +1,6 @@ -import firebase from 'firebase'; +import firebase from 'firebase/app'; +import 'firebase/database'; +import 'firebase/auth'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, diff --git a/src/containers/App.css b/src/containers/App.css index 82cfccc..d5e2295 100644 --- a/src/containers/App.css +++ b/src/containers/App.css @@ -130,6 +130,10 @@ p { color: black; } +.btn-coding:focus { + outline: none; +} + /**** Google Login Page ****/ .header-loginPage { diff --git a/src/containers/App.js b/src/containers/App.js index cc9ca58..00d78b0 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,12 +1,12 @@ import React, { Component } from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import "./App.css"; +import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"; +import getMuiTheme from "material-ui/styles/getMuiTheme"; +import { createBrowserHistory } from "history"; import Login from "./pages/Login"; import Coding from "./pages/Coding"; import Home from './pages/Home'; -import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"; -import getMuiTheme from "material-ui/styles/getMuiTheme"; -import createBrowserHistory from "history/createBrowserHistory"; const muiTheme = getMuiTheme({ appBar: { diff --git a/src/containers/pages/Coding.js b/src/containers/pages/Coding.js index fb93aff..04f8c19 100644 --- a/src/containers/pages/Coding.js +++ b/src/containers/pages/Coding.js @@ -1,8 +1,12 @@ import React from "react"; import CodeMirror from "react-codemirror"; -import Header from "../../components/Header"; -import { database } from "firebase"; +import Header from "../../components/Header/Header"; +import SideDrawer from '../../components/SideDrawer/SideDrawer'; +import Backdrop from '../../components/Backdrop/Backdrop'; +import { database } from "firebase/app"; import { logout } from "../../helpers/auth"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faBars } from '@fortawesome/free-solid-svg-icons'; import "codemirror/lib/codemirror"; import "codemirror/lib/codemirror.css"; @@ -30,8 +34,14 @@ export default class CodingPage extends React.Component { const session_id = this.props.match.params.sessionid; // console.log(session_id); + // setting initial state this.state = { - code: "Loading..." + sideDrawerOpen: false, + code: "Loading...", + cursorPosition: { + line: 0, + ch: 0 + } // firebaseUser: JSON.parse(localStorage.getItem("firebaseUser")) }; @@ -50,6 +60,7 @@ export default class CodingPage extends React.Component { // setting initial state state = { + sideDrawerOpen: false, code: "Loading...", cursorPosition: { line: 0, @@ -64,7 +75,6 @@ export default class CodingPage extends React.Component { .ref("/code-sessions/" + params.sessionid) .once("value") .then(snapshot => { - // trimmimg the Date() to remove unnecessary add-ons var createdOn = snapshot.val().createdon; var createdOnCompressed = createdOn.substring(0, 25); @@ -117,7 +127,7 @@ export default class CodingPage extends React.Component { this.codeRef.child("content").set(newVal); }; - // sign-out functionality: + // sign-out functionality handleLogout() { logout().then(function () { localStorage.removeItem(appTokenKey); @@ -127,9 +137,28 @@ export default class CodingPage extends React.Component { }.bind(this)); } + // sidebar toggle handler + drawerToggleClickHandler = () => { + this.setState((prevState) => { + return { sideDrawerOpen: !prevState.sideDrawerOpen }; + }); + }; + + // backdrop (dull background) handler + backdropClickHandler = () => { + this.setState({ sideDrawerOpen: false }); + }; + render() { + + let backdrop; + if (this.state.sideDrawerOpen) { + backdrop = + } + return ( +
Sign Out +
} /> + + + { backdrop } +
(this.codemirror = r)} diff --git a/src/containers/pages/Home.js b/src/containers/pages/Home.js index a7d4665..8303a32 100644 --- a/src/containers/pages/Home.js +++ b/src/containers/pages/Home.js @@ -1,7 +1,8 @@ import React from "react"; import random from "random-key"; -import Header from "../../components/Header"; -import { database } from "firebase"; +import Header from "../../components/Header/Header"; +import { database } from "firebase/app"; +import { firebaseAuth } from "../../config/firebase-config"; import { logout } from "../../helpers/auth"; const appTokenKey = "appToken"; @@ -13,10 +14,10 @@ export default class HomePage extends React.Component { super(props); // this.state = { - // //firebaseUser: JSON.parse(localStorage.getItem("firebaseUser")) + // // firebaseUser: JSON.parse(localStorage.getItem("firebaseUser")) // }; - //console.log("User:", this.state.firebaseUser); + // console.log("User:", this.state.firebaseUser); this.handleLogout = this.handleLogout.bind(this); if(localStorage.getItem(sessionID)){ @@ -44,18 +45,28 @@ export default class HomePage extends React.Component { }); }; - // when new session is created (Share Code button is clicked) + // when new session is created ('Share Code' button is clicked) onNewGround = () => { + var user = firebaseAuth().currentUser; database() - .ref("code-sessions/" + this.state.key) - .set({ - content: "

I ♥ Coding!

", - createdon: Date() - }); + .ref("code-sessions/" + this.state.key) + .set({ + content: "

I ♥ Coding!

", + createdon: Date() + }); + // adding details of the user to the database + database() + .ref("code-sessions/" + this.state.key + "/creator") + .set({ + user_id: user.uid, + user_name: user.displayName, + user_email: user.email, + user_photo: user.photoURL + }); this.props.history.push("/home/" + this.state.key); }; - // sign-out functionality: + // sign-out functionality handleLogout() { logout().then(function () { localStorage.removeItem(appTokenKey); diff --git a/src/containers/pages/Login.js b/src/containers/pages/Login.js index a07f4df..396dc9b 100644 --- a/src/containers/pages/Login.js +++ b/src/containers/pages/Login.js @@ -1,13 +1,16 @@ import React from "react"; +import random from "random-key"; +import logo from '../../images/CNLOGO.svg'; import { Helmet } from 'react-helmet'; import { FontIcon, RaisedButton } from "material-ui"; import { loginWithGoogle } from "../../helpers/auth"; import { firebaseAuth } from "../../config/firebase-config"; -import logo from '../../images/CNLOGO.svg'; +import { database } from "firebase/app"; const firebaseAuthKey = "firebaseAuthInProgress"; const appTokenKey = "appToken"; const sessionID = "sessionID"; +const usersList = []; export default class Login extends React.Component { @@ -16,7 +19,8 @@ export default class Login extends React.Component { // console.log(this.props.match.params); this.state = { - splashScreen: false + splashScreen: false, + key: random.generate(3), // for storing connected-users }; this.handleGoogleLogin = this.handleGoogleLogin.bind(this); @@ -43,7 +47,7 @@ export default class Login extends React.Component { const session_id = localStorage.getItem(sessionID); // redirect to /home/:session_id this.props.history.push(`/home/${session_id}`); - localStorage.removeItem(sessionID); + // localStorage.removeItem(sessionID); } else { // console.log("** sessionID absent **"); @@ -56,26 +60,94 @@ export default class Login extends React.Component { // called whenever user sign-in/sign-out or token expires firebaseAuth().onAuthStateChanged(user => { - if (user) { - console.log("User signed in: ", user); - - localStorage.removeItem(firebaseAuthKey); + try { + if (user) { + + if (localStorage.getItem(sessionID)) { + const session_id = localStorage.getItem(sessionID); + + var newUser; + + // checking if user already present in database + database() + .ref(`code-sessions/${session_id}/users-connected`) + .on("value", function(snapshot){ + snapshot.forEach(function(childSnapshot){ + var userData = childSnapshot.val(); + if(userData.user_id === user.uid){ + newUser = false; + // console.log("User already connected previously."); + } + }); + if(newUser !== false){ + newUser = true; + } + }) + + function firebaseDelay(key) { + + // adding new user details in database + if(newUser === true){ + // console.log("User connected to the session."); + database() + .ref(`code-sessions/${session_id}/users-connected/user-` + key) + .set({ + user_id: user.uid, + user_name: user.displayName, + user_email: user.email, + user_photo: user.photoURL + }); + } + + // displaying users-connected from database + database() + .ref(`code-sessions/${session_id}/users-connected`) + .on("value", function(snapshot){ + console.log("\nConnected users: "); + snapshot.forEach(function(childSnapshot){ + var userData = childSnapshot.val(); + console.log(userData.user_name + " - " + userData.user_email); + // pushing user details to the 'usersList' array + usersList.push( +
  • + Avatar + {userData.user_name} +
    • + ); + }); + console.log("\n"); + }); + + } + + // wait 4 seconds to complete fetching and storing data in database + setTimeout(firebaseDelay, 4000, this.state.key); + + } + + // console.log("User signed in: ", JSON.stringify(user)); + console.log("\n User signed in:", user); + + localStorage.removeItem(firebaseAuthKey); + + // setting appTokenKey as "uid" of signed-in user + localStorage.setItem(appTokenKey, user.uid); + + if (localStorage.getItem(sessionID)) { + const session_id = localStorage.getItem(sessionID); + // console.log("** sessionID present **"); + // redirect to /home/:session_id + this.props.history.push(`/home/${session_id}`); + localStorage.removeItem(sessionID); + } else { + // console.log("** sessionID absent **"); + // redirect to /home + this.props.history.push(`/home`); + } - // setting appTokenKey as "uid" of signed-in user - localStorage.setItem(appTokenKey, user.uid); - - if (localStorage.getItem(sessionID)) { - const session_id = localStorage.getItem(sessionID); - // console.log("** sessionID present **"); - // redirect to /home/:session_id - this.props.history.push(`/home/${session_id}`); - localStorage.removeItem(sessionID); - } else { - // console.log("** sessionID absent **"); - // redirect to /home - this.props.history.push(`/home`); } - + } catch(error) { + console.log("Error in authentication."); } }); } @@ -129,4 +201,7 @@ const SplashScreen = () => ( {/* Spinning Logo: */}
    -); \ No newline at end of file +); + +// exporting connected-users list +export {usersList}; \ No newline at end of file From ba48bbe519100a6f961803b14250255c81af2ec6 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Fri, 20 Mar 2020 18:06:45 +0530 Subject: [PATCH 02/51] update readme.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a97e951..015b623 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Coderoom | Coding Ninjas +## (http://coderoom-aecd1.firebaseapp.com/) A collaborative place for sharing code in realtime! ## To run the project: From de1eeff76c98086f189283d094dcf256e07609e6 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Sat, 21 Mar 2020 19:46:30 +0530 Subject: [PATCH 03/51] fix sidebar issue --- .firebase/hosting.YnVpbGQ.cache | 34 +++++----- README.md | 2 +- src/components/SideDrawer/SideDrawer.js | 2 +- src/containers/pages/Coding.js | 83 ++++++++++++++++++------- src/containers/pages/Home.js | 7 +-- src/containers/pages/Login.js | 25 +------- 6 files changed, 80 insertions(+), 73 deletions(-) diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 95402ec..a7339c9 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,17 +1,17 @@ -index.html,1584705891514,b2d25483b7f60f26debbda42e7ea4be74bb3935e89f03de3fb0acc1ea954365a -asset-manifest.json,1584705891518,3e814ab02424a99fa00c16c87de97011b6d0e4969a95efcb98891065bf4d3f76 -precache-manifest.d3a49c2ce609d369c76451973298c338.js,1584705891514,601201615dc1ff8a1d03eb3a1c5799219eb2fbb0ed2c3375ca518988571deda5 -service-worker.js,1584705891514,5a5745e485e99456bc7fe6835b5755b658eb68d4fff50fc73db24952c709033e -static/css/main.ac8e5b7d.chunk.css.map,1584705891553,3dd4e3a4f1f11e81598ebf7b8ad49003bd793a6733929fae1e74fe519b7fb772 -static/css/2.fba55a0b.chunk.css,1584705891555,924c60cbb1fca274040a2a2c55942950e947e8e61f69e8802b30d3476d8eacff -static/css/main.ac8e5b7d.chunk.css,1584705891553,77748b0be7a3ef610424575d43c7781d9af95f4c0a7e0268b6d97b23cfb1b87b -static/css/2.fba55a0b.chunk.css.map,1584705891553,aef0708a2c016b136c003417e6a3741e4d99065ef70d706b0c67b676c5b1ae2f -static/js/main.7b849d4d.chunk.js,1584705891555,03fe5aaf2e12f6c022d6c390316c860937111c6e7308c2d1b48dea31c46aed7c -static/js/2.1092463d.chunk.js.LICENSE.txt,1584705891555,a59751de43bebf1e734f41600b2bb03dcde3a18abea1c0474ef7ac60ff302b79 -static/js/runtime-main.e13d1eff.js,1584705891515,1d2dbb0095a527cc8dcbb8746b42e14550f4543a28480671bc5821e47c552fd9 -favicon_CN.ico,1584705861336,2f5e8db0721f2d0efe10f64b8099530466cedf37a9a92d57c3f7ed2b27ff8de5 -static/js/runtime-main.e13d1eff.js.map,1584705891553,1b8351c356a25c434cb32880147976019bcc9e1553fad7e6afb83bee61160729 -static/media/CNLOGO.c149ff8b.svg,1584705891553,bd340e9acd31b3bdf5732250d141ccb8e2e6247670834b5605a10e4e91a5fb9f -static/js/main.7b849d4d.chunk.js.map,1584705891555,2ae2351f4b1673498e3aec67fb02bda748a76b6fea701b7d16135fe62bfc57d3 -static/js/2.1092463d.chunk.js,1584705891553,9b77d59c7aa04b444416c2fb7af3744410862e33f9b2609f3078a2fba9e5c11c -static/js/2.1092463d.chunk.js.map,1584705891555,d30d2d84a5747596b2f2fe615b580398a8e11e5a7ea5e6e480aaf7a1d3d59a8a +asset-manifest.json,1584800148689,3c390db6c8a227fce40f5911ca8159856ec7957a0b756459358dcf0c6ab42ef6 +index.html,1584800148687,b5c9b56572ee34a1070458bf28513d87f2f9ee0ab0d28329a040646014a67d13 +precache-manifest.658036258ed822e28f055367bb14f8fd.js,1584800148688,4841c761c1f01d1a6420ff2db650d5befef00e5739da5f76d51b2f8ce85befe5 +service-worker.js,1584800148687,5622fc8ec1da372b75d028364b528fa2f78caac9acfe5d81d0750131efaa7d31 +static/css/main.ac8e5b7d.chunk.css,1584800148698,77748b0be7a3ef610424575d43c7781d9af95f4c0a7e0268b6d97b23cfb1b87b +static/css/2.fba55a0b.chunk.css,1584800148747,924c60cbb1fca274040a2a2c55942950e947e8e61f69e8802b30d3476d8eacff +static/js/2.1092463d.chunk.js.LICENSE.txt,1584800148746,a59751de43bebf1e734f41600b2bb03dcde3a18abea1c0474ef7ac60ff302b79 +static/css/main.ac8e5b7d.chunk.css.map,1584800148747,3dd4e3a4f1f11e81598ebf7b8ad49003bd793a6733929fae1e74fe519b7fb772 +static/css/2.fba55a0b.chunk.css.map,1584800148747,aef0708a2c016b136c003417e6a3741e4d99065ef70d706b0c67b676c5b1ae2f +static/js/main.708cacd0.chunk.js,1584800148746,ecdc26c1e4434eec9334c7c14c76f983d822cb6cbc9a7dab7edcbb8feae50b57 +static/js/runtime-main.e13d1eff.js,1584800148746,1d2dbb0095a527cc8dcbb8746b42e14550f4543a28480671bc5821e47c552fd9 +static/js/runtime-main.e13d1eff.js.map,1584800148747,1b8351c356a25c434cb32880147976019bcc9e1553fad7e6afb83bee61160729 +static/media/CNLOGO.c149ff8b.svg,1584800148689,bd340e9acd31b3bdf5732250d141ccb8e2e6247670834b5605a10e4e91a5fb9f +static/js/main.708cacd0.chunk.js.map,1584800148746,0c587448718fd5f40bf354d429a91cd162af92cabbd3ad912d25c79abd98139c +favicon_CN.ico,1584800133631,2f5e8db0721f2d0efe10f64b8099530466cedf37a9a92d57c3f7ed2b27ff8de5 +static/js/2.1092463d.chunk.js,1584800148747,9b77d59c7aa04b444416c2fb7af3744410862e33f9b2609f3078a2fba9e5c11c +static/js/2.1092463d.chunk.js.map,1584800148749,d30d2d84a5747596b2f2fe615b580398a8e11e5a7ea5e6e480aaf7a1d3d59a8a diff --git a/README.md b/README.md index 015b623..4c04b8e 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Coderoom | Coding Ninjas -## (http://coderoom-aecd1.firebaseapp.com/) +### (http://coderoom-aecd1.firebaseapp.com) A collaborative place for sharing code in realtime! ## To run the project: diff --git a/src/components/SideDrawer/SideDrawer.js b/src/components/SideDrawer/SideDrawer.js index 57b0c25..e31baab 100644 --- a/src/components/SideDrawer/SideDrawer.js +++ b/src/components/SideDrawer/SideDrawer.js @@ -1,7 +1,7 @@ import React from 'react'; import './SideDrawer.css'; -import { usersList } from '../../containers/pages/Login'; +import { usersList } from '../../containers/pages/Coding'; const sideDrawer = props => { diff --git a/src/containers/pages/Coding.js b/src/containers/pages/Coding.js index 04f8c19..a26d25e 100644 --- a/src/containers/pages/Coding.js +++ b/src/containers/pages/Coding.js @@ -4,6 +4,7 @@ import Header from "../../components/Header/Header"; import SideDrawer from '../../components/SideDrawer/SideDrawer'; import Backdrop from '../../components/Backdrop/Backdrop'; import { database } from "firebase/app"; +import { firebaseAuth } from "../../config/firebase-config"; import { logout } from "../../helpers/auth"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBars } from '@fortawesome/free-solid-svg-icons'; @@ -25,37 +26,68 @@ import 'codemirror/addon/comment/comment'; const appTokenKey = "appToken"; const sessionID = "sessionID"; +const usersList = []; export default class CodingPage extends React.Component { constructor(props) { - super(props); - - const session_id = this.props.match.params.sessionid; - // console.log(session_id); - - // setting initial state - this.state = { - sideDrawerOpen: false, - code: "Loading...", - cursorPosition: { - line: 0, - ch: 0 - } - // firebaseUser: JSON.parse(localStorage.getItem("firebaseUser")) - }; + super(props); + + const session_id = this.props.match.params.sessionid; + // console.log(session_id); - // console.log("User:", this.state.firebaseUser); + // if appTokenKey is not found in localStorage, + // then redirect to login page + if (!localStorage.getItem(appTokenKey)) { + localStorage.setItem("sessionID", session_id); + this.props.history.push(`/login`); + return; + } - this.handleLogout = this.handleLogout.bind(this); + // setting initial state + this.state = { + sideDrawerOpen: false, + code: "Loading...", + cursorPosition: { + line: 0, + ch: 0 + }, + }; + + this.handleLogout = this.handleLogout.bind(this); + + // to fetch currently signed-in user + firebaseAuth().onAuthStateChanged((user) => { + try { + if (user) { + + // displaying users-connected from database + database() + .ref(`code-sessions/${session_id}/users-connected`) + .on("value", function(snapshot){ + // console.log("\nConnected users: "); + var i = 0; + snapshot.forEach(function(childSnapshot){ + var userData = childSnapshot.val(); + // console.log(userData.user_name + " - " + userData.user_email); + usersList.push( +
  • + Avatar + {userData.user_name} +
    • + ); + i++; + }); + // console.log("\n"); + }); - // if appTokenKey is not found in localStorage, - // then redirect to login page - if (!localStorage.getItem(appTokenKey)) { - localStorage.setItem("sessionID", session_id); - this.props.history.push(`/login`); - return; + } else { + console.log("Cannot fetch currently signed-in user."); + } + } catch(error) { + console.log("Error in authentication."); } + }); } // setting initial state @@ -207,4 +239,7 @@ export default class CodingPage extends React.Component { ); } -} \ No newline at end of file +} + +// exporting connected-users list +export {usersList}; \ No newline at end of file diff --git a/src/containers/pages/Home.js b/src/containers/pages/Home.js index 8303a32..27a54b9 100644 --- a/src/containers/pages/Home.js +++ b/src/containers/pages/Home.js @@ -12,12 +12,7 @@ export default class HomePage extends React.Component { constructor(props) { super(props); - - // this.state = { - // // firebaseUser: JSON.parse(localStorage.getItem("firebaseUser")) - // }; - - // console.log("User:", this.state.firebaseUser); + this.handleLogout = this.handleLogout.bind(this); if(localStorage.getItem(sessionID)){ diff --git a/src/containers/pages/Login.js b/src/containers/pages/Login.js index 396dc9b..5b50a3a 100644 --- a/src/containers/pages/Login.js +++ b/src/containers/pages/Login.js @@ -10,7 +10,6 @@ import { database } from "firebase/app"; const firebaseAuthKey = "firebaseAuthInProgress"; const appTokenKey = "appToken"; const sessionID = "sessionID"; -const usersList = []; export default class Login extends React.Component { @@ -99,25 +98,6 @@ export default class Login extends React.Component { }); } - // displaying users-connected from database - database() - .ref(`code-sessions/${session_id}/users-connected`) - .on("value", function(snapshot){ - console.log("\nConnected users: "); - snapshot.forEach(function(childSnapshot){ - var userData = childSnapshot.val(); - console.log(userData.user_name + " - " + userData.user_email); - // pushing user details to the 'usersList' array - usersList.push( -
  • - Avatar - {userData.user_name} -
    • - ); - }); - console.log("\n"); - }); - } // wait 4 seconds to complete fetching and storing data in database @@ -201,7 +181,4 @@ const SplashScreen = () => ( {/* Spinning Logo: */}
    -); - -// exporting connected-users list -export {usersList}; \ No newline at end of file +); \ No newline at end of file From 73609ea657bd4b14ca5c38218bfc09edf4037857 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Sat, 21 Mar 2020 23:07:35 +0530 Subject: [PATCH 04/51] stopped tracking .env file --- .env | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index c8587ae..0000000 --- a/.env +++ /dev/null @@ -1,18 +0,0 @@ -# Daksh Dummy Account Details: -REACT_APP_FIREBASE_API_KEY = "AIzaSyBC5RfffIrdsCG-mHVfRF0bUGiG8Sx5hGs" -REACT_APP_FIREBASE_AUTH_DOMAIN = "coderoom-aecd1.firebaseapp.com" -REACT_APP_FIREBASE_DATABASE_URL = "https://coderoom-aecd1.firebaseio.com" -REACT_APP_FIREBASE_PROJECT_ID = "coderoom-aecd1" -REACT_APP_FIREBASE_STORAGE_BUCKET = "coderoom-aecd1.appspot.com" -REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "127836959872" -REACT_APP_FIREBASE_APP_ID = "1:127836959872:web:d48df173099d46aba76265" - -# Arpansac Account Details: -# REACT_APP_FIREBASE_API_KEY = "AIzaSyCyg3-TiRdd_8qP1q3TwY7EA_9iPOPpbE4", -# REACT_APP_FIREBASE_AUTH_DOMAIN = "coderoom-dev.firebaseapp.com", -# REACT_APP_FIREBASE_DATABASE_URL = "https://coderoom-dev.firebaseio.com" -# REACT_APP_FIREBASE_PROJECT_ID = "coderoom-dev" -# REACT_APP_FIREBASE_STORAGE_BUCKET = "coderoom-dev.appspot.com" -# REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "694801682636" -# REACT_APP_FIREBASE_APP_ID = "1:694801682636:web:1f0b9ed0900cdd15a8f269" -# REACT_APP_FIREBASE_MEASUREMENT_ID = "G-2S2MQSLD75" \ No newline at end of file From 9be62290c08d0e81d6cf20825ef46bebda503950 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Sat, 21 Mar 2020 23:14:20 +0530 Subject: [PATCH 05/51] update readme.md --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4c04b8e..4b4d374 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,12 @@ ### (http://coderoom-aecd1.firebaseapp.com) A collaborative place for sharing code in realtime! -## To run the project: +## To run the project (locally on your machine): - Clone the project. - Run command `npm install` to install all the dependencies required. -- Run command `npm run build` in the terminal to build the project. +- Run command `npm start` in the terminal to run the project in development mode. + +### For production mode: +- Run command `npm run build` in the terminal to build the project for production mode. +- Initialise the project using Firebase command-line tools and run command `firebase init`. - Run command `firebase serve` in the terminal to start the Web App at `http://localhost:5000/`. \ No newline at end of file From f1ed17fc80311b20fa8d28d4fe7d21ae9c5bdff2 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Sat, 21 Mar 2020 23:15:58 +0530 Subject: [PATCH 06/51] update readme.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b4d374..e0e1e9b 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A collaborative place for sharing code in realtime! - Run command `npm install` to install all the dependencies required. - Run command `npm start` in the terminal to run the project in development mode. -### For production mode: +#### For production mode: - Run command `npm run build` in the terminal to build the project for production mode. - Initialise the project using Firebase command-line tools and run command `firebase init`. - Run command `firebase serve` in the terminal to start the Web App at `http://localhost:5000/`. \ No newline at end of file From e7710f9ccdfe93d07b215d6c49973a3ea24dde1b Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Sat, 21 Mar 2020 23:16:47 +0530 Subject: [PATCH 07/51] update readme.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index e0e1e9b..d371b66 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ A collaborative place for sharing code in realtime! ## To run the project (locally on your machine): - Clone the project. - Run command `npm install` to install all the dependencies required. + +#### For development mode: - Run command `npm start` in the terminal to run the project in development mode. #### For production mode: From 31bb952a5d29c5e85cbf4ffd9449f6d9ebfc7d19 Mon Sep 17 00:00:00 2001 From: Daksh Khetan <2012daksh@gmail.com> Date: Mon, 23 Mar 2020 19:13:30 +0530 Subject: [PATCH 08/51] add 'disable users-connected editing' feature --- src/components/SideDrawer/SideDrawer.css | 27 +++ src/components/SideDrawer/SideDrawer.js | 10 + src/containers/pages/Coding.js | 286 ++++++++++++++++------- src/containers/pages/Home.js | 13 +- src/containers/pages/Login.js | 50 +--- 5 files changed, 248 insertions(+), 138 deletions(-) diff --git a/src/components/SideDrawer/SideDrawer.css b/src/components/SideDrawer/SideDrawer.css index 4fa04f3..aa32568 100644 --- a/src/components/SideDrawer/SideDrawer.css +++ b/src/components/SideDrawer/SideDrawer.css @@ -37,6 +37,33 @@ background-color: #757575; } +.side-drawer .divider-thick { + margin: 18px auto; + height: 2px; + width: 90%; + background-color: #423939cc; +} + +.side-drawer .creator-info { + display: flex; + align-items: center; + margin: 3px 0; + padding: 0 40px; +} + +.side-drawer .creator-info img { + height: 2.3rem; + width: 2.3rem; + border-radius: 50%; + border: 1px solid #222; +} + +.side-drawer .creator-info span { + color: #000000; + font-size: 1rem; + margin-left: 10px; +} + .side-drawer ul { margin: 0; padding: 0 40px; diff --git a/src/components/SideDrawer/SideDrawer.js b/src/components/SideDrawer/SideDrawer.js index e31baab..0452f99 100644 --- a/src/components/SideDrawer/SideDrawer.js +++ b/src/components/SideDrawer/SideDrawer.js @@ -2,6 +2,7 @@ import React from 'react'; import './SideDrawer.css'; import { usersList } from '../../containers/pages/Coding'; +import { creatorInfo } from '../../containers/pages/Coding'; const sideDrawer = props => { @@ -13,6 +14,15 @@ const sideDrawer = props => { return (