alonbardavid

function ToppingSelection(props){
    const {options,selected,onChange} = props;
    
    function handleInputChange(event){
        const value = event.target.name;
        if ( selected.includes(value)){
            onChange(selected.filter(option=>option !== value));
        } else {
            onChange(selected.concat(value));
        }

alonbardavid

function sortedList(props){
    const {list) = props;
    const [filter, setFilter] =  useState("");
    const [sortKey, setSortKey] = useState(null);
   
    const filteredList = list.filter(item=>item.text.indexOf(filter)>=0)
    const sortedList = list.sort((a,b)=>a[column]>b[column]?1:a[column] < b[column]?-1:0);
    return <div>
        {sortedList.map(item=>
            <ItemView item={item} key={item.id} />

alonbardavid

class TimeRangeStore {
  @observable
  days;

  constructor(days){
    this.days = days;
  }     
  
  @computed
  get formatted(){

alonbardavid

function setSetDays(days){
  return (dispatch,getState)=>{
    dispatch({
      type:actionTypes.SET_DAYS,
      payload:days
    })
  }
}
function setFormatted(formatted){

alonbardavid

    function timeRangeReducer(state,action){
      let days = state.days;
      if (action.type === actionTypes.SET_DAYS){
        days === action.payload;
      }  
      return {
        days,
        formatted: days > 14? `${Math.floor(days / 7)} weeks`:days>1?`${days} days`:'1 day' 
      }
    } 

alonbardavid

function sortingReducer(state,action){
  const key = action.type === actionTypes.SORT_BY?action.payload:state.sortKey;
  return {
    list:state.list,
    sorted:state.list.sort((a,b)=>a[key]>b[key]?1:a[key]<b[key]?-1:0),
    sortKey:key
  }   
} 

alonbardavid

function sortingReducer(state,action){
  switch (action.type){
    case actionTypes.SORT_BY:
      const key = action.payload;
      return {
        list:state.list.sort((a,b)=>a[key]>b[key]?1:a[key]<b[key]?-1:0),
        sortKey:key
      }     
      default:
        return state;

alonbardavid

// ToppingSelection receives props with the following structure (Typescript notation):
// {options:{text:string,value:string},selected:string[],onChange:(value)=>void}
class ToppingSelection extends React.Component {

  handleInputChange = (event)=>{
      const value = event.target.name;
      if ( selected.includes(value)){
          onChange(selected.filter(option=>option !== value));
      } else {
          onChange(selected.concat(value));

alonbardavid

// ToppingSelection receives props with the following structure (Typescript notation):
// {options:{text:string,value:string},selected:string[],onChange:(value)=>void}
class ToppingSelection extends React.Component {
    
    constructor(props){
        super(props);
        this.state = {
            optionsWithSelect:_.cloneDeep(props.options) // _ is for lodash, which I use for clarity
        }
    }

alonbardavid

function ticker(){
    const [renderTimes,rerender] = useState(0);
    const now = new Date().getTime();
    const [start] = useState(now);
    //we use this to force the function to rerender every second
    useEffect(()=>{
        const intervalId = setInterval(()=>rerender(renderTimes + 1),1000)
        return ()=>clearInterval(intervalId)
    })
    return <div>