Tim Carlson
Winter 2025

<info 340/>

Firebase

View of the Day

  • Final Draft Requirements

    • Grading Group Projects

  • Firebase

    • Configuration

    • Database

    • Authentication (only if time)

Some Firebase material you can find in
the videos & textbook if you want to do before next Tuesday's lecture

Project Final Draft

For the Final Draft of the project, we're looking for it to be totally complete! See the Canvas page for full details.

  • Well-structured and appropriate HTML (in React)
  • Well-constructed React Components. Uses props and state!
  • Interactive features: "two and a half" significant features
  • Routing and navigation Needs multiple pages; url params
  • External React Library rendering a Component. react-bootstrap is okay (if used meaningfully e.g., interactive widget)
  • Data Persistence through Firebase (includes asynchronous work; effect hooks, etc)
  • Good Visual Style, Accessibility, Responsiveness
  • Correct code style -- check the course textbook!

Project Final Draft

Final Projects will be graded in two parts:

  1. Group portion (50%): has your group implemented a complete project? Does it meet all requirements; etc.
    ​
  2. Individual mastery (50%): have you individually demonstrated that you've learned the material (HTML, CSS, React)?
    • Need git commits that show you've contributed to all these
    • If you have not demonstrated you've learned the material, you will not get full credit.
    • "Supporting the group" (helping others learn, etc) will earn extra credit. Failure to work effectively in a group (poor communication, missing deadlines, etc) will reduce score.
      This is not a measure of "how much work you did", but how well you worked with your team.
...
import { Routes, Route, Outlet, Navigate, useNavigate } from 'react-router-dom';
...
export default function App(props) {
...
const navigateTo = useNavigate(); //navigation hook
...
const loginUser = (userObj) => {
    console.log("logging in as", userObj.userName);
    setCurrentUser(userObj);
    if(userObj.userId !== null){
      navigateTo('/chat/'); //go to chat after login
    }
  }
...
      <Routes>
...
        {/* protected routes */}
        <Route element={<ProtectedPage currentUser={currentUser} />}>
          <Route path="chat/:channelName" element={<ChatPage currentUser={currentUser} />} />
        </Route>
      </Routes>
    </div>
  );
}

function ProtectedPage(props) {
  //...determine if user is logged in
  if(props.currentUser.userId === null) { //if no user, send to sign in
    return <Navigate to="/signin" />
  }
  else { //otherwise, show the child route content
    return <Outlet />
  }
}

Import 'Navigate' and 'useNavigate'

Get the hook (useNavigate)

'navigate' to a specific Route outside of 'return' statement code

Navigate Component - used to change url path within a 'return' statement

'Navigate' and 'useNavigate' Examples

Example 1

Example 2

import React, { useState, useEffect } from 'react';
import { Routes, Route, Outlet, Navigate, useNavigate } from 'react-router-dom';
import { HeaderBar } from './HeaderBar.js';
import ChatPage from './ChatPage';
import SignInPage from './SignInPage';
import * as Static from './StaticPages';

import DEFAULT_USERS from '../data/users.json';

