Glasgow class 6 | Delnia Alipour | Node| Chat-Server-React | Week 2

package.json

@@ -4,8 +4,7 @@
   "private": true,
   "dependencies": {
     "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-dom": "^16.8.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +26,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-scripts": "^5.0.1"
   }
 }

src/App.css

@@ -1,33 +1,75 @@
-.App {
-  text-align: center;
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f7e6d7;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  margin-bottom: 10px;
+  background-color: #f9d9c4;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+h2 {
+  color: #b4573e;
+  margin-left: 1rem;
+}
+p {
+  color: #b4573e;
+}
+button {
+  background-color: #f27b7b;
+  color: #fff;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+form {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  margin-top: 20px;
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #b4573e;
+}
+
+input {
+  padding: 8px;
+  margin-bottom: 10px;
+  border: 1px solid #b4573e;
+  border-radius: 5px;
 }
 
-.App-link {
-  color: #61dafb;
+button[type="submit"] {
+  background-color: #f27b7b;
+  color: #fff;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 5px;
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+button[type="submit"]:hover {
+  background-color: #e35a5a;
 }

src/App.js

@@ -1,24 +1,14 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import DisplayMessages from "./DisplayMessages";
+
+import SeeLatestButton from "./SeeLatestButton.js";
 
 function App() {
   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"
-        >
-          Learn React
-        </a>
-      </header>
+      <DisplayMessages />
+      <SeeLatestButton />
     </div>
   );
 }

src/CreateMessageForm.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+
+function CreateMessageForm({ onMessageCreated }) {
+  const [from, setFrom] = useState("");
+  const [text, setText] = useState("");
+
+  const handleFromChange = (event) => {
+    setFrom(event.target.value);
+  };
+
+  const handleTextChange = (event) => {
+    setText(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    const newMessage = {
+      from: from,
+      text: text,
+    };
+
+    fetch("https://delnia-alipour-chat-server.glitch.me/messages", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(newMessage),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        onMessageCreated(data);
+        setFrom("");
+        setText("");
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>
+          From
+          <input
+            type="text"
+            value={from}
+            onChange={handleFromChange}
+            required
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Message
+          <input
+            type="text"
+            value={text}
+            onChange={handleTextChange}
+            required
+          />
+        </label>
+      </div>
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    </form>
+  );
+}
+
+export default CreateMessageForm;

src/DeleteMessageButton.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+function DeleteMessageButton({ messageId, onDelete }) {
+  const handleDelete = () => {
+    fetch(
+      `https://delnia-alipour-chat-server.glitch.me/messages/${messageId}`,
+      {
+        method: "DELETE",
+      }
+    ).then((res) => {
+      if (res.status === 200) {
+        onDelete(messageId);
+      }
+    });
+    console.log({ messageId });
+  };
+
+  return <button onClick={handleDelete}>Delete</button>;
+}
+
+export default DeleteMessageButton;

src/DisplayMessages.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import DeleteMessageButton from "./DeleteMessageButton";
+import CreateMessageForm from "./CreateMessageForm";
+
+function DisplayMessages() {
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("https://delnia-alipour-chat-server.glitch.me/messages")
+      .then((res) => res.json())
+      .then((data) => {
+        setMessages(data);
+        setIsLoading(false);
+      })
+      .catch((error) => console.error("Error fetching messages:", error));
+  }, []);
+
+  const handleDeleteMessage = (id) => {
+    setMessages((prevMessages) =>
+      prevMessages.filter((message) => message.id !== id)
+    );
+  };
+
+  const handleCreateMessage = (newMessage) => {
+    setMessages((prevMessages) => [...prevMessages, newMessage]);
+  };
+
+  return (
+    <div>
+      <h2>Latest messages</h2>
+      {isLoading ? (
+        <p>Please wait... Loading messages...</p>
+      ) : (
+        <>
+          <ul>
+            {messages.map((message) => {
+              return (
+                <li key={message.id}>
+                  {message.from}: {message.text}
+                  <DeleteMessageButton
+                    messageId={message.id}
+                    onDelete={handleDeleteMessage}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
+      <CreateMessageForm onMessageCreated={handleCreateMessage} />
+    </div>
+  );
+}
+
+export default DisplayMessages;

src/SeeLatestButton.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+function SeeLatestButton() {
+  const [messages, setMessages] = useState([]);
+
+  const fetchLatestMessages = () => {
+    fetch("https://delnia-alipour-chat-server.glitch.me/messages/latest")
+      .then((res) => res.json())
+      .then((data) => setMessages(data))
+      .catch((error) => console.error("Error fetching messages:", error));
+  };
+
+  return (
+    <div>
+      <h2>See Latest Messages</h2>
+      <button onClick={fetchLatestMessages}>See Latest</button>
+      <ul>
+        {messages.map((message) => (
+          <li key={message.id}>
+            {message.from}: {message.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default SeeLatestButton;