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 import React from 'react' ; import { createSwitchNavigator , createStackNavigator } from 'react-navigation' ; import MainTabNavigator from './MainTabNavigator' ; import LoginScreen from '../screens/LoginScreen' ; export default createSwitchNavigator ({ // 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 sepa

splitting saga into multiple files..

What a efficient multiple saga would look like ..... (this is copy from here ) // foo.js export const fooSagas = [ takeEvery ( " FOO_A " , fooASaga), takeEvery ( " FOO_B " , fooBSaga), ] // bar.js export const barSagas = [ takeEvery ( " BAR_A " , barASaga), takeEvery ( " BAR_B " , barBSaga), ]; // index.js import { fooSagas } from ' ./foo ' ; import { barSagas } from ' ./bar ' ; export default function * rootSaga () { yield all ([ ... 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. return new HttpResponseMessage ( HttpStatusCode . OK ) { Content = new StringContent ( "Your message here" ) }; As for Json message return new HttpResponseMessage ( HttpStatusCode . OK ) { Content = new StringContent ( SerializedString , System . Text . Encoding . UTF8 , "application/json" ) };

react 17.0 changes

Introducing new event :- getDerivedStateFromProps and  getSnapshotBeforeUpdate. Phasing out the following lifecycle method from react :- componentWillMount,  componentWillReceiveProps and 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. const columns = [{ 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 :- let data = 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' import userApi from './apiRequest' ; export function* fetchUser ( action ) { try { console . log ( 'FETCH_USER user data -e' , ); //let api = new userApi(); //const users = await api.getUsers("a"); debugger ; const us

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' import userApi from './apiRequest' ; export function* fetchUser ( action ) { try { console . log ( 'FETCH_USER user data -e' , ); //let api = new userApi(); //const users = await api.getUsers("a"); debugger ; const users = yield call ( getUsers ); yield put ({ type: 'USER_FETCH_SUCCEEDED' , users: users }); } catch ( e ) { yield put ({ type: 'USER_FETCH_ERROR' , message: e . message }); } } function getUsers () { return fetch ( "http://localhost:3000/users/all" ); } export func

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");            }