LONDON_9-GAYLE-THOMPSON-NODE-FRONTEND-WK2

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +27,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/App.css

@@ -1,33 +1,123 @@
-.App {
+ .App {
   text-align: center;
+  justify-items: center;
+  align-items: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+
+body {
+  max-width: 1200px;
+  font-family: cursive;
+  margin: rem;
+  margin-left: 6rem;
+  padding: 10rem;
+  align-content: center;
+  background-color: #cd5858;
+  /* background-image: url("https://www.searchenginejournal.com/wp-content/uploads/2021/01/social-media-platforms-featured-1-600ebb3076ce1.png"); */
+  background-image: url(images/chatterappImage.png);
+  background-size: cover;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+#message-board {
+  margin: 4rem;
+  border: 8px solid rgb(55, 156, 111);
+  background-color: rgb(21, 180, 216);
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  border-radius: 1px;
+}
+
+#message-board, h1, p{
+  margin: 5px;
+  align-items: center;
+  justify-items: center;
+  border-radius: 8px;
+}
+
+/* form chat and send buttons */
+#start-chat-btn {
+  border: 4px solid rgb(124, 7, 112);
+  margin: 1rem;
+  margin-left: 1.2em;
+  background-color: rgb(142, 194, 99);
+  cursor: pointer;
+  border-radius: 8px;
 }
 
-.App-link {
-  color: #61dafb;
+#send-btn {
+  border: 3px solid rgb(124, 7, 112);
+  height: 50px;
+  width: 120px;
+  margin: 1rem;
+  align-items: center;
+  background-color: rgb(153, 193, 110);
+  cursor: pointer;
+  border-radius: 8px;
+
+}
+
+#message-buttons {
+  display: flex;
+  flex-direction: row;
+}
+
+/* see latest, see all and hide all message buttons */
+#see-latest {
+  border: 3px solid rgb(145, 3, 93);
+  height: 60px;
+  width: 160px;
+  margin: 1rem;
+  align-items: center;
+  background-color: rgb(227, 187, 205);
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+#all-message-btn {
+  border: 3px solid rgb(125, 5, 81);
+    height: 60px;
+    width: 160px;
+    margin: 1rem;
+    align-items: center;
+    background-color: rgb(227, 187, 205);
+    cursor: pointer; 
+    border-radius: 8px;
+}
+
+#hide-message-btn{
+    border: 3px solid rgb(125, 5, 81);
+    height: 60px;
+    width: 160px;
+    margin: 1rem;
+    align-items: center;
+    background-color: rgb(227, 187, 205);
+    cursor: pointer;
+    border-radius: 8px;
   }
-  to {
-    transform: rotate(360deg);
+
+  #msg-greet{
+    border: 6px solid rgb(191, 125, 52);
+    padding: 15px;
+    max-width: 20rem;
+    background-color: rgb(255, 227, 177);
+    border-radius: 8px;
+
   }
+
+  #msg-card{
+    grid-template-columns: 10em 10em 10em 10em 10em 10em;
+  }
+
+
+/* #form-container {
+  display: none;
 }
+
+#designer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+} */
+
+
+        /* style="height:80px; width: 200px; font-size:10pt;" */

src/App.js

