Skip to content

Instantly share code, notes, and snippets.

View cevr's full-sized avatar
🏠
Working from home

Cristian Velasquez Ramos cevr

🏠
Working from home
View GitHub Profile
@cevr
cevr / api.js
Last active December 19, 2018 17:44
export function getObjectives() {
return dispatch => {
dispatch(isLoading());
axios
.get('url')
.then(res => {
dispatch(setObjectives(res.data))
dispatch(isNotLoading());
})
.catch(err => {
@cevr
cevr / hooks.js
Last active June 6, 2019 23:56
With Hooks
import React, { useState, useRef, useEffect } from 'react';
import { findDOMNode } from 'react-dom';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Radio from '@material-ui/core/Radio';
import clsx from 'clsx';
import { useStore, useActions } from 'easy-peasy';
import { EditableText } from 'shared';
@cevr
cevr / arranger.js
Last active June 6, 2019 23:56
With Arranger
import React from 'react';
import { findDOMNode } from 'react-dom';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Radio from '@material-ui/core/Radio';
import clsx from 'clsx';
import { pipe, makeHandlers, makeEffect, makeState, makeRef } from 'arranger';
import { EditableText } from 'shared';
import { action, createStore, StoreProvider, useStore, useActions } from 'easy-peasy';
// 👇 create your store, providing the model
const store = createStore({
todos: {
items: ['Install easy-peasy', 'Define your model', 'Have fun'],
// 👇 define actions directly on your model
add: action((state, payload) => {
// simply mutate state to update, and we convert to immutable updates
state.items.push(payload)
import { createStore } from 'easy-peasy';
import loadingMiddleware from './loadingMiddleware';
import notifier from './notifier';
import indicators from './indicators';
import session from './session';
import tables from './tables';
import dashboard from './dashboard';
import date from './date';
import calendar from './calendar';
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'
const store = createStore(rootReducer)
render(
import React from 'react';
import ReactDOM from 'react-dom';
import { StoreProvider, createStore } from 'easy-peasy';
import model from './model';
import App from './App';
const store = createStore(model);
function Root() {
import { action } from "easy-peasy";
let id = 0;
export default {
todos: {},
// actions
add: action((state, text) => {
const todo = {
id: id++,
function Todos() {
const todos = useStore(state => state.todos);
const { toggle, del } = useActions(actions => ({
toggle: actions.toggle,
del: actions.delete,
}));
const todosList = Object.values(todos);
return todosList.map(todo => (
<Todo key={todo.id} todo={todo} toggle={toggle} del={del} />
));
@cevr
cevr / App.js
Last active June 8, 2019 22:17
import React, { useEffect, useState } from 'react';
import { useActions, useStore } from 'easy-peasy';
export default function App() {
return (
<div>
<h1 style={{ margin: 0 }}>Todo</h1>
<Todos />
<AddTodo />
</div>