dropdown in react: downshift

https://scotch.io/tutorials/5-most-common-dropdown-use-cases-solved-with-react-downshift

https://kentcdodds.com/blog/introducing-downshift-for-react

Advertisements

react render empty

according to react doc

Booleans, Null, and Undefined Are Ignored

falsenullundefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

so


class x extends Component{
     render(){
       return(null);
    }
}

good summary for react redux thunk

source:
https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3

  1. There is 1 global state object that manages the state for your entire application. In this example, it will behave identically to our initial component’s state. It is the single source of truth.
  2. The only way to modify the state is through emitting an action, which is an object that describes what should change. Action Creators are the functions that are dispatched to emit a change – all they do is return an action.
  3. When an action is dispatched, a Reducer is the function that actually changes the state appropriate to that action – or returns the existing state if the action is not applicable to that reducer.
  4. Reducers are “pure functions”. They should not have any side-effects nor mutate the state — they must return a modified copy.
  5. Individual reducers are combined into a single rootReducer to create the discrete properties of the state.
  6. The Store is the thing that brings it all together: it represents the state by using the rootReducer, any middleware (Thunk in our case), and allows you to actually dispatch actions.
  7. For using Redux in React, the <Provider /> component wraps the entire application and passes the storedown to all children.

https://codeburst.io/redux-a-crud-example-abb834d763c9

Chrome App with AnguarJS & JQuery

There are mainly 3 parts to build an chrome app:

Static Page

  1. popup.html, would be the popup view when you click on the icon of the app/plugin

here you define the view, and the binding to the controller/service functions

<div ng-controller="shortCutController" ng-model="option" class={...}

/>
<button id="configure" class="btn btn-info" ng-click="option = !option; initMap()">{{ option ? "Hide": "Show"}} Configure</button>

app.js

 

  1. which is the place to put your controller/services:
app.controller( 'shortCutController', ['$scope', '$rootScope', 'mapStore', function( $scope, $rootScope,mapStore ) {
}
I am using chrome storage, so did a sync on each update
$scope.update=function(key, value) {//update the storage

//mapStore.update(key, value);

$rootScope.mappers[key] =value;

chrome.storage.sync.set({"mapper":$rootScope.mappers}, function(){

console.log("check the updated mappers: "+$rootScope.mappers);

});


 

background.js

this is the place, for your plugin to listen to registered actions. for this case, it’s listening omnibox:

chrome.omnibox.onInputEntered.addListener(

function(text) {

vardata= {};

chrome.storage.sync.get("mapper",function(keys){

......

chrome.tabs.query({
.............
}}

 

Here is the link for the app: https://chrome.google.com/webstore/detail/short-cut-for-url-mapper/lafchflokhmpcoaondfeffplkdnoaelh