Create a dashboard component (from the Counter copy)


Next step is to find any related things to counter and then:

a) rename things from counter to dashboard

b) We will rename the action called COUNTER_INCREMENT to DASHBOARD_INCREMENT (this will be a number of visits to the dashboard during one sessions without refreshing the browser)

c) Create own dashboard component based on 'Counter' view

Lets start. The first we should refresh our variables. Here is an example how to do it with sublime:

animated search for counter word

Also I want to explain more detailed what exactly we should to rename/replace:

We have to copy the directory from src/routes/Dashboard/components/Counter to src/components/Dashboard/ (create our component directory) and name it Dashboard.

Then have to create styles Dashboard.scss and index.js for make more usage our component and rename all the variables, values, and comments related to the counter's route as on the example below:

animated search for counter word

New file (...copied from Counter example - you can click the diffs image to make it larger) :
src/components/Dashboard/Dashboard.js

code1

FYI: For better code diffs quality, please click on it.
New file (copied from Counter example - you can click the diffs image to make it larger):
src/components/Dashboard/Dashboard.scss

code2

FYI: For better code diffs quality, please click on it.
New file (copied from Counter example - you can click the diffs image to make it larger):
src/components/Dashboard/index.js

code3

FYI: For better code diffs quality, please click on it.

Next step is to create a link in the Header component:

Modfiy the file (you can click the diffs image to make it larger):
src/components/Header/Header.js

code4

FYI: For better code diffs quality, please click on it.

Further, we simply need to rename the files and replace all the "counter" matches to the "dashboard" (again):

Renaming and changes in (you can click the diffs image to make it larger):
.../Dashboard/containers/CounterContainer.js → ...ashboard/containers/DashboardContainer.js

code5

Changes in (you can click the diffs image to make it larger):
src/routes/Dashboard/index.js

code6

Renaming and changes in (you can click the diffs image to make it larger):
src/routes/Dashboard/modules/counter.js → src/routes/Dashboard/modules/dashboard.js (github diff tool showed as a new file)

code7

Changes in (you can click the diffs image to make it larger):
src/routes/index.js

code8

Here above you need to modify the routes/index.js so we will add the dashboard route.

After you run the project with:

npm run start

You shall be able to find the below app running:

913_dashboard_version1

As you can find above, there are two different routes with different reducers but with exactly the same feature - the counter has different number on both routes.

Let's improve the dashboard.

All the above screenshots were made on that commit:

Source code of the new dashboard init creation: https://github.com/ReactPoland/reactjs-redux-tutorial/commit/chapter-2

React Poland 2017