alonbardavid

function ticker(){
      const [time,setTime] = useState(0);
      useEffect(()=>{
          const intervalId = setInterval(()=>setTime(time+1),1000)
          return ()=>clearInterval(intervalId)
      })
      return <div>
          seconds elapsed {time}
      </div>
  } 

alonbardavid

class SortedList extends React.Component {
    
    onFilterChange = (event)=>{
        const filter = event.target.value;
        this.setState({
            filter,
        })
    }
    sortByKey = (column) =>{
        this.setState({

alonbardavid

class SortedList extends React.Component {
    
    onFilterChange = (event)=>{
        const filter = event.target.value;
        const {sortKey} = this.state;
        const filteredList = this.props.list.filter(item=>item.text.indexOf(filter)>=0)
        this.setState({
            filter,
            sortedList:sortByColumn(filteredList,sortKey)
        })

alonbardavid

function myComponent(selector,label,value,onChange,validations = {}){
  let element = document.querySelector(selector);
  element.innerHTML=```
    <div class="my-element">
        <label>${label}</label>
        <input></input>
    </div>
  ```
  let input = element.querySelector('input'); 
  input.value = value;

alonbardavid

test('when maxLength is 1, input should reject any keypress',()=>{
  //assuming we have a div in our test environment with the id #test-app
  const onChangeCalls = [];
  myComponent("#test-app","my-label","A",{maxLength:1},(value)=>calls.push(value));
  const input = document.querySelector("#test-app input");
  //this test is a simplified version, to really simulate an input event, you'll need to
  //change the target value, call more events and react like the browser.
  input.dispatchEvent(new Event('keypress',{bubbles:true,cancelable:true,key:"B"}))
  expect(calls.length).toEqual(0);
  expect(input.value).toEqual("A");

alonbardavid

function myComponent(selector,label,value,onChange,validations = {},format=null){
  let element = document.querySelector(selector);
  element.innerHTML=```
    <div class="my-element">
        <label>${label}</label>
        <input></input>
    </div>
  ```
  let input = element.querySelector('input'); 
  input.value = value;

alonbardavid

function myComponent(selector,label,value,onChange,validations = {}){
  let element = document.querySelector(selector);
  element.innerHTML=```
    <div class="my-element">
        <label>${label}</label>
        <input></input>
    </div>
  ```
  let input = element.querySelector('input'); 
  input.value = value;

alonbardavid

function myComponent(selector,label,value,onChange){
  let element = document.querySelector(selector);
  element.innerHTML=```
    <div class="my-element">
        <label>${label}</label>
        <input></input>
    </div>
  ```
  let input = element.querySelector('input'); 
  input.value = value;

alonbardavid

function myComponent(selector,label,value,onChange){
  let element = document.querySelector(selector);
  element.innerHTML=```
    <div class="my-element">
        <label>${label}</label>
        <input></input>
    </div>
  ```
  let input = element.querySelector('input'); 
  input.value = value;

alonbardavid

import { computed} from 'mobx'

const suspended = observable.box(false)
export function setSuspended(value) {
  suspended.set(value)
}
export function suspendableComputed(
  instance: any,
  propertyName: PropertyKey,
  descriptor: PropertyDescriptor,