Tehtävä

Valmistelut

1. Tallenna sovelluspohja ja suorita npm install

2. Käynnistä sovellus: npm start

3. Avaa tietokannan hallitapaneeli http://localhost:5984/_utils/

4. Avaa sovellus (http://localhost:3000) ja kokeile lisätä muutamia ilmoituksia

Tehtävä

1. Lisää ilmoitukselle poista-ruksi

   • Ruksia painettaessa tee tietokantaan fetch-pyyntö, joka poistaa kyseisen ilmoituksen tietokannasta

2. Ilmoitusten järjestäminen

   1. Lisää käyttöliittymällä uudelle ilmoitukselle aikaleima (esimerkiksi Date.now())

   2. Järjestä ilmoitukset aikaleiman mukaan, uusin ylimmäksi. Käytä järjestämisessä Array.prototype.sort:ia, tai react-pouchdb ja PouchDB:n rajapintoja.

3. Erityyppisten ilmoitusten tallennus

   1. Lisää lomakkeelle valinta, josta voi valita ilmoituksen tyypin ("success", "warning", "danger", "info")

   2. Käytä <Alert />-komponentin bsStyle-propertyä näyttämään erityypin ilmoitukset omilla väreillään

Lisätehtäviä

• Estä tyhjän viestin lähetys

• Disabloi lomakkeen kentät ja “Lähetä”-painike, kun tallennus on kesken (estetään vahinkolähetykset ja näytetään käyttäjälle, että toiminnon suoritus on kesken)

• Toteuta ilmoitusten muokkaus

  • Ota käyttöön React Router

  • Ilmoitusta klikattaessa navigoidaan osoitteeseen /message/<id>

  • Käytä <Route />-komponenttia

    • Mikäli ollaan viestin osoitteessa (eikä / tekemässä uutta viestiä), renderöi lomake, johon haetaan Get:lla kyseisen viestin tiedot

  • Lomakkeen lähetys päivittää ilmoituksen tiedot