Glasgow | 25-SDC-Nov | Katarzyna Kazimierczuk | Sprint 3 | Middleware

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

sprint3 prep tasks/chat.js

@@ -0,0 +1,182 @@
+const chatFeedDiv = document.getElementById("chat-feed");
+const fullMsgInChat = document.querySelector(".div-for-each-msg");
+const msgInChat = document.querySelector(".msg-text-in-chat-view");
+const usernameInChat = document.querySelector(".username-in-chat-view");
+
+const refreshBtn = document.getElementById("refresh-btn");
+const sendBtn = document.getElementById("send-msg-btn");
+const pollBtn = document.getElementById("poll-btn");
+
+const addMsgUsernameInput = document.getElementById("add-msg-username");
+const addMsgTextInput = document.getElementById("add-msg-text");
+const confirmToUser = document.getElementById("confirm-to-user");
+
+// const url = "http://localhost:3000";
+const url = "https://katchatapp.hosting.codeyourfuture.io";
+
+// generatequote and show to user
+const seeAllMessages = async () => {
+	//   const selectedQuote = pickFromArray(quotes);
+	const response = await fetch(url);
+	const allMessages = await response.json();
+
+	//this fixes the messages not showing on live sitwe
+	state.messages = allMessages;
+	// quote.innerHTML = selectedQuote.quote;
+	// author.innerHTML = selectedQuote.author;
+	// change greetingi am keeping everythign as is and jusy want to
+	//   document.getElementById("greeting").innerHTML = "Your quote is:";
+	//   document.getElementById("greeting").style = "size: 1rem";
+	chatFeedDiv.innerHTML = "";
+	allMessages.forEach((msg) => {
+		chatFeedDiv.innerHTML += `
+            <div class="div-for-each-msg">
+                <p class="msg-in-chat-view">${msg.msgText}</p>
+                <p class="username-in-chat-view">${msg.username}</p>
+            </div>`;
+	});
+};
+
+//show to user on click of new quote
+refreshBtn.addEventListener("click", seeAllMessages);
+
+const sendMsg = async () => {
+	//removing whitespace or special characters
+	const addMsgText = addMsgTextInput.value
+		.trim()
+		.replace(/[^a-zA-Z0-9,.;:?! ]/g, "");
+	const addMsgUsername = addMsgUsernameInput.value
+		.trim()
+		.replace(/[^a-zA-Z0-9,.;:?! ]/g, "")
+		.toUpperCase();
+
+	//check if empty or too long
+	if (!addMsgText || !addMsgUsername) {
+		confirmToUser.innerHTML = "Please add message text and your username.";
+		return;
+	}
+
+	if (addMsgText.length > 400 || addMsgUsername.length > 40) {
+		confirmToUser.innerHTML =
+			"Message must be up to 400 chars and username must be less than 40 chars.";
+		return;
+	}
+
+	// so macthes backend (typeof body != "object" || !("quote" in body) || !("author" in body))
+	const addingMsg = {
+		msgText: addMsgText,
+		username: addMsgUsername,
+	};
+
+	const responseFromAdd = await fetch(url, {
+		method: "POST",
+		headers: {
+			//so backedn can parde body as json
+			"Content-Type": "application/json",
+		},
+		//turn obj into str typeof body != "object"
+		body: JSON.stringify(addingMsg),
+	});
+
+	// quotes.push(newQuoteAuthor, newQuoteText); - rhtis alsready in the backed so no need
+	// tell user
+	if (responseFromAdd.ok === true) {
+		confirmToUser.innerHTML = "Your message has been sent.";
+		//clear input
+		addMsgTextInput.value = "";
+		addMsgUsernameInput.value = "";
+	} else {
+		//take error message frrom response grab from heree
+		//     console.error(`Failed to extract quote and author from post body: ${bodyString}`);
+		//     res.status(400).send("Expected body to be a JSON object containing keys quote and author.");
+		//     return;
+		const errorToShow = await responseFromAdd.text();
+		confirmToUser.innerHTML = `${errorToShow} Please try again.`;
+	}
+};
+
+sendBtn.addEventListener("click", sendMsg);
+
+// auto refresh
+// setInterval(seeAllMessages, 2000);
+
+//polling coursework
+// const keepFetchingMessages = async () => {
+//     const lastMessageTime = state.messages.length > 0 ? state.messages[state.messages.length - 1].timestamp : null;
+//     const queryString = lastMessageTime ? `?since=${lastMessageTime}` : "";
+//     const url = `${server}/messages${queryString}`;
+//     const rawResponse = await fetch(url);
+//     const response = await rawResponse.json();
+//     state.messages.push(...response);
+//     render();
+//     setTimeout(keepFetchingMessages, 100);
+// }
+
+let messages = [];
+const state = { messages: [] };
+
+//render defining from coursework example build from
+const render = () => {
+	chatFeedDiv.innerHTML = "";
+	state.messages.forEach((msg) => {
+		chatFeedDiv.innerHTML += `
+            <div class="div-for-each-msg">
+                <p class="msg-in-chat-view">${msg.msgText}</p>
+                <p class="username-in-chat-view">${msg.username}</p>
+            </div>`;
+	});
+};
+
+//polling coursework
+const keepFetchingMessages = async () => {
+	const lastMessageTime =
+		state.messages.length > 0
+			? state.messages[state.messages.length - 1].timestamp
+			: null;
+	const queryString = lastMessageTime ? `?since=${lastMessageTime}` : "";
+	const urlQueryMod = `${url}/messages${queryString}`;
+	const rawResponse = await fetch(urlQueryMod);
+	const response = await rawResponse.json();
+	state.messages.push(...response);
+	render();
+	setTimeout(keepFetchingMessages, 100);
+};
+
+pollBtn.addEventListener("click", keepFetchingMessages);
+
+//test long poll
+const longPollBtn = document.getElementById("long-poll-btn");
+
+const testLongPoll = async () => {
+	const lastMessageTime =
+		state.messages.length > 0
+			? state.messages[state.messages.length - 1].timestamp
+			: null;
+	const queryString = lastMessageTime ? `?since=${lastMessageTime}` : "";
+	const urlQueryMod = `${url}/long-poll${queryString}`;
+	const rawResponse = await fetch(urlQueryMod);
+	const response = await rawResponse.json();
+	state.messages.push(...response);
+	render();
+	testLongPoll();
+};
+longPollBtn.addEventListener("click", testLongPoll);
+
+//addiitonal privacy feature hide messages
+const hideMessages = document.getElementById("hide-btn");
+
+hideMessages.addEventListener("click", () => {
+	if (chatFeedDiv.style.display === "none") {
+		chatFeedDiv.style.display = "block";
+		hideMessages.textContent = "Hide chat";
+	} else {
+		chatFeedDiv.style.display = "none";
+		hideMessages.textContent = "Show chat";
+	}
+});
+
+// seeAllMessages();
+// but with long poll
+seeAllMessages().then(() => {
+	testLongPoll();
+});

