Refactor code for routing and navbar using a dictionary with pageName-viewName
Created by: kousiksatish
This is a technical issue related to code management.
Current snippets of code:
# In App.js
<Route exact path="/links" render={(props) => <Links {...props}/>} />
<Route exact path="/summary" render={(props) => <Summary {...props}/>} />
<Route exact path="/clusters" render={(props) => <Cluster {...props}/>} />
# In navbar.js
<Link
to="/clusters"
onClick={() => {
setView("Clusters");
}}
>
<span {...navLinkProps('/clusters', 0.3)}>
Clusters
</span>
</Link>
<Link
to="/links"
onClick={() => {
setView("Helpful Links");
}}
>
<span {...navLinkProps('/links', 0.4)}>
Helpful Links
</span>
</Link>
As discussed in earlier PR https://github.com/covid19india/covid19india-react/pull/291 , this can be written in following way which will be better:
- Create a dictionary with ViewName, Pathname key value pair to be used across the project, including in App.js and Navbar.js . Loop through this dictionary in both places.
- In Navbar js create a new component for these links and create them by looping through the above mentioned dictionary.
We can reduce redundancy of code this way and also make adding new Views/Links easier.