JavaScript unistore/react connect Examples

Example #1

File: QueryEditorSqlEditor.js Project: rickbergfalk/sqlpad

    value: state.query && state.query.queryText
  };
}

function QueryEditorSqlEditor({
  value,
  setQueryState,
  handleQuerySelectionChange
}) {
  const onChange = useCallback(value => setQueryState('queryText', value), [
    setQueryState
  ]);

  return (
    <div style={{ padding: 4, height: '100%', width: '100%' }}>
      <SqlEditor
        value={value}
        onChange={onChange}
        onSelectionChange={handleQuerySelectionChange}
      />
    </div>
  );
}

const ConnectedQueryEditorSqlEditor = connect(
  mapStateToProps,
  { setQueryState, handleQuerySelectionChange }
)(QueryEditorSqlEditor);

export default ConnectedQueryEditorSqlEditor;

Example #2

File: QueryEditorChart.js Project: rickbergfalk/sqlpad

import { connect } from 'unistore/react';
import SqlpadTauChart from '../common/SqlpadTauChart';

function mapStateToProps(state) {
  return {
    queryId: (state.query && state.query._id) || 'new',
    isRunning: state.isRunning,
    queryError: state.queryError,
    queryResult: state.queryResult,
    chartConfiguration: state.query && state.query.chartConfiguration,
    queryName: state.query && state.query.name
  };
}

const ConnectedChart = connect(mapStateToProps)(SqlpadTauChart);

export default ConnectedChart;

Example #3

File: QueryResultHeader.js Project: rickbergfalk/sqlpad

          </span>
        )}
      </span>

      {incomplete && <IncompleteDataNotification />}
    </div>
  );
}

QueryResultHeader.propTypes = {
  cacheKey: PropTypes.string,
  config: PropTypes.object,
  isRunning: PropTypes.bool,
  queryResult: PropTypes.object,
  runQueryStartTime: PropTypes.instanceOf(Date)
};

QueryResultHeader.defaultProps = {
  cacheKey: '',
  config: {},
  isRunning: false
};

export default connect([
  'cacheKey',
  'config',
  'isRunning',
  'queryResult',
  'runQueryStartTime'
])(React.memo(QueryResultHeader));

Example #4

File: QueryEditor.js Project: rickbergfalk/sqlpad

  saveQuery: PropTypes.func.isRequired
};

QueryEditor.defaultProps = {
  queryName: 'New query'
};

function mapStateToProps(state, props) {
  return {
    chartType:
      state.query &&
      state.query.chartConfiguration &&
      state.query.chartConfiguration.chartType,
    queryName: state.query && state.query.name,
    showSchema: state.showSchema
  };
}

export default connect(
  mapStateToProps,
  store => ({
    loadConnections: loadConnections(store),
    loadTags,
    formatQuery,
    loadQuery,
    runQuery: runQuery(store),
    saveQuery: saveQuery(store),
    resetNewQuery
  })
)(QueryEditor);

Example #5

File: Authenticated.js Project: rickbergfalk/sqlpad

import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import { connect } from 'unistore/react';
import { refreshAppContext } from './stores/config';
import { Redirect } from 'react-router-dom';

function Authenticated({ children, currentUser, refreshAppContext }) {
  useEffect(() => {
    refreshAppContext();
  }, [refreshAppContext]);

  if (!currentUser) {
    return <Redirect to={{ pathname: '/signin' }} />;
  }

  return children;
}

Authenticated.propTypes = {
  admin: PropTypes.bool
};

export default connect(
  ['currentUser'],
  {
    refreshAppContext
  }
)(Authenticated);