I'm tryng to create a list using .map(), but when I try to console the user._id on my back-end, it shows all the ids, but I don't want it, i wanna use .map() to delete each post individually, using a button.
Each post with name, age and e-mail got a button that I need to use to delete the current data.
Here's my code:
import React from "react"
import axios from "axios"
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"
const deletePost = (userid) => {
axios.post('http://localhost:3001/deleteUser', {_id: userid})
}
function userlist() {
const [listOfUsers, setListOfUsers] = useState([])
useEffect(() => {
axios.get('http://localhost:3001/userlist').then((response) => {
setListOfUsers(response.data)
})
})
return (
<div className="userlistdiv">
{listOfUsers.map((user) => {
return (
<div className="userdiv">
<h1>Id: {user._id}</h1>
<h1>Name: {user.name}</h1>
<h1>Age: {user.age}</h1>
<h1>E-mail: {user.email}</h1>
<button onClick={deletePost(user._id)}>Delete</button>
<hr></hr>
</div>
)
} )}
</div>
)
}
export default userlist;
And here's my code when I try to use console.log to see what is going on:
const express = require('express');
const app = express();
const PORT = 3001;
const mongo = require('./mongo')
const usersModel = require('./models/userschema')
const cors = require('cors')
app.use(express.json())
app.use(cors())
app.get('/userlist', (req, res) => {
usersModel.users.find({}).then((result, err) => {
if(err) {
res.json(err)
}
else {
res.json(result)
}
})
})
app.post('/deleteUser', (req, res) => {
console.log(req.body._id)
usersModel.users.findOneAndDelete({_id: req.body._id})
})
app.post('/createUser', (req, res) => {
const newUser = usersModel.users({name: req.body.name, age: req.body.age, email: req.body.email})
newUser.save()
})
app.listen(PORT, () => {
console.log('Servidor rodando na porta ' + PORT);
})
I'm using this "console.log" in the back-end to see what's the result that my front is sending to the back-end, and it shows all the _id's, i think it's because i'm using .map(), so, how can I resolve this, to return only the _id of the post that I want to delete using a button?
<button onClick={() => deletePost(user._id)}>Delete</button>
This should be the correct way to call a function on button click
This code belows immediately calls deletePost(user._id) when the function renders.
<button onClick={deletePost(user._id)}>Delete</button>
What you want to do is pass a callback function to onClick to execute:
<button onClick={() => deletePost(user._id)}>Delete</button>
This way you are allowing the button to call the function when the button is clicked.
Related
I'm currently struggling to refetch a user's data from Auth0 after updating the user_metadata:
Below a simplified index file. the user selects some object, and will be asked to add this object (or object-id) as a favorite. If the user wants to select this object as a favorite, we want to update the preference in the user_metadata.
// index.tsx
export default function home({user_data, some_data}) {
const [selected, setSelect] = useState(null)
async function handleAddToFavourite() {
if (selected) {
const data = await axios.patch("api/updateMetadata", {some_favorite: selected.id})
// Errorhandling ...
}
}
return (
<div>
<SearchData setData={setSelect} data={some_data}/>
<Button onClick={handleAddToFavorite}>Add to Favorite</Button>
<div>Selected: {selected.id}</div>
<div>My Favorite: {user_data.user_metadata.some_favorite}</div>
</div>
)
}
export const getServerSideProps = withPageAuthRequired({
returnTo: "/foo",
async getServerSideProps(ctx) {
const session = await getSession(ctx.req, ctx.res)
const {data} = await axios.get("https://somedata.com/api")
return {props: {some_data: data, user_data: session.user}}
})
The request is then sent to pages/api/updateMetadata, and the user_metadata is updated with the selected data.
// api/updateMetadata.ts
async function handler(req: NextApiRequest, res: NextApiResponse) {
const session = await getSession(req, res);
if (!session || session === undefined || session === null) {
return res.status(401).end();
}
const id = session?.user?.sub;
const { accessToken } = session;
const currentUserManagementClient = new ManagementClient({
token: accessToken,
domain: auth0_domain.replace('https://', ''),
scope: process.env.AUTH0_SCOPE,
});
const user = await currentUserManagementClient.updateUserMetadata({ id }, req.body);
return res.status(200).json(user);
}
export default withApiAuthRequired(handler);
The [...auth0].tsx looks something like this.
// pages/api/auth/[...auth0].tsx
export default handleAuth({
async profile(req, res) {
try {
await handleProfile(req, res, {
refetch: true,
});
} catch (error: any) {
res.status(error.status || 500).end(error.message);
}
},
async login(req, res) {
try {
await handleLogin(req, res, {
authorizationParams: {
audience: `${process.env.AUTH0_ISSUER_BASE_URL}/api/v2/`,
scope: process.env.AUTH0_SCOPE,
},
});
} catch (error: any) {
res.status(error.status || 400).end(error.message);
}
},
});
Now, I get the user_metadata every time I log in, however, I need to log out and log in to see the change take effect. I need to somehow refresh the user-session without logging out, every time the user_metadata is updated.
Does anybody know any workarounds for achieving what I'm trying to do, and perhaps see any mistakes?
Thanks in advance!
Notes:
I have tried using the client-side function useUser(), but this yields the same data as server-side function getSession() for the user_data in index.tsx
I've tried adding updateSession(req, res, session) at the end of the api/updateMetadata handler
I've added an Action to the Auth0 login flow
// Auth0 action flow - login
exports.onExecutePostLogin = async (event, api) => {
const namespace = 'https://example.com';
const { some_favorite } = event.user.user_metadata;
if (event.authorization) {
// Set claims
api.idToken.setCustomClaim(`${namespace}/some_favorite`, );
}
};
I figured it out, I'll post my solution in case someone else gets stuck with the same issue :)
In api/updateMetadata.ts:
// api/updateMetadata.ts
import { updateSession , ... } from '#auth0/nextjs-auth0';
// ...
// ...
const user = await currentUserManagementClient.updateUserMetadata({ id }, req.body);
await updateSession(req, res, { ...session, user }); // Add this to update the session
return res.status(200) // ...
Then I used checkSession() from the useUser in the client side code, straight after fetching the data.
// index.tsx
import { useUser } from '#auth0/nextjs-auth0/client'
//...
async function handleAddToFavourite() {
if (selected) {
const data = await axios.patch("api/updateMetadata", {some_favorite: selected.id})
// Update the user session for the client side
checkSession()
// Errorhandling ...
}
}
//...
Now, this is what made it all work, modifying the profileHandler:
// pages/api/auth/[...auth0].tsx
// Updating with the new session from the server
const afterRefetch = (req, res, session) => {
const newSession = getSession(req, res)
if (newSession) {
return newSession as Promise<Session>
}
return session
}
export default handleAuth({
async profile(req, res) {
try {
await handleProfile(req, res, {
refetch: true,
afterRefetch // added afterRefetch Function
});
} catch (error: any) {
res.status(error.status || 500).end(error.message);
}
},
// ...
});
Also, it is worth noting that the Auth0 Action Flow for the login is correct too.
Hope this helps someone :)
I am writing a test that looks like this:
import { getAllUsers } from "./users";
import { getMockReq, getMockRes } from "#jest-mock/express";
import User from "../../models/User";
jest.mock("../../models/User", () => ({
find: jest.fn(), // I want to change the return value of this mock in each test.
}));
describe("getAllUsers", () => {
test("makes request to database", async () => {
const req = getMockReq();
const { res, next, clearMockRes } = getMockRes();
await getAllUsers(req, res, next);
expect(User.find).toHaveBeenCalledTimes(1);
expect(User.find).toHaveBeenCalledWith();
});
});
Within the jest.mock statement, I am creating a mock of the imported 'User' dependency, specifically for the User.find() method. What I would like to do is set the return value of the User.find() method within each test that I write. Is this possible?
This SO question is similar, but my problem is that I can't import the 'find' method individually, it only comes packaged within the User dependency.
Well after much trial and error, here is a working solution:
import { getAllUsers } from "./users";
import { getMockReq, getMockRes } from "#jest-mock/express";
import User from "../../models/User";
const UserFindMock = jest.spyOn(User, "find");
const UserFind = jest.fn();
UserFindMock.mockImplementation(UserFind);
describe("getAllUsers", () => {
test("makes request to database", async () => {
UserFind.mockReturnValue(["buster"]);
const req = getMockReq();
const { res, next, clearMockRes } = getMockRes();
await getAllUsers(req, res, next);
expect(User.find).toHaveBeenCalledTimes(1);
expect(User.find).toHaveBeenCalledWith();
expect(res.send).toHaveBeenCalledWith(["buster"]);
});
});
Note how I've used jest.spyOn to set a jest.fn() on the specific User find method, and I can use the UserFind variable to set the return value of the mock implementation.
I'm using the Listen Notes podcast-api in Next.js api routes. I want the user query from my front-end form to interact with the Next.js api. So when a user inputs "history", it will send that to the api to look for podcasts that are about that topic.
I tried adding params to axios request but that doesn't seem to work.
Front-end:
export default function SearchBar() {
const [query, setQuery] = useState("");
const [address, setAddress] = useState("");
const fetcher = async (url) => await axios.get(url, { params: {q: query } }).then((res) => res.data);
const { data, error } = useSWR(address, fetcher);
const handleSubmit = (e) => {
setAddress(`/api/podcast`);
e.preventDefault();
};
return (
<>
<Form onSubmit={handleSubmit}>
<Input
onChange={(e) => setQuery(e.target.value)}
/>
<SearchButton type="submit">Search</SearchButton>
</Form>
</>
);
}
Api code:
const { Client } = require("podcast-api");
export default function handler(req, res) {
const client = Client({
apiKey: process.env.REACT_APP_API_KEY || null,
});
//"q" below should contain the user query from front-end
client
.search({ q: req.params })
.then((response) => {
res.status(200).json(response.data);
})
.catch((error) => {
console.log("apiError: " + error);
});
}
Please let me know if I need to provide more information.
Check if API on you NextJs app, is receiving correctly the environment variable process.env.REACT_APP_API_KEY. Use console.log to test.
Reference :
https://nextjs.org/docs/basic-features/environment-variables
Another check is the API path, cause NextJs use your own method to path this, you know ?!
Reference :
https://nextjs.org/docs/api-routes/introduction
Hope this tips help you ;)
The problem was in the api route, it should be:
.search({ q: req.query.q })
req.params is something else on server side and that's why it wasn't coming through.
I have this problem in Next.js. I call the API in getInitialProps and pass the params to my components then it works when I use it in mu project. But when I want to build it gives me error that the params are undefined.
This is how I call my API and pass it to component:
import BlogItem from './blogItem'
import axios from 'axios'
import { withRouter } from 'next/router'
import { APIURL, replaceAll } from '../../../components/config'
const Post = (props) => {
return (
<BlogItem
services ={props.services }
/>
)
}
Post.getInitialProps = async ({ query }) => {
const id = query.id
const urlTitle = encodeURI(query.title)
const services = null;
try {
const response = await axios.get(`${APIURL}getservice`);
services = response.data.response.posts;
} catch (err) {
console.error(err)
}
return {
services
}
}
export default withRouter(Post)
It seems that you defined services as a const that contain null! the whole code seems fine. Try changing const to let:
Post.getInitialProps = async ({ query }) => {
const id = query.id
const urlTitle = encodeURI(query.title)
let services = null; //this line
try {
const response = await axios.get(`${APIURL}getservice`);
services = response.data.response.posts;
} catch (err) {
console.error(err)
}
console.log(services) //you should have the data right here
return {services}
}
Example :
Look at this example. Run it and navigate to /about page :
You need to make sure that your url params are passed into the querystring on the server, In your case, something like this:
server.get('/page/:uid/:id', (req, res) => {
const mergedQuery = Object.assign({}, req.query, req.params)
return app.render(req, res, '/page', mergedQuery);
})
Then your getInitialProps can get them straight from the query, regardless of where it loads.
I am building a simple application for my portfolio using The Movie Database api. In my GET /movie route, I want to get and display the data about the movie, and the names and photos of the cast members, however the data for the movie and the data for the cast members belong two separate endpoints of the api, and I am at a complete loss as to how to access both response data sets under a single endpoint in my app.
I cannot call axios.get() on both endpoints under the /movie route because I will get a "Headers already sent" error, and I have tried to write a function that uses axios.get for 1 endpoint that returns the response and gets called in my GET /movie route, but that causes the entire GET route to return undefined.
Here is my current code for my /movie route that is incorrect, but closely conveys what I am trying to accomplish
const express = require('express');
const router = express.Router();
const axios = require('axios');
const api_key = require('../config/keys').api_key;
const imgURL = "http://image.tmdb.org/t/p/";
const dateFormat = require('../config/dateFormat');
getActors = movie_id => {
axios.get(`https://api.themoviedb.org/3/movie/${movie_id}/credits?api_key=${api_key}&language=en-US`)
.then(res => {
return res.data;
}).catch(err => console.log(err.message));
}
router.get('/:id', (req, res) => {
const id = req.params.id
axios.get(`https://api.themoviedb.org/3/movie/${id}?api_key=${api_key}&language=en-US`)
.then(res => {
const movieData = res.data;
const actors = getActors(id); //calling above function here, but returns undefined and hangs the application
res.render('movie', {movieInfo: movieData, imgURL: imgURL, releaseDate: dateFormat(movieData.release_date), actors: actors})
})
.catch(err => console.log(err.status_message))
});
module.exports = router;
any help is greatly appreciated.
You can use axios.all to concatenate several promises and executing them in parallel. Then, once all the added requests have been finished, you can handle with the then promise the result of all of them. For instance, in your code:
const express = require('express');
const router = express.Router();
const axios = require('axios');
const api_key = require('../config/keys').api_key;
const imgURL = "http://image.tmdb.org/t/p/";
const dateFormat = require('../config/dateFormat');
axios.all([
axios.get(`https://api.themoviedb.org/3/movie/${movie_id}/credits?api_key=${api_key}&language=en-US`),
axios.get(`https://api.themoviedb.org/3/movie/${id}?api_key=${api_key}&language=en-US`)
])
.then(axios.spread((actorsRes, moviesRes) => {
// Your logic with each response
});
module.exports = router;
I see that getActors is currently returning null. Change it to...
const getActors = movie_id => {
return axios.get(`https://api.themoviedb.org/3/movie/${movie_id}/credits?api_key=${api_key}&language=en-US`)
.then(res => {
return res.data;
}).catch(err => console.log(err.message));
}
Another problem is calling of getActors function. It's a function that contains asynchronous function axios.get(). Change that to ..
router.get('/:id', (req, res) => {
let movieData;
const id = req.params.id
axios.get(`https://api.themoviedb.org/3/movie/${id}?api_key=${api_key}&language=en-US`)
.then(res => {
movieData = res.data;
return getActors(id);
})
.then(actors => {
res.render('movie', {movieInfo: movieData, imgURL: imgURL, releaseDate: dateFormat(movieData.release_date), actors: actors})
})
.catch(err => console.log(err.status_message))
});