Journal

Getting on call with Neal for pair programming, he tasked me with working on the “Implement User Dashboard” issue, #79. This component is used by site admins to approve or deny new user sign-ups.

He sent me his designs and tasked me with determining which Material-UI elements I needed to import and how they should be assembled. I ended up going with a UserRequestsDashboard and a UserRequestCard element. The user request cards are each mapped to a full-width Grid item. The cards are, surprisingly enough, Cards containing the username and email as Typography tags wrapped in a Grid within the CardContent, with approval and denial Buttons also wrapped in a Grid within the CardActions. From there, I built out the components.

With that completed, the next step was collecting unapproved users, which was a Selector call filtered for all users with a false verification flag. Neal had already set up most of the Firebase framework as part of the users framework, so we were able to pull data from those functions with a few changes and additions to specifically collect all users.

Next was to pass the collected and filtered user data to the cards. We quickly discovered that, when using Firebase auth, you can only directly access the display name of the currently signed in user (probably due to privacy and permissions). We are already collecting a username as part of the sign-up process, so that needed to be added to the user documents.

Now that everything was plugged into place, we created a test user, logged into the User Requests dashboard, and:

The nearly-completed user approval console

Ta-da! The user properly populates. An email verification process is in place, as well. All that is left now is to hook up denial with a rejection message, approval, and mass approval with a confirmation modal.

Switching over to my portfolio site, I made a few quick adjustments. Perhaps most importantly, the First Kommand cement mixer project was removed from portfolio in exchange for Learning Log. I need to make more adjustments before this goes live, but I am looking forward to having all web development projects on my web development portfolio!

Tasklist

  • Pair program with Neal
  • Add Learning Log as one of my portfolio projects
  • Start adding in the remaining learning resources I’ve encountered for sorting