Add getAllposts, addPost for client&server

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^0.27.2",
+        "dateformat": "^5.0.3",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-icons": "^4.4.0",
@@ -5959,6 +5960,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/dateformat": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-5.0.3.tgz",
+      "integrity": "sha512-Kvr6HmPXUMerlLcLF+Pwq3K7apHpYmGDVqrxcDasBg86UcKeTSNWbEzU8bwdXnxnR44FtMhJAxI4Bov6Y/KUfA==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -20639,6 +20648,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "dateformat": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-5.0.3.tgz",
+      "integrity": "sha512-Kvr6HmPXUMerlLcLF+Pwq3K7apHpYmGDVqrxcDasBg86UcKeTSNWbEzU8bwdXnxnR44FtMhJAxI4Bov6Y/KUfA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "dateformat": "^5.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",

+import dateFormat from "dateformat";
+import { useEffect, useState } from "react";
+import authService from "../service/auth";
 import "../styles/layout.scss";
 
 function Tweet({ writer, createdAt, text }) {
+  const [username, setUsername] = useState("");
+  const dateTime = dateFormat(createdAt);
+
+  useEffect(() => {
+    async function fetchUsername() {
+      const user = await authService.handleGetUser(writer);
+      setUsername(user);
+    }
+    fetchUsername();
+  }, [username, setUsername]);
+
   return (
     <div className="tweetBox">
       <p>{text}</p>
       <small>
-        <b>{writer}</b> {createdAt}
+        <b>{username}</b>
       </small>
+      <small>{dateTime}</small>
     </div>
   );
 }

+import { useEffect, useState } from "react";
+import postsService from "../service/posts";
 // components
 import Tweet from "../components/Tweet";
 import Topbar from "../components/Topbar";
 import Bottombar from "../components/Bottombar";
 
 function Tweets() {
-  const posts = [
-    {
-      user: "tom",
-      text: "test post",
-      createdAt: "2022-02-11",
-    },
-    {
-      user: "jasmine",
-      text: "test post #2",
-      createdAt: "2022-03-03",
-    },
-  ];
+  const [posts, setPosts] = useState([]);
+  const [text, setText] = useState("");
+
+  const onRefresh = async () => {
+    const posts = await postsService.getAllPosts();
+    setPosts(posts);
+  };
+
+  const onTextInput = (e) => {
+    setText(e.target.value);
+  };
+  const handlePost = (e) => {
+    e.preventDefault();
+    postsService.addPost(text);
+    setText("");
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      const posts = await postsService.getAllPosts();
+      setPosts(posts);
+    }
+    fetchData();
+  }, []);
 
   return (
     <div>
       <Topbar />
 
       <div className="mainBox">
-        <h2>Social Network</h2>
+        <h2>
+          Social Network <button onClick={() => onRefresh()}>refresh</button>
+        </h2>
+
         <br />
-        {posts.map((data, index) => (
+
+        <form className="" onSubmit={(e) => handlePost(e)}>
+          <label htmlFor="text">
+            <input
+              placeholder="How's the weather?"
+              onChange={(e) => onTextInput(e)}
+              value={text}
+              type="text"
+              id="text"
+            />
+          </label>
+          <label className="submitBtn" htmlFor="submit">
+            <input value="Post" type="submit" id="submit" />
+          </label>
+        </form>
+
+        <br />
+
+        {!posts
+          ? ""
+          : posts.map((post, index) => (
               <Tweet
                 key={index}
-            writer={data.user}
-            text={data.text}
-            createdAt={data.createdAt}
+                text={post.text}
+                writer={post.user}
+                createdAt={post.createdAt}
               />
             ))}
       </div>

@@ -61,10 +61,22 @@ const handleUserEdit = async ({ username, country, city, email }) => {
   }
 };
 
+const handleGetUser = async (userId) => {
+  try {
+    const response = await axios.post("http://localhost:8080/api/users/self", {
+      userId,
+    });
+    return response.data.username;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 const authService = {
   handleSignup,
   handleLogin,
   handleUserEdit,
+  handleGetUser,
 };
 
 export default authService;

+const axios = require("axios").default;
+
+const getAllPosts = async () => {
+  try {
+    const response = await axios.get("http://localhost:8080/api/posts");
+    return response.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+const addPost = async (text) => {
+  const token = JSON.parse(sessionStorage.getItem("user-token")).token;
+  try {
+    const response = await axios.post("http://localhost:8080/api/posts/add", {
+      text,
+      token,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+const postsService = {
+  getAllPosts,
+  addPost,
+};
+
+export default postsService;

@@ -19,6 +19,7 @@ html {
   align-items: center;
   min-height: 82vh;
   margin-top: 13vh;
+  margin-bottom: 10vh;
   padding-left: 1rem;
   padding-right: 1rem;
   font-size: 2rem;
@@ -98,16 +99,17 @@ hr {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  width: 60%;
+  width: 55%;
   border: solid gray 2px;
   border-radius: 4px;
   margin-bottom: 1rem;
-  padding: 0.2rem;
+  padding: 0.2rem 0.4rem;
   small {
     font-size: 1.5rem;
     margin-top: 0.3rem;
     b {
       font-size: 1.6rem;
+      margin-right: 0.5rem;
     }
   }
 }