Keikkainfo

Yleistä

Laaditaan web-sovellus jolla voidaan hallita keikkojen tietoja. Sivustolla näytetään keikat sekä lomake jonka avulla voidaan lisätä uusi keikka. Katso mallia notesdemo-harjoituksesta.

Tietokanta

Luo uusi kansio giginfo ja tämän alle kansio jsondb. Luo db.json -tiedosto johon lisäät 1-2 keikkaa. Keikan tietoja olisivat artistin nimi, artistin musiikkityyli/genre, mainoskuva keikasta/artistista, kuvaus, keikan päivä, alkamisaika, linkki artistin kotisivuille sekä keikkapaikan osoite (lähiosoite, postinumero, postitoimipaikka). Luo uusi npm-projekti ja asenna kansioon json-server mukaan.

Tee REST-testi jolla haet kaikki keikat (get_gigs.http) sekä voit lisätä uuden keikan (post_gig.http).

Projekti

Luo uusi React-projekti (gigfront). Lisää alikansio components projektin komponenteille.

Toiminnallisuudet

Keikat

Laadi komponentti Gigs tiedostoon Gigs.jsx jossa näytetään keikat.

Keikan lisääminen

Laadi komponentti GigsForm tiedostoon GigsForm.jsx. Komponentilla on lomake uuden keikan lisäämistä varten.

Suodatus

Lisää toiminnallisuus keikkojen hakemista varten. Käyttäjän tulisi voida voida suodattaa keikkoja seuraavasti:

  • näytä tulevat keikat
  • näytä menneet keikat
  • näytä tietyn musiikkityylin keikat
  • näytä tietyn paikkakunnan (= postitoimipaikka) keikat

Keikan poistaminen

Käyttäjän tulisi voida poistaa keikka tietokannasta.

Edistyneet omainaisuudet

Keikan muokkaaminen

Lisää toiminnallisuus keikan muokkaamista varten.

React Router

Ota käyttöön React Router muuta sovellus käyttämään sitä.