From 7ca8dfad249c1062ed4cfa6754ecc93aaaf54086 Mon Sep 17 00:00:00 2001 From: Robert Novo Date: Thu, 9 Jan 2020 19:46:23 +0100 Subject: [PATCH] updated readme --- lab2/README.md | 6 +++--- lab2/src/components/App/App.js | 2 +- lab2/src/components/List/List.js | 3 ++- lab3/README.md | 16 +++++++++------- lab3/src/actions/userActions.js | 10 ++++++++-- lab3/src/components/Container/Container.js | 2 +- 6 files changed, 24 insertions(+), 15 deletions(-) diff --git a/lab2/README.md b/lab2/README.md index c5011b0..1bd73c4 100644 --- a/lab2/README.md +++ b/lab2/README.md @@ -1,7 +1,7 @@ # Lab 2 ## Starta applikationen för Lab 2 -Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen. +Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen. ## Uppgift 1. Bekanta dig med hur applikationen är uppbyggt komponentmässigt. Utgå från `App.js`. @@ -9,9 +9,9 @@ Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå se 3. Just nu går det inte att byta bakgrundfärg. Komponenten `App.js` har ett `state` för sidans bakgrundsfärg (`bgColor`). Använd callbacken från `BackgroundColorPicker` för att få färgväljaren att fungera. Hur sätts själva färgen? 4. Skicka in en lista med användare som `prop` till komponenten `List`. Hur hämtas listan med användare? 5. Användarna syns fortfarande inte listade. Använd __React Devtools Extension__ för att verifiera att komponenten `List` har fått in en lista med användare. -6. Rendera ut lista med användare i funktionen `render()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast). +6. Rendera ut lista med användare i funktionen `render()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast). 7. Nu vill vi kunna filtera listan. I `List.js` använader vi komponenten `SearchBar` som tar en callback, `onKeyPressed`. Vad vill vi göra då? Implementera `onKeyPressed()` i `List.js`! -8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en funktion `filterListItemsBySearchTerm()` som gör just detta. Instansiera konstanten `filteredItems` och iterera över denna istället för `this.props.items`. +8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en metod `filterListItemsBySearchTerm()` som gör just detta. Tilldela konstanten `filteredItems` och iterera över denna istället för `this.props.items`. ## Jag har tid över, vad gör jag nu? diff --git a/lab2/src/components/App/App.js b/lab2/src/components/App/App.js index 28aeeb6..d16e4ea 100644 --- a/lab2/src/components/App/App.js +++ b/lab2/src/components/App/App.js @@ -37,7 +37,7 @@ class App extends Component {

