Forem: Clark Johnson

Updating User Profile Using React and Firebase

Clark Johnson — Mon, 20 Jul 2020 03:44:48 +0000

In a previous post, I shared the steps I took to wire a React project to connect to Firebase services and retrieve data from the database.

Fetching from Firestore Realtime Database

Clark Johnson ・ Jul 12 '20 ・ 3 min read

#javascript #react

My latest task involved creating a user with the Firebase Auth service and persisting profile data for the user.

The user was created through a React component containing a form for signup. When submitted, the form executes the function loginUser().

  const loginUser = () => {
    props.firebase
      .doCreateUserWithEmailAndPassword(inputs)
      .then((authUser) => {
        console.log("authUser: ", authUser);
      })
      .catch((error) => {
        console.error(error.code, error.message);
      });
  };

The fields from the form are passed to the Firebase handler function.

In my project, the connections to the Firebase services and helper methods are encapsulated in a class. In my project, the file is /src/Firebase/firebase.js.

class Firebase {
  constructor() {
    app.initializeApp(firebaseConfig);
    this.auth = app.auth();
    this.db = app.firestore();
  }

...

}

The form fields are passed to the doCreateUserWithEmail() method. This method relies on the createUserWithEmailAndPassword() and updateProfile() methods supplied by the Firebase library.

Firebase Auth Class maintains a basic set of fields for the display_name, email, phone_number, and uid (unique identifier). All other fields must be stored separately in a database like Firestore. In my case, they are stored in a Firestore collection called users.

The action takes place asynchronously through Promise chains. First, the authorized user is created. Then a default display_name is derived from the email address and persisted in the Auth record. Finally, a users document is created with the uid as the key, and the fields from inputs as data. In this example, I'm saving the first and last names.

  doCreateUserWithEmailAndPassword = (inputs) => {
    const { email, password, firstName, lastName } = inputs;

    return this.auth
      .createUserWithEmailAndPassword(email, password)
      .then((user) => {
        const displayName = user.user.email.split("@")[0];
        return this.auth.currentUser.updateProfile({ displayName });
      })
      .then(() => {
        console.log(this.auth.currentUser);
        return this.db
          .collection("users")
          .doc(this.auth.currentUser.uid)
          .set({ firstName, lastName });
      })
      .catch((error) => console.error("Error: ", error));
  };

The profile document for a single user can easily be retrieved from the users collection by referencing the uid.

  doGetUserProfile = (uid, callback) => {
      return this.db
          .collection("users")
          .doc(uid)
          .get()
          .then(callback);
  };

Similarly, the profile document for an existing user can easily be updated.

 doProfileUpdate = (profile) => {
    return this.db
      .collection("users")
      .doc(this.auth.currentUser.uid)
      .set(profile)
      .catch((error) => console.error("Error: ", error));
  };

So far, my foray into Firebase has been quite rewarding. It's easy to see that after a few implementations the development time for my applications will begin to diminish.

Happy coding!

Cover photo by Kelly Sikkema on Unsplash

Fetching from Firestore Realtime Database

Clark Johnson — Sun, 12 Jul 2020 23:06:39 +0000

This week I was tasked with learning about Firebase and setting up an application to interact with the Firestore Realtime Database for storage.

I don't want to repeat all the details of the experience because I basically implemented the instructions found in the Firebase documentation and the Firebase React Tutorial by Robin Weiruch.

This is how I implemented using the fetch API to retrieve the data.

1. Connect to the Firebase Services

Implementing the connection to Firebase services and the functions necessary to retrieve and mutate the data can be neatly encapsulated in a class. I created mine in the file /src/Firebase/firebase.js.

Be sure to add the Firebase npm modules.

yarn add Firebase

I included the necessary modules.

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

The configuration variable details were provided when I set up my Firebase project. I just copied and pasted mine. I've included it below, with a couple of specifics missing.

var firebaseConfig = {
    apiKey: "--------------------------------",
    authDomain: "myproject.firebaseapp.com",
    databaseURL: "https://myproject.firebaseio.com",
    projectId: "myproject",
    storageBucket: "myproject.appspot.com",
    messagingSenderId: "748127105525",
    appId: "1:748127105525:web:983360bf4adfabfa3bf0bc",
    measurementId: "G-6ZWGLLZQ1Y"
};

The class will connect to the services in the constructor.

