Changed db to firestore and fixed a little front-end bug.

bianca-mihaela-stan · Jun 2, 2021 · a6cd164 · a6cd164
1 parent 79d48d2
commit a6cd164
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 21 deletions.
diff --git a/meetsy/package-lock.json b/meetsy/package-lock.json
diff --git a/meetsy/package.json b/meetsy/package.json
@@ -26,6 +26,7 @@
     "peer": "^0.6.1",
     "peerjs": "^1.3.2",
     "react": "^17.0.2",
+    "react-big-calendar": "^0.33.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-jss": "^10.6.0",

diff --git a/meetsy/src/components/App/index.js b/meetsy/src/components/App/index.js
@@ -18,19 +18,19 @@ import { AuthUserContext } from '../Session';
 import * as ROUTES from '../../constants/routes';
 import { withAuthentication } from '../Session';
 import HeaderComponent from '../Header';
- 
+import {COLORS} from '../../constants/designConstants';
 const styles = StyleSheet.create({
-  container: {
-    height: '100vh'
-  },
+
   content: {
     marginTop: 54
   },
   mainBlock: {
       // backgroundColor: '#F7F8FC',
       // #1C1F21 #131516 
       backgroundColor: '#131516',
-      padding: 30
+      padding: 30,
+      minHeight: '100vh',
+      color: `${COLORS.body}`
   }
 });
 
@@ -39,6 +39,7 @@ const App = () => (
   <Router>
     <div>
     <Row className={css(styles.container)}>
+
       <Navigation />
       <Column flexGrow={1} className={css(styles.mainBlock)}>
       <AuthUserContext.Consumer>

diff --git a/meetsy/src/components/Firebase/firebase.js b/meetsy/src/components/Firebase/firebase.js
@@ -31,10 +31,8 @@ class Firebase {
       firebase.initializeApp(firebaseConfig);
 
       this.auth = firebase.auth();
-      this.db = firebase.database();
+      this.db = firebase.firestore();
     }
-
-
   // *** Auth API ***
 
     doCreateUserWithEmailAndPassword = (email, password) =>
@@ -49,12 +47,43 @@ class Firebase {
 
     doPasswordUpdate = password =>
          this.auth.currentUser.updatePassword(password);
-
+    // ** Merge Auth and DB User API
+    onAuthUserListener = (next, fallback) =>
+         this.auth.onAuthStateChanged(authUser => {
+           if (authUser) {
+             this.user(authUser.uid)
+               .get()
+               .then(snapshot => {
+                 const dbUser = snapshot.data();
+
+                 // default empty roles
+                 if (!dbUser.roles) {
+                   dbUser.roles = {};
+                 }
+
+                 // merge auth and db user
+                 authUser = {
+                   uid: authUser.uid,
+                   email: authUser.email,
+                   emailVerified: authUser.emailVerified,
+                   providerData: authUser.providerData,
+                   ...dbUser,
+                 };
+
+                 next(authUser);
+               });
+           } else {
+             fallback();
+           }
+         });
      // *** User API ***
 
-    user = uid => this.db.ref(`users/${uid}`);
+     user = uid => this.db.doc(`users/${uid}`);
 
-    users = () => this.db.ref('users');
+     users = () => this.db.collection('users');
+    get Db(){
+      return this.db;
+    }
 }
 
 export default Firebase;
diff --git a/meetsy/src/components/Landing/SidebarLanding.js b/meetsy/src/components/Landing/SidebarLanding.js
@@ -87,7 +87,7 @@ padding: 0 2 rem;
 }
 p{
     text-align: center;
-    color: white !important;
+    color: white;
     font-size: 24px;
   }
 `;

diff --git a/meetsy/src/components/Meet/meet.css b/meetsy/src/components/Meet/meet.css
@@ -2,7 +2,7 @@ body {
     margin: 0;
 }
 p{
-    color: black !important;
+    color: black;
 }
 
 .flex-container {

diff --git a/meetsy/src/components/Navigation/index.js b/meetsy/src/components/Navigation/index.js
@@ -13,13 +13,19 @@ import MenuItemComponent from './MenuItemComponent';
 import IconMeeting from '../../assets/icon-meeting.js';
 import ProfileImage from './ProfileImage';
 const styles = StyleSheet.create({
+  dummyContainer: {
+    marginLeft: '6vw',
+  },
   container: {
     //'#0e0f10
+    position: 'fixed',
     backgroundColor: '#090A0B',
     width: '6vw',
     overflow: 'hidden',
     // borderRight: '1px solid',
-    borderColor: '#363336'
+    borderColor: '#363336',
+    top: '0',
+    left: '0'
 
   },
   menuCtn: {
@@ -48,6 +54,7 @@ const Navigation = () => (
 );
 
 const NavigationAuth = () => (
+  <div className={css(styles.dummyContainer)}>
   <Column className={css(styles.container)} >
     <Column className={css(styles.menuCtn)} >
       <Column className={css(styles.menuItemList)} >
@@ -79,6 +86,7 @@ const NavigationAuth = () => (
       </ProfileImage> */}
     </Column>
   </Column>
+  </div>
 );
 
 const NavigationNonAuth = () => (

diff --git a/meetsy/src/components/Room/room.css b/meetsy/src/components/Room/room.css
@@ -1,4 +1,4 @@
 p
 {
-    color:white !important;
+    color:white;
 }
diff --git a/meetsy/src/components/SignIn/index.js b/meetsy/src/components/SignIn/index.js
@@ -7,6 +7,7 @@ import * as ROUTES from '../../constants/routes';
 import { PasswordForgetLink } from '../PasswordForget'; 
 import { StyleSheet, css } from 'aphrodite';
 import  styled  from "styled-components";
+import { withAuthorization } from '../Session';
 
 
 const SignInLink = () => (
@@ -59,7 +60,7 @@ const Container = styled.div`
      align-items: center;
      p 
      {
-       color: #fff !important;
+       color: #fff;
      }
 `;
 const StyledInput = styled.input`
