Skip to content

Instantly share code, notes, and snippets.

@tomcask
tomcask / convertQueryParamsToProps.js
Created November 16, 2018 08:21
returns an object reliable like as props of React components
const convertQueryParamsToProps = query =>
query.split("&")
.map(item => item.split("="))
.reduce((params, queryParam) =>
(params[queryParam[0]]= queryParam[1]) && params
, {})
}
convertQueryParamsToProps("tomas=mola&foo=1")
//{tomas: "mola", foo: "1"}
@tomcask
tomcask / await-manage-cacth-without-try.js
Created February 23, 2018 07:59
try to avoid use try catch statement and manage the error in await call
const to = promise =>{
return promise.then(data =>{
return [null, data]
})
.catch(err => [err])
}
fetchData(){
let err, data
[err, data] = await to(Api.getEntity())
@tomcask
tomcask / Function_exits_in_all_functions.js
Last active May 26, 2019 02:02
Objectos en javascript
Function.prototype.pensar = function(){console.log("Soy la function " + this.name + " y estoy pensando")}
function ejemplo_de_f unction() { console.log('no hago nada') }
ejemplo_de_function.pensar()
// >Soy la function ejemplo_de_function y estoy pensando

Como trabajan los iteradores

class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }
 
 [Symbol.iterator]() { return this; }
@tomcask
tomcask / TestStateinHOC.js
Created March 22, 2017 14:50
How you test State in High order components
describe('Test the states', () => {
it('should start with operations empty list', () => {
const component = shallow(<App />);
const child = shallow(component.get(0));
expect(child.state('operations')).to.be.eql([]);
})
});
@tomcask
tomcask / 0. intro.md
Created March 15, 2017 07:59 — forked from jquense/0. intro.md
Alternative ways to define react Components

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

@tomcask
tomcask / function.prototype.override.js
Created March 15, 2017 07:59 — forked from pentaphobe/function.prototype.override.js
How to override the function call prototype in javascript, originally a stack overflow answer
callLog = [];
/* set up an override for the Function call prototype
* @param func the new function wrapper
*/
function registerOverride(func) {
oldCall = Function.prototype.call;
Function.prototype.call = func;
}
@tomcask
tomcask / chrome_monitorEvents.md
Created February 1, 2017 15:34 — forked from WillSquire/chrome_monitorEvents.md
Chome monitorEvents

Monitor events by ID:

monitorEvents(document.getElementById('id'))

Monitor events by class:

monitorEvents(document.querySelector('.class'))
@tomcask
tomcask / partiasl-templates-hbs.js
Created January 20, 2017 12:02
Using partials are templates that can be reused in other templates with hbs.
//http://danburzo.ro/grunt/chapters/handlebars/
//In templating languages, partials are templates that can be reused in other templates. In Handlebars, you use the {{> partial }} helper to include partials. Let's take an example:
//Note: It's important to register the partial before compiling any template that includes it, otherwise it will throw an error.
<script type='text/x-handlebars' id='post-list-template'>
<h2>{{ title }}</h2>
<ul>
{{#each posts}}
<li>{{> post-item}}</li>
{{/each}}
@tomcask
tomcask / draftjs-force-selection.js
Created January 10, 2017 16:52
Example of force selection in draftjs
const getEditorState = this.props.store.getItem('getEditorState');
const setEditorState = this.props.store.getItem('setEditorState');
const selection = this.props.store.getItem('lastSelection');
const editorState = getEditorState();
const updateSelection = new SelectionState({
anchorKey: selection.anchorKey,
anchorOffset: selection.anchorOffset,
focusKey: selection.anchorKey,
focusOffset: selection.focusOffset,
isBackward: false,