sprint3 prep tasks/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Tremendous Chat</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<div class="container to-hide">
+			<h1 id="greeting">Chat feed</h1>
+			<div id="chat-feed">
+				<div class="div-for-each-msg">
+					<p class="msg-text-in-chat-view"></p>
+					<p class="username-in-chat-view"></p>
+				</div>
+			</div>
+			<button type="button" class="secondary-btn" id="refresh-btn">
+				Get latest messages
+			</button>
+			<button type="button" class="secondary-btn" id="hide-btn">Hide messages</button>
+			<button style="opacity: 0" type="button" class="secondary-btn" id="test-ws">Test websocket</buttotn>
+		</div>
+
+		<div class="container add-message">
+			<h2>Send a message</h2>
+			<input
+				class="input"
+				type="text"
+				id="add-msg-text"
+				placeholder="Add your message"
+				required
+			/>
+			<input
+				class="input"
+				type="text"
+				id="add-msg-username"
+				placeholder="Add the username"
+				required
+			/>
+			<button type="button" id="send-msg-btn">Send</button>
+			<p id="confirm-to-user"></p>
+		</div>
+
+		<button type="button" class="secondary-btn" id="poll-btn">Poll btn</button>
+		<button type="button" class="secondary-btn" id="long-poll-btn">
+			Long poll btn
+		</button>
+
+		<!-- <script src="chat.js"></script> -->
+		<script src="websocket.js"></script>
+	</body>
+</html>