<|start_filename|>React/parket/src/Components/addItem.js<|end_filename|>
import React from "react";
import { AddPackingItem } from "packlist-components";
import { connect } from "parket/react";

export default connect(({ store }) => (
  <AddPackingItem
    addItem={store.addItem}
    clear={store.clearItems}
    setNewItemText={event => store.setNewItemText(event.target.value)}
    value={store.newItem}
  />
));


<|start_filename|>ReactNative/Redux/Components/addItems.js<|end_filename|>
import React, { Component } from 'react'
import { AddPackingItem } from 'packlist-components/native'
import { ItemActionCreators } from '../Redux/Actions/items'
import {connect} from 'react-redux'

class AddItems extends Component {
  render () {
    return (
      <AddPackingItem
        addItem={() => this.props.dispatch(ItemActionCreators.addItem())}
        setNewItemText={(t) => this.props.dispatch(ItemActionCreators.setNewItemName(t))}
        value={this.props.newItemName}
        clear={() => this.props.dispatch(ItemActionCreators.clear())}
      />
    )
  }
}

const mapStateToProps = (state) => {
  return {
    newItemName: state.items.newItemName
  }
}

export default connect(mapStateToProps)(AddItems)


<|start_filename|>React/react-contextual/src/store.js<|end_filename|>
import { createStore } from "react-contextual";

export const store = createStore({
  newItem: "",
  allItems: ["Hot Dog", "Pizza", "Donuts"],
  setNewItemText: newItem => ({ newItem }),
  addItem: () => state => ({
    newItem: "",
    allItems: state.allItems.concat([state.newItem])
  }),
  clearItems: () => state => ({
    allItems: []
  })
});


<|start_filename|>React/immer/src/Components/addItem.js<|end_filename|>
export { AddPackingItem as default } from 'packlist-components';


<|start_filename|>React/mobx-state-tree/src/Components/addItem.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";
import { observer, inject } from "mobx-react";

@inject("listStore")
@observer
export default class AddItems extends Component {
  render() {
    return (
      <AddPackingItem
        addItem={this.props.listStore.addItem}
        setNewItemText={this.props.listStore.setNewItemName}
        value={this.props.listStore.newItemName}
        clear={this.props.listStore.clear}
      />
    );
  }
}


<|start_filename|>React/react-recomponent/src/containers/app.js<|end_filename|>
import React from 'react'
import { TodoProvider, TodoContainer } from '../context/todo'
import { Provider, Base, Button, Card, Heading, Icon } from 'usthing-ui'

import ListTodos from '../components/list-todos'

const App = () => (
    <TodoProvider>
        <Provider>
            <TodoContainer>
                {({ todos, handleAddTodo, handleRemoveTodo, handleUpdateTodo, handleSetEditing, editing }) => (
                    <Base display="flex" minHeight="100vh" alignItems="center" justifyContent="center">
                        <Card padding={10} minWidth={400}>
                            <Heading>Todo List</Heading>
                            <ListTodos
                                todos={todos}
                                removeTodo={handleRemoveTodo}
                                updateTodo={handleUpdateTodo}
                                setEditing={handleSetEditing}
                                editing={editing}
                            />
                            <Button onClick={() => handleAddTodo('New Todo')} plain>
                                <Icon name="plus" />
                            </Button>
                        </Card>
                    </Base>
                )}
            </TodoContainer>
        </Provider>
    </TodoProvider>
)

export default App


<|start_filename|>ReactNative/ReduxX/Components/listItems.js<|end_filename|>
import React, { Component } from 'react'
import { SimpleList } from 'packlist-components/native'

export default class ListItems extends Component {
  render () {
    return <SimpleList value={this.props.allItems} />
  }
}


<|start_filename|>ReactNative/react-recontext/src/components/AddTodo.js<|end_filename|>
import React from "react";
import {
  View,
  TouchableOpacity,
  Text,
  TextInput,
  StyleSheet
} from "react-native";
import { dispatch } from "../recontext/store";

class AddTodo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    };
  }

  handlePress = () => {
    const { text } = this.state;
    if (!text) return;
    dispatch("ADD_TODO", { newTodoContent: text });
    this.setState({
      text: ""
    });
  };

  render() {
    const { text } = this.state;

    return (
      <View style={styles.root}>
        <TextInput
          placeholder="Add thing to do ..."
          value={text}
          onChangeText={text => this.setState({ text })}
          style={styles.input}
        />
        <TouchableOpacity style={styles.button} onPress={this.handlePress}>
          <Text style={styles.buttonText}>ADD</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    bottom: 0,
    flexDirection: "row"
  },
  input: {
    flex: 1,
    fontSize: 24,
    paddingLeft: 15,
    color: "#212121"
  },
  button: {
    padding: 10,
    marginRight: 10,
    borderWidth: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  buttonText: {
    fontSize: 16,
    fontWeight: "bold"
  }
});

export default AddTodo;


<|start_filename|>ReactNative/Freactal/State/listWrap.js<|end_filename|>
import { provideState, update } from 'freactal'
export const withState = provideState({
  initialState: () => ({
    allItems: ['nacho', 'burrito', 'hotdog'],
    newItemName: ''
  }),
  effects: {
    addItem: update(state => ({
      allItems: [...state.allItems, state.newItemName],
      newItemName: ''
    })),
    setNewItemName: update((state, value) => ({ newItemName: value })),
    clear: update({allItems: []})
  }
})


<|start_filename|>React/react-contextual/src/Components/listItems.js<|end_filename|>
import React from "react";
import { SimpleList } from "packlist-components";

export default ({ allItems }) => <SimpleList value={allItems} />;


<|start_filename|>React/apollo-link-state/src/Queries.js<|end_filename|>
import { gql } from "apollo-boost";

export const items = gql`
  {
    items @client
  }
`;

export const newItem = gql`
  {
    newItem @client
  }
`;


<|start_filename|>ReactNative/MobXStateTree/App.js<|end_filename|>
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'

import { Provider } from "mobx-react"
import ListItems from './Components/listItems'
import AddItems from './Components/addItems'

import { ListStoreModel } from './MST/listStore'

// first param of create is initial state (Optionals take care)
// second param is dependency injection(s)
const listStore = ListStoreModel.create()

export default class App extends Component {
  render () {
    // Provider means anything can grab via @inject()
    // Will possibly leave in future versions of MST due to context
    return (
      <Provider
        listStore={listStore}
      >
        <ScrollView
          contentContainerStyle={styles.container}
          keyboardShouldPersistTaps='always'
        >
          <Text style={styles.welcome}>
            Welcome to MobX-State-Tree
          </Text>
          <AddItems />
          <ListItems />
        </ScrollView>
      </Provider>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})


<|start_filename|>React/react-recontext/src/components/TodoList.js<|end_filename|>
import React from "react";
import Todo from "./Todo";
import { connect, dispatch } from "../recontext/store";

const TodoList = ({ todos }) => (
  <ul style={{ listStyle: "none" }}>
    {todos.map(todo => (
      <Todo
        key={todo.id}
        todo={todo}
        onClick={() => dispatch("TOGGLE_ITEM", { todoId: todo.id })}
      />
    ))}
  </ul>
);

const mapStateToProps = state => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);


<|start_filename|>ReactNative/react-recontext/src/components/Todo.js<|end_filename|>
import React from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import { dispatch } from "../recontext/store";

class Todo extends React.PureComponent {
  handlePress = () => {
    const { item } = this.props;
    dispatch("TOGGLE_ITEM", { todoId: item.id });
  };

  render() {
    const { item } = this.props;
    return (
      <TouchableOpacity onPress={this.handlePress}>
        <View style={styles.root}>
          <Text style={[styles.text, item.completed && styles.textCompleted]}>
            {item.content}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    flexDirection: "row",
    alignItems: "center",
    padding: 15
  },
  text: {
    marginLeft: 15,
    fontSize: 24
  },
  textCompleted: {
    color: "#212121",
    fontStyle: "italic",
    textDecorationLine: "line-through"
  }
});

export default Todo;


<|start_filename|>React/remx/src/remx/store.js<|end_filename|>
import * as remx from 'remx';
import * as _ from 'lodash';

export class Store {
  constructor() {
    const state = remx.state({
      myItems: ['nacho', 'burrito', 'hotdog']
    });
    
    const setters = remx.setters({
      setNewItemText(txt) {
        state.newItemText = txt;
      },
    
      addItem() {
        state.myItems = state.myItems.concat(getters.getNewItemText());
        state.newItemText = '';
      },
    
      clear() {
        state.myItems = [];
      }
    });
    
    const getters = remx.getters({
      getItems() {
        return state.myItems;
      },
    
      getNewItemText() {
        return state.newItemText || '';
      }
    });

    _.merge(this, setters, getters);
  }
}


<|start_filename|>React/controllerim/src/controllers.js<|end_filename|>
import { Controller } from "controllerim";

export class ItemsController extends Controller {
  // Initial State
  state = {
    newItem: "",
    allItems: ["Hot Dog", "Hamburguer", "Pizza"]
  };

  // Accesible state
  getNewItemText = () => this.state.newItem;
  getAllItems = () => this.state.allItems;

  // Actions
  setNewItemText = newVal => {
    this.state.newItem = newVal;
  };
  addItem = () => {
    const { newItem, allItems } = this.state;
    this.state.allItems = allItems.concat([newItem]);
    this.state.newItem = "";
  };
  clearItems = () => {
    this.state.allItems = [];
  };
}


<|start_filename|>React/apollo-link-state/src/Client.js<|end_filename|>
import ApolloClient, { gql } from "apollo-boost";

const defaults = {
  items: ["nacho", "burrito", "hotdog"],
  newItem: "",
};

