hpierre74

import { addUserProfile } from '@lib/user.actions';

export const createProfile = ({ profileName, profileId, avatarUrl }) => async (dispatch, getState) => {
  await fetch('/api/profile', { method: 'POST', body: JSON.stringify({ profileId, profileName, avatarUrl }) });
  dispatch(addUserProfile(profileId));
  
  return dispatch({ type: 'CREATE_PROFILE', payload: { profileId, profileName, avatarUrl });
};

hpierre74

export const createUser = ({ username, password }) => async (dispatch, getState) => {
  await fetch('/api/user', { method: 'POST', body: JSON.stringify({ username, password }) };
  return dispatch({ type: 'CREATED_USER', payload: { username } });
};

export const addUserProfile = profileId => ({ type: 'ADDED_USER_PROFILE', payload: { profileId } });

hpierre74

import withAnim from './withAnim.hoc.js';

const AnyComponent = () => <p>I am a simple Component</p>;

const AnimatedComponent = withAnim(AnyComponent);

const AnyWrapper = () => (
  <div>
    <AnimatedComponent animation='slideInDown' />
  </div>

hpierre74

import React, { Component } from "react";
import PropTypes from "prop-types";
import styled, { keyframes } from "styled-components";

const AnimationWrapper = styled.div`
  animation: ${({ duration }) => duration}s ${({ animation }) => animation};
`;

const withAnim = ComponentToAnimate => {
  class WithAnimHoc extends Component {

hpierre74

<App duration='3' animation='bounceIn' />

hpierre74

import React from 'react';
import withAnim from './withAnim.hoc';

const App = () => (<div>I am animated</div>);

export default withAnim(App);

hpierre74

import React from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import { requireAnimation } from 'YOUR_PATH';

const AnimationWrapper = styled.div`
  animation: ${({ duration }) => duration}s ${({ animation }) => animation};
`;

const withAnim = Component => {

hpierre74

// this function could be in the theme or anywhere you see fit
// eslint will complain about it, you might get errors if you 
// use different webpacks bundles
export const requireAnimation = animation => 
  require(`react-animations/lib/${animation}`).default;

hpierre74

import styled from 'styled-components';

export const SlideInDownWrapper = styled.div`
  ${ ({ theme: { utils } }) => utils.slideInDown(1.5) };
`;

export const RotateInWrapper = styled.div`
  ${ ({ theme: { utils } }) => utils.rotateIn(1.5) };
`;

hpierre74

import React from 'react';
import styled from 'styled-components';

const AnimatedComponent = styled.div`
  ${ ({ theme: { utils } }) => utils.slideInDown(1.5) };
`;

const YourComponent = () => <AnimatedComponent>I am animated</AnimatedComponent>;

export default YourComponent;