RSS
 

Archive for the ‘Programming Recipes’ Category

ReactJS: componentWillReceiveProps() is Dead! (*sniff*)

21 Apr

ReactJSThings evolve. ReactJS evolves. With version 16.3, there were several changes to the component life-cycle methods. In particular, componentWillReceiveProps is disappearing. In its place, they say, you can use the getDerivedStateFromProps static function. I found this a bit challenging, but I did find an interesting pattern when the component-state was dependent on fetched information.

I should mention that I had a specific goal to better encapsulate data within the component. While I could pass in all the needed data as properties, that would reqire the surrounding component know what to pass and how to get it. That shouldn’t necessarily be necessary; the component knows what it needs and how to retrieve it.

For example, say you have a component which accepts a phone number and displays the phone number and the state that it’s from. Certainly, you could write a simple component that accepts both pieces of information as properties.

<ShowPhoneLocation number="+12065551212" city="Seattle" />

Which might be implemented as:

class ShowPhoneLocation extends React.Component {
  render() {
    return (
<div>{this.props.number} is from {this.props.city}</div>
)
  } // render()
} // class ShowPhoneLocation

But, since the component should be able to infer the state from the phone number (by its area code), it shouldn’t be incumbent on its container to know what it is.

class ShowPhoneLocation extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    let location = getCityFromPhone(nextProps.number)
    return {
      city: location
    }
  }
  render() {
    return (
<div>{this.props.number} is from {this.state.city}</div>
)
  } // render()
} // class ShowPhoneLocation

That’s all well and good, but what if getCityFromPhone() has to call a web service? We don’t want getDerivedStateFromProps() to stall, waiting for a response. However, it is static and does not have a this reference to the object for which it is returning state; so an asynchronous fetch doesn’t know what object’s state to set. Instead, don’t wait for the result to save in the state, save the request’s Promise in the state and update the state, once the promise resolves.

function getCityFromPhone(number) {
  return fetch('http://saas.com/get/'+number+'/city') // Returns fetch promise
}
class ShowPhoneLocation extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    let location = getCityFromPhone(nextProps.number)
    return {
      city: location
    }
  }
  componentDidUpdate() {
    let location = this.state.city
    if (location instanceof Promise) {
      this.setState({ city: '...waiting...' })
      location.then(city => this.setState({ city: city }) )
              .catch(() => this.setState({ city: 'not found' }) )
    }
  }
  render() {
    return (
<div>
        {this.props.number} is from {this.state.city instanceof Promise
                                     ? '...'
                                     : this.state.city}</div>
)
  } // render()
} // class ShowPhoneLocation

In componentDidUpdate() you can define the completion handlers to set the object’s state, base on the returned information from the service.

It is a common pattern to perform a fetch in componentDidMount(). The problem is that there may not be enough information to perform the fetch, that early, or the information for the fetch changes after the component has been mounted.

I am going to miss componentWillReceiveProps() — without it, things become a bit more convoluted — but it’s going the way of the Dodo.

 

Command line clipboard in macOS and Cygwin

03 Dec

I use the command line a lot, even though I am on a graphical user-interface like Windows or macOS. And since I’m lazy, I write a lot of scripts to perform repetitive tasks. The downside of command-line is that there is no standard way to interact with GUI features. I stumbled across a command in macOS, recently that allows command line programs to copy/paste between the clipboard that we’re so used to using.

macOS pbpaste and pbcopy

macOS has two commands, pbpaste and pbcopy, which “paste” from the pasteboard to stdout and copies from stdin to the pasteboard, respectively Read the rest of this entry »

 

Syncing Github Forks

26 Nov

GitHub_LogoGithub has become the place to manage source code—it’s free, robust, and commonly accessible. Github repositories are owned and access to change them must be enabled by the owner. Still, you can make changes to a Github repository; but a “pull request” must be sent to contributors of the repository and they can accept the change at their discretion. Keeping changes in sync when you don’t have direct change privileges may not be obvious.

One-time Github Changes Read the rest of this entry »

 

PHP Recipe to Show Source-code

19 Nov

PHP source-code display recipeHere is a simple Web 1.5 (static HTML with a little bit of styling and JavaScript) recipe to allow a viewer of your web page to see the PHP source-code, behind it, with a minimal amount of JavaScript and a little CSS manipulation—good for showing the work you’ve done to others. Or for embedding in your own source, in debug mode, so that teammates can see each others’ work.

See the example code at: http://cachecrew.com/sample_code/highlight_file.php and http://cachecrew.com//sample_code/highlight_file2.php.

The PHP and HTML Read the rest of this entry »

 

Self-documenting Bash Scripts Using Heredoc

22 Jul

It is surprising how quickly we forget how to use scripts we had written, let alone, what they were for. So it is even more difficult for others to know how and whether to use your script. You can avoid wasting the efforts you put into the problems you solved with your script by simply adding some friendly “help” output.

Here is some basic information you should include:

  • Summary description
  • Form of use—basic syntactic usage
  • Description of usage syntax; i.e., input parameters
  • More detailed information, if necessary. Read the rest of this entry »