const resolvers = {
  Mutation: {
    addItem: (_, _params, { cache }) => {
      const { items, newItem } = cache.readQuery({
        query: gql`
          {
            items @client
            newItem @client
          }
        `
      });
      const data = { items: items.concat([newItem]), newItem: "" };
      cache.writeData({ data });
      return null;
    },
    clearItems: (_, _params, { cache }) => {
      const data = { items: [] };
      cache.writeData({ data });
      return null;
    },
    updateNewItem: (_, { text }, { cache }) => {
      const data = { newItem: text }
      cache.writeData({ data });
      return null;
    },
  }
};

export const typeDefs = `
  type Query {
    items @client
    newItem @client
  }
`;

export const client = new ApolloClient({
  uri: "https://nx9zvp49q7.lp.gql.zone/graphql",
  clientState: {
    defaults,
    resolvers,
    typeDefs,
  }
});


<|start_filename|>React/appsync/src/Components/addItems.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";
import ListAllItemsQuery from "../Queries/ListAllItemsQuery";
import NewItemMutation from "../Queries/NewItemMutation";
import DeleteItemMutation from "../Queries/DeleteItemMutation";
import { graphql, compose } from "react-apollo";
const defaultState = { text: "" };

class AddItems extends Component {
  constructor(props) {
    super(props);
    this.state = defaultState;
  }

  handleAdd = () => {
    const { text } = this.state;
    this.setState(defaultState, () => {
      this.props.onAdd({
        id: new Date().getTime().toString(),
        itemName: text
      });
    });
  };

  deleteAll = () => {
    const { allItems } = this.props;
    // Delete em all
    if (allItems) {
      allItems.map(item => this.props.onDelete({ id: item.id }));
    }
  };

  render() {
    return (
      <AddPackingItem
        addItem={this.handleAdd}
        setNewItemText={e => this.setState({ text: e.target.value })}
        value={this.state.text}
        clear={this.deleteAll}
      />
    );
  }
}

// HOC Lane
export default compose(
  graphql(NewItemMutation, {
    props: props => ({
      // gives prop.onAdd to child component
      // must return __typename -> not 100% sure why
      onAdd: item =>
        props.mutate({
          variables: item,
          optimisticResponse: () => ({
            createListItem: { ...item, __typename: "Item" }
          })
        })
    }),
    options: {
      refetchQueries: [{ query: ListAllItemsQuery }]
    }
  }),
  graphql(ListAllItemsQuery, {
    options: {
      fetchPolicy: "cache-and-network"
    },
    props: props => ({
      allItems: props.data.listListItems && props.data.listListItems.items
    })
  }),
  graphql(DeleteItemMutation, {
    props: props => ({
      onDelete: item =>
        props.mutate({
          variables: { id: item.id },
          optimisticResponse: () => ({
            deleteListItem: { id: item.id, __typename: "Item" }
          })
        })
    }),
    options: {
      refetchQueries: [{ query: ListAllItemsQuery }]
    }
  })
)(AddItems);


<|start_filename|>test/readme.md.test.js<|end_filename|>
'use strict'
/* jshint expr: true */
const ROOT_PATH = '../'

const bluebird = require('bluebird')
const { getDirectories } = require('./utils')
const { readFile, existsSync } = require('fs')
const path = require('path')
const GITHUB_URL = 'https://github.com/GantMan/ReactStateMuseum'

describe('README.md Tests', function () {
  it('Each example has a README.md', function () {
    return bluebird.props({
      reactDirectories: getDirectories({ path: 'React' }),
      reactNativeDirectories: getDirectories({ path: 'ReactNative' })
    }).then(({
        reactDirectories,
        reactNativeDirectories
    }) => {
      const missingReadmes = []
      for (const reactDirectory of reactDirectories) {

        // const readmePath = `${__dirname}/${ROOT_PATH}React/${reactDirectory}/README.md`
        const readmePath = path.join(__dirname, ROOT_PATH, 'React', reactDirectory, 'README.md')
        if (!existsSync(readmePath)) {
          missingReadmes.push(readmePath)
        }
      }

      for (const reactNativeDirectory of reactNativeDirectories) {
        // const readmePath = `${__dirname}/${ROOT_PATH}ReactNative/${reactNativeDirectory}/README.md`
        const readmePath = path.join(__dirname, ROOT_PATH, 'ReactNative', reactNativeDirectory, 'README.md')

        if (!existsSync(readmePath)) {
          missingReadmes.push(readmePath)
        }
      }

      if (missingReadmes.length > 0) {
        const errorMessage = (
          'The following projects are missing README.md files:' +
          JSON.stringify(missingReadmes) +
          '.'
        )

        throw new Error(errorMessage)
      }
    })
  })

  it('Each folder has a link to it in the readme', function () {
    return bluebird.props({
      readme: getReadme(),
      reactDirectories: getDirectories({ path: 'React' }),
      reactNativeDirectories: getDirectories({ path: 'ReactNative' })
    }).then(({
        readme,
        reactDirectories,
        reactNativeDirectories
      }) => {
      const missingReactLinks = []
      for (const reactDirectory of reactDirectories) {
        const linkToDirectory = (
          `${GITHUB_URL}/tree/master/React/${reactDirectory}`
        )

        if (!readme.includes(linkToDirectory)) {
          missingReactLinks.push(linkToDirectory)
        }
      }

      const missingReactNativeLinks = []
      for (const reactNativeDirectory of reactNativeDirectories) {
        const linkToDirectory = (
          `${GITHUB_URL}/tree/master/` +
          `ReactNative/${reactNativeDirectory}`
        )

        if (!readme.includes(linkToDirectory)) {
          missingReactNativeLinks.push(linkToDirectory)
        }
      }

      if (
        (missingReactLinks.length > 0) ||
        (missingReactNativeLinks.length > 0)
      ) {
        const errorMessage = (
          'Missing React links:' +
          JSON.stringify(missingReactLinks) +
          ', missing React Native links:' +
          JSON.stringify(missingReactNativeLinks) +
          '.'
        )

        throw new Error(errorMessage)
      }
    })
  })
})

// helper functions
const getReadme = () => {
  const readmePath = `${__dirname}/${ROOT_PATH}/README.md`
    return new Promise((resolve, reject) => {
      readFile(readmePath, (err, data) => {
          if (err) {
              return reject(err)
            }
          resolve(data)
        })
    }).then(readmeAsBuffer => {
      const readme = readmeAsBuffer.toString('ascii')
        return readme
    })
};


<|start_filename|>React/context/src/Context/packingContext.js<|end_filename|>
import React from "react";

export const PackingDefaults = {
  allItems: ["nacho", "burrito", "hotdog"],
  newItemName: ""
};

export const PackingContext = React.createContext({
  // Default value of the context - Only if component is outside of provider
  // Usually replaced right away on setting value at top level for provider
  ...PackingDefaults
});


<|start_filename|>React/react-observable-store/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React, { Component } from "react";
import { render } from "react-dom";
import { SimpleList, AddPackingItem } from "packlist-components";
import withStore, { addItem, updateInput, clearAll } from "./store";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

export default class App extends Component {
  render() {
    const { allItems, newItemName } = this.props;
    return (
      <div style={styles}>
        <h2>Welcome to ReactObservableStore</h2>

        <AddPackingItem
          addItem={addItem}
          setNewItemText={updateInput}
          value={newItemName}
          clear={clearAll}
        />

        <SimpleList value={allItems} />
      </div>
    );
  }
}

const AppWithStore = withStore('museum', App);
const renderApp = () => render(<AppWithStore />, document.getElementById("root"));

renderApp();


<|start_filename|>ReactNative/MobX/Components/addItems.js<|end_filename|>
import React, { Component } from 'react'
import { AddPackingItem } from 'packlist-components/native'
import ListStore from '../Mobx/listStore'
import {observer} from 'mobx-react/native'

@observer
export default class AddItems extends Component {
  render () {
    return (
      <AddPackingItem
        addItem={ListStore.addItem}
        setNewItemText={ListStore.setNewItemName}
        value={ListStore.newItemName}
        clear={ListStore.clear}
      />
    )
  }
}


<|start_filename|>React/react-observable-store/src/store.js<|end_filename|>
import Store from "react-observable-store";

const STORE_DEBUG = true;

const storeDefaults = {
  museum: {
    allItems: ["nachos", "burritos", "hot dog"],
    newItemName: ""
  }
}

Store.init(storeDefaults, STORE_DEBUG);

export const addItem = () => {
  const { allItems, newItemName } = Store.get('museum') // Read anywhere
  allItems.push(newItemName)

  // Update state
  Store.update('museum', {
    allItems: allItems,
    newItemName: ""
  });
}

export const updateInput = e => {
  Store.set('museum.newItemName', e.target.value);
}

export const clearAll = () => {
  Store.set('museum.allItems', []);
}

export default Store.withStore


<|start_filename|>ReactNative/AppSync/App.js<|end_filename|>
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'
import ListItems from './Components/listItems'
import AddItems from './Components/addItems'
// The AppSync Import Bus
import AWSAppSyncClient from 'aws-appsync'
import { Rehydrated } from 'aws-appsync-react'
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link'
import { ApolloProvider } from 'react-apollo'
import AppSync from './AppSync.js'

const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    type: AUTH_TYPE.API_KEY,
    apiKey: AppSync.apiKey
  }
})

