london_10|shadi_fakhri|cyf_chat_react

package.json

@@ -3,9 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "express": "^4.18.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,33 +1,101 @@
 .App {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.headerDiv{
+color:rgb(245, 181, 193)
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+
+
+.mainForm{
+  background-color:rgb(167, 165, 165);
+  border-radius: 5px;
+  height: 500px;
+  width: 500px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
-
-.App-link {
-  color: #61dafb;
+.messageDiv{
+  background-color: pink;
+  border-radius: 5px;
+  height: 250px;
+  width: 300px;
 }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.nameDiv{
+  background-color: pink;
+  border-radius: 5px;
+  height: 70px;
+  width: 300px;
+
+}
+.AddButtonDiv{
+  background-color: blueviolet;
+  margin-top: 10px;
+}
+.newMessageDiv{
+  margin-top: 15px;
+  width: 500px;
+  background-color: yellow;
+}
+.deleteBtn{
+ float: right;
+}
+.newMessageDiv{
+  float: left;
+}
+.newNameDiv{
+  float: left;
+}
+.mainMessageDiv{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background-color: rgb(248, 221, 226);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+.textArea{
+color:rgb(245, 181, 193);
+font-weight: bold;
+} 
+.inputId{
+color:rgb(245, 181, 193);
+font-weight: bold;
+}
+.addBtn{
+  color: rgb(245, 181, 193);
+  margin-top: 10px;
+  font-weight: bold;
+}
+.textDiv{
+  width:380 ;
+  height: 50;
+  color: rgb(139, 137, 137);
+  font-weight: bold;
+  padding-left: 0PX;
+}
+.fromDiv{
+  width:100 ;
+  height: 50;
+  padding-left: 0PX;
+  color: rgb(139, 137, 137);
+  font-weight: bold;
+}
+.deleteDiv{
+  width: 20px;
+  height: 10px;
+  margin: 5px;
 }
+.deleteBtn{
+  color: rgb(139, 137, 137);
+  font-weight: bold;
+
+
+}

src/App.js

@@ -1,24 +1,48 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useEffect, useState } from "react";
+import MainForm from "./MainForm.js";
+import Header from "./Header.js";
+import "./App.css";
 
 function App() {
+  const [loadData, setLoadData] = useState([]);
+
+  useEffect(() => {
+
+
+    const getData = async () => {
+      try {
+        const response = await fetch(
+          `https://chat-server-nke3.onrender.com/messages`
+        );
+        if(!response.ok){
+          throw new Error("something went wrong")
+        }
+        const data = await response.json();
+        return setLoadData(data);
+      } catch (error){
+        console.error("Error fetching data:", error)
+      } 
+
+
+
+      //we get all data from backend with get api
+      // fetch(`https://chat-server-nke3.onrender.com/messages`)
+      //   .then((res) => res.json())
+      //   .then((data) => {
+      //     setLoadData(data);
+      //   })
+      //   .catch((error) => {
+      //     console.error("Error fetching data:", error);
+      //   });
+    };
+    getData()
+  }, [setLoadData]);
+
+
   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>
+      <Header />
+      <MainForm loadData={loadData} setLoadData={setLoadData} />
     </div>
   );
 }

src/Header.js

@@ -0,0 +1,11 @@
+import React from "react";
+const Header = () => {
+  return (
+    <div>
+      <div className="headerDiv">
+        <h1>welcome to chat server</h1>
+      </div>
+    </div>
+  );
+};
+export default Header;

src/MainForm.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import NewMessage from "./NewMessage";
+
+const MainForm = (props) => {
+  const { loadData, setLoadData } = props;
+
+  const [nameData, setNameData] = useState("");
+  const [textData, setTextData] = useState("");
+
+  function clickHandler(e) {
+    e.preventDefault();
+    const newMessage = { from: nameData, text: textData, id: loadData.length };
+    //fetch for post method
+    fetch(`https://chat-server-nke3.onrender.com/messages`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(newMessage),
+    });
+
+    //with updating the state we can call get api again from backend and have
+    //an array with all the previous obj with the new one that we posted
+    setLoadData((prevLoadData) => [...prevLoadData, newMessage]);
+    setNameData("");
+    setTextData("");
+  }
+
+  return (
+    <div>
+      <form className="mainForm" onSubmit={clickHandler}>
+        <label htmlFor="textArea" className="textArea">
+          Text
+        </label>
+        <textarea
+          id="textArea"
+          value={textData}
+          required
+          placeholder="write here ..."
+          onChange={(e) => setTextData(e.target.value)}
+        ></textarea>
+
+        <label htmlFor="inputId" className="inputId">
+          From
+        </label>
+        <input
+          id="inputId"
+          value={nameData}
+          required
+          onChange={(e) => setNameData(e.target.value)}
+        ></input>
+
+        <button className="addBtn" type="submit">
+          Add
+        </button>
+      </form>
+
+      {loadData.length > 0 ? (
+        loadData.map((item) => (
+          <NewMessage
+            key={item.id}
+            item={item}
+            setLoadData={setLoadData}
+          />
+        ))
+      ) : (
+        <p>No messages yet.</p>
+      )}
+
+      {/* <NewMessage name={nameData} text={textData}/> */}
+    </div>
+  );
+};
+
+export default MainForm;

src/NewMessage.js

@@ -0,0 +1,54 @@
+
+
+import React from "react";
+
+const NewMessage = (props) => {
+ const {setLoadData } = props;
+ function deletBtnHandler(e) {
+
+   e.preventDefault();
+   const deleteMessage = {
+     from: props.item.from,
+     text: props.item.text,
+     id: props.item.id,
+   };
+   fetch(`https://chat-server-nke3.onrender.com/messages/${props.item.id}`, {
+     method: "DELETE",
+     headers: {
+       "Content-Type": "application/json",
+     },
+     body: JSON.stringify(deleteMessage),
+   })
+     .then((response) => {
+       if (!response.ok) {
+         throw new Error("Network response was not ok");
+       }
+       return response.json();
+     })
+     .then((data) => {
+       setLoadData(data);
+     });
+ }
+
+  return (
+    <div>
+      <div className="mainMessageDiv">
+        <div className="textDiv">
+          <p>{props.item.text}</p>
+        </div>
+        <div className="fromDiv">
+          <p>{props.item.from}</p>
+        </div>
+        <div className="deleteDiv">
+          <button className="deleteBtn" onClick={deletBtnHandler}>Delete</button>
+        </div>
+      </div>
+    </div>
+  );
+
+};
+
+export default NewMessage;
+
+
+