London Class 8-Timea Reich- cyf-chat-react

package.json

@@ -3,8 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "3.0.1"
   },
   "scripts": {

src/AllMessages.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEraser } from "@fortawesome/free-solid-svg-icons";
+
+const AllMessages = (props) => {
+  // console.log(props.allMessages);
+  // const getData = async () => {
+  //   const response = await fetch(
+  //     "https://timeareich-chat-server.glitch.me/messages"
+  //   );
+  //   const data = await response;
+  //   console.log(data);
+  // };
+
+  // console.log(data);
+  const onClickHandle = async (index) => {
+    const response = await fetch(
+      `https://timeareich-chat-server.glitch.me/messages${index}`,
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        mode: "cors",
+      }
+    );
+    const data = await response.json();
+    props.setAllMessages(data.messages);
+  };
+  const data = props.allMessages;
+  return (
+    <div>
+      {data
+        ? data.map((item, index) => (
+            <div key={item.id} className="messages-div">
+              <p className="messages">{item.text}</p>
+              <p className="from">{item.from}</p>
+              <button
+                onClick={onClickHandle.bind(null, index)}
+                className="erase-button"
+              >
+                {" "}
+                <FontAwesomeIcon icon={faEraser} />{" "}
+              </button>
+            </div>
+          ))
+        : "waiting..."}
+    </div>
+  );
+};
+export default AllMessages;

src/AllMessagesButton.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const AllMessagesButton = (props) => {
+  // const handleClick = () => {
+  //   fetch("https://timeareich-chat-server.glitch.me/messages")
+  //     .then((response) => response.json())
+  //     .then((data) => props.setAllMessages(data));
+  // };
+
+  const handleClick = async () => {
+    const response = await fetch(
+      "https://timeareich-chat-server.glitch.me/messages"
+    );
+    const data = await response.json();
+    props.setAllMessages(data);
+  };
+
+  return (
+    <Link to={"/messages"}>
+      <button onClick={handleClick} className="all-messages-button">
+        View All Messages
+      </button>
+    </Link>
+  );
+};
+export default AllMessagesButton;

src/App.css

@@ -9,7 +9,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #f0f0f0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -19,15 +19,68 @@
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+h1 {
+  color: coral;
 }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+input {
+  border: none;
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+}
+label {
+  font-size: 18px;
+  color: rgb(75, 36, 22);
+}
+button {
+  margin-top: 1rem;
+  padding: 0.5rem 3rem;
+  background-color: coral;
+  border: none;
+  border-radius: 20px;
+  color: white;
+  font-weight: 600;
+  font-size: 20px;
+}
+.all-messages-button {
+  background-color: #fff;
+  border: 2px solid coral;
+  color: coral;
+  font-weight: 300;
+  font-size: 16px;
+}
+.messages-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.messages {
+  font-size: 18px;
+  color: rgb(75, 36, 22);
+  border-bottom: 5px solid coral;
+  background-color: #f0f0f0;
+  padding: 1rem;
+  margin-bottom: 0;
+  margin-top: 3rem;
+}
+.warning-message {
+  font-size: 12px;
+  color: rgb(75, 36, 22);
+}
+.from {
+  margin-top: 0;
+  font-style: italic;
+  position: relative;
+  left: 5rem;
+}
+.all-messages-div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.erase-button {
+  position: relative;
+  left: 300px;
+  bottom: 90px;
+  border-radius: 2px;
 }

src/App.js

