jtomaszewski

<div class="sidebar">
  <my-search-page-sidebar
    [filters]="state.filters" 
    (filtersChange)="changeFilters($event)">
  </my-search-page-sidebar>
</div>
<div class="content">
  <h2>Search</h2>
  <my-search-page-query-input 
    [value]="state.query" 

jtomaszewski

// wrong (impure)
class DateTimePickerComponent {
  timeZone: string = "Europe/Warsaw";

  constructor(private account: AccountService) {
    if (this.account.currentUser) {
      this.timeZone = this.account.currentUser.timeZone;
    }
  }

jtomaszewski

flatten = array => {
  return array.reduce((sum, x) => {
    if (Array.isArray(x)) {
      return [...sum, ...flatten(x)];
    } else {
      return [...sum, x];
    }
  }, [])
};

jtomaszewski

Code formatting & linting

In AppUnite, we enforce proper code style by:

1. formatting of all our **/*.{js,jsx,ts,tsx,css,less,scss} files with prettier,

2. linting all **/*.js files with ESLint,

3. linting all **/*.ts files with TSLint.

jtomaszewski

/* eslint-disable no-await-in-loop */
/* eslint-disable no-restricted-syntax */
// eslint-disable-next-line import/no-extraneous-dependencies
const puppeteer = require('puppeteer');
const { green, red, cyan, grey, bold } = require('chalk');

const url = 'http://localhost:9001/iframe.html';

function runAxe() {
  return new Promise((resolve, reject) =>

jtomaszewski

Accessibility in Web

by Jacek Tomaszewski

Asana task

Accessibility

What is accessibility?

jtomaszewski

// Action creator function
function fetchArticles(params = {}) {
  return dispatch => {
    dispatch({ type: 'FETCH_ARTICLES_START', params });
    ArticlesService.getArticles(params).then(
      response => {
        dispatch({ 
          type: 'FETCH_ARTICLES_SUCCESS',
          data: response.data
        });

jtomaszewski

import { call, put, takeLatest } from "redux-saga/effects"; 

// Action creator function
function fetchArticles(params) {
 return { type: FETCH_ARTICLES, params };
}

// Sagas
function* fetchArticlesSaga() { 
  yield takeLatest(FETCH_ARTICLES, triggerFetchArticles); 

jtomaszewski

import Observable from 'rxjs/observable';

// Action creator function
function fetchArticles(params) {
 return { type: FETCH_ARTICLES, params };
}

// Epic
const fetchArticlesEpic = action$ => {
  return action$

jtomaszewski

// Fetch results when:
// - page is changed (immediately after):
// - "sort by" filter is changed (immediately after),
// - search query is changed (after 500 ms debounce),
// - filters are changed (after 300 ms debounce)
const refetchResultsEpic = action$ => {
  return Observable.merge(
    action$.ofType(CHANGE_QUERY).debounceTime(500),
    action$.ofType(CHANGE_FILTERS).debounceTime(300),
    action$.ofType(CHANGE_PAGE),