- + ); } diff --git a/lab2/src/components/List/List.js b/lab2/src/components/List/List.js index 486e90b..482e491 100644 --- a/lab2/src/components/List/List.js +++ b/lab2/src/components/List/List.js @@ -39,7 +39,8 @@ class List extends Component { {this.props.items.length === 0 ? (
Empty list...
) : (
    { - // TODO: Task 6. Iterate over items and return
  • -tags. + // TODO: Task 6. Map (see react-examples.md if stuck :D) over items and return
  • -tags. + //
  • A list item
    • console.log("ITEMS", this.props.items) }
diff --git a/lab3/README.md b/lab3/README.md index d84da44..e8ee65f 100644 --- a/lab3/README.md +++ b/lab3/README.md @@ -4,17 +4,17 @@ Från projektroten: `$ cd lab3`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen. ## Del 1 - Redux-snurran -1. Ta en till på befintliga komponenter och hur Redux-snurran är implementerad för att välja bakgrund. Ladda ner och använd [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) för detta. -2. Bakgrundsfärgen är satt till `lavender` från början. Hur sätts den? Byt default från `lavender` till `gold`. Ladda om sidan och se så att det fungerar. _Hint: Detta görs i en reducer_ +1. Ta en till på befintliga komponenter och hur Redux-snurran är implementerad för att välja bakgrund. Ladda ner och använd [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) för detta. +2. Bakgrundsfärgen är satt till `lavender` från början via initialState. Byt default från `lavender` till `gold`. Ladda om sidan och se så att det fungerar. _Hint: Detta görs i en reducer_ 3. Användarna visas inte i listan just nu. Börja med att dispatcha ett action när användare har hämtats asynkront i `userActions`. 4. När vi har dispatchat en action måste vi hantera den i våra reducers. Öppna `userReducers.js` och stoppa in resultatet från din nya action i applikationens state. -5. I `Container.js` har vi nu tillgång till applikationens state och dipatches tack vare `connect()`. Vi vill här hämta alla användare när componenten mountas. Implementera detta. -6. Nu när vi har användaran i vår store vill vi kunna läsa dom i komponenten `List.js`. Implementera funktionen `mapStateToProps()` i `List.js`. -7. Nu ska applikationen fungera fullt ut. Eftersom vi läser användare från store behöver vi inte längre skicka in `items` som `prop` när vi använder komponenten `` i `Container.js`. Ta bort den. Applikationen fungerar ändå. +5. I `Container.js` har vi nu tillgång till applikationens state och dipatches tack vare `connect()`. Vi vill här hämta alla användare när componenten mountas. Implementera detta. +6. Nu när vi har användaran i vår store vill vi kunna läsa dom i komponenten `List.js`. Implementera funktionen `mapStateToProps()` i `List.js`. _Hint: Check how mapStateToProps is used in `container.js`_ +7. Nu ska applikationen fungera fullt ut. Eftersom vi läser användare från store behöver vi inte längre skicka in `items` som `prop` när vi använder komponenten `` i `Container.js`. Ta bort den. Applikationen fungerar ändå. ## Del 2 - Egen komponent -Nu är det dags att sätta allt du lärt dig hittills på prov. Gör så långt du hinner. Uppgiften är att du ska skapa en egen komponent och visa detaljerad användarinformation i denna. I `List.js` finns det nu en callback, `onClick`, som kommer att skicka med ett id för användaren som klickades på. I `api.js` finns det en funktion som hämtar användardata basert på ett id. +Nu är det dags att sätta allt du lärt dig hittills på prov. Gör så långt du hinner. Uppgiften är att du ska skapa en egen komponent och visa detaljerad användarinformation i denna. I `List.js` finns det nu en callback, `onClick`, som kommer att skicka med ett id för användaren som klickades på. I `api.js` finns det en funktion som hämtar användardata baserat på ett id. För att lösa uppgiften behöver du: - Skapa en ny komponent `` (eller liknande namn) och använda denna i `Container.js`. @@ -24,4 +24,6 @@ För att lösa uppgiften behöver du: - Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.js` via `connect`. - Läsa in den detaljerade användardatan från applikationens state till din nya komponent. -Lycka till! +##### _Del två finns löst i solutions-branchen om du bara vill se lösningen_ 😇 + +### Lycka till! diff --git a/lab3/src/actions/userActions.js b/lab3/src/actions/userActions.js index 6b2689e..283ff4d 100644 --- a/lab3/src/actions/userActions.js +++ b/lab3/src/actions/userActions.js @@ -4,10 +4,16 @@ export const USERS_RECEIVED = "USERS_RECEIVED"; export const GET_USERS_ERROR = "GET_USERS_ERROR"; export const getAllUsers = () => { + /* + Actions should generally be POJO (Plain JavaScript Object), but getting the users is made + asynchronously. + Thanks to the thunk middleware (declared in store.js) we can handle asynchronous events + in our actions. + */ return dispatch => { - getUsers() + getUsers() // Gets users from our API and returns a promise. .then((users) => { - // TODO: Task 3 - Dispatch async action. getUsers is a function from out api that returns a promise. + // TODO: Task 3 - Dispatch an action of type USERS_RECEIVED and payload: users. }) .catch((e) => { dispatch({ diff --git a/lab3/src/components/Container/Container.js b/lab3/src/components/Container/Container.js index 1bfef30..cd97d6b 100644 --- a/lab3/src/components/Container/Container.js +++ b/lab3/src/components/Container/Container.js @@ -29,7 +29,7 @@ class Container extends Component { } } -// Maps the aplication state directly to component props +// Maps the application state directly to component props const mapStateToProps = (state) => { return { backgroundColor: state.background.bgColor