class App extends Component {
  state = { allItems: [] }
  render () {
    return (
      <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps='always'
      >
        <Text style={styles.welcome}>
          Welcome to Amazon AppSync
        </Text>
        <AddItems />
        <ListItems />
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <App />
    </Rehydrated>
  </ApolloProvider>
)

export default WithProvider


<|start_filename|>ReactNative/Redux/Components/listItems.js<|end_filename|>
import React, { Component } from 'react'
import { SimpleList } from 'packlist-components/native'
import {connect} from 'react-redux'

class ListItems extends Component {
  render () {
    return (
      <SimpleList
        value={this.props.allItems}
      />
    )
  }
}

const mapStateToProps = (state) => {
  return {
    allItems: state.items.myItems
  }
}

export default connect(mapStateToProps)(ListItems)


<|start_filename|>React/appsync/src/Queries/NewItemMutation.js<|end_filename|>
import gql from "graphql-tag";

export default gql`
  mutation NewItem($id: ID!, $itemName: String!) {
    createListItem(input: { id: $id, name: $itemName }) {
      id
    }
  }
`;


<|start_filename|>React/react-automata/src/Statecharts/index.js<|end_filename|>
const isEmpty = ({ value }) => value === "";
const isNotEmpty = state => !isEmpty(state);
const isTrue = () => true;

export default {
  initial: "idle",
  states: {
    idle: {
      on: {
        CLEAR: {
          idle: {
            actions: ["clear"],
            cond: isTrue
          }
        },
        SET_NEW_ITEM_NAME: {
          loaded: {
            actions: ["setNewItemName"]
          }
        }
      }
    },
    loaded: {
      on: {
        ADD_ITEM: {
          idle: {
            actions: ["addItem"]
          }
        },
        CLEAR: {
          loaded: {
            actions: ["clear"],
            cond: isTrue
          },
        },
        SET_NEW_ITEM_NAME: {
          loaded: {
            actions: ["setNewItemName"],
            cond: isNotEmpty
          },
          idle: {
            actions: ["setNewItemName"],
            cond: isEmpty
          }
        }
      }
    }
  }
};


<|start_filename|>ReactNative/MobX/Components/listItems.js<|end_filename|>
import React, { Component } from 'react'
import { SimpleList } from 'packlist-components/native'

import ListStore from '../Mobx/listStore'
import {observer} from 'mobx-react/native'

@observer
export default class ListItems extends Component {
  render () {
    return (
      <SimpleList
        value={[...ListStore.allItems]}
      />
    )
  }
}


<|start_filename|>ReactNative/ReactAutomata/__tests__/setup.js<|end_filename|>
jest.mock('UIManager', () => ({ configureNextLayoutAnimation: () => true }))


<|start_filename|>React/apollo-link-state/config-overrides.js<|end_filename|>
const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, _env) {
  return injectBabelPlugin('transform-decorators-legacy', config)
}


<|start_filename|>React/mobx/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";

import ListStore from "../Mobx/listStore";
import { observer } from "mobx-react";

@observer
export default class ListItems extends Component {
  render() {
    return <SimpleList value={[...ListStore.allItems]} />;
  }
}


<|start_filename|>React/reim/src/components/todo-item.js<|end_filename|>
import React from 'react'
import {List, Input, Button, Icon, Base} from 'usthing-ui'
import {State} from 'react-reim'

const TodoItem = ({index, todo, updateTodo, deleteTodo}) => (
  <State initial={{editting: false}}>
    {
      ({editting}, {set}) => (
        <List.Item display="flex" alignItems="center">
          <Base flex="1">
          {
            editting ?
              <Input value={todo} onChange={e => updateTodo(index, e.target.value)}/> :
              todo
          }
          </Base>
          <Button onClick={() => set({editting: !editting})} circle plain><Icon name={editting ? 'eye' : 'edit-2'}/></Button>
          <Button onClick={() => deleteTodo(index)} circle plain><Icon color="red" name="minus"/></Button>
        </List.Item>
      )
    }
  </State>
)

export default TodoItem


<|start_filename|>React/react-automata/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React, { Component } from "react";
import { render } from "react-dom";
import { State, withStateMachine } from "react-automata";
import statechart from "./Statecharts/index";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItem";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allItems: ["nachos", "burritos", "hot dog"],
      newItemName: ""
    };
  }

  addItem = () => {
    this.setState(state => ({
      allItems: [...state.allItems, state.newItemName],
      newItemName: ""
    }));
  };

  setNewItemName = value => {
    this.setState({ newItemName: this.props.value });
  };

  clear = () => {
    this.setState({ allItems: [] });
  };

  handAddItem = () => this.props.transition("ADD_ITEM");
  handleSetNewItemName = event => {
    this.props.transition("SET_NEW_ITEM_NAME", { value: event.target.value });
  };
  handleClear = () => this.props.transition("CLEAR", true);

  render() {
    return (
      <div style={styles}>
        <h2>Welcome to setState + react-automata</h2>
        <State is="idle">Current State 'idle'</State>
        <State is="loaded">Current State 'loaded'</State>
        <AddItems
          addItem={this.handAddItem}
          setNewItemText={this.handleSetNewItemName}
          value={this.state.newItemName}
          clear={this.handleClear}
        />
        <ListItems allItems={this.state.allItems} />
      </div>
    );
  }
}

const WrappedWithChart = withStateMachine(statechart)(App);
export default WrappedWithChart;

render(<WrappedWithChart />, document.getElementById("root"));


<|start_filename|>ReactNative/ApolloLinkState/query.js<|end_filename|>
import gql from "graphql-tag";

export const ALL_ITEMS = gql`
  query {
    allItems @client
  }
`;

export const typeDefs = `
  type Query {
    allItems @client
}`;

<|start_filename|>React/controllerim/src/Components/itemsProvider.js<|end_filename|>
import { Component } from "react";
import { observer } from "controllerim";
import { ItemsController } from "../controllers";

class ItemsProvider extends Component {
  componentWillMount() {
    this.controller = new ItemsController(this);
  }

  render() {
    const { controller } = this;

    return this.props.children({
      ...controller,
      newItem: controller.getNewItemText(),
      allItems: controller.getAllItems(),
      setNewItemText: newVal => controller.setNewItemText(newVal),
      addItem: () => controller.addItem(),
      clearItems: () => controller.clearItems()
    });
  }
}

export default observer(ItemsProvider);


<|start_filename|>React/reim/src/containers/app.js<|end_filename|>
import React from 'react'
import {connect} from 'react-reim'
import {Provider, Base, Button, Card, Heading, Icon} from 'usthing-ui'

import todo from '../stores/todo'
import ListTodos from '../components/list-todos'

const App = ({todos, addTodo, updateTodo, deleteTodo}) => (
  <Provider>
    <Base
      display="flex"
      minHeight="100vh"
      alignItems="center"
      justifyContent="center"
    >
      <Card padding={10} minWidth={400}>
        <Heading>Todo List</Heading>
        <ListTodos
          todos={todos}
          updateTodo={updateTodo}
          deleteTodo={deleteTodo}
        />
        <Button onClick={() => addTodo('New Todo')} plain><Icon name="plus"/></Button>
      </Card>
    </Base>
  </Provider>
)

export default connect(
  todo,
  s => s,
  ({set, snapshot}) => ({
    addTodo(todo = '') {
      set(({todos}) => {
        todos.push(todo)
      })
    },
    updateTodo(index, todo) {
      set(({todos}) => {
        todos[index] = todo
      })
    },
    deleteTodo(index) {
      set(({todos}) => {
        todos.splice(index, 1)
      })
    }
  })
)(App)


<|start_filename|>ReactNative/Context/App.js<|end_filename|>
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'

import ListItems from './Components/listItems'
import AddItems from './Components/addItems'

import { PackingContext, PackingDefaults } from './Context/packingContext'

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      ...PackingDefaults,
      addItem: this.addItem,
      setNewItemName: this.setNewItemName,
      clear: this.clear
    }
  }

  addItem = () => {
    this.setState((state) => ({
      allItems: [...state.allItems, state.newItemName],
      newItemName: ''
    }))
  }

  setNewItemName = (value) => {
    this.setState({newItemName: value})
  }

  clear = () => {
    this.setState({allItems: []})
  }

  render () {
    return (
      <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps='always'
      >
        <Text style={styles.welcome}>
          Welcome to React 16 Context
        </Text>
        <PackingContext.Provider value={this.state}>
          <AddItems />
          <ListItems />
        </PackingContext.Provider>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})


<|start_filename|>ReactNative/AppSync/Components/addItems.js<|end_filename|>
import React, { Component } from 'react'
import { AddPackingItem } from 'packlist-components/native'
import ListAllItemsQuery from '../Queries/ListAllItemsQuery'
import NewItemMutation from '../Queries/NewItemMutation'
import DeleteItemMutation from '../Queries/DeleteItemMutation'
import { graphql, compose } from 'react-apollo'
const defaultState = { text: '' }

class AddItems extends Component {
  constructor (props) {
    super(props)
    this.state = defaultState
  }

  handleAdd = () => {
    const { text } = this.state
    this.setState(defaultState, () => {
      this.props.onAdd({
        id: (new Date()).getTime().toString(),
        itemName: text
      })
    })
  }

  deleteAll = () => {
    const { allItems } = this.props
    // Delete em all
    if (allItems) {
      allItems.map(item => this.props.onDelete({id: item.id}))
    }
  }

  render () {
    return (
      <AddPackingItem
        addItem={this.handleAdd}
        setNewItemText={(text) => this.setState({text})}
        value={this.state.text}
        clear={this.deleteAll}
      />
    )
  }
}

// HOC Lane
export default compose(
  graphql(NewItemMutation, {
    props: (props) => ({
      // gives prop.onAdd to child component
      // must return __typename -> not 100% sure why
      onAdd: item => props.mutate({
        variables: item,
        optimisticResponse: () => ({ createListItem: {...item, __typename: 'Item'} })
      })
    }),
    options: {
      refetchQueries: [{ query: ListAllItemsQuery }]
    }
  }),
  graphql(ListAllItemsQuery, {
    options: {
      fetchPolicy: 'cache-and-network'
    },
    props: (props) => ({
      allItems: props.data.listListItems && props.data.listListItems.items
    })
  }),
  graphql(DeleteItemMutation, {
    props: (props) => ({
      onDelete: item => props.mutate({
        variables: {id: item.id},
        optimisticResponse: () => ({ deleteListItem: {id: item.id, __typename: 'Item'} })
      })
    }),
    options: {
      refetchQueries: [{ query: ListAllItemsQuery }]
    }
  })
)(AddItems)


