sht5

* taken from emotionJS documentation

import { jsx } from '@emotion/core'

render(
  <div
    css={{
      color: 'darkorchid',
      '@media(min-width: 420px)': {
        color: 'orange'

sht5

*these are simple examples from EmotionJS docs

//example passing object to css prop
import { jsx } from '@emotion/core'

render(
  <div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {

sht5

//this part needs to be defined only once in an app
//media_queries_definition.js

import facepaint from 'facepaint'
const breakpoints = [768, 1200];

export const mq = facepaint(
    breakpoints.map(bp => `@media (min-width: ${bp}px)`)
)

sht5

const Button = styled.button`
  background: ${props => props.primary ? "blue" : "white"};
  color: ${props => props.primary ? "white" : "blue"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

sht5

switch (action.type) {
        case generateSuccessActionTypeName(types.GET_COINS): {
            const {coins} = action;
            const currentAmountOfCoins = state[consts.STATE_INNER_OBJECT_NAMES.COINS];
            return {
                ...state,
                [consts.STATE_INNER_OBJECT_NAMES.COINS]: currentAmountOfCoins + coins
            }
        }

sht5

const asyncActionsMiddleware = store => next => action => {
    const isActionAsync = action.hasOwnProperty('async');
    if (!isActionAsync) {
        return next(action);
    }
    else {
        const {httpMethodToInvoke, params, type} = action;
        const inProgressType = generateInProgressActionTypeName(type);
        //the resolved promise here is to make sure the action fired here comes after firing original action for example:
        //getData => getDataInProgress and not the other way round. hack suggested in redux forums.

sht5

export function getCoins(name,amountOfCoins){
    return {
        type : types.GET_COINS,
        async : true,
        httpMethodToInvoke : httpService.getCoins,
        params : [name,amountOfCoins]
    }
}

sht5

const requestToGetCoins = async() => {
    return (dispatch) => {
        dispatch(requestToGetCoinsInProgress());
        try{
          const users = await httpService.getCoins();
          dispatch(requestToGetCoinsSuccess(users));
        }
        catch(e){
          dispatch(requestToGetCoinsError(e));
        }

sht5

    app.post('/user/defaultLanguage', (req, res) => {
        const defaultLanguage = req.body.defaultLanguage;
        const userEmail = req.user.email;
        userLogic.updateUserDefaultLang(userEmail, defaultLanguage)
            .then(() => {
                res.end();
            })
            .catch((err) => {
                utils.logHttpRequestError(res.req, err);
                res.status(500).end();

sht5

const config = require('config'); // library for code configuration setups

const logHttpRequestError = (request, errorObj) => {
    const logObj = {
        server_type : config.get('server_type'), // we take the server type from configuration
                                                 //in order to know which server created the log
                                                 //such as production\staging etc
        message : errorObj.message,
        stack : errorObj.stack,
        url : request.url,