fix exercise numbering

Author: mluukkai

src/content/7/en/part7a.md

@@ -13,60 +13,6 @@ In addition to the exercises in this and the next chapter, there are a series of
 
 ### React Router
 
-This section has been moved to the [part 5](/en/part5/react_router_ui_frameworks). You still may do the below exercises.
-
-</div>
-
-<div class="tasks">
-
-### Exercises 7.1.-7.3.
-
-Let's return to working with anecdotes. Use the redux-free anecdote app found in the repository <https://github.com/fullstack-hy2020/routed-anecdotes> as the starting point for the exercises.
-
-If you clone the project into an existing git repository, remember to <i>delete the git configuration of the cloned application:</i>
-
-```bash
-cd routed-anecdotes   // go first to directory of the cloned repository
-rm -rf .git
-```
-
-The application starts the usual way, but first, you need to install its dependencies:
-
-```bash
-npm install
-npm run dev
-```
-
-#### 7.1: Routed Anecdotes, step 1
-
-Add React Router to the application so that by clicking links in the <i>Menu</i> component the view can be changed.
-
-At the root of the application, meaning the path _/_, show the list of anecdotes:
-
-![browser at baseURL showing anecdotes and footer](../../assets/teht/40.png)
-
-The <i>Footer</i> component should always be visible at the bottom.
-
-The creation of a new anecdote should happen e.g. in the path <i>create</i>:
-
-![browser anecdotes /create shows create form](../../assets/teht/41.png)
-
-#### 7.2: Routed Anecdotes, step 2
-
-Implement a view for showing a single anecdote:
-
-![browser /anecdotes/number showing single anecdote](../../assets/teht/42.png)
-
-Navigating to the page showing the single anecdote is done by clicking the name of that anecdote:
-
-![browser showing previous link that was clicked](../../assets/teht/43.png)
-
-#### 7.3: Routed Anecdotes, step3
-
-The default functionality of the creation form is quite confusing because nothing seems to be happening after creating a new anecdote using the form.
-
-Improve the functionality such that after creating a new anecdote the application transitions automatically to showing the view for all anecdotes <i>and</i> the user is shown a notification informing them of this successful creation for the next five seconds:
-
-![browser anecdotes showing success message for adding anecdote](../../assets/teht/44.png)
+This section has been moved to the [part 5](/en/part5/react_router_ui_frameworks). 
 
 </div>

src/content/7/en/part7b.md

@@ -290,11 +290,11 @@ The internet is starting to fill up with more and more helpful material related
 
 <div class="tasks">
 
-### Exercises 7.4.-7.8.
+### Exercises 7.1.-7.5.
 
 We'll continue with the app from the [exercises](/en/part7/react_router#exercises-7-1-7-3) of the [react router](/en/part7/react_router) chapter.
 
-#### 7.4: Anecdotes and Hooks step 1
+#### 7.1: Anecdotes and Hooks step 1
 
 Simplify the anecdote creation form of your application with the _useField_ custom hook we defined earlier.
 
