How to change from a class component which using MobX to a function component in React Native

Premise

If you don't need to maintain state, it's prefer to use function component than class component.
But, If you've already implemented class component, you also need to know how to change it.
I also implemented a class component using MobX ( and HOC( Higher Order Component ) ).
The example as below is a sample to change from a class component which using MobX to a function component.

Code

The sample code (class component) before the change is as follows.

gist.github.com

The sample code (function component) after the change is as follows.

gist.github.com

The points of chage are as follows.

i) replace MobX's @inject and @observer to inject() and useObserver()

@inject('aStore', 'bStore')
@observer
class SomeComponent extends React.Component {
:
}
const component = withCommonProps(SomeComponent);
export default component;

change as below.

const SomeComponent = ({
  aStore,
  bStore,
}) => {
  return useObserver(() => (
  :
  ));
};
const component = withCommonProps(inject('aStore', 'bStore')(SomeComponent));
export default component;

ii) replace render() to return useObserver()

class SomeComponent extends React.Component {
  :
  render() {
    return (
      <Text>write some JSX you want</Text>
    );
  }
}

change as below.

const SomeComponent = ({
}) => {
  :
  return useObserver(() => (
      <Text>write some JSX you want</Text>
  ));
};

iii) replace constructor() and lifecycle method( componentWillMount ) to useEffect()

class SomeComponent extends React.Component {
  :
  constructor(props) {
    super(props);
    // write some initialize code you want
  }

  componentWillMount() {
    // write some code you want
  }
  :
}

change as below.

import React, { useEffect } from 'react';
:
const SomeComponent = ({
  aStore,
  bStore,
}) => {
  :
  useEffect(() => {
    // write some initialize code you want
  }, []);

  useEffect(() => {
    // write some code you want
  }, [aStore, bStore]);
  :
};

How to track pageview with Google Analytics in Node app

Environment

• Node ( TypeScript )
• Google Analytics
• universal-analytics

Premise

Normally, in order to track pageview with Google Analytics, it is necessary to embed the tracking code in client-side JavaScript and execute it in the browser.
Therefore, an ingenuity is required in order to perform tracking accompanying the processing on the server side.

Solution

At Node app, you can track pageview with using universal-analytics module.
The example is shown as below ( written by TypeScript ).

gist.github.com

Above example works on Google Cloud Functions for Firebase.
Each time the same Process function is called, the track which is recorded as accessing /someprocess is sent at Google Analytics.

How to share styles at React Native

Environment

• React Native
• mobx
• react-native-extended-stylesheet

Code

gist.github.com

react-native-extended-stylesheet provides EStyleSheet.build which compile variables to reuse any style in EStyleSheet.create.
(e.g. $dark087)
And by using mobx, you can inject the StyleStore class into any component.

If you want to use only style's property value, you can access it as below.

someColorProperty={styleStore.styles.title.color}

How to access lfs binary files from GitHub Pages

Environment

• GitHub.com
• GitHub Pages
• lfs

Premise

At the GitHub.com, you can not push large file ( over 50MB ) to remote repository.
In this case, you can use lfs to solve this problem as below.

( in your local repository )
$ git lfs install
$ git lfs track "*.mp3"
$ git add audio/*.mp3
$ git add .
$ git commit -m "add mp3 files to lfs" -v
$ git push -u origin master

Then, you'll try to access lfs binary files ( at the example above, as audio/*.mp3 files ), but you can not access them.
GitHub.com does not allow you to access lfs binary files directry (e.g. https://username.github.io/audio/some.mp3 ) from GitHub Pages.

Solution

Instead of direct access, you can use special url as below.

https://media.githubusercontent.com/media/_Username_/_Project_/_Branch_/_Path_to_file_

e.g. https://media.githubusercontent.com/media/shinchit/shinchit.github.io/master/audio/some.mp3

Reference

github.com

How to implement summation and product with recursion or reduce at node

Environment

• node

Code

Recursion

gist.github.com

Reduce

gist.github.com

Note

Typically, reduce is faster than recursion, and more simple.

How to get return value from then function at node

Environment

• node

Code

gist.github.com

The value returned by the then function can be received in a variable with await.

How to retrive parent custom sobjects field value by SOQL at Apex

Environment

• Apex
• SOQL

Premise

Note that when retrieving parent SObject information with the child SObject's retriving query, it is necessary to receive the SOQL execution result in the SObject type.
For example, if you do the following, you can get only Opportunity Id and Name.

    List<Opportunity> objs = [
        SELECT
            Id,
            Name,
            AccountId,
            Account.Name,
            SomeCustom__r.Id,
            SomeCustom__r.Name
        FROM
            Opportunity
    ];
    System.debug(objs);
    // returns only Opportynity.Id and Opportunity.Name

Code

gist.github.com

To retrive the parent SObject data, if you know the relationship name (e.g. Account, SomeCustom__r) , just pass the relationship name to the getSObject method.
If you know only the SObject API reference name and do not know the relationship name, you can get the Schema.SObjectField value using Schema.SObject and pass this Schema.SObjectFIeld to getSObject.

The method using Schema is recommended, although the code is a little longer because data can be obtained in the same way with standard SObject and custom SObject.

Reference

developer.salesforce.com