<|start_filename|>React/react-contextual/src/Components/addItem.js<|end_filename|>
import React from "react";
import { AddPackingItem } from "packlist-components";

export default ({ addItem, clearItems, newItem, setNewItemText }) => (
  <AddPackingItem
    addItem={addItem}
    setNewItemText={event => setNewItemText(event.target.value)}
    value={newItem}
    clear={clearItems}
  />
);


<|start_filename|>ReactNative/simple-remx/Components/addItems.js<|end_filename|>
import { AddPackingItem } from 'packlist-components/native';
import { connect } from 'remx';

import { store } from '../remx/store';

function mapStateToProps(ownProps) {
  return {
    value: store.getNewItemText(),

    setNewItemText: (value) => store.setNewItemText(value),
    addItem: store.addItem,
    clear: store.clear
  };
}

export default connect(mapStateToProps)(AddPackingItem);


<|start_filename|>React/apollo-link-state/src/Mutations.js<|end_filename|>
import { gql } from "apollo-boost";

export const addItem = gql`
  mutation addItem {
    addItem @client
  }
`;

export const clearItems = gql`
  mutation clearItems {
    clearItems @client
  }
`;

export const updateNewItem = gql`
  mutation updateNewItem($text: String) {
    updateNewItem(text: $text) @client
  }
`;


<|start_filename|>React/react-copy-write/src/store.js<|end_filename|>
import createState from "react-copy-write";

export const { Provider, Consumer, createMutator } = createState({
  newItem: "",
  allItems: ["Hot dog", "Hamburguer", "Pizza"]
});

export const setNewItemText = createMutator((draft, params) => {
  draft.newItem = params;
});

export const addItem = createMutator(draft => {
  draft.allItems = draft.allItems.concat([draft.newItem]);
  draft.newItem = "";
});

export const clearItems = createMutator(draft => {
  draft.allItems = [];
});


<|start_filename|>React/redux-and-context/src/Components/listItems.js<|end_filename|>
import React from 'react';
import { SimpleList } from "packlist-components";
import ContainerContext from '../Context/ContainerContext'

const ListItems = () => (
  <ContainerContext.Consumer>
    {({ myItems }) => (
      <SimpleList value={myItems} />
    )}
  </ContainerContext.Consumer>
)

export default ListItems;

<|start_filename|>React/react-simplified/src/Components/addItem.js<|end_filename|>
import { AddPackingItem } from "packlist-components";

export default AddPackingItem;


<|start_filename|>React/unstated/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import ListContainer from "../Unstated/listContainer";
import { Subscribe } from "unstated";
import { SimpleList } from "packlist-components";

export default class ListItems extends Component {
  render() {
    return (
      <Subscribe to={[ListContainer]}>
        {list => <SimpleList value={list.state.allItems} />}
      </Subscribe>
    );
  }
}


<|start_filename|>React/rematch/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React from "react";
import { render } from "react-dom";
import { Provider, connect } from "react-redux";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItem";
import store from "./store";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <h2>Welcome to Rematch</h2>
    <AddItems />
    <ListItems />
  </div>
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);


<|start_filename|>React/parket/src/Components/listItems.js<|end_filename|>
import React from "react";
import { SimpleList } from "packlist-components";
import { connect } from "parket/react";

export default connect(({ store }) => <SimpleList value={store.allItems} />);


<|start_filename|>ReactNative/Rematch/models.js<|end_filename|>
export const items = {
  state: {
    newItem: "",
    allItems: ["Hot Dog", "Pizza", "Donuts"]
  },
  reducers: {
    setNewItemText: (state, payload) => ({
      ...state,
      newItem: payload
    }),
    addItem: state => ({
      ...state,
      allItems: state.allItems.concat([state.newItem]),
      newItem: ""
    }),
    clearItems: state => ({
      ...state,
      allItems: []
    })
  }
};


<|start_filename|>React/parket/src/models.js<|end_filename|>
import model from "parket";

const ItemsModel = model("ItemsModel", {
  initial: () => ({
    newItem: "",
    allItems: []
  }),
  actions: state => ({
    setNewItemText(newValue) {
      state.newItem = newValue; // reaaaaaaactive!
    },
    addItem() {
      state.allItems = state.allItems.concat([state.newItem]);
      state.newItem = "";
    },
    clearItems() {
      state.allItems = [];
    }
  })
  // computed properties
  // views: state => ({})
});

export const store = ItemsModel({
  allItems: ["Pizza", "Donuts", "Hot Dog"]
});


<|start_filename|>ReactNative/MobX/Mobx/listStore.js<|end_filename|>
import {observable} from 'mobx'

class ObservableListStore {
  @observable allItems = ['nacho', 'burrito', 'hotdog']
  @observable newItemName = ''

  addItem = () => {
    this.allItems.push(this.newItemName)
    this.newItemName = ''
  }

  clear = () => {
    this.allItems = []
  }

  setNewItemName = (value) => {
    this.newItemName = value
  }
}

const observableListStore = new ObservableListStore()
export default observableListStore


<|start_filename|>React/appsync/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React, { Component } from "react";
import { render } from "react-dom";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItems";
// The AppSync Import Bus
import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from "aws-appsync-react";
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";
import { ApolloProvider } from "react-apollo";
import AppSync from "./AppSync.js";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    type: AUTH_TYPE.API_KEY,
    apiKey: AppSync.apiKey
  }
});

export default class App extends Component {
  state = { allItems: [] };

  render() {
    return (
      <div style={styles}>
        <h2>Welcome to GraphQL + Amazon AppSync</h2>
        <em>
          Please be clean in your list, as this is shared across all examples
        </em>
        <AddItems />
        <ListItems />
      </div>
    );
  }
}

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <App />
    </Rehydrated>
  </ApolloProvider>
);

render(<WithProvider />, document.getElementById("root"));


<|start_filename|>React/reim/src/components/list-todos.js<|end_filename|>
import React from 'react'
import {List} from 'usthing-ui'

import TodoItem from './todo-item'

const ListTodos = ({todos, updateTodo, deleteTodo}) => (
  <List>
    {
      todos.map((todo, index) => (
        <TodoItem
          key={index}
          index={index}
          todo={todo}
          updateTodo={updateTodo}
          deleteTodo={deleteTodo}
        />
      ))
    }
  </List>
)

export default ListTodos


<|start_filename|>React/appsync/src/Queries/DeleteItemMutation.js<|end_filename|>
import gql from "graphql-tag";

export default gql`
  mutation deleteListItem($id: ID!) {
    deleteListItem(input: { id: $id }) {
      id
    }
  }
`;


<|start_filename|>ReactNative/ApolloLinkState/App.js<|end_filename|>
import React, { Component } from 'react'
import { StyleSheet, Text, ScrollView } from 'react-native'
import { ApolloProvider, Query } from 'react-apollo';
import { client } from './client';
import { ALL_ITEMS } from './query';
import ListItems from './Components/listItems'
import AddItems from './Components/addItems'

export default class App extends Component {
  state = {
    newItemName: null
  }

  setNewItemName = (value) => {
    this.setState({newItemName: value})
  }

  addItem = (store, items) => {
    const newItem = this.state.newItemName;
    this.setState({ newItemName: '' }, () =>
      store.writeData({
        data: { allItems: items.concat(newItem) }
    }))
  }

  clear = (store) => {
    store.writeData({ data: { allItems: [] }})
  }

  render () {
    return (
      <ApolloProvider client={client}>
        <Query query={ALL_ITEMS}>
        {
          ({data, client: store}) => (
            <ScrollView
              contentContainerStyle={styles.container}
              keyboardShouldPersistTaps='always'
            >
              <Text style={styles.welcome}>
                Welcome to apollo-link-state
              </Text>
              <AddItems
                addItem={() => this.addItem(store, data.allItems)}
                setNewItemName={this.setNewItemName}
                newItemName={this.state.newItemName}
                clear={() => this.clear(store)}
              />
              <ListItems allItems={data.allItems} />
            </ScrollView>
          )
        }
        </Query>
      </ApolloProvider>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})


<|start_filename|>React/remx/src/Components/addItem.js<|end_filename|>
import { AddPackingItem } from "packlist-components";
import { connect } from "remx";

function mapStateToProps(ownProps) {
  return {
    value: ownProps.store.getNewItemText(),
    
    setNewItemText: (e) => ownProps.store.setNewItemText(e.target.value),
    addItem: ownProps.store.addItem,
    clear: ownProps.store.clear
  };
}

export default connect(mapStateToProps)(AddPackingItem);


<|start_filename|>React/react-simplified/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React from "react";
import { Component } from "react-simplified";
import { render } from "react-dom";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItem";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class App extends Component {
  allItems = ["nachos", "burritos", "hot dog"];
  newItemName = "";

  addItem() {
    this.allItems.push(this.newItemName);
    this.newItemName = "";
  }

  setNewItemName(event) {
    this.newItemName = event.target.value;
  }

  clear() {
    this.allItems = [];
  }

