INM420-SAA-Lab6-FL

In this example below you will see how to do a INM420-SAA-Lab6-FL with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Federicola, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Federicola ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
  <head></head>
  <body>
    <div id="app"></div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.6.7/firebase.js"></script>
    <script src="https://unpkg.com/react-router-dom@4.0.0-beta.3/umd/react-router-dom.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    
  </body>
</html>

/*Downloaded from https://www.codeseek.co/Federicola/inm420-saa-lab6-fl-VpZxYL */
    a:link{
  Background-Color: #ff4d4d;
   font-size: 35px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: oblique;
  color: yellow;
  padding: 15px;
  border: 5px solid pink;
  text-decoration: none;
  text-shadow: 1px 1px blue;
}

Body{
  Background-Color:#ff6666;
   font-size: 25px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: oblique;
  color: black
    
;
}

h1{
  text-shadow: 2px 2px white;
}
h3{
  color: #00b38f;
  text-shadow: 2px 2px #ff0000;
}

nav > ul > li{
  display: inline-block;
  margin-right: 10px;
}

p{
  color:#b30059;
  
}

nav{
  background-color
  border: 1px solid pink;
}




/*Downloaded from https://www.codeseek.co/Federicola/inm420-saa-lab6-fl-VpZxYL */
    /*Lab 4
We get your app pulling data from your own Firebase account.
We revisit Lab 2 to show rendering of multiple items. Additional topics covered include conditional classes, and data attributes*/

    var config = {
    apiKey: "AIzaSyBYYqz5NKltJ4cUK95JLsP9dOYEADoj9dM",
    authDomain: "inm420first.firebaseapp.com",
    databaseURL: "https://inm420first.firebaseio.com",
    storageBucket: "inm420first.appspot.com",
    messagingSenderId: "117257275726"
  };
  firebase.initializeApp(config);

////end of firebase config//////

const{
  HashRouter,
  Route,
  Link,
  
} = ReactRouterDOM;

//Step 1: Get your DataLoader loading in YOUR data
/////a class-based component
class DataLoader extends React.Component{
  constructor( {match} ){
    super();
    this.state={}
  }
  render(){
    if(!this.state.data){
      return(
      <h3>Loading Data...</h3>
      )
    }else{
      return(
        <div>
      <ArticleNav data={this.state.data} callBack={this.navigate.bind(this)}/>
      <ArticleRenderer title={this.state.currentTitle} description={this.state.currentDescription} />
          </div>
      )
    }
  }
  
  ////talk to firebase and open up the data connection
  loadData(){
    firebase.database().ref('articles').on('value', snapshot =>{
      console.log(snapshot.val() );
      this.setState({ data: snapshot.val() })
      if(!this.state.currentNavItem){
        this.navigate("uid1")
      }
    })
  }
  navigate(id){
    console.log("We should go to page "+id);
    this.setState(
    {currentNavItem: id,
      currentTitle:this.state.data[id].dummyTitle,
      currentDescription:this.state.data[id].description
    
    }
    )
  }
  componentDidMount(){
    this.loadData();
  }
}

//Step 2: Fake user clicking to get the state being set in DataLoader

//Step 3: Send data, and info about currently selected article to the navigation component
const ArticleNav = props =>{
  const articleChosen =(id)=>{
    console.log("I should navigate to "+id);
    props.callBack(id);
  }
  
  return(
   <div className="left">
      <h1>PPHANTOM TAPES</h1>
      {Object.keys(props.data).map(key => <Article title={props.data[key].dummyTitle} uid={key} callBack={articleChosen} />)}
   </div>
  )
}

const Article = props =>{
  const clickHandler = (evt) =>{
    console.log("Clicked on "+evt.target.dataset.id);
    props.callBack(evt.target.dataset.id);
  }
  return(
    <h3 onClick={clickHandler} data-id={ props.uid }>{props.title}</h3>
  )
}

const ArticleRenderer = props =>{
  return(
  <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
  </div>
  )
}

//////Global Navigation Components
const NavigationBar = props =>{
  return(
    <nav>
      <ul>
        <li><Link to="/CASA">CASA</Link></li>
        <li><Link to="/Future Sounds">Future Sounds</Link></li>
        <li><Link to="/Current Sounds">Current Sounds</Link></li>
        <li><Link to="/Past Sounds">Past Sounds</Link></li>
        <li><Link to="/Login">Login</Link></li>
      </ul> 
    </nav>
  )
}

const Footer = props =>{
  return <footer><p>FOREVER DROWNING IN SLACKER SH*T</p></footer>;
}

////CASA
class HomeLoader extends React.Component{
  constructor(){
    super();
    this.state={};
  }
  render(){
    //////check to see if the data is loaded, if not show a message about loading.....t.w.
    if(!this.state.data){
      return(
      <h3>Loading Data...</h3>
      )
    }else{
      return(
        <section>

          <h1>CASA</h1>
          <h3>{this.state.data.greeting}</h3>
          <h3>{this.state.data.content}</h3>
          <h3>{this.state.data.content2}</h3>

        </section>
      )
    }
  }
  componentDidMount(){
    this.loadData();
  }
    
  loadData(){
    firebase.database().ref('home').on('value', snapshot =>{
      console.log("HOME LOADED DATA");
      console.log(snapshot.val() );
      this.setState({ data: snapshot.val() });
    })
  }
  
}

  //login
  
  class LoginLoader extends React.Component{
  constructor(){
    super();
    this.state={};
  }
  render(){
    //////check to see if the data is loaded, if not show a message about loading.....t.w.
    if(!this.state.data){
      return(
      <h3>Loading Data...</h3>
      )
    }else{
      return(
        <section>

          <h1>Login</h1>
          <h3>{this.state.data.mahalo}</h3>
          

        </section>
      )
    }
  }
  componentDidMount(){
    this.loadData();
  }
  //end of login
    
  loadData(){
    firebase.database().ref('login').on('value', snapshot =>{
      console.log("LOGIN LOADED DATA");
      console.log(snapshot.val() );
      this.setState({ data: snapshot.val() });
    })
  }
  
}

class App extends React.Component{
  render(){
    return(
     <HashRouter>
        <div>
          <Route path="/" component={NavigationBar} />
          <Route exact path="/" component={HomeLoader} />
          <Route exact path="/" component={LoginLoader} />
          <Route path="/Future Sounds" component={DataLoader} />
        
        </div>
     </HashRouter>
    )
  }
}


ReactDOM.render(<App />, document.querySelector('#app'));

Comments