Implemented the storage of comments as username-comment pairs

portfolio/src/main/java/com/google/sps/servlets/DataServlet.java

@@ -14,28 +14,32 @@
 
 package com.google.sps.servlets;
 
+import com.google.gson.Gson;
 import java.io.IOException;
+import java.util.ConcurrentHashMap;
+import java.util.Map;
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
-import java.util.ArrayList;
-import com.google.gson.Gson;
-
-/** Servlet that returns some example content. TODO: modify this file to handle comments data */
+/** Servlet that returns some example content. */
 @WebServlet("/data")
 public class DataServlet extends HttpServlet {
-  ArrayList<String> messages = new ArrayList<>();
+  private final Map<String, String> messagesByUsername = new ConcurrentHashMap<>();
 
   @Override
   public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
-    messages.add("This is brought to you by JSON");
-    messages.add("JSON is JavaScript Object Notation");
-    messages.add("It is great for storing data like this");
-
     response.setContentType("application/json;");
-    String json = new Gson().toJson(messages);
+    String json = new Gson().toJson(messagesByUsername);
     response.getWriter().println(json);
   }
+
+  @Override
+  public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
+    String username = request.getParameter("username");
+    String message = request.getParameter("comment-or-question");
+    messagesByUsername.put(username, message);
+    response.sendRedirect("/index.html");
+  }
 }

portfolio/src/main/webapp/index.html

@@ -19,6 +19,13 @@ <h1>Ihsan Olawale's Portfolio</h1>
       <p>After seeing what I look like, you might be interested to know more about me. Don't worry, I considered this during the design phase, and presented an opportunity to cycle through assorted facts.</p>
       <button onclick="addRandomFact()">Learn about me</button>
       <div id="fact-container"></div>
+      <form action="/data" method="POST">
+	<p>Comment here on your perception of the content. Or ask me any questions about me.</p><br>
+	<input type="text" name="username" maxlength=10 value="username">
+	<textarea name="comment-or-question" rows="24" cols="80">What amazing web development this is</textarea>
+	<br><br>
+	<input type="submit"/>
+      </form>
       <div id="messages-container"></div>
     </div>
   </body>

portfolio/src/main/webapp/script.js

@@ -53,8 +53,8 @@ function displayMessages() {
     console.log(messages);
     const messageContainer = document.getElementById('messages-container');
     messageContainer.innerText = '';
-    for (const message of messages) {
-      messageContainer.innerText += message + '\n';
+    for (const username in messages) {
+      messageContainer.innerText += username + ': ' + messages[username] + '\n\n';
     }
   });
 }