Key issues

[chrisrobbins]

still Intermittently getting this error:

can you point me in the direction of a fix? Here is my swipeable code:

import React, { Component } from 'react';
import {
  Text,
  View,
  Image,
  Linking,
  TouchableHighlight
} from 'react-native';
import { connect } from 'react-redux';
import {
  saveCollectionItem,
} from '../actions/collection-action';
import {
  saveWantlistItem,
} from '../actions/wantlist-action';

import { CardSection } from '../components/common/CardSection';
import { Button } from '../components/common/Button';
import Swipeable from 'react-native-swipeable';
import SearchSuccessModal from '../components/SearchSuccessModal';


class SearchResultItem extends Component {
constructor(props) {
	super(props);
	this.state = {
    leftActionActivated: false,
    rightActionActivated: false,
    };
}
//
//
//
// checkCollectionForRecords() {
//     let discogsRecord = this.props.item.thumb;
//     this.props.collectionRecords.map((collectionRecord) => {
//       if (discogsRecord === collectionRecord) {
//         console.log("already in collection", discogsRecord, collectionRecord);
//         this.setState({collectionRecordSaved: " in collection"})
//       } else if (!collectionRecord) {
//         console.log("NOT HERE ", discogsRecord, collectionRecord);
//         this.setState({collectionRecordSaved: '' })
//       }
//     })
//   }
//
//   checkWantlistForRecords() {
//     let discogsRecord = this.props.item.thumb;
//     this.props.wantlistRecords.map((wantlistRecord) => {
//       // console.log("DATABASE: ", wantlistRecord);
//       if (discogsRecord === wantlistRecord) {
//         console.log("already in wantlist");
//         this.setState({wantlistRecordSaved: " in wantlist"})
//       } else if (!wantlistRecord) {
//         this.setState({wantlistRecordSaved: ''})
//       }
//     })
//   }
//
saveToCollection = () => {
  let discogsRecord = this.props.item.thumb;
  this.props.saveCollectionItem(discogsRecord)
  return (<SearchSuccessModal />);
  console.log('success modals');
 }
//
//
//
saveToWantlist = () => {
  let discogsRecord = this.props.item.thumb;
  this.props.saveWantlistItem(discogsRecord)
  console.log('saved to wantlist: ', discogsRecord);
 }
//
// beenThereDoneThat = () => {
//   const smallWantlistIcon = require('../img/smallWantlistIcon.png');
//   const smallCollectionIcon = require('../img/smallCollectionIcon.png');
//   let collectionRecord = this.state.collectionRecordSaved;
//   let wantlistRecord = this.state.wantlistRecordSaved;
//   if (collectionRecord) {
//     return (
//       <Text
//         style={styles.collectionSavedTextStyle}>
//         <Image source={smallCollectionIcon} />  {collectionRecord}
//       </Text>
//     )
//   } else if (wantlistRecord) {
// return (
//   <Text
//     style={styles.wantlistSavedTextStyle}>
//     <Image source={smallWantlistIcon} />  {wantlistRecord}
//   </Text>
//     )
//   }
// }




render() {
  let discogsRecord = this.props.item.thumb;
  const { item, onSwipeStart, onSwipeRelease } = this.props;
  let discogsString = item.title.split('-');
  const title = discogsString[1];
  const artist = discogsString[0];

  const {
    imageView,
    textView,
    imageStyle,
    titleTextStyle,
    artistTextStyle,
    collectionSavedTextStyle,
    wantlistSavedTextStyle
  } = styles;
  const { leftActionActivated, rightActionActivated, toggle } = this.state;
  const wantlistIcon = require('../img/wantlistButton.png');
  const collectionIcon = require('../img/collectionButton.png');
  const check = require('../img/checkmark.png');

  const leftContent = [
    <View style={[styles.leftSwipeItem, {backgroundColor: leftActionActivated ? '#2EF470' : '#000'}]}>
    {leftActionActivated ?
      <Image style={styles.leftIconStyles} source={check} /> :
      <Image style={styles.leftIconStyles} source={collectionIcon} />}
    </View>
  ];
  const rightContent = [
    <View style={[styles.rightSwipeItem, {backgroundColor: rightActionActivated ? '#F4702E' : '#000'}]}>
    {rightActionActivated ?
      <Image style={styles.rightIconStyles} source={check} /> :
      <Image style={styles.rightIconStyles} source={wantlistIcon} />}
    </View>
  ];

  return (
    <Swipeable
      leftContent={leftContent}
      rightContent={rightContent}
      leftActionActivationDistance={100}
      rightActionActivationDistance={100}
      onLeftActionActivate={() =>
        this.setState({leftActionActivated: true})
    }
      onLeftActionDeactivate={() =>
        this.setState({leftActionActivated: false})
    }
      onRightActionActivate={() =>
        this.setState({rightActionActivated: true})
    }
      onRightActionDeactivate={() =>
        this.setState({rightActionActivated: false})
    }
      onLeftActionRelease={this.saveToCollection}
      onRightActionRelease={this.saveToWantlist}

      onSwipeStart={onSwipeStart}
      onSwipeRelease={onSwipeRelease}


      >
      <CardSection>
        <View style={imageView}>
          {!item.thumb ? <Image
            style={imageStyle}
            source={require('../img/n-a.png')}
          /> : <Image
            style={imageStyle}
            source={{ uri: item.thumb }}
          />}
        </View>

      <View style={textView}>
          <Text style={titleTextStyle}>{title}</Text>
          <Text style={artistTextStyle}>{artist}</Text>
        </View>
      </CardSection>
    </Swipeable>
    );
  }
};

