Develop Reference

Unable to invoke "btoa" and "item.slice" method in my script for retrieving the playlist

Whenever I am trying to invoke the "btoa" method, I am not able to use this within my script. I created a variable to store the client id: client_secret in base64. The id and secrets are being retrieved from the ".env" file.
I have also tried to use the Buffer method, but unable to use this as well. I am getting the error "invalid from" in Buffer.
can someone help me?
Please look at the full code,
const client_id = process.env.SPOTIFY_CLIENT_ID;
const client_secret = process.env.SPOTIFY_CLIENT_SECRET;
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN;
const basic = btoa(`${client_id}:${client_secret}`);
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
const TOP_TRACKS_ENDPOINT = `https://api.spotify.com/v1/me/top/tracks`;
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
const getAccessToken = async () => {
const response = await fetch(TOKEN_ENDPOINT, {
method: 'POST',
headers: {
Authorization: `Basic ${basic}`,
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
grant_type: 'refresh_token',
refresh_token
})
});
return response.json();
};
export const getNowPlaying = async () => {
const { access_token } = await getAccessToken();
return fetch(NOW_PLAYING_ENDPOINT, {
headers: {
Authorization: `Bearer ${access_token}`
}
});
};
export const getTopTracks = async () => {
const { access_token } = await getAccessToken();
return fetch(TOP_TRACKS_ENDPOINT, {
headers: {
Authorization: `Bearer ${access_token}`
}
});
};
Using the above script I am trying to embed the customized Spotify play on my site. This wrapper is intended to display the top track as well.
Also, whenever I am trying to run the wrapper used to display the top tracks, it displays the following error,
Full code for displaying the top tracks:
import { type NextRequest } from 'next/server';
import { getTopTracks } from 'lib/spotify';
export const config = {
runtime: 'experimental-edge'
};
export default async function handler(req: NextRequest) {
const response = await getTopTracks();
const { items } = await response.json();
const tracks = items.slice(0, 10).map((track) => ({
artist: track.artists.map((_artist) => _artist.name).join(', '),
songUrl: track.external_urls.spotify,
title: track.name
}));
return new Response(JSON.stringify({ tracks }), {
status: 200,
headers: {
'content-type': 'application/json',
'cache-control': 'public, s-maxage=86400, stale-while-revalidate=43200'
}
});
}

The problem is that you misspelled the Bytes to ASCII function, it is btoa, not btao.
If you are looking to do it the other way around, spell it atob.

MERN pagination and filtering in same controller

How to do pagination and filtering at the backend in the same controller?
Filter service:-
const filterPosts = async (filterData, token) => {
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
data: {
filterData,
},
};
const response = await axios.get(API_URL, config);
return response.data;
}
Route:-
router.route("/").get(protect, getPosts);
Controller:-
I cant seem to send the filterData from service to this controller, how to achieve it?
const getPosts = asyncHandler(async (req, res) => {
console.log("filter data:- ", req.body); // This Part is undefined.
//pagination
const PAGE_SIZE = 6;
const PAGE = parseInt(req.query.page || "0");
const total = await Post.countDocuments({ user: req.user.id });
const AllPosts = await Post.find({ user: req.user.id })
.limit(PAGE_SIZE)
.skip(PAGE_SIZE * PAGE)
.sort({ createdAt: -1 });
const totalPages = Math.ceil(total / PAGE_SIZE);
res.status(200).json({ totalPages, Allposts });
});
console.log("filter data:- ", req.body); // This Part is undefined.

You can send this data using config.params in Get request or use Post request if you want to use config.data.
Sometimes XHR / Fetch do not allow payload in Get request.
As per this axios doc, sending data as request body is only applicable for request methods PUT, POST, DELETE , and PATCH.
You can also refer to this issue for reference : Link
const filterPosts = async (filterData, token) => {
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
filterData,
},
};
const response = await axios.get(API_URL, config);
return response.data;
}

How do I declare the body of a POST with the fetch API

