How to use relate-js - 7 common examples

import Component from 'components/component';
import React from 'react';
import PropTypes from 'prop-types';
import {draggedMenuItem} from 'actions/menu';
import {bindActionCreators} from 'redux';
import {dataConnect} from 'relate-js';

import Menu from './menu';

@dataConnect(
  (state) => ({
    menuId: state.router.params.id,
    dragging: state.dnd.dragging,
    menuData: state.menu,
    draggingId: state.dnd.dragInfo.id
  }),
  (dispatch) => bindActionCreators({draggedMenuItem}, dispatch),
  (props) => ({
    fragments: Menu.fragments,
    variablesTypes: {
      menu: {
        id: 'ID!'
      }
    },
    initialVariables: {
      menu: {

import * as adminMenuActions from 'actions/admin-menu';

import bind from 'decorators/bind';
import forEach from 'lodash/forEach';
import Component from 'components/component';
import React from 'react';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import {dataConnect} from 'relate-js';

import Menu from './menu';

@dataConnect(
  (state) => ({
    adminMenuOpened: state.adminMenu,
    routes: state.router.routes,
    params: state.router.params
  }),
  (dispatch) => bindActionCreators(adminMenuActions, dispatch),
  () => ({
    fragments: Menu.fragments,
    mutations: {
      addSchema: [{
        type: 'APPEND',
        field: 'schemas'
      }]
    }
  })
)

import bind from 'decorators/bind';
import debounce from 'decorators/debounce';
import Component from 'components/component';
import React from 'react';
import PropTypes from 'prop-types';
import {removeMenu, updateMenuTitle, updateMenuData} from 'actions/menu';
import {bindActionCreators} from 'redux';
import {dataConnect} from 'relate-js';

import Menu from './components/menu';

@dataConnect(
  (state) => ({
    params: state.router.params
  }),
  (dispatch) => bindActionCreators({removeMenu, updateMenuTitle, updateMenuData}, dispatch),
  (props) => ({
    fragments: Menu.fragments,
    variablesTypes: {
      menu: {
        id: 'ID!'
      }
    },
    initialVariables: {
      menu: {
        id: props.params.id
      }
    }

import * as mediaActions from 'actions/media';

import bind from 'decorators/bind';
import Component from 'components/component';
import React from 'react';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import {dataConnect} from 'relate-js';

import ImagePicker from './picker';

@dataConnect(
  null,
  (dispatch) => bindActionCreators(mediaActions, dispatch),
  (props) => {
    const result = {
      fragments: {},
      variablesTypes: {
        mediaItem: {
          id: 'ID!'
        }
      },
      initialVariables: {
        mediaItem: {
          id: props.value
        }
      }
    };

import bind from 'decorators/bind';
import find from 'lodash/find';
import forEach from 'lodash/forEach';
import sortBy from 'lodash/sortBy';
import React from 'react';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import {dataConnect} from 'relate-js';
import {getColor} from 'helpers/styles/colors';

import ColorPalettePicker from './color-palette-picker';
import Edit from './edit';

const INPUT_TYPES = ['hex', 'rgba', 'hsva'];

@dataConnect(
  null,
  (dispatch) => ({
    colorsActions: bindActionCreators(colorsActions, dispatch)
  }),
  () => ({
    fragments: {
      colors: {
        _id: 1,
        label: 1,
        value: 1
      }
    },
    mutations: {
      addColor: [{
        type: 'APPEND',
        field: 'colors'

import * as pageActions from 'actions/page';
import Component from 'components/component';
import ContentPageBuilder from 'components/content-page-builder';
import React, {PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {dataConnect} from 'relate-js';

import Revisions from './components/revisions';

@dataConnect(
  (state) => ({
    pageId: state.router.params.id
  }),
  (dispatch) => bindActionCreators(pageActions, dispatch),
  (props) => ({
    fragments: {
      page: {
        _id: 1,
        state: 1
      }
    },
    variablesTypes: {
      page: {
        _id: 'ID!'
      }
    },

import Component from 'components/component';
import Viewer from 'components/viewer';
import React from 'react';
import PropTypes from 'prop-types';
import {dataConnect} from 'relate-js';

@dataConnect(
  (state) => ({
    pageSlug: state.router.params.slug
  }),
  (props) => ({
    fragments: {
      page: {
        _id: 1,
        title: 1,
        data: 1,
        template: {
          _id: 1,
          data: 1,
          links: 1
        }
      }
    },