Posts

Showing posts from September, 2018

react native login screen and redirect to a main navigation - bottom tab

Normally, you would create all the necessary screen under a main navigation. That's fine until you introduce your 'Login' screen. The only problem with that is, your user would be able to switch to other screen via bottom tab (for example)


Introducing createSwitchNavigator   which allows us to create individual section of our screen.


An example code would looks something like this

importReactfrom'react'; import { createSwitchNavigator, createStackNavigator } from'react-navigation';
importMainTabNavigatorfrom'./MainTabNavigator'; importLoginScreenfrom'../screens/LoginScreen';
exportdefaultcreateSwitchNavigator({ // You could add another route here for authentication. // Read more at https://reactnavigation.org/docs/en/auth-flow.html Main:MainTabNavigator, Login :LoginScreen }, { initialRouteName:'Login', });

This allow us to show Login screen as a separate screen and independent from other screen.

Please consult reference here for more infor…

splitting saga into multiple files..

What a efficient multiple saga would look like ..... (this is copy from here)


// foo.jsexportconstfooSagas= [ takeEvery("FOO_A", fooASaga), takeEvery("FOO_B", fooBSaga), ] // bar.jsexportconstbarSagas= [ takeEvery("BAR_A", barASaga), takeEvery("BAR_B", barBSaga), ]; // index.jsimport { fooSagas } from'./foo'; import { barSagas } from'./bar'; exportdefaultfunction*rootSaga() { yieldall([ ...fooSagas, ...barSagas ]) }

Getting value from resolved promise in redux saga

Image
Redux saga normally return promised from fetch api and sometimes you need to resolve those promises to pass it as data to other components.

Given that you have the following item,




To work with actual data, you can try to use the following code :-



Promise.resolve(state.sysadmin).then(function(value) { console.log('promising promising ', value); });

debugging nodejs application

Image
Run your nodejs application using

"node --inspect server.js" (for example), you just need the --inspect switch.


Next, goto Chrome and click on DevTools for Nodejs. (the green button below) and then you're good to go.


Switch over to "source" tab and then set your breakpoint accordingly.



Returning HttpResponse Message the right way

Working with HttpResponseMessage can be tricky. How do you return HttpResponseMessage as string or HttpResponseMessage as Json message.


returnnewHttpResponseMessage(HttpStatusCode.OK ){Content=newStringContent("Your message here")};
As for Json message


react 17.0 changes

Introducing new event :-

getDerivedStateFromProps and getSnapshotBeforeUpdate.

Phasing out the following lifecycle method from react :-

componentWillMount, componentWillReceivePropsand componentWillUpdate.

antd table using computed column

Given we have the following dataset

Id       Username            Role
1         Jeremy                 1
2         Mark                    2

Role 1 or 2 doesn't sounds it means alot. Let's say if Role is 1, then we show 'Admin' otherwise  normal user.


constcolumns = [{ title:'Id', dataIndex:'Id', }, { title:'Username', dataIndex:'username', }, { title:'Role', dataIndex:'role', render: (text, record) => { if (record.role == 1) return<span>Admin</span> else return<span>Normal user</span> } }];



Javascript / Typescript - Getting value from PromiseValue

There are situation where you will receive partially resolve promises in PromiseValue. Example of such scenarios in redux saga which works only if you provide it with a function which return a pure Promise. 


So typically what happens is you pass your promise all over your code. To get actual value (normally where you like to work with the actual data values :-


letdata = this.props.users.users; data.json().then(function(data) { debugger; console.log(data); });


Please ignore code below :-




import { call, put, takeEvery, takeLatest, ForkEffect, all, fork, take } from'redux-saga/effects' importuserApifrom'./apiRequest';
exportfunction*fetchUser(action) { try { console.log('FETCH_USER user data -e', ); //let api = new userApi(); //const users = await api.getUsers("a"); debugger; constusers = yieldcall(getUsers); yieldput({type:'USER_FETCH_SUCCEEDED', users:users }); } catch (e) { yieldput({type:'USER_FETCH_ERROR', message:e.mess…

redux saga does not support async call for now

Tried using redux saga with async function call and failed badly. Atleast this is valid for 0.16.0.
Spent so much time understand what is wrong with my code.

As you can see below, await has been commented out and no longer works.


import { call, put, takeEvery, takeLatest, ForkEffect, all, fork, take } from'redux-saga/effects' importuserApifrom'./apiRequest';
exportfunction*fetchUser(action) { try { console.log('FETCH_USER user data -e', ); //let api = new userApi(); //const users = await api.getUsers("a"); debugger; constusers = yieldcall(getUsers); yieldput({type:'USER_FETCH_SUCCEEDED', users:users }); } catch (e) { yieldput({type:'USER_FETCH_ERROR', message:e.message}); } }
functiongetUsers() { returnfetch("http://localhost:3000/users/all"); } exportfunction*updateUser(action) { try { console.log('UPDATE user data -e'); letapi = newuserApi(); constuser = api.getUsers("a"); yieldput({type:'USER_UPDATE_SUC…

Error: self signed certificate

This error comes knocking today and can't believe i didn't put it in my blog :)
 as i encounter this a long long time ago. 
The solution is :
NODE_TLS_REJECT_UNAUTHORIZED=0 Please be careful not to leave any space between the equal sign. 
And you're good to go.


Nodejs CORS fixing it for ExpressJs

Getting CORS issue with chrome browser which requires CORS to be enable. Never ever listen to people who ask you to change your fetch API call to use 'mode' : 'cors' - You gonna get error - saying promise rejected.

This can be configure using code below :-




app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); app.get('/', function(req, res, next) { // Handle the get for this route }); app.post('/', function(req, res, next) { // Handle the post for this route });


git - unable to pull or push & getting messages your branch is behind by xx commits

Then i tried running "git gc --prune=now" and then run git push.


And it all worked.


IterableIterator' is not assignable to parameter of type 'Saga0'.

This messages pops when in one typescript compilation routine. Tho i had the proper return type, i am still getting this error.

The workaround is pretty easy (just specify es2015.iterable inside lib) as shown below :-


{ "compilerOptions": { "lib" : ["es2015", "es2015.iterable", "dom"] }, "include": [ "./src/**/*" ] }





sourcetree - error: failed to push some refs to 'git@github.com:519ebayproject/519ebayproject.git' hint: Updates were rejected because the tip of your current branch is behind

Bump into this crazy message that somehow sourcetree wasn't intelligent enough to solve.

error: failed to push some refs to 'git@github.com:519ebayproject/519ebayproject.git' hint: Updates were rejected because the tip of your current branch is behind
Even though there is no changes to your branch, this messages appear. To solve it, fire up your git terminal and run "git pull --force"



Error: Cannot find module 'webpack'

If you bump into this error, the following would be the solution :-

npm link webpack You might need to run "npm install" again.





API return FileContentResult without Chrome crying for MIME content

here is the code






FileContentResult for System.AspnetCore vs System.Web.Mvc

To be fair, both System.Web.Mvc and Microsoft.AspNetCore.Mvc supports FileContentResult when returning file. The only difference is Microsoft.AspNetCore.Mvc comes with a helper method called File that make this faster.


Microsoft.AspNetCore.Mvc way


[HttpGet("{id}"]
 public async Task Download(string id)

       return File(stream, "application/octet-stream"); // returns a FileStreamResult
}


System.Web.Mvc (5.2.3) way

public System.Web.Mvc.ActionResult ExportCSV()
{
            byte[] fileBytes = System.IO.File.ReadAllBytes(@"c:\tmp\csvfile.csv");         
            return new System.Web.Mvc.FileContentResult(fileBytes, "text/csv");           
}