export default function App(props) {
  //state
  const [currentUser, setCurrentUser] = useState(DEFAULT_USERS[0]) //default to null user

  const navigateTo = useNavigate(); //navigation hook

  //effect to run when the component first loads
  useEffect(() => {
    //log in a default user
    loginUser(DEFAULT_USERS[1])

  }, []) //array is list of variables that will cause this to rerun if changed

first time component is rendered login a user

 Effect Hook to login user when component initialized 1st time

initialize state to the null user

import React from 'react';

import { ChannelList } from './ChannelList.jsx';
import { ChatPane } from './ChatPane.jsx';

const CHANNEL_NAMES = ["general", "social", "random", "birds", "dank-memes"];


export default function ChatPage(props) {
  const {currentUser, messageArray, addMessageFunction} = props;

  return (
    <div className="row flex-grow-1">
      <div className="col-3">
        <ChannelList channelNames={CHANNEL_NAMES} />
      </div>
      <div className="col d-flex flex-column">
        <ChatPane
          currentUser={currentUser}
          messageArray={messageArray}
          addMessageFunction={addMessageFunction}
        />
      </div>
    </div>
  )
}

 Chat Page

import React, {useState} from 'react';
import Button from 'react-bootstrap/Button'
import { useParams } from 'react-router-dom';

import { ComposeForm } from './ComposeForm.jsx';

export function ChatPane(props) {
  const { messageArray, addMessageFunction, currentUser} = props;

  //from url parameters
  const paramsObj = useParams();
  const currentChannel = paramsObj.chanName || "general" //default

  //data processes
  const messagesToShow = messageArray
    .filter((messageObj) => {
      return messageObj.channel === currentChannel; //keep
    })
    .sort((m1, m2) => m2.timestamp - m1.timestamp); //reverse chron order

  //content to display
  const messageElemArray = messagesToShow.map((messageObj) => {
    const messageElem = (
      <MessageItem messageData={messageObj} key={messageObj.timestamp} />
    );
    return messageElem; //put it in the new array!
  });

    const handleTestClick = (event) => {
    console.log("testing...");
  }
///...more on next slide

 Chat Pane (part 1)

just a test test function for showing firebase stuff off button click

using params for current channel

filter list (and sort) to current channel 

transform to message items

 return (
    <> {/* fake div */}
      <div className="scrollable-pane pt-2 my-2">
      <Button className="justify-content-start" variant="warning" onClick={handleTestClick}> Test</Button>
      <p></p>
          
          {/* conditional rendering */}
           { messageElemArray.length === 0 && 
            <p>No messages found</p>
          }

          {messageElemArray}
        </div>

        <ComposeForm 
          currentUser={currentUser}
          currentChannel={currentChannel} 
          addMessageFunction={addMessageFunction} />
    </>
  )
}
///...more on next slide

 Chat Pane (part 2)

Compose Form now is rendered in Chat Pane.

Conditional rendering: if there are no messages display that fact

Test button for demo'ing firebase at start of lecture

 function MessageItem(props) {
  const messageData = props.messageData;
  const {userName, userImg, text, isLiked} = messageData;

  const handleClick = function(event) {
    console.log("you like me! you really like me!")
  }


  //decide what it looks like
  let buttonColor = "grey";
  if(isLiked) {
    buttonColor = "red"; //filled in
  }

  return (
   <div className="message d-flex mb-3">
    <div className="me-2">
      <img src={userImg} alt={userName+"'s avatar"}/>
    </div>
    <div className="flex-grow-1">
      <p className="user-name">{userName}</p>
      <p>{text}</p>
      <button className="btn like-button" onClick={handleClick}>
          <span className="material-icons" style={{ color: buttonColor }}>favorite_border</span>
      </button>
    </div>
   </div> 
  )
}

 Chat Pane (part 3)

See textbook

https://info340.github.io/firebase.html

Firebase

Firebase is a web backend solution; it provides multiple features which you can access without need to "code" them yourselves.

  • Web Hosting
  • Databases
  • User Authentication

Firebase Realtime Database

  • Real-time database for accessing data in the cloud
     
  • Can be simultaneously accessed and modified by multiple clients
     
  • Data can be edited, added to, deleted from and viewed directly within the firebase console directly
     
  • Each element of the JSON object is accessible via AJAX requests

https://firebase.google.com/

import React from 'react';
import ReactDOM from 'react-dom/client';

import { BrowserRouter } from 'react-router-dom';
import { initializeApp } from "firebase/app"; //added from firebase
//import CSS
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './components/App';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyChR-uCZQrXIuC8l0QGQynq6D6z43cRXN8",
  authDomain: "react-chat-firebase1-temp.firebaseapp.com",
  projectId: "react-chat-firebase1-temp",
  storageBucket: "react-chat-firebase1-temp.appspot.com",
  messagingSenderId: "1052807428829",
  appId: "1:1052807428829:web:ab93f7be8ab5e149f47934"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Demo - Changing Code to use  firebase db

main.jsx

Firebase Database Security Rules

  • Since all elements are accessible easily via AJAX requests, Firebase has security rules to apply credentialing for user access
     
  • Within your DB JSON tree there is a "rules" branch with .read and .write properties.
  • For our purposes we will be using "test mode" with both .read and .write set to 'true'.

If you want to edit the date rules you can convert the date string to paste in: https://www.epochconverter.com/

Use "Timestamp in milliseconds"

Firebase Realtime Database

database object in js file

database json object in firebase

Firebase Database Reading and Writing Data

  • To get access to your database, first import the getDatabase module from 'firebase/database'
  • Then to modify values you get a reference through the ref() method
  • This method takes the key-path of the element as a parameter:
...
import { getDatabase, ref} from 'firebase/database'; //realtime database

export function ChatPane(props) {
...

const handleTestClick = (event) => {
    console.log("testing...");

    //add to database
    const db = getDatabase();
    const messageRef = ref(db, "message") //refers to the message key in the database
    console.log(messageRef);

    const profLastNameRef = ref(db, "professor/lastName");
    console.log(profLastNameRef);

  }

...
return (
    <div className="scrollable-pane">
      <div className="pt-2 my-2">
        <Button className="justify-content-start" variant="warning" onClick={handleTestClick}> Test</Button>
        <p> </p>
        {messageItemArray}
      </div>
    </div>
  )
}

import getDatabase, ref

database ref

message ref

url type path to get to subkeys

Firebase: Getting a reference to fb node

Firebase: Writing Data

You can modify an entry using the .set() method. It takes 2 arguments, the db reference and the new value

Firebase: Writing Data (new entry)

New entries also require getting the reference, and using the setter providing an object with the values to be written

...
import { getDatabase, ref, set as firebaseSet} from 'firebase/database'; //realtime database

export function ChatPane(props) {
...
  const handleTestClick = (event) => {
    
    //get database
    const db = getDatabase();
    
    const messageRef = ref(db, "message")
    
    firebaseSet(messageRef, "You clicked me!");

    const profFirstNameRef = ref(db, "professor/firstName")
    
    firebaseSet(profFirstNameRef, "Timothy");

    const profCourseRef = ref(db, "professor/courseNumber");
    
    firebaseSet(profCourseRef, "INFO 340");

  }

...
  return (
...
  )
}

Demo - Update or Create data to Firebase

import and alias 'set'

If the reference doesn't exist yet, then the node will be created when calling set!

get db reference

get ref to message

update message

firstName ref

update firstName

...
import { getDatabase, ref, set as firebaseSet} from 'firebase/database'; 
...
function App(props) {
...

  const addMessage = (messageText) => {
    const userObj = currentUser;
    const newMessageObj = {
      "userId": userObj.userId,
      "userName": userObj.userName,
      "userImg": userObj.userImg,
      "text": messageText,
      "timestamp": Date.now(),
      "channel": currentChannel
    } 

    // const updateChatMessages = [...chatMessages, newMessage];
    // setChatMessages(updateChatMessages); //update state and re-render
    const db = getDatabase();
    const messageRef = ref(db,"message");

    firebaseSet(messageRef, newMessageObj);

  }


  return (
  )

}

Demo - Write single message string

import libraries from fb

addMessage function in ChatPage

 Write the newMessageObj to Firebase  at the "message" key  instead of updating the state variable

Firebase: Set method is async 

The set method returns promise because it is async

Firebase : Listening for Data Changes

As a real-time DB, data can change anytime. Firebase provides event listener .onValue to allow apps to respond and update.

  • .onValue() takes two parameters: the database reference and a callback function
  • The 'value' event is most common event which registers when data is created or changes.
  • The callback function is passed back a "data snapshot" object as a param
  • This is just a wrapper around the JSON tree. Use .val()  to get the value

 

Firebase DB - Use EffectHook (and Cleanup)

  • Listener goes inside  EffectHook because it includes network access
  • Cleanup function to prevent memory leak when component removed
...
import { getDatabase, ref, set as firebaseSet, onValue} from 'firebase/database'; 
...
export function App(props) {
...
  const db = getDatabase();
  const messageRef = ref(db, "message");
  
  useEffect(() => {
    onValue(messageRef, (snapshot) =>{
      const newValue = snapshot.val();
      console.log("firebase value changed")
      console.log(snapshot);
      console.log("new value: ", newValue)
    })
  }, []);


  const addMessage = (messageText) => {
    
...
    } 

    const db = getDatabase();
    const messageRef = ref(db,"message");
    firebaseSet(messageRef, newMessageObj);
  }

  return (
...  )
}