@@ -69,6 +70,7 @@ const StyledInput = styled.input`
  height: 40px;
  border: none;
  margin: 0.5rem 0;
+ color: #393c41;
  background-color: #f5f5f5;
  box-shadow:  0px 14px 9px -15px rgba(0,0,0,0.25);
  border-radius: 32px;
@@ -177,6 +179,8 @@ const SignInForm = compose(
   withFirebase,
 )(SignInFormBase);
 
-export default SignInPage;
+const condition = authUser => !authUser;
+export default withAuthorization(condition)(SignInPage);
 
+
 export { SignInForm, SignInLink };
diff --git a/meetsy/src/components/SignUp/index.js b/meetsy/src/components/SignUp/index.js
@@ -77,7 +77,8 @@ class SignUpFormBase extends Component {
           .set({
             username,
             email,
-          });
+          },
+          {merge: true});
       })
       .then(() => {
         this.setState({ ...INITIAL_STATE });
@@ -164,14 +165,14 @@ const Container = styled.div`
      align-items: center;
      p 
      {
-       color: #fff !important;
+       color: #fff;
      }
 `;
 const Terms = styled.p` 
    padding: 0 1rem;
    text-align: center;
    font-size: 11px;
-   color: #fff !important;
+   color: #fff;
    font-weight: 300;
 `;
 const StyledInput = styled.input`
@@ -185,6 +186,7 @@ const StyledInput = styled.input`
  box-shadow:  0px 14px 9px -15px rgba(0,0,0,0.25);
  border-radius: 32px;
  padding:  0 1rem;
+ color: #393c41;
  &:hover{
   outline-width: 0;
  }

diff --git a/meetsy/src/constants/designConstants.js b/meetsy/src/constants/designConstants.js
@@ -0,0 +1,9 @@
+
+
+export const COLORS =  {
+    body: 'white',
+    bodyLight: 'f4f4f4',
+    primaryBlue: '#3e6ae1',
+    primaryBg: '#131516',
+    inputGrey: '#393c41'
+}
diff --git a/meetsy/src/index.css b/meetsy/src/index.css
@@ -6,7 +6,9 @@ p, h1,h2,h3,h4,h5,h6{
   color: white;
   font-family: 'Poppins', sans-serif;;
 }
-
+html, body {
+  height: auto;
+}
 
 body {
   margin: 0;