const styles = {
  container: {
    flexDirection: 'column'
  },

  textView: {
    justifyContent: 'center',
  },
  titleTextStyle: {
    fontSize: 20,
    color: "#DADADA",
    marginLeft: 5
  },
  artistTextStyle: {
    fontSize: 16,
    color: "rgba(217,217,217,.6)",
    marginLeft: 10,
    marginTop: 1
  },
  leftSwipeItem: {
    flex: 1,
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: 20
  },
  // collectionSavedTextStyle: {
  //   color: '#2EF470',
  //   marginLeft: 12,
  //   marginTop: 9,
  //   fontSize: 10
  // },
  // wantlistSavedTextStyle: {
  //   color: '#F4702E',
  //   marginLeft: 12,
  //   marginTop: 9,
  //   fontSize: 10
  // },
  imageStyle: {
    height: 85,
    width: 85
  },
  rightSwipeItem: {
      flex: 1,
      alignItems: 'flex-start',
      justifyContent: 'center',
      paddingLeft: 20
    }
};

const mapStateToProps = (state) => {
    return {
      ...state
    }
}
// for click events so that dispatches can happen
const mapDispatchToProps = (dispatch) => {
    return {
      saveCollectionItem: (item) => {
          dispatch(saveCollectionItem(item))
      },
      saveWantlistItem: (item) => {
          dispatch(saveWantlistItem(item))
      },
    }
  }



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

And Here is the FlatList code:

import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import {
  saveCollectionItem,
  fetchCollection,
} from '../actions/collection-action';
import {
  saveWantlistItem,
  fetchWantlist,
} from '../actions/wantlist-action';

import {
   Button,
   BarCode,
   ClearText
} from '../components/common';
import fire from '../components/fire';
import SearchResultItem from '../components/SearchResultItem';


import _ from 'lodash';

import {
  View,
  Text,
  TextInput,
  Image,
  ActivityIndicator,
  FlatList
} from 'react-native';

class DiscogsSearch extends Component {
  constructor(props) {
    super(props);
    this.searchDiscogs = this.searchDiscogs.bind(this)

    this.state = {
      text: '',
      loading: false,
      albums: [],
      page: 1,
      discogsRecord: '',
      seed: 1,
      error: null,
      refreshing: false
    };
    this.searchDiscogs = _.debounce(this.searchDiscogs, 150)

  }
  static navigationOptions = {

    tabBarIcon: ({ tintColor }) => (tintColor == '#e91e63' ?
    <Image
      source={require('../img/search_select.png')}
    />
    :
    <Image
      source={require('../img/search.png')}
    />
  ),
};


