React/redux app function not firing - react-redux

Update 2:
Another update - I'm down to this one issue. The values from redux-form are being sent to the action, but even narrowed down to this:
export function signinUser(values) {
console.log('function about to run, email: ' values.get('email'));
}
I don't even see a console log entry. However, the same function with only a simple console log works:
export function signinUser() {
console.log('function about to run');
}
Update:
The only differences between the working code and non-working code is redux-form and immutablejs. I tried back-porting these to the working app and now the behaviour is the same.
I'm submitting my form and sending the redux-form values to the function, where I'm using values.get('email') and values.get('password') to pass the values to axios.
handleFormSubmit(values) {
console.log('sending to action...', values);
this.props.signinUser(values);
}
I have a login form and onSubmit I'm passing the values to a function which dispatches actions.
The code works in a repo I've forked, but I'm transferring it to my own app. The problem I'm having is that the function doesn't seem to fire, and I'm struggling to figure out where to add console.log statements.
The only console.log that fires is on line 2.
export function signinUser(values) {
console.log('function will run');
return function(dispatch) {
axios.post(TOKEN_URL, {
email: "a#a.com",
password: "a",
method: 'post',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
})
.then(response => {
console.log('response: ', response.data.content.token );
// If request is good...
// - Update state to indicate user is authenticated
dispatch({ type: AUTH_USER });
// decode token for info on the user
var decoded_token_data = jwt_decode(response.data.content.token);
// - Save the JWT token
localStorage.setItem('token', response.data.content.token);
console.log(localStorage.getItem('token'));
// - redirect to the appropriate route
browserHistory.push(ROOT_URL);
})
.catch(() => {
// If request is bad...
// - Show an error to the user
dispatch(authError('Bad Login Info'));
});
}
}

Related

Set cookies and return user on Cypress request

Problem
I have a Cypress command where I can login with a random user. The API will return the following response:
{
user: { ... }
token: { ... }
}
What I would like to do is to:
Create user using cy.request
Set the cookie in the browser
Return the response out of the command so that I can work with it outside of the command
What I have tried
return cy.request({
method: 'POST',
url: getApiUrl('__cypress__/login'),
body: requestBody,
log: false,
})
.then(({ body }) => {
cy
.setCookie('_token', body.token.plainTextToken)
.then(() => {
Cypress.log({
name: 'login',
message: JSON.stringify(body),
consoleProps: () => ({ user: body }),
});
});
})
.its('body', { log: false }) 👈 times out here
What I'm looking for is to do something like:
cy.login().then(({ user }) => {
// use logged in user
})
Question
Cypress times out on .its(...) line. Is this possible to do it? Looking at the docs I couldn't find any example on what I'm trying to achieve
(from the comments)
It happens because previously chained subject, does not return anything. An explicit return for the body property will fix it.

calling back-end api (laravel) from getServerSideProps() in next js

I am using next js as a front-end and laravel as a back-end. and i want to call back-end (laravel) api from getServerSideProps() method. as shown below
export async function getServerSideProps(context) {
const response = await Axios.request({
url: 'http://localhost:8000/api/event',
method: 'get',
headers: {
Cookie: context.req.headers.cookie,
},
})
const events = response.events
console.log(response)
return {
props: { events },
}
}
so i have also set the cookie but i am getting response with message unauthenticated like below
I just wanted to say a huge THANK YOU to Riaz Kahn for his answer. After a lot of banging my face against a wall this was the answer. I'm going to post a working example of my getServerSideProps function for anyone arriving here in the future. The getUser({[configObject]}) function is just returning a promise from an axios.get('my-user/route', config) call. This is working properly in a Next 13 app using standard pages functionality (not using experimental app directory).
export const getServerSideProps = async (context: any) => {
const {req, res} = context;
try {
const {data: user} = await getUser({
headers: {...req.headers}
});
return {
props: {
fallback: {user}
}
}
} catch (e) {
res.writeHead(302, {Location: '/login'});
res.end();
}
}

https.post.promise “.then” not called