I am building a comments section onto a Node/Express app for family reunions. I first wrote it all on the server side, but then ran into the issue where I was unable to update the DOM after posting the comment without refreshing the page.
My research yielded that I could use AJAX or the fetch API to do this, client-side.
I'm using some client-side JavaScript to post comments. I have a route for the POST request:
router.post('/:reunionId', isAuth, reunionController.postComment);
The controller code is:
exports.postComment = (req, res, next) => {
const commentText = req.body.newComment;
const reunionId = req.body.reunionId;
const foundReunion = Reunion.findById(reunionId)
.populate({
path: 'comments',
options: { sort: { createdAt: -1 } },
})
.then((reunion) => {
console.log(reunion);
const comment = new Comment({
_id: new mongoose.Types.ObjectId(),
text: commentText,
reunionId: new mongoose.Types.ObjectId(reunionId),
userId: req.user._id,
});
foundReunion.comments.push(comment);
comment.save();
foundReunion.save();
console.log('Operation completed successfully');
return foundReunion;
})
.catch((error) => {
const newError = new Error(error);
newError.httpStatusCode = 500;
return next(newError);
});
};
And the client-side code:
const commentForm = document.getElementById('comment-form');
const commentInput = document.getElementById('newComment');
const commentsContainer = document.getElementById('allComments');
let commentText = document.getElementById('newComment').value;
const reunionId = document.getElementById('reunionId').value;
const csrfToken = document.getElementById('csrf').value;
commentForm.addEventListener('submit', handleCommentSubmit, false);
commentInput.addEventListener('change', (event) => {
commentText = event.target.value;
});
async function handleCommentSubmit(event) {
event.preventDefault();
console.log('Someone clicked the comment submit button...');
console.log(csrfToken); // This works.
console.log(reunionId); // This works.
console.log(commentText); // This works.
const url = `http://localhost:3006/reunions/${reunionId}`;
fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'X-CSRF-Token': csrfToken,
},
body: { // This is not working.
reunionId,
commentText,
},
})
.then((response) => {
const d = response.comment.createdAt.getDate();
const m = monthNames[response.comment.createdAt.getMonth()];
const y = response.comment.createdAt.getFullYear();
const commentDiv = document.createElement('div');
commentDiv.classList.add('comments-container');
const commentP = doucment.createElement('p');
commentP.classList.add('comment-header-text');
const email = response.comment.userId.email;
const hr = document.createElement('hr');
commentP.textContent = `On ${m}+ ' ' +${d}+ ', ' +${y}, ${email} wrote:`;
commentDiv.appendChild(commentP);
commentDiv.appendChild(commentText);
commentDiv.appendChild(hr);
commentsContainer.appendChild(commentDiv);
})
.catch((error) => console.log(error));
The client makes the POST request, properly passes the csrf token, but the server cannot read the reunionId or commentText from the body of the request. I get Reunion.findOne({ null }) in the server logs.
I am simply not sure what Content-Type to declare, whether I need to at all, or how to pass the two pieces of data I need in the body of the call to fetch.
Thanks very much in advance.

The body of a post must always be a string. What you are missing is you need to JSON.strigify your object and them make add the content-type header to specify that the body is application/json:
fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'X-CSRF-Token': csrfToken,
'Content-Type': 'application/json'
},
body: JSON.stringify({
reunionId,
commentText,
}),
})

POST returns undefined with Cloud Function

I'm implementing Stripe for React Native and I'm trying to send the customerId to my Cloud Function using POST, but when I execute the code it returns in the console.log undefined
Cloud Function (Firebase)
exports.addCardForExistingCustomer = functions.https.onRequest(async (request, response) => {
let id = await request.body.customer_id
response.send({
result: id
})
});
Client side
const fetchPaymentSheetParams = async () => {
const response = await fetch(`${API_URL}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ customer_id: customerId })
});
const { result } = await response.json();
console.log(result)
};

Sapper $Session change not reflected until page reload

In my nav.svelte component I have:
{#if $session.token}
${JSON.stringify($session.token)} - ${JSON.stringify($session.token.username)}
{/if}
In login.svelte:
const { session } = stores();
let username, password;
async function onLogin(username, password){
const response = await fetch(`auth/login`, {
method:"POST",
headers:{ 'Content-Type': 'application/json' },
body: JSON.stringify({"username":username,"password":password})
})
if (response.ok) {
const json = await response.json();
session.set({ token: json });
$session.token = json;
goto("/");
} else {
throw new Error(response);
}
}
login.js handler:
req.session.token = user; //parsed.token;
console.log(`req.session.token: ${JSON.stringify(req.session.token)}`);
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({ token: user }));
server.js:
sapper.middleware({
session: (req, res) => {
console.log(`% req.session.token: ${JSON.stringify(req.session.token)}`);
return ({
token: req.session.token
})}
})
The output in nav.svelte is:
${"token":{"_id":"kjbLgeU8k3GPr6jBd8NkCj","username":"matt123","password":"$2b$10$aXMJc64o9W166OL12CG/A.lWyuB9zdPkaNUsze3Lch6Z2khHaTKY.","access":"user"}} - $undefined
Notice that the data is there, but username outputs undefined. I believe I am doing something wrong but it is obscure.
Added an issue to the tracker on sapper project:
https://github.com/sveltejs/sapper/issues/1711