  render() {
    return (
      <div style={styles}>
        <h2>Welcome to react-simplified</h2>
        <AddItems
          addItem={this.addItem}
          setNewItemText={this.setNewItemName}
          value={this.newItemName}
          clear={this.clear}
        />
        <ListItems allItems={this.allItems} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));


<|start_filename|>ReactNative/Unstated/Components/listItems.js<|end_filename|>
import React, { Component } from "react"
import ListContainer from "../Unstated/listContainer"
import { Subscribe } from "unstated"
import { SimpleList } from 'packlist-components/native'

export default class ListItems extends Component {
  render() {
    return (
      <Subscribe to={[ListContainer]}>
        {list => <SimpleList value={list.state.allItems} />}
      </Subscribe>
    );
  }
}


<|start_filename|>ReactNative/Freactal/Components/listItems.js<|end_filename|>
import React from 'react'
import { SimpleList } from 'packlist-components/native'
import { injectState } from 'freactal'

export const ListItems = ({ state }) => (
  <SimpleList
    value={state.allItems}
  />
)

export default injectState(ListItems)


<|start_filename|>React/pure-store/src/Components/ListItems.js<|end_filename|>
import React from 'react';
import { SimpleList } from "packlist-components";
import { store } from "../index";

const ListItems = () => (
  <SimpleList value={store.state.allItems} />
);

export default ListItems;


<|start_filename|>React/rematch/src/Components/addItem.js<|end_filename|>
import { AddPackingItem } from "packlist-components";
import { connect } from "react-redux";

const mapState = models => ({
  value: models.items.newItem
})

const mapDispatch = models => ({
  addItem: models.items.addItem,
  setNewItemText: (event) => models.items.setNewItemText(event.target.value),
  clear: models.items.clearItems
})

export default connect(mapState, mapDispatch)(AddPackingItem)


<|start_filename|>React/mobx-state-tree/src/MST/listStore.js<|end_filename|>
import { types } from "mobx-state-tree";

const defaultItemList = ["nacho", "burrito", "hotdog"];
const { model, optional, array, reference, string } = types;

export const ListStoreModel = model({
  allItems: optional(array(string), defaultItemList),
  newItemName: ""
}).actions(self => ({
  addItem() {
    self.allItems.push(self.newItemName);
    self.newItemName = "";
  },
  setNewItemName(e) {
    self.newItemName = e.target.value;
  },
  clear() {
    self.allItems = [];
  }
}));


<|start_filename|>React/redux-and-context/src/Components/Container.js<|end_filename|>
/**
 * This is an example of a container you may hook up to the global store. It can (and probably will) also have its own local state.
 * Global state goes in Redux and is passed down to Containers. Containers then take global state + their own state and pass it all down to child components via Context.
 */

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ItemActionCreators } from "../Redux/Actions/items";
import ContainerContext from '../Context/ContainerContext'; 
import ListItems from "./listItems";
import AddItems from "./addItem";

 class Container extends React.Component {
  constructor(props) {
    super(props);
    
    const value = props.myItems;

    this.state = {
      myItems: value
    }
  }

  componentDidUpdate(prevProps) {
    if ( prevProps.myItems !== this.props.myItems ) {
      this.setState({
        myItems: this.props.myItems
      })
    }
  }

  render() {
    return (
      <ContainerContext.Provider value={{...this.state}}>
        <AddItems />
        <ListItems />
      </ContainerContext.Provider>
    )
  }
 }

const mapStateToProps = state => {
  const { myItems } = state.items;
  
  return {
    myItems,
  }
}

const mapDispatchToProps = dispatch => {
  const { clear } = ItemActionCreators;

  return bindActionCreators(
    {
      clear
    }, 
    dispatch
  )
}

 export default connect(mapStateToProps, mapDispatchToProps)(Container);


<|start_filename|>ReactNative/Freactal/App.js<|end_filename|>
import React from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'

import ListItems from './Components/listItems'
import AddItems from './Components/addItems'
import { withState } from './State/listWrap'

export const App = () => {
  return (
    <ScrollView
      contentContainerStyle={styles.container}
      keyboardShouldPersistTaps='always'
    >
      <Text style={styles.welcome}>
        Welcome to Freactal
      </Text>
      <AddItems />
      <ListItems />
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})

export default withState(App)


<|start_filename|>ReactNative/pure-store/Components/AddItem.js<|end_filename|>
import React, { Component } from 'react';
import { AddPackingItem } from 'packlist-components/native'
import { store } from "../App";

class AddItem extends Component {
  addItem = () => {
    store.update(state => {
      state.allItems.push(state.newItemName)
      state.newItemName = ""
    });
  };

  setName = n => store.update({ newItemName: n })
  clear   = ()=> store.update({ allItems: [] });
  
  render() {
    return (
      <AddPackingItem
        addItem={this.addItem}
        setNewItemText={this.setName}
        value={store.state.newItemName}
        clear={this.clear}
      />
    );
  }
}

export default AddItem;


<|start_filename|>React/react-copy-write/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";
import { Consumer } from "../store";

export default class ListItems extends Component {
  render() {
    return (
      <Consumer selector={state => state.allItems}>
        {allItems => <SimpleList value={allItems} />}
      </Consumer>
    );
  }
}


<|start_filename|>React/redux/src/Redux/Actions/items.js<|end_filename|>
export const ItemsActions = {
  ADD_ITEM: "ADD_ITEM",
  CLEAR: "CLEAR",
  SET_NEW_ITEM_NAME: "SET_NEW_ITEM_NAME"
};

// Action creators store.dispatch actions
export const ItemActionCreators = {
  addItem: () => {
    return {
      type: ItemsActions.ADD_ITEM
    };
  },

  clear: () => {
    return {
      type: ItemsActions.CLEAR
    };
  },

  setNewItemName: value => {
    return {
      type: ItemsActions.SET_NEW_ITEM_NAME,
      value
    };
  }
};


<|start_filename|>ReactNative/Context/Components/listItems.js<|end_filename|>
import React, { Component } from 'react'
import { SimpleList } from 'packlist-components/native'
import { PackingContext } from '../Context/packingContext'

export default class AddItems extends Component {
  render () {
    return (
      <PackingContext.Consumer>
        {({allItems}) => (
          <SimpleList
            value={allItems}
          />
        )}
      </PackingContext.Consumer>
    )
  }
}


<|start_filename|>ReactNative/Unistore/Components/listItems.js<|end_filename|>
import React from "react";
import { SimpleList } from "packlist-components/native";
import { connect } from "unistore/react";
import { actions } from "../store";

export default connect(["allItems"], actions)(
  ({ allItems }) => <SimpleList value={allItems} />
);


<|start_filename|>React/useState/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";

export default class ListItems extends Component {
  render() {
    return <SimpleList value={this.props.allItems} />;
  }
}


<|start_filename|>React/react-recomponent/src/components/todo-item.js<|end_filename|>
import React from 'react'
import { List, Input, Button, Icon, Base } from 'usthing-ui'

const TodoItem = ({ index, todo, removeTodo, updateTodo, editing, setEditing }) => (
    <List.Item display="flex" alignItems="center">
        <Base flex="1">
            {editing[index] ? <Input value={todo} onChange={e => updateTodo({ todo: e.target.value, index })} /> : todo}
        </Base>
        <Button onClick={() => setEditing(index)} circle plain>
            <Icon name={editing[index] ? 'eye' : 'edit-2'} />
        </Button>
        <Button onClick={() => removeTodo(index)} circle plain>
            <Icon color="red" name="minus" />
        </Button>
    </List.Item>
)

export default TodoItem


<|start_filename|>React/remx/src/Components/listItems.js<|end_filename|>
import { SimpleList } from "packlist-components";
import { connect } from "remx";

function mapStateToProps(ownProps) {
  return {
    value: ownProps.store.getItems()
  };
}

export default connect(mapStateToProps)(SimpleList);


<|start_filename|>ReactNative/immer/__tests__/App.js<|end_filename|>
import React from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';

import App from '../App';

test('renders correctly', () => {
  const wrapper = shallow(
    <App />
  );

  expect(toJson(wrapper)).toMatchSnapshot();
});

<|start_filename|>React/redux-lightweight/src/Redux/Items.js<|end_filename|>
import { createUpdater } from 'redux-lightweight';

export class Items {
  state = {
    myItems: ["nacho", "burrito", "hotdog"],
    newItemName: ""
  };

  addItem() {
    return {
      ...this.state,
      myItems: [
        ...this.state.myItems,
        this.state.newItemName
      ],
      newItemName: ""
    };
  }

  clear() {
    return {
      ...this.state,
      myItems: []
    };
  }

  setNewItemName(newItemName) {
    return {
      ...this.state,
      newItemName,
    };
  }
}

export const [itemsReducer, ItemActionCreators] = createUpdater(Items);


<|start_filename|>React/apollo-link-state/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";
import { graphql } from "react-apollo"
import { items } from "../Queries";

@graphql(items)
export default class ListItems extends Component {
  render() {
    const { data: { items } } = this.props
    return <SimpleList value={items} />;
  }
}


<|start_filename|>React/mobx/src/Mobx/listStore.js<|end_filename|>
import { observable } from "mobx";

class ObservableListStore {
  @observable allItems = ["nacho", "burrito", "hotdog"];
  @observable newItemName = "";

  addItem = () => {
    this.allItems.push(this.newItemName);
    this.newItemName = "";
  };

  clear = () => {
    this.allItems = [];
  };

  setNewItemName = e => {
    this.newItemName = e.target.value;
  };
}

const observableListStore = new ObservableListStore();
export default observableListStore;


<|start_filename|>React/immer/src/Components/listItems.js<|end_filename|>
import React from 'react';
import { SimpleList } from 'packlist-components';

function ListItems(props) {
  return <SimpleList value={props.allItems} />;
}

export default ListItems;


<|start_filename|>ReactNative/Freactal/Components/addItems.js<|end_filename|>
import React from 'react'
import { AddPackingItem } from 'packlist-components/native'
import { injectState } from 'freactal'

export const AddItems = ({ state, effects }) => (
  <AddPackingItem
    addItem={effects.addItem}
    setNewItemText={effects.setNewItemName}
    value={state.newItemName}
    clear={effects.clear}
  />
)

export default injectState(AddItems)


<|start_filename|>React/appsync/src/AppSync.js<|end_filename|>
export default {
  graphqlEndpoint:
    "https://jdcz2aie3rhkvg6einyykrklta.appsync-api.us-east-2.amazonaws.com/graphql",
  region: "us-east-2",
  authenticationType: "API_KEY",
  apiKey: "<KEY>"
};


<|start_filename|>ReactNative/pure-store/App.js<|end_filename|>
import React, { Component } from 'react'
import { StyleSheet, Text, ScrollView } from 'react-native'
import createStore from "pure-store"
import AddItem from "./Components/AddItem";
import ListItems from "./Components/ListItems";

