retro

iDanbo · Nov 30, 2018 · 63a2600 · 63a2600
1 parent 831c661
commit 63a2600
Show file tree

Hide file tree

Showing 18 changed files with 505 additions and 33 deletions.
diff --git a/.netlify/state.json b/.netlify/state.json
@@ -0,0 +1,3 @@
+{
+	"siteId": "333362bb-34db-4636-8b8d-959ffcdf221e"
+}
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,12 +18,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Slurp Retro</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/App.js b/src/App.js
@@ -5,16 +5,19 @@ import firebase from 'firebase';
 import base from './base';
 import Main from './components/Main';
 
-class Home extends Component {
+class App extends Component {
   state = {
     uid: '',
     name: '',
+    loading: false,
   };
 
   componentDidMount() {
     // On mount check for if user is already authenticaed
     firebase.auth().onAuthStateChanged(user => {
-      user && this.authHandler({ user });
+      if (user) {
+        this.authHandler({ user });
+      }
     });
   }
 
@@ -35,15 +38,16 @@ class Home extends Component {
     const authProvider = new firebase.auth[`GoogleAuthProvider`]();
     firebase
       .auth()
-      .signInWithPopup(authProvider)
+      .signInWithRedirect(authProvider)
       .then(this.authHandler);
   };
   render() {
     if (!this.state.uid) {
       return <Login authenticate={this.authenticate} />;
     }
+
     return <Main logout={this.logout} uid={this.state.uid} name={this.state.name} />;
   }
 }
 
-export default Home;
+export default App;
diff --git a/src/Routes.js b/src/Routes.js
@@ -5,9 +5,52 @@ import App from './App';
 import Main from './components/Main';
 import typography from './utils/typography';
 import fontFiles from './fonts/index.js';
+import GodMode from './components/GodMode';
 
 const GlobalStyles = createGlobalStyle`
  ${typography}
+
+:root {
+  --main-color: #0055FF;
+  --bg-color: #f8f8f8;
+}
+
+body,html {
+    margin: 0px;
+    padding: 0px;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+body {
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    background: var(--bg-color);
+}
+
+  button {
+    min-width: 75px;
+    min-height: 25px;
+    background: var(--main-color);
+    padding: 0;
+    cursor: pointer;
+    color: white;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    &:focus {
+      outline: none;
+    }
+    &:disabled {
+      background: lightgrey;
+      cursor: auto;
+    }
+  }
+
  @font-face {
     font-family: "Gotham Rounded";
     font-style: normal;
@@ -48,6 +91,7 @@ class Routes extends Component {
       <React.Fragment>
         <GlobalStyles />
         <Router>
+          <GodMode path="godmode" />
           <App path="/*" />
         </Router>
       </React.Fragment>

diff --git a/src/components/AddCard.js b/src/components/AddCard.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import { log } from 'util';
+
+const Content = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  max-width: 500px;
+  width: 80%;
+  min-height: 200px;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px;
+  border-radius: 15px;
+  overflow: hidden;
+  background: white;
+  margin: auto;
+
+  p {
+    padding: 20px;
+    margin: 0;
+    color: ${props => props.color};
+  }
+`;
+
+const InputWithButton = styled.div`
+  display: grid;
+  grid-template-rows: 1fr 40px;
+  border-radius: 15px;
+  overflow: hidden;
+
+  background: white;
+  button {
+    border-radius: 0px;
+    background: ${props => props.color};
+  }
+
+  input,
+  textarea {
+    background: white;
+    color: ${props => props.color};
+    border-radius: 0;
+    display: block;
+    text-align: center;
+    width: 100%;
+    &:focus {
+      outline: none;
+    }
+  }
+  textarea {
+    resize: none;
+    border: none;
+    text-align: left;
+    display: inline-block;
+    width: 100%;
+    margin: auto;
+    font-weight: lighter;
+    border-radius: 5px;
+    text-align: center;
+  }
+`;
+
+class AddCard extends React.Component {
+  textRef = React.createRef();
+
+  handleClick = () => {
+    let text = this.textRef.current.value;
+    text && this.props.addStuff(text);
+    this.textRef.current.value = '';
+  };
+
+  render() {
+    return (
+      <Content color={this.props.color}>
+        <p>{this.props.text}</p>
+        <InputWithButton color={this.props.color}>
+          <textarea ref={this.textRef} placeholder="Type here anything" />
+          <button onClick={this.handleClick}>Add</button>
+        </InputWithButton>
+      </Content>
+    );
+  }
+}
+
+export default AddCard;
diff --git a/src/components/Card.js b/src/components/Card.js
diff --git a/src/components/DisplayCard.js b/src/components/DisplayCard.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const Card = styled.div`
+  display: inline-block;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px;
+  background: white;
+  color: ${props => props.color};
+  border-radius: 15px;
+  max-width: 80%;
+  margin: ${props => props.margin};
+
+  p {
+    padding: 10px;
+    margin: 0;
+  }
+`;
+
+class DisplayCard extends React.Component {
+  handleRemove = () => {
+    this.props.removeStuff(this.props.index);
+  };
+  render() {
+    return (
+      <Card color={this.props.color} onClick={this.handleRemove} margin={this.props.margin || 0}>
+        <p>{this.props.text}</p>
+      </Card>
+    );
+  }
+}
+
+export default DisplayCard;
diff --git a/src/components/GodDisplayCard.js b/src/components/GodDisplayCard.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const Card = styled.div`
+  display: inline-block;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px;
+  background: white;
+  color: ${props => props.color};
+  border-radius: 15px;
+  max-width: 80%;
+  margin: ${props => props.margin};
+
+  p {
+    padding: 10px;
+    margin: 0;
+  }
+`;
+
+class GodDisplayCard extends React.Component {
+  //   handleRemove = () => {
+  //     this.props.index && this.props.removeStuff(this.props.index);
+  //   };
+  render() {
+    return (
+      <Card color={this.props.color} margin={this.props.margin || 0}>
+        <p>{this.props.text}</p>
+      </Card>
+    );
+  }
+}
+
+export default GodDisplayCard;
diff --git a/src/components/GodMode.js b/src/components/GodMode.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import base from '../base';
+import styled from 'styled-components';
+import { goodColor, badColor } from '../utils/colors';
+import GodDisplayCard from './GodDisplayCard';
+
+const Cards = styled.div`
+  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const Content = styled.div`
+  padding: 1rem;
+  .title {
+    color: rgb(80, 80, 80);
+    font-weight: lighter;
+  }
+`;
+
+class GodMode extends Component {
+  state = {
+    firebase: {},
+  };
+
+  componentDidMount() {
+    this.ref = base.bindToState('app', {
+      context: this,
+      state: 'firebase',
+      asArray: false,
+      then: () => console.log(this.state.firebase),
+    });
+  }
+
+  componentWillUnmount() {
+    base.removeBinding(this.ref);
+  }
+
+  render() {
+    const goods = Object.keys(this.state.firebase).map(person => this.state.firebase[person].good);
+    const bads = Object.keys(this.state.firebase).map(person => this.state.firebase[person].bad);
+    const good = [].concat(...goods);
+    const bad = [].concat(...bads);
+
+    return (
+      <Content>
+        <h4 className="title">You are in God mode now 😇 Discuss with other Gods and make our lives better 🌞🦋🌸</h4>
+        <Cards>
+          {good.map(text => (
+            <GodDisplayCard text={text} color={goodColor} margin="10px" />
+          ))}
+        </Cards>
+        <Cards>
+          {bad.map(text => (
+            <GodDisplayCard text={text} color={badColor} margin="10px" />
+          ))}
+        </Cards>
+      </Content>
+    );
+  }
+}
+
+export default GodMode;