@@ -1,25 +1,53 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import "./App.css";
+import UserInput from "./UserInput";
+import AllMessagesButton from "./AllMessagesButton";
+import AllMessages from "./AllMessages";
+import LatestMessages from "./LatestMessages";
+import LatestMessagesButton from "./LatestMessagesButton";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 function App() {
+  const [allMessages, setAllMessages] = useState("");
+  const [latestMessages, setLatestMessages] = useState("");
+  console.log(allMessages);
   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>
-    </div>
+    <Router>
+      <Routes>
+        <Route
+          exact
+          path="/"
+          element={
+            <div className="App">
+              <header className="App-header">
+                <h1>CYF CHAT</h1>
+                <UserInput setAllMessages={setAllMessages} />
+                <AllMessagesButton setAllMessages={setAllMessages} />
+                <LatestMessagesButton setLatestMessages={setLatestMessages} />
+              </header>
+            </div>
+          }
+        />
+        <Route
+          path="/messages"
+          element={
+            <AllMessages
+              setAllMessages={setAllMessages}
+              allMessages={allMessages}
+            />
+          }
+        />
+        <Route
+          path="/messages/latest"
+          element={
+            <LatestMessages
+              allMessages={allMessages}
+              latestMessages={latestMessages}
+            />
+          }
+        />
+      </Routes>
+    </Router>
   );
 }
 

src/LatestMessages.js

@@ -0,0 +1,19 @@
+import React from "react";
+const LatestMessages = (props) => {
+  console.log(props.latestMessages.messages);
+  let data = props.latestMessages;
+
+  return (
+    <div className="all-messages-div">
+      <p>{data.message}</p>
+      {data
+        ? data.messages.map((item) => (
+            <p className="messages" key={item.id}>
+              {item.text}
+            </p>
+          ))
+        : ""}
+    </div>
+  );
+};
+export default LatestMessages;

src/LatestMessagesButton.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+const LatestMessagesButton = (props) => {
+  const handleClick = async () => {
+    const response = await fetch(
+      "https://timeareich-chat-server.glitch.me/messages/latest"
+    );
+    const data = await response.json();
+    props.setLatestMessages(data);
+  };
+
+  return (
+    <Link to={"/messages/latest"}>
+      <button onClick={handleClick} className="all-messages-button">
+        See Latest
+      </button>
+    </Link>
+  );
+};
+export default LatestMessagesButton;

src/UserInput.js

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+
+const UserInput = (props) => {
+  const [name, setName] = useState("");
+  const [text, setText] = useState("");
+  const [responseMessage, setResponseMessage] = useState("");
+
+  // async function postInput() {
+  //   const message = { from: name, text: text };
+  //   const response = await fetch("http://localhost:9000/messages", {
+  //     method: "POST",
+  //     headers: { "Content-Type": "application/json" },
+  //     mode: "cors",
+  //     body: JSON.stringify(message),
+  //   });
+  //   console.log(response);
+  //   const data = response.json();
+  //   console.log(data);
+  // }
+
+  const postInput = async () => {
+    const message = { from: name, text: text };
+    //console.log(message);
+    const response = await fetch(
+      "https://timeareich-chat-server.glitch.me/messages",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        mode: "cors",
+        body: JSON.stringify(message),
+      }
+    );
+    const data = await response.json();
+    setResponseMessage(data);
+  };
+
+  //.then((response) => response.json())
+  // .then((res) => {
+  //   console.log(res.json());
+  // })
+  // .then((data) => {
+  //   console.log(data);
+  // })
+  // .catch((err) => {
+  //   console.log("Error:", err);
+  // });
+  //   .then((response) => response.json())
+  //   .then((data) => console.log(data));
+  // console.log(response);
+
+  async function handleClick(e) {
+    e.preventDefault();
+    await postInput();
+  }
+
+  return (
+    <div>
+      <form>
+        <label htmlFor="from">Name:</label>
+        <input
+          onChange={(e) => setName(e.target.value)}
+          type="text"
+          name="from"
+          placeholder="your name"
+        ></input>
+        <br />
+        <label htmlFor="text">Message:</label>
+        <input
+          onChange={(e) => setText(e.target.value)}
+          type="text"
+          name="text"
+          placeholder="your message"
+        ></input>
+        {responseMessage.warning ? (
+          <p className="warning-message">{responseMessage.warning}</p>
+        ) : (
+          ""
+        )}
+
+        <br />
+        <button onClick={handleClick}>Submit</button>
+      </form>
+    </div>
+  );
+};
+export default UserInput;

src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.