I'm building a SPA with rails API on the back-end and React on the front-end. The user authentication works as desired and I'm getting the user state from the rails. The problem is that when a user signs in to the app, I have to manually refresh the whole browser to update the state.
// App.js
function userReducer(state, action) {
switch (action.type) {
case "success": {
return {
...state,
id: action.id,
username: action.username,
email: action.email,
logged_in: action.status,
error: ""
};
}
case "fail": {
return {
...state,
id: "",
username: "",
email: "",
logged_in: false,
error: action.error
};
}
default:
return state;
}
}
// set initial state of the logged in user
const intialUserState = {
id: "",
username: "",
email: "",
logged_in: false,
error: ""
};
export const UserStatus = React.createContext(intialUserState);
function App() {
const [userState, dispatch] = useReducer(userReducer, intialUserState);
// fetch the user's data
function fetchLoggedInUserData() {
axios
.get("http://localhost:3000/api/v1/logged_in", { withCredential: true })
.then(response => {
const { id, username, email, logged_in } = response.data;
if (response.status === 200) {
dispatch({
type: "success",
id: id,
username: username,
email: email,
status: logged_in
});
}
})
.catch(error => {
dispatch({ type: "fail", error: error });
});
}
// when the app loads, check if the user is signed in or not.
// if the user is signed in, then store the user's data into the state
useEffect(() => {
fetchLoggedInUserData();
}, []);
return (
<UserStatus.Provider value={{ userState, dispatch }}>
<Router>
<>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/" render={props => <Public {...props} />} />
</Switch>
</>
</Router>
</UserStatus.Provider>
);
}
The above code works as expected and I can store the user state as you see from the code. The problem is when a user clicks on the submit button I want to automatically store the user without having to refresh the page. The code below is from Login.js
// Login.js
function signinReducer(state, action) {
switch (action.type) {
case "field": {
return {
...state,
[action.field]: action.value
};
}
case "signin": {
return {
...state,
error: "",
isLoading: true
};
}
case "success": {
return {
...state,
error: "",
isLoading: false
};
}
case "error": {
return {
...state,
isLoading: false,
error: action.error
};
}
}
}
const initialState = {
username: "",
password: "",
isLoading: false,
error: ""
};
function FormMain() {
const [signinState, dispatch] = useReducer(signinReducer, initialState);
const { username, password, isLoading, error } = signinState;
const handleSubmit = async e => {
e.preventDefault();
dispatch({ type: "signin" });
await postUserData();
};
function postUserData() {
axios
.post(
"http://localhost:3000/api/v1/sessions",
{
user: {
username: username,
password: password
}
},
{ withCredentials: true }
)
.then(response => {
if (response.status === 200) {
dispatch({ type: "success" });
}
})
.catch(error => {
// dispatch({ type: "error", error: error.response.data[0] });
});
}
}
I have removed the sign-in form from the code above as it was getting too lengthy.
The solution can be to somehow transfer the state from the Login.js to App.js or directly update the state of the App.js from the Login.js and make use of the useEffect in the App.js, and update the state without having to manually refresh the browser but I do not know how to do that.
The problem is fixed by creating a new case to App.js and updating that case from Login.js.
// App.js
function userReducer(state, action) {
switch (action.type) {
case "success": {
return {
...state,
id: action.id,
username: action.username,
email: action.email,
admin: action.admin,
logged_in: action.status,
error: ""
};
}
case "fail": {
return {
...state,
id: "",
username: "",
email: "",
admin: false,
logged_in: false,
error: action.error
};
}
case "globalFetch": {
return {
...state,
id: action.id,
username: action.username,
email: action.email,
admin: action.admin,
logged_in: action.status,
error: ""
};
}
default:
return state;
}
}
As you can see the globalFetch case can be easily passed down to the Login.js via useContext and then update the case as per your requirement.
// Login.js
function postUserData() {
axios
.post(
"http://localhost:3000/api/v1/sessions",
{
user: {
username: username,
password: password
}
},
{ withCredentials: true }
)
.then(response => {
if (response.status === 200) {
const { id, username, email, logged_in, admin } = response.data;
dispatch({ type: "success" });
state.dispatch({
type: "globalFetch",
id: id,
username: username,
email: email,
admin: admin,
status: logged_in
});
}
})
.catch(error => {
// dispatch({ type: "error", error: error.response.data[0] });
});
}
// More code...
}
I am trying to use batch request for sending http post to the server.
The code snippet, which generate the request:
_.each(aNewDates, function (oNew) {
oModel.create("/CostCenterCalendarSet", oNew, {
groupId: "newDates"
});
});
oModel.setDeferredGroups(["newDates"]);
and the submit method:
oModel.submitChanges({
groupId: "newDates",
oSuccess: function (oMsg) {
return observer.next(oMsg);
},
oError: function (oErr) {
return observer.error(oErr);
},
});
as response I've got following error:
What am I doing wrong?
Update
I tried with ODataModel read method and does not get any result.
let oPlantFilter = new sap.ui.model.Filter("Plant", sap.ui.model.FilterOperator.EQ, oSelectedData.sPlant);
let oWcFilter = new sap.ui.model.Filter("WorkCenter", sap.ui.model.FilterOperator.EQ, oSelectedData.sWc);
oModel.read("/CostCenterCalendarSet", {
groupId: "query-dates",
filters: [oPlantFilter, oWcFilter]
});
oModel.setDeferredGroups(["query-dates"]);
return Rx.Observable.create(function (subscriber) {
oModel.submitChanges({
groupId: "query-dates",
success: function (oData, oResponse) {
return subscriber.next(oResponse);
},
error: function (oErr) {
return subscriber.error(oErr);
},
});
});
It seems as though the solution cited here:
Parse Facebook login fails with error code 251
No longer works. I have attempted both that and reconfiguring my Facebook app by resetting the secret, reconfiguring Parse with my new app credentials, and resetting xCode for a new simulator environment and all have failed. I continue to get old authentication data when the following function is called:
//sign up into parse db
Parse.FacebookUtils.logIn(authData, {
success: (user) => {
if (user.existed()) {
// login: nothing to do
console.log('User Already Logged In');
that.setState({loadingCurrentUser: false});
that.props.navigator.immediatelyResetRouteStack([{ name: 'home'}]);
} else {
// signup: update user data, e.g. email
console.log('getting user additional information');
var data = user.get('authData').facebook;
var api = 'https://graph.facebook.com/v2.3/'+data.id+'?fields=name,email&access_token='+data.access_token;
var fetchProfile = new FBSDKGraphRequest((error, result) => {
if (error) {
// TODO: error
this.setState({loadingCurrentUser: false});
} else {
console.log(result);
var name = responseData.name;
var email = responseData.email;
// FIXME: https://github.com/ParsePlatform/ParseReact/issues/45
var userId = {
className: '_User',
objectId: user.id
};
ParseReact.Mutation.Set(userId, {
username: email,
email: email,
name: name
}).dispatch();
that.setState({loadingCurrentUser: false});
that.props.navigator.immediatelyResetRouteStack([{ name: 'onboarding'}]);
}
}, '/me?fields=name,email');
// FIXME https://github.com/facebook/react-native-fbsdk/issues/20
// fetchProfile.start();
FBSDKGraphRequestManager.batchRequests([fetchProfile], function() {}, 10)
}
},
error: (user, error) => {
console.log('Error', error);
console.log(user.token);
switch (error.code) {
case Parse.Error.INVALID_SESSION_TOKEN:
Parse.User.logOut().then(() => {
this.onFacebookLogin(token);
});
break;
default:
// TODO: error
}
that.setState({loadingCurrentUser: false});
that.setState({errorMessage: error.message});
}
});
I am not sure how to proceed. Any help with error 251 and the most recent version of React Native (iOS)?
Below is my code in AngularJS. i have created controller but i am getting error :
Error: [ng:areq] Argument 'forgetController' is not a function, got
undefined
app.controller("forgetController", function ($scope, forgetService) {
$scope.OperType = 1;
// 1 MEANS NEW ENTRY
GetAllUserRecords();
function GetAllUserRecords() {
debugger;
var promiseGet = userService.GetUserRecords();
promiseGet.then(function (p1) { $scope.User = p1.data }, function (err) {
console.log("Error");
});
}
$scope.submit = function () {
debugger;
var user = {
FirstName: $scope.FirstName,
LastName: $scope.LastName,
Email: $scope.Email,
Password: $scope.Password,
Phone: $scope.Phone,
Postcode: $scope.Postcode,
Address: $scope.Address,
Street: $scope.Street,
Town: $scope.Town,
CreateDate: new Date()
};
if ($scope.OperType === 1) {
var promisePost = userService.AddUser(user);
promisePost.then(function (p1) {
GetAllUserRecords();
alert("New Record Inserted");
$("#addUserTable").css('display', 'none');
clearClientDetail();
}, function (err) {
console.log("Error");
});
}
}
function clearClientDetail() {
$("#FirstName").val('');
$("#LastName").val('');
$("#Email").val('');
$("#Password").val('');
$("#Phone").val('');
$("#Postcode").val('');
$("#Address").val('');
$("#Street").val('');
$("#Town").val('');
}
});
i am stuck over here, i google everything but i do not get any result.
Add this line of code just above controller code
var app = angular.module('myapp', ['forgetService']);
I have the following code that I am using to post information to update an event. When I comment out the "id" param, the post succeeds and I receive information back from the server. However, when "id" is not commented out, nothing is sent.
var user = localStorage["user"];
var pw = localStorage["pw"];
var org = localStorage["org"];
var eventid = localStorage["eventid"];
$(function () {
$("#submit").click(function () {
if ($("#cancelled:checked")){
cancel = "on";
}else {
cancel = "";
}
$.post(
"/App/SetNewEvent/default.asp",
{
user: user,
key: pw,
org: org,
id: eventid,
playdate: $("#playdate").val(),
start: $("#start").val(),
finish: $("#finish").val(),
location: $("#facilityid").val(),
tournament: $("#type").val(),
cancelled: cancel,
team: $("#teamid").val(),
homeopponent: $("#homeopponentid").val(),
schednote: $("#note").val()
},
function (response) {
console.log(response);
}
);
});
})