Hello – I hope someone could provide some advise or feedback.
Summary: I am trying to create a custom button (UE script) on Sales Order record. That custom button executes a function from a client side script. The function (snippet below) uses https.post.promise. It calls a Suitelet that I will be using to process some backend logic.
Problem: The “.then” portion is not called/executed.
Notes:
Everything is working expect for .then part. The suitelet is called by the post
When I tried to call the same function on pageInit, the .then part is executing
I have used chrome’s javascript profiler as well and tried to compare both executions (by clicking button and pageInit). I can see that .then is being called when the snippet is executed via pageInit but is not executed, when clicking the button
function createIntercoPo(soId){
log.debug('CS - Create Interco PO', 'START ' + soId);
var suiteletURL = url.resolveScript({
scriptId: 'customscript_swx_sl_auto_ic_so_po',
deploymentId: 'customdeploy_swx_sl_auto_ic_so_po',
});
log.debug('CS - Suitelet URL', suiteletURL);
/*https.post({
async: true,
url: suiteletURL,
body: {
soId: soId
},
callback: function(response) {
var result = JSON.parse(response.body);
redirectAfterProcess(result, transId, transType, "generation");
}
});*/
https.post.promise({
url: suiteletURL,
body: {
soId: soId
}
})
.then(function (response){
log.debug({
title: 'Response',
details: response
});
//redirectAfterProcess(soId);
log.debug('CS - Inside Promise', 'Test');
})
.catch(function onRejected(reason) {
log.debug({
title: 'Invalid Request: ',
details: reason
});
});
log.debug('CS - Create Interco PO', 'END');
}

laravel (with vue and vuex) overriding sendResetLinkEmail but can't pass the data to the api controller

I'm creating forgot password on my web application using laravel (with vue and vuex). I found a good tutorial (https://codebriefly.com/vue-js-reset-password-laravel-api/). I try to apply vuex on this tutorial but it not works.
Accrording to the tutorial
<script>
export default {
data() {
return {
email: null,
has_error: false
}
},
methods: {
requestResetPassword() {
this.$http.post("/reset-password", {email: this.email}).then(result => {
this.response = result.data;
console.log(result.data);
}, error => {
console.error(error);
});
}
}
}
</script>
I apply Vuex
ForgotPassword.vue
methods: {
...mapActions(["requestResetPassword"]),
request() {
this.requestResetPassword({
email: this.email
})
.then(response => {
toast.fire({
type: "success",
title: "Password reset email sent"
});
this.$router.push({ name: "home" });
})
.catch(error => {
console.error(error);
});
});
}
Vuex action that i created
requestResetPassword(data){
return new Promise((resolve,reject) => {
axios.post('/reset-password',{
email: data.email
})
.then(response =>{
resolve(response)
})
.catch(error =>{
reject(error)
})
})
}
The Api that handle
public function sendPasswordResetLink(Request $request)
{
return $this->sendResetLinkEmail($request);
}
When I input the email address for sending password reset link, the error shows up and it says:
message: The given data was invalid.
email :The email field is required.
I test the API using postman and it works
I check the input field to see if it was empty, but it turns out the input field was not empty
Is there a way to apply vuex on this tutorial ? thanks
In Postman, you are putting the email field as a param, not as serialized data in the body. The vue-resource package's post method sets the data passed to it as the body, not as URL parameters. Either add the email to the request parameters, or in your API, make sure you grabbing data from the request body and not URL parameters.

Angularjs multiple ajax requests optimization

I am still learning Angular JS and have this controller which is making two ajax requests to the lastfm api using different parameters. I want to know when each request has been finished, so that I can display a loading indicator for both requests. I have researched it and read about promises and the $q service but cant get my head around how to incorporate it into this. Is there a better way to set this up? and how can I know when each request is done. Thanks.
angular.module('lastfm')
.controller('ProfileCtrl', function ($scope, ajaxData, usersSharedInformation, $routeParams) {
var username = $routeParams.user;
//Get Recent tracks
ajaxData.get({
method: 'user.getrecenttracks',
api_key: 'key would go here',
limit: 20,
user: username,
format: 'json'
})
.then(function (response) {
//Check reponse for error message
if (response.data.message) {
$scope.error = response.data.message;
} else {
$scope.songs = response.data.recenttracks.track;
}
});
//Get user info
ajaxData.get({
method: 'user.getInfo',
api_key: 'key would go here',
limit: 20,
user: username,
format: 'json'
})
.then(function (response) {
//Check reponse for error message
if (response.data.message) {
$scope.error = response.data.message;
} else {
$scope.user = response.data.user;
}
});
});
I have this factory which handles all the requests
angular.module('lastfm')
.factory('ajaxData', function ($http, $q) {
return {
get: function (params) {
return $http.get('http://ws.audioscrobbler.com/2.0/', {
params : params
});
}
}
});
Quite easy using $q.all(). $http itself returns a promise and $q.all() won't resolve until an array of promises are resolved
var ajax1=ajaxData.get(....).then(....);
var ajax2=ajaxData.get(....).then(....);
$q.all([ajax1,ajax2]).then(function(){
/* all done, hide loader*/
})

Resources