moar zustand

Author: mluukkai

src/content/6/fi/osa6a.md

@@ -764,7 +764,7 @@ Toteutetaan nyt uusi versio ensimmäisen osan anekdoottien äänestyssovellukses
 Jos kloonaat projektin olemassaolevan Git-repositorion sisälle, <i>poista kloonatun sovelluksen Git-konfiguraatio:</i>
 
 ```bash
-cd redux-anecdotes  // mene kloonatun repositorion hakemistoon
+cd zustand-anecdotes  // mene kloonatun repositorion hakemistoon
 rm -rf .git
 ```
 
@@ -777,29 +777,21 @@ npm run dev
 
 Kun teet seuraavat tehtävät, tulisi sovelluksen näyttää seuraavalta:
 
-![Sovellus renderöi anekdootit. Jokaisen anekdootin yhteydessä myös tieto sen saamien äänien määrästä sekä nappi "vote" anekdootin äänestämiselle](../../images/6/3.png)
+![Sovellus renderöi anekdootit. Jokaisen anekdootin yhteydessä myös tieto sen saamien äänien määrästä sekä nappi "vote" anekdootin äänestämiselle](../../images/6/u2.png)
 
 #### 6.2: anekdootit, step1
 
-Toteuta mahdollisuus anekdoottien äänestämiseen. Äänien määrä tulee tallettaa Redux-storeen.
+Toteuta mahdollisuus anekdoottien äänestämiseen. Äänien määrä tulee tallettaa Zustand-storeen.
 
 #### 6.3: anekdootit, step2
 
 Tee sovellukseen mahdollisuus uusien anekdoottien lisäämiselle.
 
 Voit pitää lisäyslomakkeen aiemman esimerkin tapaan [ei-kontrolloituna](/osa6/flux_arkkitehtuuri_ja_zustand#ei-kontrolloitu-lomake).
 
-#### 6.4: anekdootit, step3
+#### 6.5: anekdootit, step3
 
-Huolehdi siitä, että anekdootit pysyvät äänten mukaisessa suuruusjärjestyksessä.
-
-#### 6.5: anekdootit, step4
-
-Eriytä uuden anekdootin luominen omaksi komponentikseen nimeltään <i>AnecdoteForm</i>. Siirrä kaikki anekdootin luomiseen liittyvä logiikka uuteen komponenttiin.
-
-#### 6.6: anekdootit, step5
-
-Eriytä anekdoottilistan näyttäminen omaksi komponentikseen nimeltään <i>AnecdoteList</i>. Siirrä kaikki anekdoottien äänestämiseen liittyvä logiikka uuteen komponenttiin.
+Eriytä uuden anekdootin luominen omaksi komponentikseen nimeltään <i>AnecdoteForm</i> ja Eriytä anekdoottilistan näyttäminen omaksi komponentikseen nimeltään <i>AnecdoteList</i>.
 
 Tämän tehtävän jälkeen komponentin <i>App</i> pitäisi näyttää seuraavalta:
 
@@ -811,12 +803,19 @@ const App = () => {
   return (
     <div>
       <h2>Anecdotes</h2>
-      <AnecdoteForm />
       <AnecdoteList />
+      <AnecdoteForm />
     </div>
   )
 }
 
 export default App
 ```
+
+#### 6.3: anekdootit, step4
+
+Huolehdi siitä, että anekdootit pysyvät äänten mukaisessa suuruusjärjestyksessä.
+
+**HUOM** tässä tehtävässä kannattanee hyödyntää funktiota [Array.toSorted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted), joka ei järjestä alkuperäistä taulukkoa vaan luo siitä järjestetyn kopion. Tämä sen takia, että Zustand-tilaa ei saa muuttaa!
+
 </div>

src/content/6/fi/osa6b.md

@@ -192,11 +192,11 @@ Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://gith
 
 <div class="tasks">
 
-### Tehtävä 6.7
+### Tehtävä 6.6
 
 Jatketaan tehtävässä 6.3 aloitetun Reduxia käyttävän anekdoottisovelluksen parissa.
 
-#### 6.7 anekdootit, step6
+#### 6.6 anekdootit, step5
 
 Toteuta sovellukseen näytettävien anekdoottien filtteröiminen:
 
@@ -225,8 +225,6 @@ const Filter = () => {
 export default Filter
 ```
 
-
-
 </div>
 
 <div class="content">
@@ -640,27 +638,25 @@ Sovelluksen lopullinen koodi on [GitHubissa](https://github.com/fullstack-hy2020
 
 </div>
 
-
 <div class="tasks">
 
-### Tehtävät 6.14.-6.15.
+### Tehtävät 6.7.-6.n.
 
-#### 6.14 anekdootit ja backend, step1
+#### 6.7 anekdootit, step6
 
 Hae sovelluksen käynnistyessä anekdootit JSON Serverillä toteutetusta backendistä. Käytä HTTP-pyynnön tekemiseen Fetch APIa.
 
 Backendin alustavan sisällön saat esim. [täältä](https://github.com/fullstack-hy2020/misc/blob/master/anecdotes.json).
 
-#### 6.15 anekdootit ja backend, step2
+#### 6.8 anekdootit, step7
 
 Muuta uusien anekdoottien luomista siten, että anekdootit talletetaan backendiin. Hyödynnä toteutuksessasi jälleen Fetch APIa.
 
-
-#### 6.18 anekdootit ja backend, step5
+#### 6.9 anekdootit, step8
 
 Äänestäminen ei vielä talleta muutoksia backendiin. Korjaa tilanne Redux Thunk ‑kirjastoa ja Fetch APIa hyödyntäen.
 
-#### 6.12 anekdootit, step10
+#### 6.10 anekdootit, step9
 
 Sovelluksessa on valmiina komponentin <i>Notification</i> runko:
 
@@ -683,18 +679,18 @@ const Notification = () => {
 export default Notification
 ```
 
-Laajenna komponenttia siten, että se renderöi Redux-storeen talletetun viestin. Tee toiminnallisuutta varten oma reduceri ja hyödynnä jälleen Redux Toolkitin <em>createSlice</em>-funktiota.
+Laajenna komponenttia siten, että se renderöi Zustand-storeen talletetun viestin. Tee toiminnallisuutta varten oma reduceri.
 
 Tässä vaiheessa sovelluksen ei vielä tarvitse osata käyttää <i>Notification</i>-komponenttia järkevällä tavalla, vaan riittää että sovellus toimii ja näyttää <i>notificationReducerin</i> alkuarvoksi asettaman viestin.
 
-#### 6.13 anekdootit, step11
+#### 6.11 anekdootit, step11
 
 Laajenna sovellusta siten, että se näyttää <i>Notification</i>-komponentin avulla viiden sekunnin ajan, kun sovelluksessa äänestetään tai luodaan uusia anekdootteja:
 
 ![Äänestyksen yhteydessä näytetään notifikaatio: you voted 'if it hurts, do it more often'](../../images/6/8eb.png)
 
 
-#### 6.19 anekdootit ja backend, step6
+#### 6.12 anekdootit step12
 
 Notifikaatioiden tekeminen on nyt hieman ikävää, sillä se edellyttää kahden actionin tekemistä ja _setTimeout_-funktion käyttöä:
 
@@ -715,4 +711,11 @@ Ensimmäisenä parametrina on renderöitävä teksti ja toisena notifikaation n
 
 Ota paranneltu notifikaatiotapa käyttöön sovelluksessasi.
 
+</div>
+
+<div class="content">
+
+Zustand-storejen testaaminen...
+
+
 </div>