Glasgow - Class 06 - Malkit Benning - Node Week 2 Stretch

package.json

@@ -8,8 +8,8 @@
     "react-scripts": "3.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "NODE_OPTIONS='--openssl-legacy-provider' react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.css

@@ -1,33 +1,10 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  background-color: #d1d8e4;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+
   font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  color: rgb(60, 56, 56);
 }

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 Messages from "./Messages";
 
 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>
+        <p>Welcome to chat server</p>
       </header>
+      <Messages />
     </div>
   );
 }

src/LoadingWait.css

@@ -0,0 +1,10 @@
+.loading-container{
+  text-align: center;
+}
+
+.loading-text{
+  font-size: larger;
+  color: brown;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}

src/LoadingWait.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./LoadingWait.css";
+
+function LoadingWait() {
+  return (
+    <div className="loading-container">
+      <p className="loading-text">Loading...Please wait...</p>
+    </div>
+  );
+}
+
+export default LoadingWait;

src/Message.css

@@ -0,0 +1,47 @@
+.message-row {
+  font-size: larger;
+  background-color: rgb(195, 216, 209);
+  width: 80%;
+  margin: 8px auto;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: 6fr 2fr 1fr;
+}
+
+.message-text-container{
+  background-color: #e8e6e4;
+  border-radius: 10px;
+  margin: 0.5rem;
+  padding: 0.5rem;
+}
+.delete-btn-container{
+  text-align: center;
+  padding: 0.5rem;
+}
+.delete-btn {
+  background-color: #D9C3CA;
+  font-size: large;
+  width: 6rem;
+  border-radius: 10px;
+  padding: 0.5rem;
+
+}
+
+@media (max-width: 1280px) {
+  .message-row {
+    font-size: medium;
+    width: 95%;
+    grid-template-columns: 6fr 2fr 1fr;
+  }
+  .delete-btn {
+    font-size: medium;
+    width: 6rem;
+    padding: 0.5rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .message-row {
+    grid-template-columns: 1fr;
+  }
+}

src/Message.js

@@ -0,0 +1,21 @@
+import React from "react";
+import "./Message.css";
+
+function Message(props) {
+  function handleDelete() {
+    props.setDeleteRow(props.chat.id);
+  }
+  return (
+    <div className="message-row">
+      <div className="message-text-container">{props.chat.text}</div>
+      <div className="message-text-container">{props.chat.from}</div>
+      <div className="delete-btn-container">
+        <button className="delete-btn" onClick={handleDelete}>
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Message;

src/MessageForm.css

@@ -0,0 +1,82 @@
+input[type="text"]
+{   padding: 0.5rem;
+    font-size:1.5rem;
+}
+textarea[type="text"]
+{   padding: 0.5rem;
+    font-size:1.5rem;
+}
+.chat-text-area{
+  width: 95%;
+  height: 8rem;
+  margin-bottom: 1rem;
+  border-radius: 10px;
+}
+
+.chat-from-input{
+  border-radius: 10px;
+  width: 95%;
+
+}
+
+.chat-label {
+  font-size: larger;
+  margin-left: 1rem;
+}
+.chat-form{
+  border: 5px solid rgba(90, 34, 7, 0.225);
+  border-radius: 10px;
+  width: 40%;
+  padding: 1rem;
+  margin: 0 auto;
+}
+.form-container{
+  width: 60%;
+  margin: 0.5rem auto;
+  font: larger;
+  background-color: #e8e6e4;
+  border-radius: 10px;
+  padding: 0.5rem;
+}
+
+.add-chat-btn {
+  background-color: #C7C3D9;
+  font-size: large;
+  width: 6rem;
+  border-radius: 10px;
+  padding: 0.5rem;
+
+}
+
+.add-chat-btn-container{
+  padding: 1rem;
+  text-align: end;
+}
+
+@media (max-width: 1280px) {
+  .form-container {
+    width: 80%;
+  }
+  .chat-form {
+    width: 20rem;
+  }
+
+}
+
+@media (max-width: 720px) {
+  .form-container {
+    width: 90%;
+  }
+  .chat-form {
+    width: 20rem;
+  }
+
+}
+
+@media (max-width: 400px) {
+
+  .chat-form {
+    width: 16rem;
+  }
+
+}

src/MessageForm.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import "./MessageForm.css";
+
+function MessageForm(props) {
+  const [text, setText] = useState("");
+  const [from, setFrom] = useState("");
+  function handleSubmit(event) {
+    event.preventDefault();
+    const createdChat = { text, from };
+    fetch("https://malkit-chat-server.glitch.me/messages/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(createdChat) })
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        props.setChats(data);
+        setText("");
+        setFrom("");
+      });
+  }
+
+  return (
+    <div className="form-container">
+      <form className="chat-form" onSubmit={handleSubmit}>
+        <div>
+          <label className="chat-label">Your Message</label>
+        </div>
+        <div>
+          <textarea className="chat-text-area" type="text" required value={text} onChange={(e) => setText(e.target.value)} />
+        </div>
+        <div>
+          <label className="chat-label">Your Name</label>
+        </div>
+        <div>
+          <input className="chat-from-input" type="text" required value={from} onChange={(e) => setFrom(e.target.value)} />
+        </div>
+        <div className="add-chat-btn-container">
+          <button className="add-chat-btn">Add Chat</button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default MessageForm;

src/MessageList.css

@@ -0,0 +1,4 @@
+.message-list{
+  list-style-type: none;
+  padding: 0;
+}

src/MessageList.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import "./MessageList.css";
+import Message from "./Message";
+
+function MessageList(props) {
+  const [deleteRow, setDeleteRow] = useState(null);
+
+  useEffect(() => {
+    if (deleteRow || deleteRow === 0)
+      fetch("https://malkit-chat-server.glitch.me/messages/" + deleteRow, { method: "DELETE" })
+        .then((res) => res.json())
+        .then((data) => {
+          props.setChats(data);
+        });
+  }, [deleteRow]);
+
+  return (
+    <div>
+      <ul className="message-list">
+        {props.chats.map((chat) => {
+          return (
+            <li key={chat.id}>
+              <Message chat={chat} deleteRow={deleteRow} setDeleteRow={setDeleteRow} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default MessageList;

src/Messages.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import MessageForm from "./MessageForm";
+import MessageList from "./MessageList";
+import LoadingWait from "./LoadingWait";
+
+function Messages() {
+  const [chats, setChats] = useState([]);
+  const [chatsReady, setChatsReady] = useState(false);
+
+  useEffect(() => {
+    setChatsReady(false);
+    fetch("https://malkit-chat-server.glitch.me/messages")
+      .then((res) => res.json())
+      .then((data) => {
+        setChats(data);
+        setChatsReady(true);
+      });
+  }, []);
+
+  return (
+    <div>
+      <MessageForm setChats={setChats} />
+      {chatsReady ? <MessageList chats={chats} setChats={setChats} /> : <LoadingWait />}
+    </div>
+  );
+}
+
+export default Messages;