Demo - Adding listener for db changes

'onValue' event listener

Load onValue in effect hook so it loads once when Component instantiates

Use the returned 'snapshot' to get the value by using 'snapshot.val()'


export default function ChatPage(props) {
   const [messageStateArray, setMessageStateArray] = useState([]);

 ...
 
 const db = getDatabase();
  const messageRef = ref(db, "message");

 useEffect(() => {
    const offFunction = onValue(messageRef, (snapshot) =>{
      const newMessageObj = snapshot.val();
      console.log(newMessageObj);

     const updateMessageStateArray = [...messageStateArray, newMessageObj];
     setMessageStateArray(updateMessageStateArray); //update state and re-render
    
     function cleanup() {
      console.log("Component is being removed")
      offFunction();
     }
     return cleanup;
    })
  }, []);

Use the data to update the message and add the unregister function

Now update our state variable with what we have in firebase

start with empty array of messages

onValue() returns the function to turn itself off

return the function that will be run when component is removed from DOM

Firebase : Arrays

  • Firebase does not directly support arrays
     
  • This is because it needs to support concurrent access and indexes could change if multiple are manipulating items at same time.
     
  • Firebase treats all items as Objects, thus each value in the JSON tree has a unique key.
     
  • Firebase offers the push() method for adding values with an auto-generated key

Firebase : Using Push to add data to FB Array 

Produces the following structure in the firebase database:​

  • Notice how each task is an object with a unique key​
  • Instead of using an array index from 0 to length, you use the key as index

Ways to "Array-ify" the Firebase Objects 

Firebase supports "forEach()" to iterate through elements

To do more complex actions, (like map() or filter() )  you need a real array.

Call Object.keys() on the snapshot.val() to get an array of keys.

You can then iterate/map using bracket notation.

  • When iterating through array this way, you need to keep track of the key in the object as identifier to ref() and modify later

Get the task objects from snapshot

Call Object.keys() to get array of keys

now you have an array to do your normal stuff



...
import { getDatabase, ref, set as firebaseSet, onValue, push as FirebasePush} from 'firebase/database'; 
...
export function App(props) {
...
  const db = getDatabase();
  const allMessagesRef = ref(db, "allMessages");
  
  useEffect(() => {
    
      const offFunction = onValue(allMessagesRef, function(snapshot) {
      const allMessagesObj = snapshot.val();
      const objKeys = Object.keys(allMessagesObj);
      
      const objArray = objKeys.map((keyString) => {
        allMessagesObj[keyString].key = keyString;
        return allMessagesObj[keyString];
      })
      
     setChatMessages(objArray); 
    
     function cleanup() {
      offFunction();
     }
     return cleanup;
    })
  }, []);

pull together, messagearray, add key

add firebase push method

set State to the whole messageArray

Point to 'allMessage' ref in firebase now

Add 'onValue' listener to reference which contains all message objects

Create array of keys

Map to array message objects

Add the firebase reference key to the object for later use. Adds the key to each object in your data structure in this new array.

I can use this for the 'liked' attribute on a message

...
import { getDatabase, ref, set as firebaseSet, onValue, push as FirebasePush} from 'firebase/database'; 
...
export function App(props) {
...
  const db = getDatabase();
  const allMessagesRef = ref(db, "allMessages");
  
  ...
    const addMessage = (userObj, text, channel) => {
    const newMessageObj = {
      "userId": userObj.userId,
      "userName": userObj.userName,
      "userImg": userObj.userImg,
      "text": text,
      "timestamp": Date.now(),
      "channel": channel
    }

    const db = getDatabase();
    const allMessagesRef = ref(db,"allMessages");

    FirebasePush(allMessagesRef, newMessageObj);
  
  }
...

part 2, now we push elements in addMessage

ref to the allMessages key

push new message to allMessages location in firebase

import React, { useState } from 'react';
import { getDatabase, ref, set as firebaseSet} from 'firebase/database'; 

export function ChatPane(props) {
...
}
function MessageItem(props) {
  const { userName, userImg, text, key, liked } = props.messageData;

   const handleClick = (event) => {
    console.log("you liked " + userName + "'s post!");
    const db = getDatabase();
    const likeRef = ref(db, "allMessages/"+key+"/liked");
    // setIsLiked(!isLiked); //toggle
    firebaseSet(likeRef, !liked)
  }

  //RENDERING
  let heartColor = "grey";
  if (liked) {
    heartColor = "red";
  }

  return (
 ...
    <button className="btn like-button" onClick={handleClick}>
...
  )
}

Fix up the 'like' feature in MessgeItem

import firebase stuff

set 'liked' value in firebase when clicked on

read in item key and liked value

Effect Hooks

An effect hook is used to specify "side effects" of Component rendering -- code you want to execute only once and not on each render!

//import the hooks used
import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [stateData, setStateData] = useState([]);

  //specify the effect hook function
  useEffect(() => {
    //code to do only once here!
    //asynchronous methods (like fetch), etc
    fetch(dataUri) //e.g., send AJAX request 
    //...
    setStateData(data); //okay to call state setters here
    
  }, []) //array is the second arg to the `useEffect()` function
         //It lists which variables will "rerun" the hook if they 
         //change

  //...
}

Effect Hook Cleanup

In order to "clean up" any work done in an effect hook (e.g., disconnect listeners), have the callback return a "cleanup function" to execute. Not needed for fetch()

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  //specify the effect hook function
  useEffect(() => {

    //...do persistent work, set up subscriptions, etc

    //function to run when the Component is being removed
    function cleanup() {
      console.log("component being removed")
    }    
    return cleanup; //return function for React to call later    
  }, [])

  return ...
}

Action Items!

  • Complete task list for Week 9 (all items

  • Review everything

  • Problem Set 09 due!

 

Next time: Firebase authentication and image storage

info340wi25-firebase-db

By Tim Carlson

info340wi25-firebase-db

  • 242

More from Tim Carlson