class Firebase {
    constructor() {
        app.initializeApp(firebaseConfig);
        this.auth = app.auth();
        this.db = app.firestore();
    }
...

}
export default Firebase;

2. Code the Read Method

Reading and writing are handled through the methods provided in the Firebase library. For example, reading from the users collection can be done using app.firestore().collection("users").get(). Writing can be done using similar methods, such as app.firestore().collection("users").doc(_key).set(_profileObject).

As you might expect, these methods are executed asynchronously. I wrapped the read method so that I could include a callback for handling the data once it's retrieved.

class Firebase {
    constructor() {
        app.initializeApp(firebaseConfig);
        this.auth = app.auth();
        this.db = app.firestore();
    }
...

    doGetAllUsers = (callback) => {
        this.db
            .collection("users")
            .get()
            .then(callback)
    }
...

}
export default Firebase;

3. Create a Context for Firebase Services

To make use of the Firebase connection across my application, I included useContext.

I created the file src/Firebase/context.js in my Firebase directory.

import React from 'react';

const FirebaseContext = React.createContext(null);
FirebaseContext.displayName = "Firebase"

export default FirebaseContext;

Then, I combined the exports for context and Firebase in src/Firebase/index.js

import FirebaseContext from './context';
import Firebase from './firebase';

export default Firebase;

export { FirebaseContext };

My project's index.js wraps the <App /> component with the Context Provider.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Firebase, { FirebaseContext } from './components/Firebase';

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
      <App />
    </FirebaseContext.Provider>,
  document.getElementById("root")
);

4. Use React Hooks to Store the Data

Now that the Firebase class is ready to go, let's make use of it within a React component.

I included the appropriate React hooks tools as well as the FirebaseContext.

import React, { useContext, useEffect, useState } from "react";
import { FirebaseContext } from "../../components/Firebase";

export default (props) => {
   ...
}

I assigned the identifier firebase to the context for my Firebase class. This allows me to access the connected Firebase services within my component.

Then I created a state variable docs to hold the users collection records.

Finally, I invoked the firebase.doGetAllUsers() method I wrote earlier, passing it a callback function to store the data in this component's state.

export default (props) => {
  const firebase = useContext(FirebaseContext);
  const [docs, setDocs] = useState([]);

  // Pass a callback to handle the data.  
  useEffect(
    () =>
      firebaseb.doGetAllUsers((snapShot) => {
        const tempDocs = [];
        snapShot.forEach((doc) => {
          tempDocs.push(doc.data());
        });
        setDocs([...tempDocs]);
      }),
    [fb]
  );
...

}

** It's important to note that the array [fb] was passed to useEffect as the second parameter, which is set call the function only when certain values have changed. In this case, the value of fb won't change, and the function will only be executed when the component mounts.

That should do it. The data from the users collection will now be stored in the state variable and can be rendered by the component. For example:

       <div>
          <h2>Users</h2>
          {docs.length > 0 ? (
            docs.map((doc, i) => (
              <div key={i}>
                <p>
                  {doc.firstName} {doc.lastName}, {doc.city}
                </p>
              </div>
            ))
          ) : (
              <div>
                <p>No users found.</p>
              </div>
            )}
       </div>

This is what I learned. I hope this helps others attempting to stand up a React app with Firestore Realtime Database. As this was my first implementation, I welcome any suggestions on improvement.

Happy coding!

Cover photo by Yuki Dog on Unsplash

Anagram Test Algorithm

Clark Johnson — Sun, 05 Jul 2020 23:47:53 +0000

Anagrams! Everyone loves anagrams! Passing the time during COVID-19 quarantine has left me to my own devices, practicing coding algorithms seems to be the skill that needs the most work. This post addresses a couple of solutions for testing if one string is a anagram of another.

Character Map it Out

The first solution that made sense involved building a character map for each string to store the count of each character and then comparing the counts to determine if the strings are anagrams.

For example, the phrase "Green Eggs and Ham" produces the object

{ g: 3, r: 1, e: 3, n: 2, s: 1, a: 2, d: 1, h: 1, m: 1 }

The phrase "Harmed Gang Genes" produces a similar javascript object

{ h: 1, a: 2, r: 1, m: 1, e: 3, d: 1, g: 3, n: 2, s: 1 }

A quick examination reveals that both character maps contain the same number of characters, and each character occurs in both objects the same number of times. The anagram test should return true in this case.