export const store = createStore({
  allItems: ["nachos", "burritos", "hot dog"],
  newItemName: ""
})

export default class App extends Component {
  constructor () {
    super()
    store.subscribe(()=> this.forceUpdate())
  }

  render = ()=> (
    <ScrollView
      contentContainerStyle={styles.container}
      keyboardShouldPersistTaps='always'
    >
      <Text style={styles.welcome}>
        Welcome to pure-store
      </Text>
      <AddItem />
      <ListItems />
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})


<|start_filename|>React/appsync/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";
import { graphql } from "react-apollo";
import ListAllItemsQuery from "../Queries/ListAllItemsQuery";

class ListItems extends Component {
  render() {
    return (
      <SimpleList
        value={
          (this.props.allItems && this.props.allItems.map(item => item.name)) ||
          []
        }
      />
    );
  }
}

// HOC lane
export default graphql(ListAllItemsQuery, {
  options: {
    fetchPolicy: "cache-and-network"
  },
  props: props => ({
    // fits structure identified in query and stores in allItems
    // stores as prop.allItems
    allItems: props.data.listListItems && props.data.listListItems.items
  })
})(ListItems);


<|start_filename|>React/freactal/src/Components/addItem.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";
import { injectState } from "freactal";

export const AddItems = ({ state, effects }) => (
  <AddPackingItem
    addItem={effects.addItem}
    setNewItemText={e => effects.setNewItemName(e.target.value)}
    value={state.newItemName}
    clear={effects.clear}
  />
);

export default injectState(AddItems);


<|start_filename|>ReactNative/react-recontext/src/App.js<|end_filename|>
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import TodoList from "./components/TodoList";
import { Provider } from "./recontext/store";

export default class App extends React.Component {
  render() {
    return (
      <Provider>
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.title}>Todo</Text>
            <Text style={styles.subtitle}>react-recontext example</Text>
          </View>
          <TodoList />
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    height: 100,
    paddingTop: 32,
    backgroundColor: "#2196F3",
    justifyContent: "center",
    alignItems: "center"
  },
  title: {
    color: "#ffffff",
    fontSize: 24
  },
  subtitle: {
    color: "#ffffff",
    fontSize: 14
  }
});


<|start_filename|>ReactNative/ReactAutomata/__tests__/stateTests.js<|end_filename|>
import { testStatechart } from 'react-automata'
import { App } from '../App'
import statechart from '../Statecharts/index'

test('all state snapshots', () => {
  testStatechart({ statechart }, App)
})


<|start_filename|>ReactNative/Redux/Redux/Store/configureStore.js<|end_filename|>
import { createStore, applyMiddleware } from 'redux'
import RootReducer from '../Reducers'

let middleware = []

const baseStore = createStore(RootReducer, applyMiddleware(...middleware))
export default initialState => {
  return baseStore
}


<|start_filename|>React/reim/src/stores/todo.js<|end_filename|>
import reim from 'reim'

const store = reim({todos: ['Say Hi', 'Wave Goodbye']})

export default store


<|start_filename|>ReactNative/ReactEasyState/Components/addItems.js<|end_filename|>
import { AddPackingItem } from 'packlist-components/native'

export default AddPackingItem


<|start_filename|>React/apollo-link-state/src/Components/addItem.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";
import { graphql } from "react-apollo"
import { addItem, clearItems, updateNewItem } from "../Mutations";
import { newItem } from "../Queries"

@graphql(addItem, { name: "addItem" })
@graphql(clearItems, { name: "clearItems" })
@graphql(updateNewItem, { name: "updateNewItem" })
@graphql(newItem)
export default class AddItems extends Component {
  render() {
    const {
      addItem,
      clearItems,
      updateNewItem,
      data: { newItem }
    } = this.props

    return (
      <AddPackingItem
        addItem={addItem}
        setNewItemText={e => updateNewItem({ variables: { text: e.target.value } }) }
        value={newItem}
        clear={clearItems}
      />
    );
  }
}


<|start_filename|>React/redux-and-context/src/Context/ContainerContext.js<|end_filename|>
import React from 'react';

const ContainerContext = React.createContext();

export default ContainerContext;

<|start_filename|>ReactNative/Redux/Redux/Reducers/index.js<|end_filename|>
import { combineReducers } from 'redux'
import ItemReducers from './items'

// glue all the reducers together
export default combineReducers({
  ...ItemReducers
})


<|start_filename|>ReactNative/Unistore/store.js<|end_filename|>
import createStore from "unistore";

export const store = createStore({
  newItemValue: "",
  allItems: ["Hot Dog", "Pizza", "Donuts"]
});

export const actions = store => ({
  setNewItemText: (_, newValue) => ({ newItemValue: newValue }),
  addItem: ({ newItemValue, allItems }) => ({
    allItems: allItems.concat([newItemValue]),
    newItemValue: ""
  }),
  clearItems: () => ({ allItems: [] })
});


<|start_filename|>ReactNative/ReactEasyState/App.js<|end_filename|>
import React from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'
import { view } from 'react-easy-state'
import { items } from './store'
import ListItems from './Components/listItems'
import AddItems from './Components/addItems'

const App = view(() => {
  const { newItem, allItems, setNewItemValue, addItem, clearItems } = items

  return (
    <ScrollView
      contentContainerStyle={styles.container}
      keyboardShouldPersistTaps='always'
    >
      <Text style={styles.welcome}>
        Welcome to React Easy State
      </Text>
      <AddItems
        addItem={addItem}
        setNewItemText={setNewItemValue}
        value={newItem}
        clear={clearItems}
      />
      <ListItems allItems={allItems} />
    </ScrollView>
  )
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})

export default App


<|start_filename|>ReactNative/react-recontext/src/components/TodoList.js<|end_filename|>
import React from "react";
import { FlatList } from "react-native";
import { connect } from "../recontext/store";
import Todo from "./Todo";
import AddTodo from "./AddTodo";

class TodoList extends React.PureComponent {
  render() {
    const { todos } = this.props;
    return (
      <FlatList
        data={todos}
        renderItem={item => <Todo item={item.item} />}
        keyExtractor={item => item.id.toString()}
        ListFooterComponent={<AddTodo />}
      />
    );
  }
}

const mapStateToProps = state => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);


<|start_filename|>ReactNative/Redux/Redux/Reducers/items.js<|end_filename|>
import { ItemsActions } from '../Actions/items'

// shape is an empty array
const INITIAL_STATE = {
  myItems: ['nacho', 'burrito', 'hotdog'],
  newItemName: ''
}

export function reducer (state = INITIAL_STATE, action) {
  switch (action.type) {
    case ItemsActions.ADD_ITEM:
      return {
        ...state,
        myItems: [...state.myItems, state.newItemName],
        newItemName: ''
      }
    case ItemsActions.CLEAR:
      return {
        ...state,
        myItems: []
      }
    case ItemsActions.SET_NEW_ITEM_NAME:
      return {
        ...state,
        newItemName: action.value
      }
    default:
      return state
  }
}

export default { items: reducer }


<|start_filename|>ReactNative/AppSync/Queries/ListAllItemsQuery.js<|end_filename|>
import gql from 'graphql-tag';

export default gql`
query ListAllItems {
  listListItems {
    items {
      id
      name
    }
  }
}`


<|start_filename|>React/mobx-state-tree/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React, { Component } from "react";
import { render } from "react-dom";
import { Provider } from "mobx-react";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItem";

import { ListStoreModel } from "./MST/listStore";
// first param of create is initial state (Optionals take care)
// second param is dependency injection(s)
const listStore = ListStoreModel.create();

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

export default class App extends Component {
  render() {
    return (
      <Provider listStore={listStore}>
        <div style={styles}>
          <h2>Welcome to MobX-State-Tree</h2>
          <AddItems />
          <ListItems />
        </div>
      </Provider>
    );
  }
}

render(<App />, document.getElementById("root"));


<|start_filename|>ReactNative/simple-remx/Components/listItems.js<|end_filename|>
import { SimpleList } from 'packlist-components/native';
import { connect } from 'remx';

import { store } from '../remx/store';

function mapStateToProps(ownProps) {
  return {
    value: store.getItems()
  };
}

export default connect(mapStateToProps)(SimpleList);


<|start_filename|>ReactNative/pure-store/Components/ListItems.js<|end_filename|>
import React from 'react';
import { SimpleList } from 'packlist-components/native'
import { store } from "../App";

const ListItems = () => (
  <SimpleList value={store.state.allItems} />
);

export default ListItems;


<|start_filename|>React/react-easy-state/src/index.js<|end_filename|>
/************************************************
 * This example is one of many examples
 *         -= The React State Museum =-
 * View other state management options and read
 * more in the blog post and the master repo:
 *
 * https://github.com/GantMan/ReactStateMuseum
 ************************************************/
import React from "react";
import { render } from "react-dom";
import { view } from "react-easy-state";
import { items } from "./store";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItem";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = view(() => {
  const { newItem, allItems, setNewItemValue, addItem, clearItems } = items;

  return (
    <div style={styles}>
      <h2>Welcome to React Easy State!</h2>
      <AddItems
        addItem={addItem}
        setNewItemText={event => setNewItemValue(event.target.value)}
        value={newItem}
        clear={clearItems}
      />
      <ListItems allItems={allItems} />
    </div>
  );
});

render(<App />, document.getElementById("root"));


<|start_filename|>ReactNative/Rematch/Components/addItem.js<|end_filename|>
import { AddPackingItem } from "packlist-components/native";
import { connect } from "react-redux";

const mapState = models => ({
  value: models.items.newItem
})

const mapDispatch = models => ({
  addItem: models.items.addItem,
  setNewItemText: models.items.setNewItemText,
  clear: models.items.clearItems
})