@@ -1,24 +1,81 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+// eslint-disable-next-line
+import React, { useState, useEffect } from "react";
+import "./App.css";
+import MessageForm from "./MessageForm";
+import OnloadMessages from "./OnloadMessages";
 
 function App() {
+  const [messages, setMessages] = useState([]);
+  const [displayAllMessages, setDisplayAllMessages] = useState(false);
+  const [showLatest, setShowLatest] = useState(false);
+
+  const fetchMessages = () => {
+    fetch("https://the-chatterboxers-app.onrender.com/messages")
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        console.log(data);
+        setMessages(data);
+      })
+      .catch((error) => {
+        console.log("Your requested infomation is not currently available!");
+        console.log(error);
+      });
+  };
+
+  useEffect(() => {
+    fetchMessages();
+  }, []);
+
+  const latestMessages = [...messages.slice(-3)];
+  const messagesDisplayed = showLatest ? latestMessages : messages;
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    <div id="message-board">
+      <h1>The ChatterBox Corner!</h1>
+      <p>
+        Welcome to the ChatterBox Corner..!<br></br> A place where talkatives and
+        chatterheads can express themselves without reserve...! Please be kind and be positive. 
+      </p>
+
+      <MessageForm fetchMessages={fetchMessages} />
+
+      <OnloadMessages
+        setDisplayAllMessages={setDisplayAllMessages}
+        displayAllMessages={displayAllMessages}
+        messages={messagesDisplayed}
+      />
+      <div className="latest-see-all-btns">
+        <button
+          id="see-latest"
+          onClick={() => {
+            setDisplayAllMessages(true);
+            setShowLatest(true);
+          }}
+        >
+          See Newest Messages
+        </button>
+
+        <button
+          id="all-message-btn"
+          onClick={() => {
+            setDisplayAllMessages(true);
+            setShowLatest(false);
+          }}
+        >
+          <h5>See All Messages</h5>
+        </button>
+
+        <button
+          id="hide-message-btn"
+          onClick={() => {
+            setDisplayAllMessages(false);
+          }}
         >
-          Learn React
-        </a>
-      </header>
+          <h5>Hide Messages</h5>
+        </button>
+      </div>
     </div>
   );
 }

src/MessageForm.js

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+function MessageForm(props) {
+  const [displayAllMessages, setDisplayAllMessages] = useState(false);
+  const toggleShow = () => setDisplayAllMessages((s) => !s);
+  const initialState = {
+    name: "",
+    message: "",
+    time: "",
+  };
+
+  const [formData, setFormData] = useState(initialState);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    fetch("https://the-chatterboxers-app.onrender.com/messages", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        from: formData.name,
+        text: formData.message,
+        timeSent: formData.time,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        props.fetchMessages();
+        setFormData(initialState);
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  function handleInputChange(event) {
+    event.preventDefault();
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  }
+  return (
+    <div>
+      <button id="start-chat-btn" onClick={() => toggleShow()}>
+        <h3>CLICK TO START CHATTERING..!</h3>
+      </button>
+      {displayAllMessages && (
+        <form action="/messages" method="post" onSubmit={handleSubmit}>
+          <label htmlFor="name">From:</label>
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            placeholder="Your Name"
+            onChange={handleInputChange}
+          />{" "}
+          <br />
+          <label htmlFor="message">Message:</label>
+          <input
+            className="message-styles"
+            type="text"
+            name="message"
+            placeholder="Enter your message..."
+            value={formData.message}
+            onChange={handleInputChange}
+          />
+          <br />
+          <div id="message-buttons">
+            <button id="send-btn" type="submit">
+              <h5>Send Your Msg</h5>
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}
+
+export default MessageForm;

src/OnloadMessages.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+
+function OnloadMessages(props) {
+    //  const toggleShow = () => props.setDisplayAllMessages((s) => !s);
+
+    function deleteMessage(id) {
+      fetch(`https://the-chatterboxers-app.onrender.com/messages/${id}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Something went wrong");
+          }
+          console.log("Message Deleted " + id);
+          alert("Message deleted");
+        })
+        .catch((error) => console.log(error));
+    }
+
+  return (
+    <div>
+      {/* <button id="see-latest" onClick={() => toggleShow()}>
+        See Latest
+      </button> */}
+      {props.displayAllMessages &&
+        props.messages.map((message) => (
+          <div id="msg-greet" key={message.id}>
+            <div id="msg-card">
+            <p>
+              id: {message.id}. <br></br>
+              From: {message.from}
+            </p>
+            <p>{message.text} </p>
+            <p>Sent on: {message.timeSent}</p> </div>
+
+            <div id="delbtn"> <button onClick={() => deleteMessage(message.id)}>Delete</button>
+          </div>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+export default OnloadMessages;