React Native with Facebook Login

This is done on a Mac and tested with XCode and IOS simulator. I have not gotten around to the Android version yet…

How to create a Facebook login button for React Native app on IOS.

Start by installing react-native via NPM:


npm install -g react-native

Then, change into your projects directory and run the following to create your project:


react-native init babiesdigest_native
cd babiesdigest_native
open ios/babiesdigest_native.xcodeproj

In a browser, open https://developers.facebook.com and select your app – Click “Quickstart” under the products section and note that we will be doing steps 1-6 here

Once XCode is open, click the project in the menu on the left and select General. Set the project identity and the signing team.

Right click project name and click “Add Group”, rename to “Frameworks”

Drag 4 .framework files from FacebookSDK (https://developers.facebook.com) into new “Frameworks” group:

* Bolts.framework
* FBSDKCoreKit.framework
* FBSDKLoginKit.framework
* FBSDKShareKit.framework

Add FacebookSDK directory to search path under project “Build Settings”

In the developers.facebook.com site, add your bundle id from XCode

In Faceobook, enable single sign-on

Copy Facebook’s PList code and paste into XCode

Make AppDelegate.m changes:

For the first block, you must paste the import at the top of the file with the rest of them, and add the
code as follows:

For the second block, add the method below the first method before the @end:

In your terminal, run the bundler app with npm start

Click the run button in XCode to start your simulator, and you should see the app:

Open App.js and import the Facebook classes we’ll use:

Add Button to the list of imports from react-native:

Add a button to the UI in App.js:

Reload the simulator:

Click the login button:

This launches the FB login/confirmation:

Once you login, you get the alert and the stringifyied object in an alert

React – new project

create-react-app projectName

cd projectName

npm install

npm start

npm --save install material-ui
npm --save install isomorphic-fetch
npm --save install react-tap-event-plugin
npm --save install react-redux
npm --save install redux-thunk
npm --save install fetch-polyfill

In App.js:

import {MuiThemeProvider} from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';

constructor(props) {
super(props);
...
}

render(){
return (

...

)

Docs are here: http://www.material-ui.com/#/

Icons are here: https://material.io/icons/

JQuery Stateful Plugin

Creating a JQuery plugin (https://github.com/mikebski/demano) for filtering objects on a page, I needed a way to create a stateful JQuery plugin.

This is done by attaching all of the configuration for the plugin to the actual DOM element we create the plugin on. This allows multiple separate “instances” of the plugin on the page. The only catch is that each must be on a separate DOM entity.

Here’s the example code, here it is on JSFiddle: https://jsfiddle.net/mbaranski/q2rarzfn/ and here is the github plugin: https://github.com/mikebski/demano/:

Note that we proxy the click listener so that “this” in the callback function points to the DOM element that the configuration is attached to.

Here’s a practical example -> https://github.com/mikebski/demano

Angular helper to encode object as www/formdata

Helper to serialize data to www/formdata – needed for turning a javascript object into encoded form data to POST:

Angular Directives – compile & link & trusted HTML

More information on Angular directives:

Here’s a simple directive with a couple of scope variables that get displayed:

Here is the angular stuff:

Here is a fiddle for the example, which has some css and things. Nothing really special here.

Now, in order to make some DOM changes, we can’t change the element during the link function. If you want to change the element, you have to do it during the compile function. The compile function gets called when the directive is created, and should return the link function. This allows the directive to be modified. This example shows how to add a list to the directive.

We can also add some HTML with the “sce” module:

The interesting thing there is the compile function. The compile function gets the tElem, which is the template element itself. This function is run when the directive is compiled, and there is no scope available. We can, however, add some elements to the directive. Note that the compile function returns the link function.

Here is a working fiddle

Here’s a final fiddle showing how to add a list to the element’s div

Angular

JQuery how to resize table and keep table size

When removing a table row, you can prevent an html table size from changing by setting the width explicitly before removing the row:


 

Javascript function application / currying / callbacks

Javascript partial functions:Here, doSomething is a callback and the second argument should be data from a JQuery ajax call.Say you have a function:


There can be any number of arguments after passing in the function argument, like: partial(fn, arg1, arg2, …, argn), these arguments are applied to the function you will be calling.


 

The callback after the post will behave just like you called: doSomething(“Test Value”, data) where data is the $.post result.