export default connect(mapState, mapDispatch)(AddPackingItem)


<|start_filename|>ReactNative/MobXStateTree/MST/listStore.js<|end_filename|>
import { types } from "mobx-state-tree"

const defaultItemList = ['nacho', 'burrito', 'hotdog']
const {model, optional, array, reference, string} = types

export const ListStoreModel = model({
  allItems: optional(array(string), defaultItemList),
  newItemName: ""
}).actions(self => ({
  addItem() {
    self.allItems.push(self.newItemName)
    self.newItemName = ""
  },
  setNewItemName(value) {
    self.newItemName = value
  },
  clear() {
    self.allItems = []
  }
}))


<|start_filename|>React/rematch/src/Components/listItems.js<|end_filename|>
import { SimpleList } from "packlist-components";
import { connect } from "react-redux";

const mapStateToProps = state => ({ value: state.items.allItems });

export default connect(mapStateToProps)(SimpleList);


<|start_filename|>React/undux/src/components/todo-container.js<|end_filename|>
import React from 'react'
import Store from '../stores/todo'

class TodoContainer extends React.PureComponent {
    addTodo = todo => {
        const { store } = this.props

        const todos = store.get('todos')

        store.set('todos')(todos.concat(todo))
    }

    removeTodo = indexToRemove => {
        const { store } = this.props
        const todos = store.get('todos')
        return store.set('todos')(todos.filter((_, idx) => idx !== indexToRemove))
    }

    updateTodo = (todoToUpdate, indexToUpdate) => {
        const { store } = this.props

        const todos = store.get('todos')

        store.set('todos')(todos.map((todo, idx) => (indexToUpdate !== idx ? todo : todoToUpdate)))
    }

    setEditing = index => {
        const { store } = this.props

        const editing = store.get('editing')
        const updated = {
            ...editing,
            [index]: !editing[index]
        }

        store.set('editing')(updated)
    }

    render() {
        const { store } = this.props

        return this.props.children({
            todos: store.get('todos'),
            editing: store.get('editing'),
            addTodo: this.addTodo,
            updateTodo: this.updateTodo,
            removeTodo: this.removeTodo,
            setEditing: this.setEditing
        })
    }
}

export default Store.withStore(TodoContainer)


<|start_filename|>ReactNative/react-recontext/src/recontext/actions/todoActions.js<|end_filename|>
export default {
  addTodo: (state, { newTodoContent }) => ({
    todos: [
      ...state.todos,
      {
        id: state.todos.length + 1,
        content: newTodoContent,
        completed: false
      }
    ]
  }),
  toggleItem: (state, { todoId }) => ({
    todos: state.todos.map(
      todo =>
        todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
    )
  })
};


<|start_filename|>ReactNative/microstates/App.js<|end_filename|>
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'

import ListItems from './Components/listItems'
import AddItems from './Components/addItems'
import State from '@microstates/react';

// Define your state model
class ListModel {
  allItems = [String];
  newItemText = String;
}

export default class App extends Component {
  render() {
    return (
      <State
        type={ListModel}
        value={{ allItems: ["nachos", "burritos", "hot dog"] }}
      >
        {list => (
          <ScrollView
            contentContainerStyle={styles.container}
            keyboardShouldPersistTaps="always"
          >
            <Text style={styles.welcome}>Welcome to microstates</Text>
            <AddItems
              addItem={() =>
                list.allItems.push(list.state.newItemText).newItemText.set('')
              }
              setNewItemName={(value) => list.newItemText.set(value)}
              newItemName={list.state.newItemText}
              clear={() => list.allItems.set([])}
            />
            <ListItems allItems={list.state.allItems} />
          </ScrollView>
        )}
      </State>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})


<|start_filename|>React/redux/src/Components/addItem.js<|end_filename|>
import { AddPackingItem } from "packlist-components";
import { ItemActionCreators } from "../Redux/Actions/items";
import { connect } from "react-redux";

const mapStateToProps = state => ({ value: state.items.newItemName });

const { setNewItemName, addItem, clear } = ItemActionCreators;

const mapDispatchToProps = {
  setNewItemText: e => setNewItemName(e.target.value),
  addItem,
  clear
};

export default connect(mapStateToProps, mapDispatchToProps)(AddPackingItem);


<|start_filename|>React/react-recontext/src/index.js<|end_filename|>
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "./recontext/store";
import TodoList from "./components/TodoList";
import AddTodo from "./components/AddTodo";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>react-recontext Todo Example</h1>
      <div className="App-intro">
        <TodoList />
        <AddTodo />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  rootElement
);


<|start_filename|>React/context/src/Components/addItem.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";
import { PackingContext } from "../Context/packingContext";

export default class AddItems extends Component {
  render() {
    return (
      <PackingContext.Consumer>
        {({ newItemName, addItem, setNewItemName, clear }) => (
          <AddPackingItem
            addItem={addItem}
            setNewItemText={setNewItemName}
            value={newItemName}
            clear={clear}
          />
        )}
      </PackingContext.Consumer>
    );
  }
}


<|start_filename|>ReactNative/MobXStateTree/Components/listItems.js<|end_filename|>
import React, { Component } from 'react'
import { SimpleList } from 'packlist-components/native'
import {observer, inject} from 'mobx-react/native'

@inject('listStore')
@observer
export default class ListItems extends Component {
  render () {
    return (
      <SimpleList
        value={[...this.props.listStore.allItems]}
      />
    )
  }
}


<|start_filename|>React/redux-lightweight/src/Redux/Store/configureStore.js<|end_filename|>
import { createStore, applyMiddleware } from "redux";

import { itemsReducer } from "../Items";

let middleware = [];

const baseStore = createStore(itemsReducer, applyMiddleware(...middleware));
export default initialState => {
  return baseStore;
};


<|start_filename|>ReactNative/ReactObservableStore/App.js<|end_filename|>
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native';
import { SimpleList, AddPackingItem } from 'packlist-components/native'
import withStore, { addItem, updateInput, clearAll } from './store'

export class App extends Component {
  render () {
    const { allItems, newItemName } = this.props
    return (
      <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps='always'
      >
        <Text style={styles.welcome}>
          Welcome to React Observable Store
        </Text>
        <AddPackingItem
          addItem={addItem}
          setNewItemText={updateInput}
          value={newItemName}
          clear={clearAll}
        />

        <SimpleList value={allItems} />
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})

export default withStore('museum', App)


<|start_filename|>ReactNative/setState/Components/addItems.js<|end_filename|>
import React, { Component } from 'react'
import { AddPackingItem } from 'packlist-components/native'

export default class AddItems extends Component {
  render () {
    return (
      <AddPackingItem
        addItem={this.props.addItem}
        setNewItemText={this.props.setNewItemName}
        value={this.props.newItemName}
        clear={this.props.clear}
      />
    )
  }
}


<|start_filename|>React/react-recomponent/src/context/todo.js<|end_filename|>
import React from 'react'
import { ReComponent, Update } from 'react-recomponent'

const { Provider, Consumer } = React.createContext()

export class TodoContainer extends React.PureComponent {
    render() {
        return <Consumer>{props => this.props.children(props)}</Consumer>
    }
}

export class TodoProvider extends ReComponent {
    constructor() {
        super()
        this.handleAddTodo = this.createSender('ADD_TODO')
        this.handleRemoveTodo = this.createSender('REMOVE_TODO')
        this.handleUpdateTodo = this.createSender('UPDATE_TODO')
        this.handleSetEditing = this.createSender('SET_EDITING')
        this.state = { todos: ['Say Hi', 'Wave Goodbye'], editing: {} }
    }

    static reducer(action, state) {
        switch (action.type) {
            case 'ADD_TODO':
                return Update({ todos: state.todos.concat(action.payload) })
            case 'REMOVE_TODO':
                return Update({ todos: state.todos.filter((_, idx) => idx !== action.payload) })
            case 'UPDATE_TODO':
                return Update({
                    todos: state.todos.map((todo, idx) => (action.payload.index === idx ? action.payload.todo : todo))
                })
            case 'SET_EDITING':
                return Update({
                    editing: {
                        ...state.editing,
                        [action.payload]: !state.editing[action.payload]
                    }
                })
        }
    }

