f
Tehtäviä: blogilistan laajennus
Kurssin seitsemännessä osassa on lukujen React-router ja custom-hookit kahdeksan tehtävän lisäksi 13 tehtävää, joissa jatketaan osissa 4 ja 5 tehtyä Bloglist-sovellusta. Osa seuraavassa olevista tehtävistä on toisistaan riippumattomia "featureita", eli tehtäviä ei tarvitse tehdä järjestyksessä, voit jättää osan aivan hyvin toteuttamatta.
Voit ottaa pohjaksi oman sovelluksesi sijaan myös mallivastauksen koodin.
Useimmat tämän osan tehtävistä vaativat olemassaolevan koodin refaktoroimista. Tämä on tilanne käytännössä aina sovelluksia laajennettaessa, eli vaikka refaktorointi voi olla hankalaa ja ikävääkin, on kyseessä oleellinen taito.
Hyvä neuvo niin refaktorointiin kuin uudenkin koodin kirjoittamiseen on pienissä askelissa eteneminen, koodia ei kannata hajottaa totaalisesti refaktorointia tehdessä pitkäksi aikaa, se on käytännössä varma resepti hermojen menettämiseen.
Tehtävät 7.9.-7.21.
7.9: redux, step1
Siirry käyttämään React-komponenttien tilan sijaan Reduxia sovelluksen tilan hallintaan.
Muuta tässä tehtävässä notifikaatio käyttämään Reduxia.
7.10: redux, step2
Tämä ja seuraava kaksi osaa ovat kohtuullisen työläitä, mutta erittäin opettavaisia.
Kirjautumisen ja uuden blogin luomisen lomakkeiden tilaa voit halutessasi hallita edelleen Reactin tilan avulla.
Siirrä blogien tietojen talletus Reduxiin. Tässä tehtävässä riittää, että sovellus näyttää olemassa olevat blogit ja, että uuden blogien luominen onnistuu.
7.11: redux, step3
Laajenna ratkaisua siten, että blogien "liketys" ja poisto toimivat.
7.12: redux, step4
Siirrä myös kirjautuneen käyttäjän tietojen talletus Reduxiin.
7.13: käyttäjien näkymä
Tee sovellukseen näkymä, joka näyttää kaikkiin käyttäjiin liittyvät perustietot:
7.14: yksittäisen käyttäjän näkymä
Tee sovellukseen yksittäisen käyttäjän näkymä, jolta selviää mm. käyttäjän lisäämät blogit
Näkymään päästään klikkaamalla nimeä kaikkien käyttäjien näkymästä
Huom: törmäät tätä tehtävää tehdessäsi lähes varmasti seuraavaan virheeseen
vika ilmenee jos uudelleenlataat sivun ollessasi yksittäisen käyttäjän sivulla.
Vian syynä on se, että jos mennään suoraan jonkin käyttäjän sivulle, eivät käyttäjien tiedot ole vielä ehtineet palvelimelta React-sovellukseen. Ongelman voi kiertää ehdollisella renderöinnillä:
const User = () => {
const user = ...
if (!user) { return null }
return (
<div>
// ...
</div>
)
}7.15: blogin näkymä
Toteuta sovellukseen oma näkymä yksittäisille blogeille. Näkymä voi näyttää seuraavalta
Näkymään päästään klikkaamalla blogin nimeä kaikkien blogien näkymästä
Tämän tehtävän jälkeen tehtävässä 5.6 toteutettua toiminnallisuutta ei enää tarvita, eli kaikkien blogien näkymässä yksittäisten blogien detaljien ei enää tarvitse avautua klikattaessa.
7.16: navigointi
Tee sovellukseen navigaatiomenu
7.17: kommentit, step1
Tee sovellukseen mahdollisuus blogien kommentointiin:
Kommentit ovat anonyymejä, eli ne eivät liity järjestelmän käyttäjiin.
Tässä tehtävässä riittää, että frontend osaa näyttää blogilla olevat backendin kautta lisätyt kommentit.
Sopiva rajapinta kommentin luomiseen on osoitteeseen api/blogs/:id/comments tapahtuva HTTP POST -pyyntö.
7.18: kommentit, step2
Laajenna sovellusta siten, että kommentointi onnistuu frontendista käsin:
7.19: tyylit, step1
Tee sovelluksesi ulkoasusta tyylikkäämpi jotain kurssilla esiteltyä tapaa käyttäen
7.20: tyylit, step2
Jos käytät tyylien lisäämiseen noin tunnin aikaa, merkkaa myös tämä tehtävä tehdyksi.
7.21: Kurssipalaute
Anna kurssille palautetta weboodissa.
Tämä oli osan viimeinen tehtävä ja on aika pushata koodi githubiin sekä merkata tehdyt tehtävät palautussovellukseen.