@@ -337,7 +337,7 @@ const App = () => {
 }
 ```
 
-#### 7.5: Anecdotes and Hooks step 2
+#### 7.2: Anecdotes and Hooks step 2
 
 Add a button to the form that you can use to clear all the input fields:
 
@@ -351,7 +351,7 @@ Depending on your solution, you may see the following warning in your console:
 
 We will return to this warning in the next exercise.
 
-#### 7.6: Anecdotes and Hooks step 3
+#### 7.3: Anecdotes and Hooks step 3
 
 If your solution did not cause a warning to appear in the console, you have already finished this exercise.
 
@@ -388,7 +388,7 @@ One simple fix would be to not use the spread syntax and write all of the forms
 
 If we were to do this, we would lose much of the benefit provided by the <i>useField</i> hook. Instead, come up with a solution that fixes the issue, but is still easy to use with the spread syntax.
 
-#### 7.7: Country hook
+#### 7.4: Country hook
 
 Let's return to exercises [2.18-2.20](/en/part2/adding_styles_to_react_app#exercises-2-18-2-20).
 
@@ -408,7 +408,7 @@ Use the API endpoint [name](https://studies.cs.helsinki.fi/restcountries/) to fe
 
 Note that in this exercise it is essential to use useEffect's [second parameter](https://react.dev/reference/react/useEffect#parameters) array to control when the effect function is executed. See the course [part 2](/en/part2/adding_styles_to_react_app#couple-of-important-remarks) for more info how the second parameter could be used.
 
-#### 7.8: Ultimate Hooks
+#### 7.5: Ultimate Hooks
 
 The code of the application responsible for communicating with the backend of the note application of the previous parts looks like this:
 

src/content/7/en/part7f.md

@@ -19,9 +19,9 @@ One good piece of advice for both refactoring and writing new code is to take <i
 
 <div class="tasks">
 
-### Exercises 7.9.-7.21.
+### Exercises 7.6.-7.18.
 
-#### 7.9: Automatic Code Formatting
+#### 7.6: Automatic Code Formatting
 
 In the previous parts, we used ESLint to ensure that the code follows the defined conventions. [Prettier](https://prettier.io/) is yet another approach for the same. According to the documentation, Prettier is <i>an opinionated code formatter</i>, that is, Prettier not only controls the code style but also formats the code according to the definition.
 
@@ -31,63 +31,63 @@ Take Prettier to use in your app and configure it to work with your editor.
 
 ### State Management: Zustand
 
-<i>There are two alternative versions to choose for exercises 7.10-7.13: you can do the state management of the application either using Zustand or React Query and Context</i>. If you want to maximize your learning, you should do both versions!
+<i>There are two alternative versions to choose for exercises 7.7-7.10: you can do the state management of the application either using Zustand or React Query and Context</i>. If you want to maximize your learning, you should do both versions!
 
 Note: if you completed part 6 using Redux, you can of course use Redux instead of Zustand in this exercise series!
 
-#### 7.10: Zustand, Step 1
+#### 7.7: Zustand, Step 1
 
 Refactor the application to use Zustand to manage the notification data.
 
-#### 7.11: Zustand, Step 2
+#### 7.8: Zustand, Step 2
 
 <i>Note</i> that this and the next two exercises are quite laborious but incredibly educational.
 
 Store the information about blog posts in the Zustand store. In this exercise, it is enough that you can see the blogs in the backend and create a new blog.
 
 You are free to manage the state for logging in and creating new blog posts by using the internal state of React components.
 
-#### 7.12: Zustand, Step 3
+#### 7.9: Zustand, Step 3
 
 Expand your solution so that it is again possible to like and delete a blog.
 
-#### 7.13: Zustand, Step 4
+#### 7.10: Zustand, Step 4
 
 Store the information about the signed-in user in the Zustand store.
 
 ### State Management: React Query and Context
 
-<i>There are two alternative versions to choose for exercises 7.10-7.13: you can do the state management of the application either using Zustand or React Query and Context</i>. If you want to maximize your learning, you should do both versions!
+<i>There are two alternative versions to choose for exercises 7.7-7.10: you can do the state management of the application either using Zustand or React Query and Context</i>. If you want to maximize your learning, you should do both versions!
 
-#### 7.10: React Query and Context step 1
+#### 7.7: React Query and Context step 1
 
 Refactor the app to use the useReducer-hook and context to manage the notification data.
 
-#### 7.11: React Query and Context step 2
+#### 7.8: React Query and Context step 2
 
 Use React Query to manage the state for blog posts. For this exercise, it is sufficient that the application displays existing blogs and that the creation of a new blog is successful.
 
 You are free to manage the state for logging in and creating new blog posts by using the internal state of React components.
 
-#### 7.12: React Query and Context step 3
+#### 7.9: React Query and Context step 3
 
 Expand your solution so that it is again possible to like and delete a blog.
 
-#### 7.13: React Query and Context step 4
+#### 7.10: React Query and Context step 4
 
 Use the useReducer-hook and context to manage the data for the logged in user.
 
 ### Views
 
 The rest of the tasks are common to both the Zustand and React Query versions.
 
-#### 7.14: Users view
+#### 7.11: Users view
 
 Implement a view to the application that displays all of the basic information related to users:
 
 ![browser blogs with users table showing blogs created](../../images/7/41.png)
 
-#### 7.15: Individual User View
+#### 7.12: Individual User View
 
 Implement a view for individual users that displays all of the blog posts added by that user:
 
@@ -122,7 +122,7 @@ const User = () => {
 }
 ```
 
-#### 7.16: Blog View
+#### 7.13: Blog View
 
 Implement a separate view for blog posts. You can model the layout of your view after the following example:
 
