WIP

@@ -44,7 +44,6 @@ function App() {
 
   async function handleSubmit(e){
     e.preventDefault();
-    // console.log(chatInput)
     const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who'];
     const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
     const inputMatches = chatInput.match(userInputRegex);
@@ -53,25 +52,43 @@ function App() {
     const userPunctuationRegex = new RegExp(`[${userPunctuation.join('')}]$`);
     const punctuationMatches = chatInput.match(userPunctuationRegex);
 
-    // console.log(punctuationMatches)
     var userModifiedInput = chatInput
 
     if (!punctuationMatches) {
       if (!inputMatches) {
         userModifiedInput = chatInput + ".";
-        // console.log("not a question!")
       } else {
         userModifiedInput = chatInput + "?";
-        // console.log("its a question!")
       }
     }
 
     let chatLogNew = [...chatLog, { user: "me", message: `${userModifiedInput}`} ]
+    const messages = chatLogNew.map((message) => message.message).join("\n")
+
+    // Find the table format and replace it with HTML table tags
+    const parsedData = chatLogNew.map(message => {
+      if (message.message.includes("|")) { console.log("Have")
+        const rows = message.message.split("\n");
+        const headers = rows[0].split("|").filter(h => h);
+        const divider = headers.map(h => "-".repeat(h.length));
+        const data = rows.slice(2, rows.length - 1).map(row => {
+          const values = row.split("|").filter(v => v);
+          return values.reduce((obj, value, index) => {
+            obj[headers[index]] = value.trim();
+            return obj;
+          }, {});
+        });
+        const table = `<table><thead><tr>${headers.map(h => `<th>${h.trim()}</th>`).join("")}</tr></thead><tbody>${data.map(row => `<tr>${headers.map(h => `<td>${row[h.trim()]}</td>`).join("")}</tr>`).join("")}</tbody></table>`;
+        return table;
+      } else {
+        return message.message;
+      }
+    }).join("\n");
+
     setChatInput("");
     setChatLog(chatLogNew)
 
     // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
-    const messages = chatLogNew.map((message) => message.message).join("\n")
 
     try {
       const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {