As the user, when I log in for the first time, a modal should appear prompting me to enter a username
As the user, when I enter my userName and hit save, the page should display the home page with a simple heading greeting me by my userName
AC
When I log in for the first time,
Then a modal should appear prompting me to enter a username
When I enter my username and hit save,
Then the home page should appear with my username displayed
And the firebase database should be updated with my new user instance
Development
create a div in index.html called homePageDiv
create two divs within that with ids of userNameModal and homeView, respectively
paste in very simple bootstrap modal with single edit prompting the user to enter a user name
create file called users-data.js in helpers/data
create users directory in components and add users.js and users.scss
in users-data.js, create function called getUsersArray
call axios.get on users collection
assign results.data to variable usersArray
create empty array labeled users
forEach over Object.keys of usersArray and for each userId, assign that object a new property of id and set it to equal the current userId
push that object up to users
resolve users
in checkLogInStatus, before anything else happens,call getUsersArray and add .then and .catch
filter users array to find if any of the ids equals the user id of the current user
if not, then remove class of hide from userNameModal div and attach event listener to save button in modal which calls function addUser
In users.js create addUser function and pass in parameter for the user id
write conditional: if the modal edit equals an empty string, set the username to equal anonymousUser
else, set the variable to equal the value of the modal edit
create newUser object and set its uid to equal the user id passed in as parameter and open new Promise with parametrs resolve and reject
set the user name to equal the newUserName variable
call users-data.addNewUser and pass in newUser object as argument
create .then and .catch and resolve newUser and reject error
create new direcotry in components called home-page.js and add files home-page.js and scss
create function in home-page.js called printHomePage and export it--pass in userId as parameter
in function, call getUsersArray abd add .the and .catch
find user object whose id matches the passed in parameter, and print a heading that says something like, Welcome, userName
import users.js and home-page.js in auth-data.js
add .then on users.addUser and call all the functionality currently in top half of if statement in auth-data plus homePage.printHomePage with user passed in as argument
add else to conditional testing if user id matches an instance, and recall all the functionality
test debug push
Alternate:
in home-page, create logInHomeView function below printHomePage
paste all the variables from the top of auth-data into home-page.js
paste all functionality from current top half of conditional into logInHomeView and import all necessary files
User Story
As the user, when I log in for the first time, a modal should appear prompting me to enter a username
As the user, when I enter my userName and hit save, the page should display the home page with a simple heading greeting me by my userName
AC
When I log in for the first time,
Then a modal should appear prompting me to enter a username
When I enter my username and hit save,
Then the home page should appear with my username displayed
And the firebase database should be updated with my new user instance
Development
create a div in index.html called homePageDiv
create two divs within that with ids of userNameModal and homeView, respectively
paste in very simple bootstrap modal with single edit prompting the user to enter a user name
create file called users-data.js in helpers/data
create users directory in components and add users.js and users.scss
in users-data.js, create function called getUsersArray
call axios.get on users collection
assign results.data to variable usersArray
create empty array labeled users
forEach over Object.keys of usersArray and for each userId, assign that object a new property of id and set it to equal the current userId
push that object up to users
resolve users
in checkLogInStatus, before anything else happens,call getUsersArray and add .then and .catch
filter users array to find if any of the ids equals the user id of the current user
if not, then remove class of hide from userNameModal div and attach event listener to save button in modal which calls function addUser
In users.js create addUser function and pass in parameter for the user id
write conditional: if the modal edit equals an empty string, set the username to equal anonymousUser
else, set the variable to equal the value of the modal edit
create newUser object and set its uid to equal the user id passed in as parameter and open new Promise with parametrs resolve and reject
set the user name to equal the newUserName variable
call users-data.addNewUser and pass in newUser object as argument
create .then and .catch and resolve newUser and reject error
create new direcotry in components called home-page.js and add files home-page.js and scss
create function in home-page.js called printHomePage and export it--pass in userId as parameter
in function, call getUsersArray abd add .the and .catch
find user object whose id matches the passed in parameter, and print a heading that says something like, Welcome, userName
import users.js and home-page.js in auth-data.js
add .then on users.addUser and call all the functionality currently in top half of if statement in auth-data plus homePage.printHomePage with user passed in as argument
add else to conditional testing if user id matches an instance, and recall all the functionality
test debug push
Alternate:
in home-page, create logInHomeView function below printHomePage
paste all the variables from the top of auth-data into home-page.js
paste all functionality from current top half of conditional into logInHomeView and import all necessary files
call printHomePage in logInHomeView
call that function in addUsers