Instagram with React Native, Firebase & Redux, Part 4
Instagram, Instagram…
Pssst… If you didn’t read the other chapters, go for them!
We are doing fine. I am fine as well, thank you. I hope you too!
Today we are doing the ‘highlight’ feature! (Yes, I’m always this happy)
A quick recap of what I’ve done here:
- Created a ‘miniPost’ component, to create a more smart literally mini-post, and implemented in the highlights, in the future we will refactor it and use in the profile too.
- We will control our ‘highlight’ in the component state, and only tell redux to create it or fetch them. As you know, redux adds A LOT of complexity to every app it touches, so let’s keep this easy (if we can).
- Created a lot of new components (stateless and stateful) so let’s dive in.
Create a new folder in components called “highlighteds” or “highlights” (to be honest it doesn’t matter but it’s good to keep a pattern).
Inside create 3 files, ‘CreateHighlight.js’, ‘EditHighlight’ and ‘Highlight.js’, with the respective classes for each file.
- CreateHighlight will show us all our posts and will let us select or unselect the posts we want to highlight.
- EditHighlight has the first post we selected as cover, and ask for a name of this ‘highlight’ (can be blank).
- Highlight is the feature itself, a image inside a touchable that will change to the next post everytime we touch and will go back when we reach the end.
AND! We want to display an icon with the cover:
So, create another component (I called it HighlightIcon.js) but this time it will be an stateless component (not a class).
Of course:
- We need 2 types in our ‘types.js’ file:
export const HIGHLIGHT_FETCH_ALL = 'HIGHLIGHT_FETCH_ALL';
export const HIGHLIGHT_CREATE = 'HIGHLIGHT_CREATE';- Our HighlightsActions (I’ll paste here the code and the reducer as well, it’s the same we’ve been doing all the series):
- HighlightReducer.js:
Don’t forget to import our new Components to our router!
We are all set to start, so let’s go to the ‘Profile.js’ file:
We need to fetch our highlights and display the icon:
- import our actions:
import { fetchHighlights } from '../../actions/HighlightActions';- In componentWillMount() add our method (action) to fetch our highLights:
this.props.fetchHighlights();- Add a set in our componentWillReceiveProps:
highlightsArray: nextProps.highlights- these are the two methods to create a new highlight and render the icons:
We are passing to the next screen all our posts by the router inside an object called ‘data’.
Now, we’ll display all our icons inside a View displaying them in a row. Inside this view, we’ll have a scrollView in horizontal to scroll if we have a lot of highlights.
Don’t forget to update the mapStateToProps and connect:
Now we have set the ‘Profile’ component.
Next stop: createHighlight.js
- Here is where our ‘MiniPost’ plays: Create it in our folder ‘Posts’. This component will have by props all the necessary. The methods to include or not posts and if they are selected to display less opacity in them:
- Our CreateHighlight component. It will pass by props all the MiniPosts need to know. If they are selected, if they are included in the future highlight or if they are not:
If we at least selected (1) post, the ‘Next’ button on the header will be available so we can see the picture that will be our cover and input the name. The next component is ‘EditHighlight.js’.
With all of this we’ll have our highlights ready…or not? What if we click the icon? Boom, red. Yikes.
We need our highlight component! The easiest by the way.
Now yes, we are done!
Try this feature and don’t be shy, If somethings doesn’t work or can be improved, tell me!
I told you that we will make today the stories but I found this more interesting, so the next chapter will cover the stories.
Thank you for reading me, as always.
Álvaro.
