Material-ui autocomplete with react-meteor-data createContainer

help
1

OK now I give up with this and really don’t know what to do. Got the props in the component from the container that I want but can’t use them as the dataSource prop in

Here’s the code:

import React, {Component} from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
//MUI
import AutoComplete from 'material-ui/AutoComplete';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {red500, darkBlack, white} from 'material-ui/styles/colors'

//Imports
import muiTheme from '../../styles/muiTheme';

const menuProps = {
  desktop: true,
  disableAutoFocus: true,
};

export class TrainerSearchAutoComplete extends Component {
  constructor(props){
    super(props);
    // I guess something missing here
  }

  render() {
    return (
      <div>
        <MuiThemeProvider theme={muiTheme}>
          <AutoComplete
            floatingLabelText="Trainer search"
            hintText="Start typing trainer's last name"
            filter={AutoComplete.fuzzyFilter}
            menuProps={menuProps}
            dataSource={trainers} //want to use the trainers from the createContainer here
            floatingLabelFixed={true}
            floatingLabelStyle={{color:darkBlack}}
            floatingLabelFocusStyle={{color:red500}}
            underlineFocusStyle={{borderColor:red500}}
          />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default TrainerSearchAutoCompleteContainer = createContainer(() => {

  Meteor.subscribe("userData");
  const trainers = Meteor.users.find({}, {fields: {'profile.lastName': true, 'profile.firstName': true}}).fetch()

  return {
     trainers,
  };
}, TrainerSearchAutoComplete);

Here are the props of :

Object {trainers: Array(3)}
trainers:
Array(3)
    0: Object
    1:Object
    2:Object
        profile: Object
               firstName:"Mike"
               lastName:"Aaja"

So, I want the autocomplete to search through and match the name of the trainer as I start typing. Seems easy but can’t do it. Thanks for your help.

2

Try dataSource={this.props.trainers} inside your autocomplete component.

3

Cool. This has worked so far. Now just need to get at the profile array inside the trainers array.

Any ideas?

4

Hi @enkkumiksu , Can you please share what the value of this.props.trainers so I can answer your question.

5

Here’s what’s in the console

456×836 58.6 KB

6

Since this.props.trainers is an array, so you should use the map() of underscore library to get value from it.
Please take a look at - http://underscorejs.org/#map

7

Ok thanks I’ve tried this but obviously wrong :smile:

export class TrainerSearchAutoComplete extends Component {

  const trainers = () => _.map({this.props.trainers}, function(name, key){ return name; });

  render() {
    return (
      <div>
        <MuiThemeProvider theme={muiTheme}>
          <AutoComplete
            floatingLabelText="Trainer search"
            hintText="Start typing trainer's last name"
            filter={AutoComplete.fuzzyFilter}
            menuProps={menuProps}
            dataSource={trainers}  //want to use the trainers from the createContainer here
            floatingLabelFixed={true}
            floatingLabelStyle={{color:darkBlack}}
            floatingLabelFocusStyle={{color:red500}}
            underlineFocusStyle={{borderColor:red500}}
          />
        </MuiThemeProvider>
      </div>
    );
  }
}
8

OK. I figured it out. your code should be -
const trainers = () => this.props.trainers.map(function(value, key){ return value.profile.name; });
Please check and report me if any issue found.
Thanks.

9

Hi just getting different errors with this

Where should I put this line?

Outside the component I just get trainers undefined and inside the component the app crashed because of unexpected tokens. Inside the createContainer function I get nothing working at all.

10

Solved: The trick was to use lodash. This was far too difficult IMHO but finally it worked.

Here’s the code for anyone else who has the same problem.

Done in the createContainer function

  1. First map through trainers to get the profile array that’s already there

  2. Then use lodash map to create new array from name values

1.Autocomplete dataSource then becomes {this.props.names}

export default TrainerSearchAutoCompleteContainer = createContainer(() => {

  Meteor.subscribe("userData");
  const trainers = Meteor.users.find({}, {fields: {'profile.name': true}}).fetch();

  getProfile = (value, key) => {
    return value.profile
  }

  const profile = trainers.map(getProfile);

  const names = _.map(profile, 'name')

  return {
    names,
  };
}, TrainerSearchAutoComplete);
11

Thanks for your help @divyanshu. Solved the issue but would never have got there without your help — cheers!

1 Like