    render() {
        return (
            <Provider
                value={{
                    ...this.state,
                    handleAddTodo: this.handleAddTodo,
                    handleRemoveTodo: this.handleRemoveTodo,
                    handleUpdateTodo: this.handleUpdateTodo,
                    handleSetEditing: this.handleSetEditing
                }}>
                {this.props.children}
            </Provider>
        )
    }
}


<|start_filename|>React/unistore/src/Components/addItem.js<|end_filename|>
import React from "react";
import { AddPackingItem } from "packlist-components";
import { connect } from "unistore/react";
import { actions } from "../store";

export default connect(["newItemValue"], actions)(
  ({ addItem, clearItems, newItemValue, setNewItemText }) => (
      <AddPackingItem
        addItem={addItem}
        setNewItemText={event => setNewItemText(event.target.value)}
        value={newItemValue}
        clear={clearItems}
      />
  )
);


<|start_filename|>ReactNative/AppSync/AppSync.js<|end_filename|>
﻿export default {
    "graphqlEndpoint": "https://jdcz2aie3rhkvg6einyykrklta.appsync-api.us-east-2.amazonaws.com/graphql",
    "region": "us-east-2",
    "authenticationType": "API_KEY",
    "apiKey": "<KEY>"
}


<|start_filename|>ReactNative/ApolloLinkState/client.js<|end_filename|>
import { withClientState } from 'apollo-link-state';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { typeDefs } from './query';

const cache = new InMemoryCache();
const link = withClientState({
      cache,
      typeDefs,
      defaults: {
            allItems: ['nachos', 'burritos', 'hot dog'],
      },
})

export const client = new ApolloClient({
      cache,
      link
})

<|start_filename|>React/react-easy-state/src/store.js<|end_filename|>
import { store } from "react-easy-state";

export const items = store({
  newItem: "",
  allItems: ["Pizza!", "Hot dogs", "Donuts"],
  setNewItemValue(newItem = "") {
    items.newItem = newItem;
  },
  addItem() {
    items.allItems.push(items.newItem);
    items.setNewItemValue();
  },
  clearItems() {
    items.allItems = [];
  }
});


<|start_filename|>ReactNative/simple-remx/remx/store.test.js<|end_filename|>
describe(`remx store is easily testable (and TDD-able)`, () => {
  let store;

  beforeEach(() => {
    jest.resetModules();
    store = require('./store').store;
  });

  it('start with 3 default items', () => {
    expect(store.getItems()).toEqual(['nacho', 'burrito', 'hotdog']);
  });

  it('clear the store', () => {
    store.clear();
    expect(store.getItems()).toEqual([]);
  });

  it('holds new item text', () => {
    expect(store.getNewItemText()).toEqual('');
    store.setNewItemText('the new item text');
    expect(store.getNewItemText()).toEqual('the new item text');
  });

  it('addItem', () => {
    expect(store.getItems()).not.toContain('the new item');
    store.setNewItemText('the new item');
    store.addItem();
    expect(store.getItems()).toContain('the new item');
  });

  it('addItem does not add undefined', () => {
    store.clear();
    store.addItem();
    expect(store.getItems()).toEqual(['']);
  });
});

<|start_filename|>ReactNative/ReactAutomata/App.js<|end_filename|>
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'
import { State, withStatechart } from 'react-automata'
import statechart from './Statecharts/index'

import ListItems from './Components/listItems'
import AddItems from './Components/addItems'

export class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      allItems: ['nachos', 'burritos', 'hot dog'],
      newItemName: ''
    }
  }

  addItem = () => {
    this.setState((state) => ({
      allItems: [...state.allItems, state.newItemName],
      newItemName: ''
    }))
  }

  setNewItemName = (value) => {
    this.setState({newItemName: this.props.value})
  }

  clear = () => {
    this.setState({allItems: []})
  }

  handAddItem = () => this.props.transition('ADD_ITEM')
  handleSetNewItemName = value => this.props.transition('SET_NEW_ITEM_NAME', {value})
  handleClear = () => this.props.transition('CLEAR')

  render () {
    return (
      <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps='always'
      >
        <Text style={styles.welcome}>
          Welcome to setState + react-automata
        </Text>
        <State value='idle'>
          <Text>
            Current State 'idle'
          </Text>
        </State>
        <State value='loaded'>
          <Text>
            Current State 'loaded'
          </Text>
        </State>
        <AddItems
          addItem={this.handAddItem}
          setNewItemName={this.handleSetNewItemName}
          newItemName={this.state.newItemName}
          clear={this.handleClear}
        />
        <ListItems
          allItems={this.state.allItems}
        />
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
})

export default withStatechart(statechart)(App)


<|start_filename|>React/mobx-state-tree/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";
import { observer, inject } from "mobx-react";

@inject("listStore")
@observer
export default class ListItems extends Component {
  render() {
    return <SimpleList value={[...this.props.listStore.allItems]} />;
  }
}


<|start_filename|>React/freactal/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";
import { injectState } from "freactal";

export const ListItems = ({ state }) => <SimpleList value={state.allItems} />;

export default injectState(ListItems);


<|start_filename|>React/mobx/src/Components/addItem.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";
import ListStore from "../Mobx/listStore";
import { observer } from "mobx-react";

@observer
export default class AddItems extends Component {
  render() {
    return (
      <AddPackingItem
        addItem={ListStore.addItem}
        setNewItemText={ListStore.setNewItemName}
        value={ListStore.newItemName}
        clear={ListStore.clear}
      />
    );
  }
}


<|start_filename|>ReactNative/Unstated/Components/addItem.js<|end_filename|>
import React, { Component } from "react"
import { AddPackingItem } from 'packlist-components/native'
import ListContainer from "../Unstated/listContainer"
import { Subscribe } from "unstated"

export default class AddItems extends Component {
  render() {
    return (
      <Subscribe to={[ListContainer]}>
        {list => (
          <AddPackingItem
            addItem={list.addItem}
            setNewItemText={list.setNewItemName}
            value={list.state.newItemName}
            clear={list.clear}
          />
        )}
      </Subscribe>
    );
  }
}


<|start_filename|>React/undux/src/containers/app.js<|end_filename|>
import React from 'react'
import Store from '../stores/todo'
import { Provider, Base, Button, Card, Heading, Icon } from 'usthing-ui'

import ListTodos from '../components/list-todos'
import TodoContainer from '../components/todo-container'

const App = () => (
    <Store.Container>
        <Provider>
            <TodoContainer>
                {({ addTodo, todos, removeTodo, updateTodo, setEditing, editing }) => (
                    <Base display="flex" minHeight="100vh" alignItems="center" justifyContent="center">
                        <Card padding={10} minWidth={400}>
                            <Heading>Todo List</Heading>
                            <ListTodos
                                todos={todos}
                                removeTodo={removeTodo}
                                updateTodo={updateTodo}
                                setEditing={setEditing}
                                editing={editing}
                            />
                            <Button onClick={() => addTodo('New Todo')} plain>
                                <Icon name="plus" />
                            </Button>
                        </Card>
                    </Base>
                )}
            </TodoContainer>
        </Provider>
    </Store.Container>
)

export default App


<|start_filename|>ReactNative/MobXStateTree/Components/addItems.js<|end_filename|>
import React, { Component } from 'react'
import { AddPackingItem } from 'packlist-components/native'
import {observer, inject} from 'mobx-react/native'

@inject('listStore')
@observer
export default class AddItems extends Component {
  render () {
    return (
      <AddPackingItem
        addItem={this.props.listStore.addItem}
        setNewItemText={this.props.listStore.setNewItemName}
        value={this.props.listStore.newItemName}
        clear={this.props.listStore.clear}
      />
    )
  }
}


<|start_filename|>React/undux/src/stores/todo.js<|end_filename|>
import { createConnectedStore } from 'undux'

const store = createConnectedStore({ editing: {}, todos: ['Say Hi', 'Wave Goodbye'] })

export default store


<|start_filename|>React/undux/src/components/list-todos.js<|end_filename|>
import React from 'react'
import { List } from 'usthing-ui'

import TodoItem from './todo-item'

const ListTodos = ({ todos, removeTodo, updateTodo, editing, setEditing }) => (
    <List>
        {todos.map((todo, index) => (
            <TodoItem
                key={index}
                index={index}
                todo={todo}
                removeTodo={removeTodo}
                updateTodo={updateTodo}
                setEditing={setEditing}
                editing={editing}
            />
        ))}
    </List>
)

export default ListTodos


<|start_filename|>ReactNative/AppSync/Queries/DeleteItemMutation.js<|end_filename|>
import gql from 'graphql-tag';

export default gql`
mutation deleteListItem($id: ID!) {
  deleteListItem (input: {
    id: $id
  }) {
    id
  }
}`


<|start_filename|>React/context/src/Components/listItems.js<|end_filename|>
import React, { Component } from "react";
import { SimpleList } from "packlist-components";
import { PackingContext } from "../Context/packingContext";

export default class ListItems extends Component {
  render() {
    return (
      <PackingContext.Consumer>
        {({ allItems }) => <SimpleList value={allItems} />}
      </PackingContext.Consumer>
    );
  }
}


<|start_filename|>ReactNative/setState/Components/listItems.js<|end_filename|>
import React, { Component } from 'react'
import { SimpleList } from 'packlist-components/native'

export default class AddItems extends Component {
  render () {
    return (
      <SimpleList
        value={this.props.allItems}
      />
    )
  }
}


<|start_filename|>React/useState/src/Components/addItem.js<|end_filename|>
import React, { useState } from 'react'

const useInputValue = initialValue => {
  const [value, setItem] = useState(initialValue);

  return {
    value,
    onChange: e => setItem(e.target.value),
    resetValue: () => setItem("")
  }
}

export default function addItems({addItem, clear}) {
  const { resetValue, ...item } = useInputValue("");

  return (
    <div style={styles.container}>
      <input
        placeholder='Packing Item'
        type='text'
        style={styles.inputStyle}
        {...item}
      />
      <button
        style={styles.buttonAdd}
        onClick={e => {
          e.preventDefault();
          addItem(item.value);
          resetValue;
        }}
      >
        ADD
      </button>
      <button
        style={styles.buttonClear}
        onClick={clear}
      >
        CLEAR
      </button>
    </div>
  )
}


const buttonStyle = {
  alignSelf: 'center',
  borderRadius: 4,
  margin: 5,
  height: 30
}
const styles = {
  inputStyle: {
    flex: 1,
    backgroundColor: '#ddf',
    paddingHorizontal: 4,
    height: 30,
    borderRadius: 4,
    borderStyle: 'solid',
    border: 'none'
  },
  buttonAdd: {
    ...buttonStyle,
    backgroundColor: '#cfc',
  },
  buttonClear: {
    ...buttonStyle,
    backgroundColor: '#faa'
  },
  container: {
    flexDirection: 'row',
    padding: 5
  }
}


<|start_filename|>ReactNative/react-recontext/src/recontext/actions/index.js<|end_filename|>
import todoActions from "./todoActions";

export default {
  ...todoActions
  // ...more Actions here
};


<|start_filename|>React/redux/src/Redux/Store/configureStore.js<|end_filename|>
import { createStore, applyMiddleware } from "redux";
import RootReducer from "../Reducers/";

let middleware = [];

const baseStore = createStore(RootReducer, applyMiddleware(...middleware));
export default initialState => {
  return baseStore;
};


<|start_filename|>React/setState/src/Components/addItem.js<|end_filename|>
import React, { Component } from "react";
import { AddPackingItem } from "packlist-components";

export default AddPackingItem;
