by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    illuminist
    @illuminist
    @Dkpalea Does your key contain .com? It's going to mess up with lodash's helper function.
    Ryan Poh
    @ryanpoh
    
    var firebaseConfig = {};
    
    const rrfConfig = {
      userProfile: 'users',
      useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
    };
    
    firebase.initializeApp(firebaseConfig);
    firebase.firestore();
    
    const rootReducer = combineReducers({
      auth: authReducer,
      lineChart: lineChartReducer,
      barChart: barChartReducer,
      firestore: firestoreReducer
    });
    
    const initialState = {};
    const store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(firebase, firebaseConfig)
      )
    );
    
    const rrfProps = {
      firebase,
      config: rrfConfig,
      dispatch: store.dispatch,
      createFirestoreInstance
    };
    
    ReactDOM.render(
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <BrowserRouter>
             <App />
          </BrowserRouter>
        </ReactReduxFirebaseProvider>
      </Provider>,
    
      document.getElementById('root')
    );
    Ryan Poh
    @ryanpoh
    
    class Alternative extends React.Component {
    
        const barChartData = {
          labels: barChart.map(obj => obj.month),  //GIVES ERROR HERE
        }
    
       //more code
    }
    
    const mapDispatchToProps = dispatch => { 
      // more code
    };
    
    const mapStateToProps = state => {
      console.log(state);
      return {
        barChart: state.firestore.ordered.barChartDb 
      };
    };
    
    export default compose(
      firestoreConnect([{collection: 'barChartDb'}]),
      connect(mapStateToProps, mapDispatchToProps)
    )(Alternative);
    ERROR=> TypeError: Cannot read property 'map' of undefined
    illuminist
    @illuminist
    Is that a question that wants an answer?
    Ryan Poh
    @ryanpoh
    Hello everyone, I've been trying to resolve this for the past few hours. I'm just trying to read some data from Firestore
    Does anybody see a mistake?
    illuminist
    @illuminist
    Maybe. Where is barChartyou're trying to access from?
    Ryan Poh
    @ryanpoh
    @illuminist Yes, would love some help. Can't seem to figure what's wrong. I followed the docs
    illuminist
    @illuminist
    If I should have guess, you need this.props.barChart
    Ryan Poh
    @ryanpoh
    
    class Alternative extends React.Component {
    
    render() {
         const {barChart } = this.props;
    
        const barChartData = {
          labels: barChart.map(obj => obj.month),
          datasets: [
            {
              label: 'Delay',
              data: barChart.map(obj => obj.delay)
            }
          ]
        };
    
    return(
         <Bar data={barChartData} options={foo} />
    )
    
    }
    
    const mapDispatchToProps = dispatch => { 
      // more code
    };
    
    const mapStateToProps = state => {
      console.log(state);
      return {
        barChart: state.firestore.ordered.barChartDb 
      };
    };
    
    export default compose(
      firestoreConnect([{collection: 'barChartDb'}]),
      connect(mapStateToProps, mapDispatchToProps)
    )(Alternative);
    The react class in more detail looks something like this
    illuminist
    @illuminist
    Well, yes. In render() you should access with this.props.barChart
    Ryan Poh
    @ryanpoh
    @illuminist I tried it. It wasn't the problem.
    because i have already destructure on top
    illuminist
    @illuminist
    I see. Next up, you need to take an account that this.props.barChart might be undefined when it start loading and data isn't available in redux yet
    Ryan Poh
    @ryanpoh
    sorry, i forgot to include that. just edited the code above
    illuminist
    @illuminist
    It will change from undefined to be an actual data after a few render so you also need to make your component handle undefined data too
    Ryan Poh
    @ryanpoh
    will something like barChart: state.firestore.ordered.barChartDb || state.barChart.data work?
    state.barChart.data contains my dummy data I have for testing
    The errors goes away and my page loads now. But still not the data from firestore :(
    illuminist
    @illuminist
    Depends on if your dummy data has exactly same data shape as firestore. If not you may need to handle them differently.
    Ryan Poh
    @ryanpoh
    Yep it has the same shape. Like this[ {}, {}, {} ]
    Which is similar to state.firestore.ordered.fooright?
    illuminist
    @illuminist
    Not quite, state.firestore.ordered will have document id attach to each object also
    And Date object is going to be converted to Firestore.Timestamp
    Are you using redux-devtools?
    It will be easier to inspect with redux-devtools to see if data is loaded
    Ryan Poh
    @ryanpoh
    I see. But in my case I am just extracting strings and numbers.
    {
    month: "June",
    delay: 70
    }
    something like this^
    illuminist
    @illuminist
    It's ok then.
    Could you confirm the data from firestore doesn't arrive in redux?
    Ryan Poh
    @ryanpoh
    Hmm weird. I can't seem to get my dev tool to work
    Screenshot 2020-02-14 at 7.40.12 PM.png
    Screenshot 2020-02-14 at 8.13.30 PM.png
    illuminist
    @illuminist
    Have you configured devtool when creating the store?
    Ryan Poh
    @ryanpoh
    Console: DevTools failed to parse SourceMap
    illuminist
    @illuminist
    I don't think that's related redux-devtools, but from your code, you haven't configure redux store for inspection with redux-devtools
    Elijah Lucian
    @elucian1_gitlab
    hey all: how do i get typescript defs for redux-firestore/src/utils/query ?
    i get: Could not find a declaration file for module 'redux-firestore/src/utils/query'.
    rlagkrdy
    @rlagkrdy

    Hi. I have some problem about firestore.rules.
    In other collection can access resource.data,
    But only one collection can’t access, resource.data return undefined.

    When I test it, before already set mock data.

    I miss something?

    스크린샷 2020-03-06 오전 10.30.24.png
    스크린샷 2020-03-06 오전 10.30.56.png
    rlagkrdy
    @rlagkrdy
    Oh, I found problem in here
    :)
    Scott Prue
    @prescottprue
    @elucian1_gitlab types are at the top level of each library. How are you importing?
    Dustin Palea
    @Dkpalea

    Hey everyone, I hope you're all holding up okay... Does anyone know why a null value is being written over my redux state?

    I'm using a WHERE query in Firestore and when the response contains a document everything works as expected. Here's the response and my state:

    Screen Shot 2020-03-30 at 10.24.51 PM.png
    Screen Shot 2020-03-30 at 10.25.35 PM.png
    But when the query returns no matching documents it overwrites existing data in my store: