Eric Whale

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;
}
}
}
......