bobbybaxter
commented
5 years ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cashew Outside</title>
</head>
<body>
<nav id="navbar" class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap py-1 shadow top-navbar">
<a class="navbar-brand" href="#">Cashew Outside</a>
<ul class="navbar-nav flex-row px-3">
<li class="nav-item text-nowrap">
<button type="button" id="navbar-button-auth" class="btn btn-outline-dark col-12">Authentication</button>
</li>
<li class="nav-item text-nowrap">
<button type="button" class="authed-diary nav-link pr-3 btn btn-outline-dark col-12 hide add-entry" data-toggle="modal" data-target="#add-entry-form">Add Diary Entry</button>
</li>
<li class="nav-item text-nowrap">
<button type="button" class="authed-news nav-link pr-3 btn btn-outline-dark col-12 hide add-entry" data-toggle="modal" data-target="#add-article-form">Add News Article</button>
</li>
<li class="nav-item text-nowrap">
<button type="button" id="navbar-button-logout" class="nav-link btn btn-outline-dark col-12 hide">Logout</button>
</li>
</ul>
</nav>
<div class="container-fluid"><!-- main container -->
<!-- side navbar -->
<div class="row">
<nav class="col-md-2 d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<button type="button" id="navbar-button-home" class="nav-link btn btn-outline-dark hide">Dashboard</button>
</li>
<li class="nav-item">
<button type="button" id="navbar-button-diary" class="nav-link btn btn-outline-dark hide">Diary</button>
</li>
<li class="nav-item">
<button type="button" id="navbar-button-events" class="nav-link btn btn-outline-dark hide">Events</button>
</li>
<li class="nav-item">
<button type="button" id="navbar-button-news" class="nav-link btn btn-outline-dark hide">News</button>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"><!-- app container -->
<div id="auth"></div>
<!-- Start of user name modal div -->
<div id="userNameModalBtnDiv" class="hide">
<!-- Button trigger modal -->
<button type="button" id="userNameModalOpen" class="btn btn-primary" data-toggle="modal" data-target="#userNameModal">Create User Name</button>
</div>
<div class="hide" id="homePageDiv"></div>
<div id="diary" class="authed-diary p-5 hide">
<div id="diary-entries" class="d-flex flex-column"></div>
</div>
<div id="eventsContainer" class="events p-5 hide">
<h1 class="text-center">Events</h1>
<div id="events" class="d-flex flex-wrap flex-column"></div>
</div>
<div id="news" class="authed-news hide">
<div id="news-articles" class="d-flex flex-wrap"></div>
</div>
<div id="messagesPageDiv">
<div class="row">
<div class="col-9">
<div id="messagesContainer" class="container"></div>
</div>
<div class="col-3">
<div id="messagesUserNameContainer" class="container"></div>
</div>
</div>
</div>
</main><!-- end app container -->
</div><!-- end main container -->
<!-- add diary entry modal -->
<div class="modal" id="add-entry-form">
<div class="modal-dialog">
<div class="modal-content rounded-0 border-0">
<div class="modal-header border-0 pb-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="outline: none;">
<i class="fas fa-times"></i>
</button>
</div>
<h1 class="display-4 m-auto">Add Entry</h1>
<div class="modal-body">
<input id="diary-title-input" type="text" class="form-control my-3" placeholder="Title">
<input id="diary-date-input" type="text" class="form-control mb-3" placeholder="Date">
<input id="diary-entry-input" type="text" class="form-control" placeholder="Diary Entry">
</div>
<div class="modal-footer justify-content-center border-0">
<button id="add-diary-entry" type="button" class="btn btn-dark rounded-0 px-4" data-dismiss="modal">Save Diary Entry</button>
</div>
</div>
</div>
</div>
<div class="modal" id="add-article-form">
<div class="modal-dialog">
<div class="modal-content rounded-0 border-0">
<div class="modal-header border-0 pb-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="outline: none;">
<i class="fas fa-times"></i>
</button>
</div>
<h1 class="display-4 m-auto">Add News Article</h1>
<div class="modal-body">
<input id="article-title-input" type="text" class="form-control my-3" placeholder="Title">
<input id="article-date-input" type="text" class="form-control mb-3" placeholder="Date">
<input id="article-synopsis-input" type="text" class="form-control mb-3" placeholder="Synopsis">
<input id="article-url-input" type="text" class="form-control" placeholder="URL">
</div>
<div class="modal-footer justify-content-center border-0">
<button id="add-news-article" type="button" class="btn btn-dark rounded-0 px-4" data-dismiss="modal">Save News Article</button>
</div>
</div>
</div>
</div>
<!-- user name modal -->
<div class="modal fade" id="userNameModal" tabindex="-1" role="dialog" aria-labelledby="userNameModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="userNameModalLabel">Create Your User Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="userNameInput">Create User Name</label>
<input type="text" class="form-control" id="userNameInput" placeholder="user1234*5">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="saveUserNameBtn" class="btn btn-primary" data-dismiss="modal">Save User Name</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
User Story
As the user, when I log in to my site and click on the messages dashboard, all the messages in the site should display.
AC
GIVEN a user comes to the site
WHEN they look at the chat component
THEN they should see all messages from all users
Development
checkout to branch messages-display
in components, create a directory called messages and touch files messages.js and messages.scss
in helpers/data, create file called messages-data.js
import axios and apiKeys.json
assign firebaseUrl to equal apiKeys.firebaseKeys.databaseURL
create function called getMessagesArray and open new Promise with parameters resolve and reject
call axios.get and pass in firebaseUrl concatenated with messages seed data file in database
in .then, assign results.data to messagesArray
create empty array messages
forEach over Object.keys with argument messagesArray
for each iterated messageId, assign that message a new key of id and set it to equal the currently iterated message id
push the message object to messages variable
resolve messages at end of .then
.catch reject(error)
export function and import messages-data file in messages.js
in messages.js, create function called getMessages
call messagesData.getMessagesArray and add .then and .catch
in .then, chain call to getUsersArray
in .then, call smash.build messagesArray and pass in user array and messages array
in smash.js, pass in user and messagesArray and map over messages array
for each message, find the user in the users aray whose uid property equals the current uid on the message
set message.userName to equal matchingUser.userName
console.error out final array in getMessages in messages.js
create new function called messageViewBuilder and pass in parameter arrayToPrint and currentUserId
call that function in getMessages in innermost .then with the adjusted messages array and the current user's id passed in as argument
in messageViewBuilder, forEach over arrayToPrint to construct a domString with message with user name, time stamp, and message
if message.userName = currentUserId, add a column in the row with an edit and delete button (Font Awesome to be entered at some point)
use util.printToDom to print messages
export getMessages and import file in auth-data
call getMessages in checkLoginStatus or whatever the equivalent function is called.
test debug push