Merge remote-tracking branch 'origin/source' into source

Author: Celqaz

src/content/1/en/part1b.md

@@ -263,7 +263,7 @@ If and <i>when</i> you encounter an error message
 
 > <i>Objects are not valid as a React child</i>
 
-keep in mind the things told [here](/en/part1/introduction_to_react#do-not-rended-object).
+keep in mind the things told [here](/en/part1/introduction_to_react#do-not-render-object).
 
   <h4>1.3: course information step3</h4>
 

src/content/1/en/part1d.md

@@ -1058,7 +1058,7 @@ If and <i>when</i> you encounter an error message
 
 > <i>Objects are not valid as a React child</i>
 
-keep in mind the things told [here](/en/part1/introduction_to_react#do-not-rended-object).
+keep in mind the things told [here](/en/part1/introduction_to_react#do-not-render-object).
 
 <h4> 1.6: unicafe step1</h4>
 

src/content/6/en/part6d.md

@@ -349,11 +349,11 @@ Most React applications need not only a way to temporarily store the served data
 
 <div class="tasks">
 
-### Exercises 6.19.-6.21.
+### Exercises 6.20.-6.22.
 
 Now let's make a new version of the anecdote application that uses the React Query library. Take [this project](https://github.com/fullstack-hy2020/query-anecdotes) as your starting point. The project has a ready-installed JSON Server, the operation of which has been slightly modified. Start the server with <i>npm run server</i>.
 
-#### Exercise 6.19
+#### Exercise 6.20
 
 Implement retrieving anecdotes from the server using React Query.
 
@@ -386,11 +386,11 @@ const result = useQuery(
 )
 ```
 
-#### Exercise 6.20
+#### Exercise 6.21
 
 Implement adding new anecdotes to the server using React Query. The application should render a new anecdote by default. Note that the content of the anecdote must be at least 5 characters long, otherwise the server will reject the POST request. You don't have to worry about error handling now.
 
-#### Exercise 6.21
+#### Exercise 6.22
 
 Implement voting for anecdotes using again the React Query. The application should automatically render the increased number of votes for the voted anecdote
 
@@ -759,9 +759,9 @@ As a technical detail, it should be noted that the helper functions <i>useCounte
 
 <div class="tasks">
 
-### Exercises 6.22.-6.23.
+### Exercises 6.23.-6.24.
 
-#### Exercise 6.22.
+#### Exercise 6.23.
 
 The application has a <i>Notification</i> component for displaying notifications to the user.
 
@@ -771,7 +771,7 @@ Implement the application's notification state management using the useReducer h
 
 The notification is displayed for five seconds.
 
-#### Exercise 6.23.
+#### Exercise 6.24.
 
 As stated in exercise 6.20, the server requires that the content of the anecdote to be added is at least 5 characters long. Now implement error handling for the insertion. In practice, it is sufficient to display a notification to the user in case of a failed POST request:
 

src/content/6/fi/osa6d.md

@@ -345,12 +345,12 @@ React Query on siis kirjasto, joka ylläpitää frontendissä <i>palvelimen tila
 
 <div class="tasks">
 
-### Tehtävät 6.19.-6.21.
+### Tehtävät 6.20.-6.22.
 
 Tehdään nyt anekdoottisovelluksesta uusi, React Query -kirjastoa hyödyntävä versio. Ota lähtökohdaksesi
 [täällä](https://github.com/fullstack-hy2020/query-anecdotes) oleva projekti. Projektissa on valmiina asennettuna JSON Server, jonka toimintaa on hieman modifioitu. Käynnistä palvelin komennolla <i>npm run server</i>.
 
-#### Tehtävä 6.19
+#### Tehtävä 6.20
 
 Toteuta anekdoottien hakeminen palvelimelta React Queryn avulla. 
 
@@ -382,11 +382,11 @@ const result = useQuery(
 )
 ```
 
-#### Tehtävä 6.20
+#### Tehtävä 6.21
 
 Toteuta uusien anekdoottien lisääminen palvelimelle React Queryn avulla. Sovelluksen tulee automaattisesti renderöidä lisätty anekdootti. Huomaa, että anekdootin sisällön pitää olla vähintään 5 merkkiä pitkä, muuten palvelin ei hyväksy POST pyyntöä. Virheiden käsittelystä ei tarvitse nyt välittää.
 
-#### Tehtävä 6.21
+#### Tehtävä 6.22
 
 Toteuta anekdoottien äänestäminen hyödyntäen jälleen React Queryä. Sovelluksen tulee automaattisesti renderöidä äänestetyn anekdootin kasvatettu äänimäärä.
 
@@ -759,9 +759,9 @@ Teknisenä yksityiskohtana todettakoon, että apufunktiot <i>useCounterValue</i>
 
 <div class="tasks">
 
-### Tehtävät 6.22.-6.23.
+### Tehtävät 6.23.-6.24.
 
-#### Tehtävä 6.22.
+#### Tehtävä 6.23.
 
 Sovelluksessa on valmiina komponentti <i>Notification</i> käyttäjälle tehtävien notifikaatioiden näyttämistä varten.
 
@@ -771,7 +771,7 @@ Toteuta sovelluksen notifikaation tilan hallinta useReduce-hookin ja contextin a
 
 Notifikaatio näytetään viiden sekunnin ajan.
 
-#### Tehtävä 6.23.
+#### Tehtävä 6.24.
 
 Kuten tehtävässä 6.20 todettiin, palvelin vaatii, että lisättävän anekdootin sisällön pituus on vähintään 5 merkkiä. Toteuta nyt lisäämisen yhteyteen virheenkäsittely. Käytännössä riittää, että näytät epäonnistuneen lisäyksen yhteydessä käyttäjälle notifikaation:
 

src/content/8/en/part8a.md

@@ -925,11 +925,8 @@ In some cases, it might be beneficial to name the queries. This is the case espe
 Through the exercises, we will implement a GraphQL backend for a small library. 
 Start with [this file](https://github.com/fullstack-hy2020/misc/blob/master/library-backend.js). Remember to _npm init_ and to install dependencies!
 
-Note also that the code does not initially work since the schema definition is not complete.
-
 #### 8.1: The number of books and authors
 
-
 Implement queries _bookCount_ and _authorCount_ which return the number of books and the number of authors. 
 
 The query 

src/content/8/en/part8b.md

@@ -835,7 +835,7 @@ Through these exercises, we'll implement a frontend for the GraphQL library.
 
 Take [this project](https://github.com/fullstack-hy2020/library-frontend) as a start for your application. 
 
-You can implement your application either using the render prop components <i>Query</i> and <i>Mutation</i> of the Apollo Client, or using the hooks provided by Apollo client 3.0. 
+**Note** if you want, you can also use [React router](/en/part7/react_router) to implement the application's navigation!
 
 #### 8.8: Authors view
 

src/content/8/en/part8c.md

@@ -60,6 +60,8 @@ const mongoose = require('mongoose')
 mongoose.set('strictQuery', false)
 const Person = require('./models/person')
 
+require('dotenv').config()
+
 const MONGODB_URI = process.env.MONGODB_URI
 
 console.log('connecting to', MONGODB_URI)
@@ -549,11 +551,11 @@ type Mutation {
 
 Complete the program so that all queries (to get _allBooks_ working with the parameter _author_ and _bookCount_ field of an author object is not required) and mutations work. 
 
-You might find [this](https://docs.mongodb.com/manual/reference/operator/query/in/) useful.
+Regarding the <i>genre</i> parameter of the all books query, the situation is a bit more challenging. The solution is simple, but finding it can be a headache. You might benefit from [this](https://www.mongodb.com/docs/manual/tutorial/query-array-of-documents/).
 
 #### 8.15 Database, part 3
 
-Complete the program so that database validation errors (e.g. book title or author name being too short) are handled sensibly. This means that they cause _UserInputError_ with a suitable error message to be thrown. 
+Complete the program so that database validation errors (e.g. book title or author name being too short) are handled sensibly. This means that they cause [GraphQLError](https://www.apollographql.com/docs/apollo-server/data/errors/#custom-errors) with a suitable error message to be thrown. 
 
 #### 8.16 user and logging in
 

src/content/8/en/part8d.md

@@ -180,7 +180,7 @@ const authLink = setContext((_, { headers }) => {
 // highlight-end
 
 const httpLink = createHttpLink({
-  uri: '/graphql',
+  uri: 'http://localhost:4000',
 })
 
 const client = new ApolloClient({

src/content/8/en/part8e.md

@@ -488,7 +488,7 @@ const start = async () => {
 
   // highlight-start
   const schema = makeExecutableSchema({ typeDefs, resolvers })
-  const serverCleanup = useServer({ schema }, wsServer);
+  const serverCleanup = useServer({ schema }, wsServer)
   // highlight-end
 
   const server = new ApolloServer({
@@ -668,7 +668,7 @@ const authLink = setContext((_, { headers }) => {
   return {
     headers: {
       ...headers,
-      authorization: token ? `bearer ${token}` : null,
+      authorization: token ? `Bearer ${token}` : null,
     }
   }
 })
@@ -707,10 +707,10 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 )
 ```
 
-For this to work, we have to install some dependencies:
+For this to work, we have to install a dependency:
 
 ```bash
-npm install @apollo/client graphql-ws
+npm install graphql-ws 
 ```
 
 The new configuration is due to the fact that the application must have an HTTP connection as well as a WebSocket connection to the GraphQL server.
@@ -1100,7 +1100,7 @@ Start using subscriptions in the client, and subscribe to _bookAdded_. When new
 
 #### 8.25: Subscriptions - client, part 2
 
-Keep the application's view updated when the server notifies about new books. You can test your implementation by opening the app in two browser tabs and adding a new book in one tab. Adding the new book should update the view in both tabs.
+Keep the application's book view updated when the server notifies about new books (you can ignore the author view!). You can test your implementation by opening the app in two browser tabs and adding a new book in one tab. Adding the new book should update the view in both tabs.
 
 #### 8.26: n+1
 

src/content/8/fi/osa8a.md

@@ -923,8 +923,6 @@ Joissain tilanteissa voi myös olla hyötyä nimetä kyselyt. Näin on erityises
 
 Tehtävissä toteutetaan yksinkertaisen kirjaston GraphQL:ää tarjoava backend. Ota sovelluksesi lähtökohdaksi [tämä tiedosto](https://github.com/fullstack-hy2020/misc/blob/master/library-backend.js). Muista _npm init_ ja riippuvuuksien asentaminen!
 
-Huomaa, että koodin käynnistäminen aiheuttaa alussa virheen, sillä skeeman määrittely on puutteellinen.
-
 #### 8.1: kirjojen ja kirjailijoiden määrä
 
 Toteuta kyselyt _bookCount_ ja _authorCount_ jotka palauttavat kirjojen ja kirjailijoiden lukumäärän.