From 9a680b81ace566149c88fd7bd202d918fdab314f Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 9 Jul 2024 16:34:09 +0200 Subject: [PATCH] make every client logic promised #149 --- .../socialcode/api_mongoose/index.js | 2 +- .../api_mongoose/logic/getUserName.js | 2 +- .../api_mongoose/logic/getUserName.test.js | 2 +- .../socialcode/app/src/logic/createPost.js | 15 +++--- .../socialcode/app/src/logic/deletePost.js | 15 +++--- .../socialcode/app/src/logic/getAllPosts.js | 17 +++---- .../socialcode/app/src/logic/getUserName.js | 18 +++---- .../socialcode/app/src/logic/loginUser.js | 18 +++---- .../socialcode/app/src/logic/registerUser.js | 16 +++---- .../socialcode/app/src/logic/toggleLike.js | 15 +++--- .../socialcode/app/src/views/Home.jsx | 15 +++--- .../socialcode/app/src/views/Login.jsx | 10 ++-- .../socialcode/app/src/views/Register.jsx | 14 ++---- .../app/src/views/components/CommentList.jsx | 0 .../views/components/CreatePostComment.jsx | 39 ++++++++++++++- .../src/views/components/CreatePostForm.jsx | 12 +++-- .../app/src/views/components/Post.jsx | 48 ++++++++++--------- .../app/src/views/components/PostList.jsx | 10 ++-- 18 files changed, 149 insertions(+), 119 deletions(-) create mode 100644 staff/mateo-gomez/socialcode/app/src/views/components/CommentList.jsx diff --git a/staff/mateo-gomez/socialcode/api_mongoose/index.js b/staff/mateo-gomez/socialcode/api_mongoose/index.js index ac0c1a06e..5f2e28a4e 100644 --- a/staff/mateo-gomez/socialcode/api_mongoose/index.js +++ b/staff/mateo-gomez/socialcode/api_mongoose/index.js @@ -276,7 +276,7 @@ mongoose.connect(MONGODB_URL) } - res.status(200).send() + res.status(204).send() }) }) } catch (error) { diff --git a/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.js b/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.js index cd754bef7..ce919fe81 100644 --- a/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.js +++ b/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.js @@ -7,7 +7,7 @@ const getUserName = (userId, targetUserId, callback) => { validate.username(targetUserId, 'targetUserId') validate.callback(callback) - User.findById({ userId }).lean() + User.findById(userId).lean() .then(user => { if (!user) { callback(new MatchError('user not found')) diff --git a/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.test.js b/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.test.js index 871d057b4..aa937f0e2 100644 --- a/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.test.js +++ b/staff/mateo-gomez/socialcode/api_mongoose/logic/getUserName.test.js @@ -8,7 +8,7 @@ const { MONGODB_URL } = process.env mongoose.connect(MONGODB_URL) .then(() => { try { - getUserName('668a739a50df84d483367be9', '668a78423a0226d1ab93fe55', (error, name) => { + getUserName('668bb1b3a8796a3c7044e7ca', '668bb1b3a8796a3c7044e7ca', (error, name) => { if (error) { console.error(error) diff --git a/staff/mateo-gomez/socialcode/app/src/logic/createPost.js b/staff/mateo-gomez/socialcode/app/src/logic/createPost.js index 8bdf35408..8562f1375 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/createPost.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/createPost.js @@ -2,11 +2,11 @@ import errors from 'com/errors' import validate from 'com/validate.js' -const createPost = (title, image, description, callback) => { +const createPost = (title, image, description) => { validate.text(title, 'title', 50) validate.url(image, 'image') validate.text(description, 'description', 300) - validate.callback(callback) + @@ -44,7 +44,7 @@ const createPost = (title, image, description, callback) => { */ - fetch(`${import.meta.env.VITE_API_URL}/posts`, { + return fetch(`${import.meta.env.VITE_API_URL}/posts`, { method: 'POST', headers: { Authorization: `Bearer ${sessionStorage.token}`, @@ -52,25 +52,24 @@ const createPost = (title, image, description, callback) => { }, body: JSON.stringify({ title, image, description }) }) - + .catch(error => { throw new SystemError(error.message) }) .then(response => { if (resonse.status === 201) { - callback(null) return } return response.json() + .catch(error => { throw new SystemError(error.message) }) .then(body => { const { error, message } = body const constructor = errors[error] - callback(new constructor(message)) + { throw new constructor(message) } }) - .catch(error => callback(new SystemError(error.message))) + }) - .catch(error => callback(new SystemError(error.message))) } diff --git a/staff/mateo-gomez/socialcode/app/src/logic/deletePost.js b/staff/mateo-gomez/socialcode/app/src/logic/deletePost.js index f1879552a..124e64da6 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/deletePost.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/deletePost.js @@ -2,9 +2,9 @@ import errors, { SystemError } from 'com/errors' import validate from 'com/validate' -const deletePost = (postId, callback) => { +const deletePost = (postId) => { validate.id(postId, 'postId') - validate.callback(callback) + /* @@ -34,32 +34,31 @@ const deletePost = (postId, callback) => { */ - fetch(`${import.meta.env.VITE_API_URL}/posts/${postId}`, { + return fetch(`${import.meta.env.VITE_API_URL}/posts/${postId}`, { method: 'DELETE', headers: { Authorization: `Bearer ${sessionStorage.token}` } }) - + .catch(error => { throw new SystemError(error.message) }) .then(response => { if (response.status === 204) { - callback(null) return } return response.json() + .catch(error => { throw new SystemError(error.message) }) .then(body => { const { error, message } = body const constructor = errors[error] - callback(new constructor(message)) + throw new constructor(message) }) - .catch(error => callback(new SystemError(error.message))) }) - .catch(error => callback(new SystemError(error.message))) + } export default deletePost diff --git a/staff/mateo-gomez/socialcode/app/src/logic/getAllPosts.js b/staff/mateo-gomez/socialcode/app/src/logic/getAllPosts.js index 7a5554223..81ad642a5 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/getAllPosts.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/getAllPosts.js @@ -1,9 +1,7 @@ import errors, { SystemError } from 'com/errors' -import validate from 'com/validate' -const getAllPosts = callback => { - validate.callback(callback) +const getAllPosts = () => { /* @@ -31,31 +29,34 @@ const getAllPosts = callback => { xhr.send() */ - fetch(`${import.meta.env.VITE_API_URL}/posts`, { + return fetch(`${import.meta.env.VITE_API_URL}/posts`, { headers: { method: 'GET', Authorization: `Bearer ${sessionStorage.token}` } }) + .catch(error => { throw new SystemError(error.message) }) .then(response => { if (response.status === 200) { return response.json() - .then(posts => callback(null, posts)) + .catch(error => { throw new SystemError(error.message) }) + .then(posts => { return posts }) + } return response.json() + .catch(error => { throw new SystemError(error.message) }) .then(body => { const { error, message } = body const constructor = errors[error] - callback(new constructor(message)) + throw new constructor(message) }) - .catch(error => callback(new SystemError(error.message))) + }) - .catch(error => callback(new SystemError(error.message))) } diff --git a/staff/mateo-gomez/socialcode/app/src/logic/getUserName.js b/staff/mateo-gomez/socialcode/app/src/logic/getUserName.js index 3ef24c56f..3b7ca197a 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/getUserName.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/getUserName.js @@ -4,12 +4,12 @@ import validate from 'com/validate.js' import extractPayloadFromJWT from '../utils/extractPayloadFromJWT.js' -const getUserName = callback => { +const getUserName = () => { /* const user = data.findUser(user => user.username === sessionStorage.username) return user.name*/ - validate.callback(callback) + const { sub: userId } = extractPayloadFromJWT(sessionStorage.token) @@ -39,36 +39,36 @@ const getUserName = callback => { */ - fetch(`${import.meta.env.VITE_API_URL}/users/${userId}`, { + return fetch(`${import.meta.env.VITE_API_URL}/users/${userId}`, { method: 'GET', headers: { Authorization: `Bearer ${sessionStorage.token}` //Authorization no hace falta que vayta entre comillas porque no tiene guion en medio } }) + .catch(error => { throw new SystemError(error.message) }) .then(response => { // respuesta de la api if (response.status === 200) { - callback(null) + return response.json() //La respuesta la convertmos de json a objeto, es decir, a JavaScript + .catch(error => { throw new SystemError(error.message) }) .then(name => { //Esperamos como respuesta el name - - callback(null, name) + { return name } }) } return response.json() + .catch(error => { throw new SystemError(error.message) }) // si la respuesta response.json() falla .then(body => { // respuesta en forma de objeto porque lo transformamos a json(). (({error es el nombre de la constructora de error y message es el mensaje de error})) const { error, message } = body const constructor = errors[error] //A partir del nombre de la constructora traemos la constructora a const constructor puesto que errors[error] es un objeto en el que están todas las constructoras de error - callback(new constructor(message)) // reconstruyo el error con el mensaje que me viene de la api + throw new constructor(message) // reconstruyo el error con el mensaje que me viene de la api }) - .catch(error => callback(new SystemError(error.message))) // si la respuesta response.json() falla }) - .catch(error => callback(new SystemError(error.message))) } diff --git a/staff/mateo-gomez/socialcode/app/src/logic/loginUser.js b/staff/mateo-gomez/socialcode/app/src/logic/loginUser.js index c07ace558..634ab0acb 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/loginUser.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/loginUser.js @@ -3,11 +3,9 @@ import validate from 'com/validate' -const loginUser = (username, password, callback) => { +const loginUser = (username, password) => { validate.username(username) validate.password(password) - validate.callback(callback) - /* const xhr = new XMLHttpRequest @@ -41,7 +39,7 @@ const loginUser = (username, password, callback) => { xhr.setRequestHeader('Content-Type', 'application/json') xhr.send(json)*/ - fetch(`${import.meta.env.VITE_API_URL}/users/auth`, { + return fetch(`${import.meta.env.VITE_API_URL}/users/auth`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -49,31 +47,33 @@ const loginUser = (username, password, callback) => { }, body: JSON.stringify({ username, password }) }) + .catch(() => { throw new SystemError('connection error') }) .then(response => { // respuesta de la api if (response.status === 200) { - callback(null) return response.json() //La respuesta la convertmos de json a objeto, es decir, a JavaScript + .catch(error => { throw new SystemError(error.message) }) .then(token => { sessionStorage.token = token - callback(null) + return token }) } return response.json() + .catch(error => { throw new SystemError(error.message) }) // si la respuesta response.json() falla .then(body => { // respuesta en forma de objeto porque lo transformamos a json(). (({error es el nombre de la constructora de error y message es el mensaje de error})) const { error, message } = body const constructor = errors[error] //A partir del nombre de la constructora traemos la constructora a const constructor puesto que errors[error] es un objeto en el que están todas las constructoras de error - callback(new constructor(message)) // reconstruyo el error con el mensaje que me viene de la api + throw new constructor(message) // reconstruyo el error con el mensaje que me viene de la api }) - .catch(error => callback(new SystemError(error.message))) // si la respuesta response.json() falla + }) - .catch(error => callback(new SystemError(error.message))) + } diff --git a/staff/mateo-gomez/socialcode/app/src/logic/registerUser.js b/staff/mateo-gomez/socialcode/app/src/logic/registerUser.js index f145d4cb2..fb3fcef41 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/registerUser.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/registerUser.js @@ -2,7 +2,7 @@ import errors, { SystemError } from 'com/errors' import validate from 'com/validate' -const registerUser = (name, surname, email, username, password, passwordRepeat, callback) => { +const registerUser = (name, surname, email, username, password, passwordRepeat) => { //Input validation validate.name(name) validate.surname(surname) @@ -10,7 +10,7 @@ const registerUser = (name, surname, email, username, password, passwordRepeat, validate.username(username) validate.password(password) validate.passwordMatch(password, passwordRepeat) - validate.callback(callback) + //Aquí lo haciamos con xhr pero lo cambiamos a getch() para poder hacer uso de las promesas /* @@ -54,7 +54,7 @@ const registerUser = (name, surname, email, username, password, passwordRepeat, //Ahora utilizamso la lógica con fetch() para utilizar las promesas - fetch(`${import.meta.env.VITE_API_URL}/users`, { + return fetch(`${import.meta.env.VITE_API_URL}/users`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -62,25 +62,25 @@ const registerUser = (name, surname, email, username, password, passwordRepeat, }, body: JSON.stringify({ name, surname, email, username, password, passwordRepeat }) }) + .catch(() => { throw new SystemError('connection error') }) .then(response => { // respuesta de la api if (response.status === 201) { - callback(null) return } return response.json() + .catch(error => { throw new SystemError(error.message) }) // si la respuesta response.json() falla .then(body => { // respuesta en forma de objeto porque lo transformamos a json(). (({error es el nombre de la constructora de error y message es el mensaje de error})) const { error, message } = body const constructor = errors[error] //A partir del nombre de la constructora traemos la constructora a const constructor puesto que errors[error] es un objeto en el que están todas las constructoras de error - callback(new constructor(message)) // reconstruyo el error con el mensaje que me viene de la api + throw new constructor(message) }) - .catch(error => callback(new SystemError(error.message))) // si la respuesta response.json() falla + }) - .catch(error => callback(new SystemError(error.message))) -} +} export default registerUser diff --git a/staff/mateo-gomez/socialcode/app/src/logic/toggleLike.js b/staff/mateo-gomez/socialcode/app/src/logic/toggleLike.js index dda5393ee..0f638d8fc 100644 --- a/staff/mateo-gomez/socialcode/app/src/logic/toggleLike.js +++ b/staff/mateo-gomez/socialcode/app/src/logic/toggleLike.js @@ -1,9 +1,9 @@ import errors from "com/errors.js" import validate from "com/validate.js" -const toggleLike = (postId, callback) => { +const toggleLike = (postId) => { validate.id(postId) - validate.callback(callback) + /* @@ -27,30 +27,31 @@ const toggleLike = (postId, callback) => { */ - fetch(`${import.meta.env.VITE_API_URL}/posts/${postId}/likes`, { + return fetch(`${import.meta.env.VITE_API_URL}/posts/${postId}/likes`, { method: 'PATCH', headers: { Authorization: `Bearer ${sessionStorage.token}` }, }) + .catch(error => { throw new SystemError(error) }) .then(response => { if (response.status === 204) { - callback(null) + return } return response.json() + .catch(error => { throw new SystemError(error) }) .then(body => { const { error, message } = body const constructor = errors[error] - callback(new constructor(message)) + throw new constructor(message) }) - .catch(error => callback(new SystemError(error.message))) }) - .catch(error => callback(new SystemError(error.message))) + } export default toggleLike \ No newline at end of file diff --git a/staff/mateo-gomez/socialcode/app/src/views/Home.jsx b/staff/mateo-gomez/socialcode/app/src/views/Home.jsx index 5e7e9f16c..fa82b71bf 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/Home.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/Home.jsx @@ -28,19 +28,20 @@ function Home({ onUserLoggedOut }) { useEffect(() => { try { - logic.getUserName((error, name) => { - if (error) { + logic.getUserName(name) + .then(name => { + console.log('Home -> setName') + + setName(name) + }) + .catch((error) => { console.error(error) alert(error.message) - return - } - console.log('Home -> setName') + }) - setName(name) - }) } catch (error) { console.error(error) diff --git a/staff/mateo-gomez/socialcode/app/src/views/Login.jsx b/staff/mateo-gomez/socialcode/app/src/views/Login.jsx index f4829e262..f889ce854 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/Login.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/Login.jsx @@ -18,17 +18,15 @@ function Login({ onUserLoggedIn, onRegisterLinkClick }) { const password = form.password.value try { - logic.loginUser(username, password, error => { - if (error) { + logic.loginUser(username, password) + .then(() => onUserLoggedIn()) + .catch((error) => { console.log(error) setMessage(error.message) - return - } + }) - onUserLoggedIn() - }) } catch (error) { console.log(error) diff --git a/staff/mateo-gomez/socialcode/app/src/views/Register.jsx b/staff/mateo-gomez/socialcode/app/src/views/Register.jsx index 3f1f4dd1f..b86f65c9f 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/Register.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/Register.jsx @@ -22,20 +22,14 @@ function Register({ onUserRegistered, onLoginLinkClick }) { const passwordRepeat = form.passwordRepeat.value try { - logic.registerUser(name, surname, email, username, password, passwordRepeat, error => { - if (error) { + logic.registerUser(name, surname, email, username, password, passwordRepeat) + .then(() => onUserRegistered()) + .catch((error) => { console.log(error) alert(error.message) - return - } - - - onUserRegistered() - - }) - + }) } catch (error) { diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/CommentList.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/CommentList.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostComment.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostComment.jsx index b0be83bfa..aea65bf2c 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostComment.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostComment.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; import logic from "../../logic" +import FormWithFeedback from '../../components/library/FormWithFeedBack' import Button from "../../components/core/Button"; function CreatePostComment({ postId, onCancelCreatedCommentClick, onCommentPostSubmitted }) { @@ -10,5 +11,39 @@ function CreatePostComment({ postId, onCancelCreatedCommentClick, onCommentPostS const handleCancelCommentClick = () => onCancelCreatedCommentClick() - const handleCreatePostComment = (event) -} \ No newline at end of file + const handleCreatePostComment = (event) => { + event.preventDefault() + + const form = event.target + + const textComment = form.textComment.value + + try { + logic.createPostComment(postId, textComment, (error) => { + if (error) { + console.error(error.message) + + setMessage(error.message) + + return + } + + onCommentPostSubmitted() + }) + } catch (error) { + console.error(error.message) + + setMessage(error.message) + } + } + + return ( + <> + +

