Connecting List to the store to get the receipts and tags

src/components/Receipt/ReceiptList/List.js

@@ -65,14 +65,14 @@ export class List extends React.Component {
 	}
 
 	getTagName = (tagId) => { 
-		if(this.props.tags)
+		if(!(this.props.tags === undefined || this.props.tags.length == 0))
 			return this.props.tags[tagId - 1].category 
 		else
 			return 'carregando...'
 	}
 
 	getTagColor = (tagId) => { 
-		if(this.props.tags)
+		if(!(this.props.tags === undefined || this.props.tags.length == 0))
 			return this.props.tags[tagId - 1].color 
 		else
 			return '#424242'
@@ -93,9 +93,9 @@ export class List extends React.Component {
 }
 export const mapStateToProps = state => {
 	return {
-		tags: state.tags
+		tags: state.tags,
+		receipts: state.receipts
 	}
 }
 
 export default connect(mapStateToProps)(List)
-

src/components/Receipt/ReceiptList/ReceiptList.js

@@ -10,46 +10,42 @@ import getAllTags from '../../../services/getAllTags'
 const smallDevice = window.matchMedia('(max-width: 800px)').matches
 export class ReceiptList extends Component {
     state = {  
-        loaded: false,
+        receiptsLoaded: false,
+        tagsLoaded: false,
     }
     componentDidMount() {
-        this.fetchReceipts()
         this.fetchTags()
+        this.fetchReceipts()
     }
     render() {
         return (
             <div >
                 <Navbar/>
-                { this.state.loaded && <List    receipts={this.props.receipts} 
-                                                onGetAllReceipts={this.fetchReceipts}
-                                                isSmall={smallDevice} /> }
+                { this.state.receiptsLoaded && <List    onGetAllReceipts={this.fetchReceipts}
+                                                        isSmall={smallDevice}/>}
                 <MenuButton /> 
             </div>
         )
     }
 
     fetchReceipts = async() => {
         const receipts = await getAllReceipts()
-        this.setState({ loaded: true })
         this.props.onReceiptsAdded(receipts)
+        this.setState({ receiptsLoaded: true })
     }
 
     fetchTags = async() => {
-		const tags = await getAllTags()
-        this.setState({ tags })
-		this.props.onTagsAdded(tags)
+        const tags = await getAllTags()
+        this.props.onTagsAdded(tags)
+        this.setState({ tagsLoaded: true })
 	}
 }
-export const mapStateToProps = state => {
-    return {
-        receipts: state.receipts
-    }
-}
+
 export const mapDispatchToProps = dispatch => {
     return {
         onReceiptsAdded: (receipts) => dispatch({type: actionTypes.ADD_RECEIPTS, receipts: receipts}),
         onTagsAdded: (tags) => dispatch({ type: actionTypes.ADD_TAGS, tags: tags }) 
     }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ReceiptList)
+export default connect(null, mapDispatchToProps)(ReceiptList)

src/store/reducers/reducer.js

@@ -4,7 +4,7 @@ const initialState = {
   filePDF: null,
   fileExtracted: null,
   receipts: [],
-  tags: null
+  tags: []
 }
 
 const reducer = (state = initialState, action) => {