Steps

Convert each string into a character map. Remove all non-word characters and convert them to lowercase.
Compare the number of keys (unique characters) of each map. If they're not equal, then the anagram test fails, so return false.
Verify that every character in the first map has the same number of characters in the second.

function anagrams(stringA, stringB) {
    // Place strings into a character map 
    // and compare count.
    const charMap = string => {
        const map = {}
        const arr = string
            .replace(/[^\w]|_/g, "")
            .toLowerCase()

        for (let char of arr) {
            map[char] = map[char] + 1 || 1
        }

        return map
    }
    // Convert each string into a character map.
    const mapA = charMap(stringA);
    const mapB = charMap(stringB);
    const mapAKeys = Object.keys(mapA)
    const mapBKeys = Object.keys(mapB)
    // Compare the number of keys
    if (mapAKeys.length === mapBKeys.length) {
        // Verify that first map matches second
        return mapAKeys.every(char => mapA[char] === mapB[char])
    }
    else
        return false
}

Just Flip it and Reverse it

While doing research on solving the anagram algorithm (because that's what I do in my spare time nowadays), was enlightened by a more clever solution.

It turns out that if you sort the letters alphabetically in the two strings, the resultant strings will be identical if the strings are anagrams.

The result of this method for "Green Eggs and Ham" would be "aadeeeggghmnnrs". Any string that would pass as an anagram would produce the same result.

Steps

Convert the original strings to sorted strings. Remove the non-word characters, convert to lowercase, convert to an array, sort, and convert back to a string.
Compare the two sorted strings.

function anagrams(stringA, stringB) {
    // Sort the strings and compare.
    const sortString = (string) =>
        string
            .replace(/[^\w]|_/g, '')
            .toLowerCase()
            .split('')
            .sort()
            .join('')
    return sortString(stringA) === sortString(stringB)
}

Taking advantage of the javascript sort method produces a more concise and readable solution. Thanks for the idea Stephen Grider.

Happy coding!

Cover photo by Amador Loureiro on Unsplash

'Break'-ing the Palindrome Checker Algorithm

Clark Johnson — Mon, 29 Jun 2020 02:55:45 +0000

In a previous article, I addressed the palindrome algorithm using recursion.

A Few Exercises for Learning Recursion

Clark Johnson ・ Jun 8 '20 ・ 3 min read

#javascript

A few days ago, I came across a solution using an iterator to get the job done.

function palindrome2(str) {
    return str
        .split('')
        .every(
            (char, i) => char === str[str.length - 1 - i]
        )
}

This idea utilizes a built-in Javascript iterator 'every', which returns true when a condition is met by every item in the array.

Take the word 'ROTATOR'. It's definitely a palindrome, and we can tell by comparing the first letter to the last letter, then the second letter to the next-to-last letter, and continue until every letter has been tested. If every letter has a match on the opposite side of the word, then we have a palindrome.

The .every function will get the job done. However, we're doing a little too much work. We should be able to stop testing for matching equalities once we reach the halfway point. After that, every check is redundant. Unfortunately, using .every doesn't provide a way to break out of iteration and continue.

Thanks to ES6, we have another solution. Using the for... of construct to iterate gives the option to take advantage of the break keyword.

function palindrome(str) {
    let valid = true;
    const arr = str.split('')
    for (const [i, char] of arr.entries()) {
        if (i > (arr.length / 2))
            break;
        else if (char !== arr[arr.length - i - 1]) {
            valid = false;
            break
        }
    }

    return valid
}

This solution isn't quite as elegant as the first, but it is definitely more efficient. Execution will now cease if either the palindrome test fails on a character or we reach the halfway point. The addition control removes redundancy and reduces the execution time.

More information about for...of is available on MDN.

Happy coding!

Cover Photo by Justin Main on Unsplash

My First CodePen: A JavaScript Calendar

Clark Johnson — Mon, 22 Jun 2020 03:46:53 +0000

I recently signed up for a new adventure with a really exciting program called Chingu.io.

In a nutshell, Chingu (Korean for 'friend') is an opportunity for aspiring developers to collaborate with other developers in a simulated production environment. Participating developers have to submit a solo project which will be used to assign a role in a 6-week collaborative project. It's meant to simulate a real working environment, provide relevant experience, and add to the developer's portfolio.

For my solo project, I decided to create a calendar. To give my project some sort of future-proofing, I coded it in React using hooks. At the time of writing this post, the calendar exists as a front end project. Soon, I'll code a backend to persist the user selections in Node.js.

The example here is coded in Javascript with CSS and HTML. The calendar scrolls from month to month when the directional arrows are clicked.

There were several points during coding where date calculations were necessary. I opted to use the basic Javascript date object instead of a library like moment.js. You can read about why I made that decision in a previous article.

JS Date vs Moment.js: A Really Simple Comparison

Clark Johnson ・ Jun 15 '20 ・ 2 min read

I'm very excited about my first CodePen entry and I look forward to many more. Happy coding!

Cover photo by Estée Janssens on Unsplash

JS Date vs Moment.js: A Really Simple Comparison

Clark Johnson — Mon, 15 Jun 2020 03:56:02 +0000

Here's an exercise I wanted to share as part of my own efforts in learning out loud.

As part of a React project I'm working on, I needed to create and array containing the dates for the current month.

While composing the function I realized I would need to perform arithmetic on date objects. I could use the JS Date object directly, or I could make use of the methods provided by the moment.js library.

Moment.js

Implementing my function using the addon library allows use of the add method to increment a date. In the function below, day is a moment.js object.



function calendarDays(day) {
    const days = []
    day.date(1)
    day.add(-(day.day() + 1), "d")
    for (let i = 1; i <= 42; i++) {
        day.add(1, "d")
        days[i] = { day: day.date(), month: day.month() }
    }
    return days
}

The function is called from the component and the array rendered using using the following code:



{calendarDays(moment()).map(day => <span key={day.day} className="calendar-day">{day.day}</span>)}

The React profiler tool shows that the component renders in 2.2ms.

Javascript Object



function calendarDaysJS(day) {
    const days = []
    day.setDate(1)
    day.setDate(1 - day.getDay())
    for (let i = 1; i <= 42; i++) {
        days[i] = { day: day.getDate(), month: day.getMonth() }
        day.setDate(day.getDate() + 1)
    }
    return days
}



{calendarDaysJS(new Date()).map(day => <span key={day.day} className="calendar-day">{day.day}</span>)}

The React profiler reveals that the component renders in 1.3ms. That's a 40% improvement in efficiency.

Conclusion

According to the explanation offered by moment.js, using the library for date arithmetic operations yields code that is more readable. My small test reveals that the there is definitely an efficiency tradeoff. As always, it is up to the development team to decide which is more important. As for myself, I am definitely leaning towards the reduced time benefits.

Happy coding!

A Few Exercises for Learning Recursion

Clark Johnson — Mon, 08 Jun 2020 01:56:22 +0000

Cover Photo by Tine Ivanič on Unsplash

In Javascript, functions carry the load. Every developer must be comfortable writing code that distributes the work using functions if they have any hope of the code being readable. Of course, there's also the directive to write code remains "DRY" (Don't Repeat Yourself).

Eventually, our problem-solving efforts require recursive functions. This simply means that the function has to call itself. I have to admit, the thought of writing recursive functions was uncomfortable. It seemed like so much could go wrong and that I would end up in an endless loop.

The concept of recursion at first seemed complicated to my way of thinking. In life, if I want to accomplish a task, I process that task as a whole unit. I consider eating a bowl of cereal or folding the laundry as a single task.

If I consider those same tasks with recursion in mind, then I have to divide these tasks into a base case and recursive call. To eat a bowl of cereal, I call the eatCereal function. That function will return a base case of "done" if the bowl is empty. Otherwise, it will take a single bite and call itself again. Likewise, to fold laundry, I call the foldLaundry function. This returns a base case of "folded" once I'm out of laundry, or folds a shirt and then calls itself again.

The base case is very important. It defines the last step of the recursive function and provides a way out. If this is omitted or improperly considered, then we're in an endless loop or causing a memory overflow error.

To provide an opportunity to review recursive functions in action, I coded three examples. These functions will:

reverse a string
test a string to see if its a palindrome
test an array to see if it includes a particular element

Reverse a String

This function accepts the string parameter, then returns that string in reverse order.

I wrote the function to extract the last character of the string and then append the result from calling itself again. If there is only one character left, then just return the last character.

function reverseString(myString) {
    const lastLetter = myString[myString.length - 1]
    if (myString.length > 1) {
        return lastLetter + reverseString(myString.substring(0, myString.length - 1));
    } else {
        return lastLetter;
    }
}