@@ -134,13 +134,13 @@ Users should be able to access this view by clicking the name of the blog post i
 
 After you're done with this exercise, the functionality that was implemented in exercise 5.7 is no longer necessary. Clicking a blog post no longer needs to expand the item in the list and display the details of the blog post.
 
-#### 7.17: Navigation
+#### 7.14: Navigation
 
 Implement a navigation menu for the application:
 
 ![browser blogs navigation navigation menu](../../images/7/47.png)
 
-#### 7.18: Comments, step 1
+#### 7.15: Comments, step 1
 
 Implement the functionality for commenting the blog posts:
 
@@ -152,17 +152,17 @@ In this exercise, it is enough for the frontend to only display the comments tha
 
 An appropriate mechanism for adding comments to a blog post would be an HTTP POST request to the <i>api/blogs/:id/comments</i> endpoint.
 
-#### 7.19: Comments, step 2
+#### 7.16: Comments, step 2
 
 Extend your application so that users can add comments to blog posts from the frontend:
 
 ![browser showing comments added via frontend](../../images/7/49.png)
 
-#### 7.20: Styles, step 1
+#### 7.17: Styles, step 1
 
 Improve the appearance of your application by applying one of the methods shown in the course material.
 
-#### 7.21: Styles, step 2
+#### 7.18: Styles, step 2
 
 You can mark this exercise as finished if you use an hour or more for styling your application.
 

src/content/7/fi/osa7a.md

@@ -13,60 +13,6 @@ Tämän ja seuraavan luvun tehtävien lisäksi seitsemäs osa sisältää kertaa
 
 ### React Router
 
-Tämän luvun materiaali siirtynyt [osaan 5](/osa5/react_router_tyylikirjastot). Voit kuitenkin edelleen tehdä aiheeseen liittyvät tehtävät.
-
-</div>
-
-<div class="tasks">
-
-### Tehtävät 7.1.-7.3.
-
-Jatketaan anekdoottien parissa. Ota seuraaviin tehtäviin pohjaksi repositoriossa <https://github.com/fullstack-hy2020/routed-anecdotes> oleva Reduxiton anekdoottisovellus.
-
-Jos kloonaat projektin olemassaolevan Git-repositorion sisälle, <i>poista kloonatun sovelluksen Git-konfiguraatio</i>:
-
-```bash
-cd routed-anecdotes   // eli mene ensin kloonatun repositorion hakemistoon
-rm -rf .git
-```
-
-Sovellus käynnistyy normaaliin tapaan, mutta joudut ensin asentamaan sovelluksen riippuvuudet:
-
-```bash
-npm install
-npm run dev
-```
-
-#### 7.1: routed anecdotes, step1
-
-Lisää sovellukseen React Router siten, että <i>Menu</i>-komponentissa olevia linkkejä klikkailemalla saadaan säädeltyä näytettävää näkymää.
-
-Sovelluksen juuressa eli polulla _/_ näytetään anekdoottien lista:
-
-![](../../assets/teht/40.png)
-
-Pohjalla oleva <i>Footer</i>-komponentti tulee näyttää aina.
-
-Uuden anekdootin luominen tapahtuu esim. polulla <i>create</i>:
-
-![](../../assets/teht/41.png)
-
-#### 7.2: routed anecdotes, step2
-
-Toteuta sovellukseen yksittäisen anekdootin tiedot näyttävä näkymä:
-
-![](../../assets/teht/42.png)
-
-Yksittäisen anekdootin sivulle navigoidaan klikkaamalla anekdootin nimeä:
-
-![](../../assets/teht/43.png)
-
-#### 7.3: routed anecdotes, step3
-
-Luomislomakkeen oletusarvoinen toiminnallisuus on melko hämmentävä, sillä kun lomakkeen avulla luodaan uusi muistiinpano, mitään ei näytä tapahtuvan.
-
-Paranna toiminnallisuutta siten, että luomisen jälkeen siirrytään automaattisesti kaikkien anekdoottien näkymään <i>ja</i> käyttäjälle näytetään viiden sekunnin ajan onnistuneesta lisäyksestä kertova notifikaatio:
-
-![](../../assets/teht/44.png)
+Tämän luvun materiaali siirtynyt [osaan 5](/osa5/react_router_tyylikirjastot). 
 
 </div>