📝: Refactor firebase code

[paulywill]

Task Description

Some of the problems and confusing is stemming from a firebase tutorial I used to implement the "google sign-in" button.

firebase has a much simpler solution : firebaseui-web-react

Getting the example they provided did take some time but I finally resolved.

Function

Using the firebaseui-web-react will simplify our components big time! This allows easy flexibility in the future... ie adding Github, Facebook, etc. This should also eliminate the need for so many nested components.

My only concern/observation is the elimination or need for 404 routing.

Here's the basic setup:

/
// React core.
import React from 'react';
import ReactDOM from 'react-dom';

// Firebase.
import firebase from 'firebase/app';
import 'firebase/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

// Styles
import styles from './app.css'; // This uses CSS modules.
import './firebaseui-styling.global.css'; // Import globally.

// Get the Firebase config from the auto generated file.
const firebaseConfig = require('./firebase-config.json').result;

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp(firebaseConfig);

/**
 * The Splash Page containing the login UI.
 */
class App extends React.Component {
  uiConfig = {
    signInFlow: 'popup',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: () => false,
    },
  };

  state = {
    isSignedIn: undefined,
  };

  /**
   * @inheritDoc
   */
  componentDidMount() {
    this.unregisterAuthObserver = firebaseApp.auth().onAuthStateChanged((user) => {
      this.setState({isSignedIn: !!user});
    });
  }

  /**
   * @inheritDoc
   */
  componentWillUnmount() {
    this.unregisterAuthObserver();
  }

  /**
   * @inheritDoc
   */
  render() {
    return (
      <div className={styles.container}>
        <div className={styles.logo}>
          <i className={styles.logoIcon + ' material-icons'}>photo</i> My App
        </div>
        <div className={styles.caption}>This is a cool demo app</div>
        {this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
          <div>
            <StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
                                firebaseAuth={firebaseApp.auth()}/>
          </div>
        }
        {this.state.isSignedIn &&
          <div className={styles.signedIn}>
            Hello {firebaseApp.auth().currentUser.displayName}. You are now signed In!
            <a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a>
          </div>
        }
      </div>
    );
  }
}

// Load the app in the browser.
ReactDOM.render(<App/>, document.getElementById('app'));

Feature

90 - Hamburger / Settings page

[paulywill]

As far as the 404 error it looks as though Facebook still loads everything except the page in the middle of the content if that page does not exist:

[paulywill]

WIP: https://github.com/paulywill/v8-geckos-team-07/tree/fix/firebase-ui

This change is breaking the working state of our dev build (ie all the links and passing state) however already there's massive improvement IMO.

Goal:

• eliminate the need for the following:
  • Layout.js
  • withAuthentication
  • HeaderLoggedIn.js
  • SocialButtonList.js
  • SocialProfileList.js
• place App.js back into default location as best practices IMO

App.js:

<div className={styles.container}>
        {this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
          //Not signed-in yet
          <div>
            <Header />
            <div className="circle">
              <h2>A simple way to measure whether you did a habit.</h2>
              <ol>
                <li>Sign in using Google</li>
                <li>Create a habit to track</li>
                <li>Check in to reflect and log your&nbsp;progress</li>
                <li>Review your data to help you along your journey</li>
              </ol>
              <p>Happy Tracking!</p>
            </div>  
            <StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
              firebaseAuth={firebaseApp.auth()} />
            <Footer />
          </div>
        }

        {this.state.isSignedIn &&
          //Signed in
          <div className={styles.signedIn} id="content-wrap">
            <Header providerData={this.state.providerData} />
            <Dashboard />
          <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>
            <Footer /> 
          </div>
        }      
      </div>

Header.js:

import React from 'react';

const Header = (props) => (

    <header className="App-header">            
        {props.providerData && <button           
            aria-haspopup="true"
            aria-expanded={"false"}
            id="hamburger-menu" >
            <i className="main-button-icon fa fa-bars fa-3x"></i>
        </button>}
            <h1>Habit Tracker</h1>         
        {props.providerData &&            
                        <img src={props.providerData[0].photoURL}
                             alt={props.providerData[0].providerName}
                             className="container__profile--photo" />                 
               }           
    </header>
);

export default Header;

[paulywill]

Errr... was making massive progress and now stuck.

Strangely previous code we have running on dev build passes user's data correctly when running Firebase function right in component. However when trying to fetch values from props when passing to Dashboard.js ... no luck.

Opened a Stackoverflow question: https://stackoverflow.com/questions/55897496/firebase-providerdata-passed-in-props-trouble-accessing-in-componentdidmount

Stumped on state / props / and whether super constructor is still required.

[paulywill]

Starting to see some light at the end of the tunnel again.

Still, have to bring back to working order:

• [ ] Get modals to pop-up again
• [ ] All buttons to work correctly/flow (ie Exit button on New Habit)
• [ ] hamburger menu to show up again -> #90
• [ ] Refresh after <CurrentHabit {...this.state.habitData} /> finishes fetching data
• [ ] resolve two outstanding console warnings
• [ ] test on separate heroku / response time before PR

2224dc0:
There still 2 warnings; 1 for unused var that's breaks everything if I remove it: checkInComplet checkInComp = null; The other warning message is for the sign-out button link. Want's a valid href in the <a> tag.