  searchDiscogs = () => {
    const apiKey = "jbUTpFhLTiyyHgLRoBgq";
    const apiSecret = "LSQDaLpplgcCGlkzujkHyUkxImNlWVoI";
    const { page } = this.state;
    const apiSearch = this.state.newText;
    const url = `https://api.discogs.com/database/search?artist=${apiSearch}
    &key=${apiKey}&secret=${apiSecret}`
    this.setState({ loading: true });

    axios.get(url)
      .then(res => {
        this.setState({
          albums:page === 1 ? res.data.results : [...this.state.albums, ...res.data.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });

  };

   clearTextInput = () => {
     this._textInput.setNativeProps({ text: '' });
     this.setState({ text: '', albums: [] });
   }
   renderInputButton = () => {
     return <ClearText onPress={this.clearTextInput.bind(this)} />;
   }
  //  handleScroll = () => {
  //   const {currentlyOpenSwipeable} = this.state;
  //
  //   if (currentlyOpenSwipeable) {
  //     currentlyOpenSwipeable.recenter();
  //   }
  // };

   handleRefresh = () => {
     this.setState(
       {
         page: 1,
         seed: this.state.seed + 1,
         refreshing: true
       },
       () => {
         this.searchDiscogs;
       }
     );
   };

   handleLoadMore = () => {
     this.setState(
       {
         page: this.state.page + 1
       },
       () => {
         this.searchDiscogs;
       }
     );
   };

   renderFooter = () => {
     if (!this.state.loading) return null;
     return (
       <View
         style={{
           paddingVertical: 20,
           borderTopWidth: 1,
           borderColor: "#CED0CE"
         }}
       >
         <ActivityIndicator animating size="large" />
       </View>
     );
   };
   _keyExtractor = (item, index) => item.id;


  render() {

    return (
      <View style={styles.container}>

        <View style={styles.inputStyleContainer}>


        <TextInput

          ref={text => this._textInput = text}

          style={styles.inputStyle}

          autoFocus={true}

          type="search"

          value={this.state.newText}

          onChangeText={this.searchDiscogs}

          onChange={(event) => this.setState({ newText: event.nativeEvent.text })}

          placeholder="Artist or Album"

          placeholderTextColor="#D9D9D9"

          selectionColor={'#F42E4A'}

        />

      </View>

      <View style={styles.inputContainer}>

        {this.renderInputButton()}

      </View>
        <FlatList
          data={this.state.albums}
          renderItem={({item}) => (


            <SearchResultItem
             item={item}
             onSwipeStart={() => this.setState({isSwiping: true})}
             onSwipeRelease={() => this.setState({isSwiping: false})}
           />
       )}
          keyExtractor={this._keyExtractor}
          ListFooterComponent={this.renderFooter}
          refreshing={this.state.refreshing}
          onEndReached={this.handleLoadMore}
          onEndReachedThreshold={40}
          style={styles.renderAlbums}
          scrollEnabled={!this.state.isSwiping}
          // backgroundColor={'#1A1A1A'}
          // itemBackgroundColor={'#1A1A1A'}

        />

    </View>
    );
  }
}

const styles = {
  renderAlbums: {
    flex: 1,
    marginTop: -3
  },
  inputContainer: {
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    height: 5,
    marginRight: 10,
    marginBottom: 0,
  },
  container: {
    flex: 1
  },

  inputStyleContainer: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    marginTop: 25,
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: "#ffffff",
    marginBottom: 0
  },
  inputStyle: {
    color: '#fff',
    fontSize: 18,
    lineHeight: 23,
    backgroundColor: '#000',
    justifyContent: 'flex-start',
    flex: 1,
    paddingLeft: 7,
    paddingRight: 7,
    paddingBottom: 0,
    marginBottom: 0
  },

};

const mapStateToProps = (state) => {
    return {
      ...state
    }
}
// for click events so that dispatches can happen
const mapDispatchToProps = (dispatch) => {
    return {
      saveCollectionItem: (item) => {
          dispatch(saveCollectionItem(item))
      },
      saveWantlistItem: (item) => {
          dispatch(saveWantlistItem(item))
      },
      fetchCollection: () => {
          dispatch(fetchCollection())
      },
      fetchWantlist: () => {
          dispatch(fetchWantlist())
      },
    }
  }



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