TEST

+ + + ) +} + +export default CreatePostComment diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.jsx index dc0460eeb..8497e3705 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.jsx @@ -27,19 +27,21 @@ function CreatePostForm({ onCancelCreatePostClick, onPostCreated }) { const description = form.description.value try { - logic.createPost(title, image, description, error => { - if (error) { + logic.createPost(title, image, description) + .then(() => onPostCreated()) + .catch((error) => { console.error(error) //alert(error.message) setMessage(error.message) return - } + }) + + + - onPostCreated() - }) } catch (error) { console.error(error) diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/Post.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/Post.jsx index a328d5a0a..d733cd4bc 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/components/Post.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/components/Post.jsx @@ -5,7 +5,7 @@ import Text from "../../components/core/Text" import Image from "../../components/core/Image" import Button from "../../components/core/Button" import Time from "../../components/core/Time" - +import CreatePostComment from "./CreatePostComment" import logic from "../../logic" import './Post.css' @@ -17,10 +17,11 @@ function Post({ post, onPostDeleted }) { const [likeNum, setLikeNum] = useState(0) const [showAddComment, setShowAddComments] = useState(false) + useEffect(() => { setLike(includeUserLike()) setLikeNum(post.liked ? post.liked.length : 0) - setComments(post.comments) + }, []) const includeUserLike = () => { @@ -31,17 +32,15 @@ function Post({ post, onPostDeleted }) { const handleDeletePost = () => { if (confirm('Delete post?')) try { - logic.deletePost(post.id, error => { - if (error) { + logic.deletePost(post.id) + .then(() => onPostDeleted()) + .catch((error) => { console.error(error) alert(error.message) return - } - - onPostDeleted() - }) + }) } catch (error) { console.error(error) @@ -51,20 +50,20 @@ function Post({ post, onPostDeleted }) { } const handleLike = () => { - logic.toggleLike(post.id, (error) => { - if (error) { + logic.toggleLike(post.id) + .then(() => { + if (like) { + setLike(false) + setLikeNum(likeNum - 1) + } else { + setLike(true) + setLikeNum(likeNum + 1) + } + }) + .catch((error) => { console.error(error) return - } - - if (like) { - setLike(false) - setLikeNum(likeNum - 1) - } else { - setLike(true) - setLikeNum(likeNum + 1) - } - }) + }) } const handleShowComment = () => { @@ -72,6 +71,9 @@ function Post({ post, onPostDeleted }) { } + + + return
{post.author.username} @@ -99,9 +101,9 @@ function Post({ post, onPostDeleted }) { - {showAddComment} && ( - - ) + {showAddComment && ( + + )} diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx index 7d7745056..8942458dc 100644 --- a/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx +++ b/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx @@ -21,17 +21,15 @@ function PostList({ refreshStamp }) { const loadPosts = () => { try { - logic.getAllPosts((error, posts) => { - if (error) { + logic.getAllPosts(posts) + .then(posts => setPosts(posts)) + .catch((error) => { console.error(error) alert(error.message) return - } - - setPosts(posts) - }) + }) } catch (error) { console.error(error)