Palindrome Test

Who doesn't love a palindrome? This function returns true if the string parameter is spelled the same both forward and backward, and false if it isn't.

My solution will test to see if the first and last characters are equal, and then call itself again with the inner characters. It will return true if the string only has one character (for odd number string lengths), or if there are only two identical characters. Otherwise, it returns false.

function isPalindrome(myString) {
    // if outside are the same and inside is a palindrome 
    if (myString.length === 1) {
        return true;
    } else if ((myString.length === 2) && (myString[0] === myString[1])) {
        return true
    } else if (myString[0] === myString[myString.length - 1]) {
        return isPalindrome(myString.substring(1, myString.length - 1))
    } else {
        return false
    }

}

Test Array for Included Number

The last function accepts an array and the element we're searching for as parameters. The function will return the true if the array includes the supplied element.

To handle this recursively, the function will return true if the first element matches. If not, then it will call itself with the first element removed. The base case returns false once the length of the string is 0.

function includesNumber(myNums, element) {
    if (myNums.length >= 1) {
        if (myNums[0] === element) {
            return true
        } else {
            return includesNumber(myNums.slice(1), element)
        }
    } else {
        return false
    }
}

Understanding the solutions to these three examples helped me to calm down and feel confident about my ability to write recursive functions. It also aids in my ability to handle more complex situations and algorithms. I hope these assist others as well.

Happy coding!

Another Algorithm: Rotate Array with JavaScript

Clark Johnson — Mon, 01 Jun 2020 01:13:11 +0000

Having worked on several problems on LeetCode, I find it helpful to document and review my solutions through published posts. The most recent problem I worked involved a single array.

The exercise calls for the creation of an function that accepts two parameters: an array of integers, and the number of positions the array needs to be shifted to the right.

For example, given the array (nums) with a value of [1,2,3,4,5,6,7] and the shift value (k) of 3, the expected output would be the array [5,6,7,1,2,3,4].

First Idea - Extract and Copy

What came to mind at first was simply to extract the last k items from the array and copy them to the head of a new array, then copy the remaining items to the end of the new array.

This solution would be quick and easy, allowing the array to be shifted in one pass, and requiring the additional space of one array.

A Backwards Solution, No Additional Space

A more challenging goal is to shift the array in place, without the space for additional array being allocated. It took me several attempts to find a methodology that would work before I stumbled on the rather backwards solution.

It turns out that by reversing sections of the array, the desired result can be achieved without additional space. The process does require two passes.

Let's start with the example array needing to be shifted to the right 3 places.

[1,2,3,4,5,6,7]

Reversing it would yield a new array with the shifted items at the beginning:

[7,6,5,4,3,2,1]

Then, reverse the first 3 items only:

[5,6,7,4,3,2,1]

And finally reverse the remaining items only to return the desired array:

[5,6,7,1,2,3,4]

The Code

I begaN with the skeleton function provided by LeetCode:

var rotate = function(nums, k) {
}

Then, I needed a function to reverse the array.

    var reverseArray = function(start, end) {
        for (i = start; i < end - i + start; i++) {
            let temp = nums[i];
            nums[i] = nums[end - i + start];
            nums[end - i + start]= temp;
        }
    }

That reverse function needs to be called 3 times.

Reverse the entire array: reverseArray(0,nums.length-1)
Reverse the first k elements: reverseArray(0, k-1)
reverse the rest: reverseArray(k,nums.length-1)

There's one edge case that needs to be handled. When the shift ingeger(k) is larger than the length of the array, you end up with undefined elements. To fix this, I simply applied the modulus operator.

k = k % nums.length

Put it all together for my complete solution:

var rotate = function(nums, k) {
    var reverseArray = function(start, end) {
        for (i = start; i < end - i + start; i++) {
            let temp = nums[i];
            nums[i] = nums[end - i + start];
            nums[end - i + start]= temp;
        }
    } 

    k = k % nums.length
    reverseArray(0, nums.length-1)
    reverseArray(0, k-1);
    reverseArray(k, nums.length-1);
    return nums 
};

When submitted, my solution performed better than almost 65% of other entries. That's pretty good, but there's still work to be done.

These simple exercises are proving to be worth their weight in expanding my problem solving skills and creativity. Hopefully, this helps you other developers as well.

Happy coding!