Iago Dahlem Lorensini iagodahlem

## trainee-css-in-js.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iagodahlem
                / trainee-css-in-js.md
            
            
              Last active
              March 29, 2022 16:49
            
          
    Trainee - CSS-in-JS

Desafio

O desafio da semana será implementar os componentes de Checkout do MUI usados no desafio da semana passada, utilizando styled-components.
Task 1: Setup do Styled Components e Tema

Considerando o desafio da semana passada.

  
## actionTypes.js
export const AUTH = {
  SIGN_IN_REQUEST: 'SIGN_IN_REQUEST',
  SIGN_IN_SUCCESS: 'SIGN_IN_SUCCESS',
  SIGN_IN_ERROR: 'SIGN_IN_ERROR',
}

export const ARTICLE = {
  LOAD_ARTICLE_REQUEST: 'LOAD_ARTICLE_REQUEST',
  LOAD_ARTICLE_SUCCESS: 'LOAD_ARTICLE_SUCCESS',
  LOAD_ARTICLE_ERROR: 'LOAD_ARTICLE_ERROR',

## scalable-front-end-the-state-layer-dont-depend-on-the-return-of-actions-right-way.js
// action

const loadProduct = (id) => (dispatch, _, container) => {
  container.loadProduct(id, {
    onSuccess: (product, comments) => dispatch(loadProductSuccess(product, comments)),
    onError: (error) => dispatch(loadProductError(error)),
  })
}

// component

## scalable-front-end-the-state-layer-dont-depend-on-the-return-of-actions-wrong-way.js
// action

const loadProduct = (id) => (dispatch, _, container) => {
  container.loadProduct({
    onSuccess: (product) => dispatch(loadProductSuccess(product)),
    onError: (error) => dispatch(loadProductError(error)),
  })
}

// component

## scalable-front-end-the-state-layer-articles-reducer.js
const articlesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'RECEIVE_DATA':
      const articles = replaceRelationById(action.data, 'author')

      return {
        ...state,
        byId: byId(articles),
        allIds: allIds(articles),
      }

## scalable-front-end-the-state-layer-normalization-functions.js
const replaceRelationById = (entities, relation, idKey = 'id') => entities.map(item => ({
  ...item,
  [relation]: item[relation][idKey],
}))

const extractRelation = (entities, relation) => entities.map(entity => entity[relation])

const byId = (entities, idKey = 'id') => entities
  .reduce((obj, entity) => ({
    ...obj,

## scalable-front-end-the-state-layer-normalized-state-shape-organization.js
{
  currentUser: {},
  entities: {
    articles: {},
    authors: {},
  },
  ui: {},
}

## scalable-front-end-the-state-layer-normalized-state-shape.js
{
  articles: {
    byId: {
      '1': {
        id: '1',
        title: 'Managing all state in one reducer',
        author: '1',
      },
      '2': {
        id: '2',

## scalable-front-end-the-state-layer-articles-combine-reducers.js
const isLoadingReducer = (state, action) => newState

const errorReducer = (state, action) => newState

const listReducer = (state, action) => newState

const articlesReducer = combineReducers({
  isLoading: isLoadingReducer,
  error: errorReducer,
  list: listReducer,

## scalable-front-end-the-state-layer-articles-state-shape.js
{
  isLoading: false,
  error: null,
  list: [] // <- this is the array of articles itself
}
	export const AUTH = {
	SIGN_IN_REQUEST: 'SIGN_IN_REQUEST',
	SIGN_IN_SUCCESS: 'SIGN_IN_SUCCESS',
	SIGN_IN_ERROR: 'SIGN_IN_ERROR',
	}

	export const ARTICLE = {
	LOAD_ARTICLE_REQUEST: 'LOAD_ARTICLE_REQUEST',
	LOAD_ARTICLE_SUCCESS: 'LOAD_ARTICLE_SUCCESS',
	LOAD_ARTICLE_ERROR: 'LOAD_ARTICLE_ERROR',
	// action

	const loadProduct = (id) => (dispatch, _, container) => {
	container.loadProduct(id, {
	onSuccess: (product, comments) => dispatch(loadProductSuccess(product, comments)),
	onError: (error) => dispatch(loadProductError(error)),
	})
	}

	// component
	// action

	const loadProduct = (id) => (dispatch, _, container) => {
	container.loadProduct({
	onSuccess: (product) => dispatch(loadProductSuccess(product)),
	onError: (error) => dispatch(loadProductError(error)),
	})
	}

	// component
	const articlesReducer = (state = initialState, action) => {
	switch (action.type) {
	case 'RECEIVE_DATA':
	const articles = replaceRelationById(action.data, 'author')

	return {
	...state,
	byId: byId(articles),
	allIds: allIds(articles),
	}
	const replaceRelationById = (entities, relation, idKey = 'id') => entities.map(item => ({
	...item,
	[relation]: item[relation][idKey],
	}))

	const extractRelation = (entities, relation) => entities.map(entity => entity[relation])

	const byId = (entities, idKey = 'id') => entities
	.reduce((obj, entity) => ({
	...obj,
	{
	currentUser: {},
	entities: {
	articles: {},
	authors: {},
	},
	ui: {},
	}
	{
	articles: {
	byId: {
	'1': {
	id: '1',
	title: 'Managing all state in one reducer',
	author: '1',
	},
	'2': {
	id: '2',
	const isLoadingReducer = (state, action) => newState

	const errorReducer = (state, action) => newState

	const listReducer = (state, action) => newState

	const articlesReducer = combineReducers({
	isLoading: isLoadingReducer,
	error: errorReducer,
	list: listReducer,
	{
	isLoading: false,
	error: null,
	list: [] // <- this is the array of articles itself
	}