Merge branch 'source' of github.com:fullstack-hy2020/fullstack-hy2020.github.io into source

Author: mluukkai

src/content/0/en/part0b.md

@@ -653,7 +653,7 @@ Learn about the basics of HTML forms by reading Mozilla's tutorial [Your first f
 
 <i>This exercise is not submitted to GitHub, it's enough to just read the tutorial</i>
 
-  <h4>0.4: New note</h4>
+  <h4>0.4: New note diagram</h4>
 
 In chapter [Loading a page containing JavaScript - review](/en/part0/fundamentals_of_web_apps#loading-a-page-containing-java-script-review) the chain of events caused by opening the page <https://studies.cs.helsinki.fi/exampleapp/notes> is depicted as a [sequence diagram](https://www.geeksforgeeks.org/unified-modeling-language-uml-sequence-diagrams/)
 
@@ -692,11 +692,11 @@ The idea of these exercises is to read the text through once more, and to think
 
 **Note** perhaps the best way to do diagrams is the [Mermaid](https://github.com/mermaid-js/mermaid#sequence-diagram-docs---live-editor) syntax that is now implemented in [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) markdown pages! 
 
-  <h4>0.5: Single page app</h4>
+  <h4>0.5: Single page app diagram</h4>
 
 Create a diagram depicting the situation where the user goes to the [single page app](/en/part0/fundamentals_of_web_apps#single-page-app) version of the notes app at <https://studies.cs.helsinki.fi/exampleapp/spa>.
 
-  <h4>0.6: New note</h4>
+  <h4>0.6: New note in Single page app diagram</h4>
 
 Create a diagram depicting the situation where the user creates a new note using the single page version of the app. 
 

src/content/0/es/part0a.md

@@ -41,6 +41,10 @@ Sin embargo, tenga en cuenta que la fecha límite para realizar el examen de cr
 
 Las estadísticas del tiempo de finalización del ejercicio se pueden encontrar en el [sistema de presentación](https://studies.cs.helsinki.fi/stats/courses/fullstackopen).
 
+### Canal de Discord y Telegram para el curso
+
+Puede discutir sobre el curso y temas relacionados en nuestro grupo dedicado en Discord https://study.cs.helsinki.fi/discord/join/fullstack y en Telegram: https://t.me/fullstackcourse. Discord tiene canales fullstack_general y especifico para cada parte (nombres de canal con prefijo fullstack) para discusiones relacionadas con el curso. Tenga en cuenta que el canal chat del grupo no es adecuado para la discusión relacionada con el curso. ¡Únase a la conversación!
+
 ### Calificación
 
 El curso se puede tomar como un curso más corto con un valor de 3 créditos o como el curso completo con un valor de 5-9 créditos, según la cantidad de ejercicios presentados.
@@ -136,7 +140,7 @@ Incluso si no se registra en Open University para el examen, aún puede descarga
 
 Si ya ha realizado el curso como MOOC o como curso universitario, ahora puede ampliar su curso.
 
-#### Ampliación desde Full stack open 2019 o 2020
+#### Ampliación en Full stack
 
 ¡Puede continuar donde lo dejó! Si desea volver a enviar una parte completa, comuníquese con el personal del curso a través de [correo electrónico](mailto:[email protected]) o Telegram [@mluukkai](https://t.me/mluukkai), con su nombre de usuario de Github y las partes que le gustaría eliminar de sus envíos.
 
@@ -150,16 +154,9 @@ La "transferencia de crédito" de las partes completadas anteriormente ocurre en
 
 Si ya aprobó el examen del curso (excluyendo el examen del curso de tres créditos) y ahora está ampliando su curso, no es necesario que vuelva a realizar el examen.
 
-### Cambios desde el año 2019
-
-- Solo hay cambios menores en las partes 0-4.
-- La parte 5d, <i>pruebas de extremo a extremo (end-to-end testing)</i> utilizando la biblioteca [Cypress.io](https://www.cypress.io), es material casi completamente nuevo. El uso de hooks personalizados se ha trasladado de la parte 5 a la parte 7 con contenido nuevo.
-- La Parte 6, que trata sobre Redux, se concentra en la nueva API Redux basada en hooks.
-- El material sobre react-router en la parte 7 también se ha actualizado para usar Hook API. Semantic UI React se ha reemplazado con la biblioteca MaterialUI debido a la falta de mantenimiento.
-- La Parte 8 de GraphQL tiene actualizaciones importantes, especialmente en Apollo Client, que finalmente tiene API estables basadas en Hooks.
-- La parte 9 de TypeScript, la parte 10 de React Native y la parte 11 de CI/CD es completamente nueva.
+### Continuando el curso en el año 2023
 
-El material del curso del año pasado se puede encontrar [aquí](https://fullstackopen-2019.github.io/).
+La versión 2022 del curso finaliza el 1 de marzo de 2023. Al finalizar habrá una descanso de dos semanas por mantenimiento. Durante el descanso, el material permanece en línea y también se pueden enviar ejercicios. Durante el descanso el contenido del curso puede cambiar un poco, no se ha planeado nada demasiado dramático hasta el momento. Todos los ejercicios enviados para la versión 2022 se pueden usar en la edición 2023, por lo que básicamente se puede continuar el curso sin preocuparse demasiado por las diferentes versiones.
 
 ### Envío de ejercicios
 

src/content/10/en/part10d.md

@@ -1113,6 +1113,6 @@ Because styled-components processes the style definitions, it is possible to use
 
 That's it, our application is ready. Good job! We have learned many new concepts during our journey such as setting up our React Native application using Expo, using React Native's core components and adding style to them, communicating with the server, and testing React Native applications. The final piece of the puzzle would be to deploy the application to the Apple App Store and Google Play Store.
 
-Deploying the application is entirely <i>optional</i> and it isn't quite trivial, because you also need to fork and deploy the [rate-repository-api](https://github.com/fullstack-hy2020/rate-repository-api). For the React Native application itself, you first need to create either iOS or Android builds by following Expo's [documentation](https://docs.expo.io/distribution/building-standalone-apps/). Then you can upload these builds to either Apple App Store or Google Play Store. Expo has a [documentation](https://docs.expo.io/distribution/uploading-apps/) for this as well.
+Deploying the application is entirely <i>optional</i> and it isn't quite trivial, because you also need to fork and deploy the [rate-repository-api](https://github.com/fullstack-hy2020/rate-repository-api). For the React Native application itself, you first need to create either iOS or Android builds by following Expo's [documentation](https://docs.expo.io/distribution/building-standalone-apps/). Then you can upload these builds to either Apple App Store or Google Play Store. Expo has [documentation](https://docs.expo.io/distribution/uploading-apps/) for this as well.
 
 </div>

src/content/11/en/part11c.md

@@ -74,7 +74,7 @@ flyctl auth token
 
 You'll need the token soon for your deployment workflow!
 
-Before setting up the deployment pipelinem let us ensure that a manual deployment with the command <i>flyctl deploy</i> works.
+Before setting up the deployment pipeline let us ensure that a manual deployment with the command <i>flyctl deploy</i> works.
 
 You most likely need to do at least two changes. Firstly, define the Node version to use in the file <i>package.json</i> to match one used in your machine. For me it is 16.13.2:
 

src/content/12/en/part12c.md

@@ -218,7 +218,7 @@ $ docker run -p 3000:3000 -v "$(pwd):/usr/src/app/" hello-front-dev
 
 Now we can edit the file <i>src/App.js</i>, and the changes should be hot-loaded to the browser!
 
-Note that it takes some time (for me it took 50 seconds!) for the frontend to started with _npm start_ in the development mode. The frontend is has started when the following appears in the container log:
+Note that it takes some time (for me it took 50 seconds!) for the frontend to get started with _npm start_ in the development mode. The frontend has started when the following appears in the container log:
 
 ```bash
 You can now view hello-frontend in the browser.

src/content/2/es/part2b.md

@@ -244,7 +244,7 @@ const addNote = (event) => {
 }
 ```
 
-Primero creamos un nuevo objeto para la nota llamado <em>noteObject</em> que recibirá su contenido del esatdo del componente <em>newNote</em>. El identificador único <i>id</i> se genera en función del número total de notas. Este método funciona para nuestra aplicación ya que las notas nunca se eliminan. Con la ayuda de la función <em>Math.random()</em>, nuestra nota tiene un 50% de posibilidades de ser marcada como importante.
+Primero creamos un nuevo objeto para la nota llamado <em>noteObject</em> que recibirá su contenido del estado del componente <em>newNote</em>. El identificador único <i>id</i> se genera en función del número total de notas. Este método funciona para nuestra aplicación ya que las notas nunca se eliminan. Con la ayuda de la función <em>Math.random()</em>, nuestra nota tiene un 50% de posibilidades de ser marcada como importante.
 
 La nueva nota se agrega a la lista de notas usando el método de matriz [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat), introducido en la [parte 1](/es/part1/java_script#arrays):
 

src/content/2/fi/osa2b.md

@@ -240,7 +240,7 @@ const addNote = (event) => {
 
 Ensin luodaan uutta muistiinpanoa vastaava olio <em>noteObject</em>, jonka sisältökentän arvo saadaan komponentin tilasta <em>newNote</em>. Yksikäsitteinen tunnus eli <i>id</i> generoidaan kaikkien muistiinpanojen lukumäärän perusteella. Koska muistiinpanoja ei poisteta, menetelmä toimii sovelluksessamme. Komennon <em>Math.random()</em> avulla muistiinpanosta tulee 50 %:n todennäköisyydellä tärkeä.
 
-Uusi muistiinpano lisätään vanhojen joukkoon oikeaoppisesti käyttämällä [osasta 1](/osa1/javascriptia#taulukot) tuttua taulukon metodia [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat):
+Uusi muistiinpano lisätään vanhojen joukkoon oikeaoppisesti käyttämällä [osasta 1](/osa1/java_scriptia#taulukot) tuttua taulukon metodia [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat):
 
 ```js
 setNotes(notes.concat(noteObject))

src/content/8/en/part8a.md

@@ -250,15 +250,15 @@ Let's implement a GraphQL server with today's leading library: [Apollo Server](h
 Create a new npm project with _npm init_ and install the required dependencies.
 
 ```bash
-npm install apollo-server graphql
+npm install @apollo/server graphql
 ```
 
 Also create a `index.js` file in your project's root directory.
 
 The initial code is as follows: 
 
 ```js
-const { ApolloServer, gql } = require('apollo-server')
+const { ApolloServer, gql } = require('@apollo/server')
 
 let persons = [
   {
@@ -717,7 +717,7 @@ The errors from those rules are handled by [the error handling mechanism of Apol
 Let's block adding the same name to the phonebook multiple times: 
 
 ```js
-const { ApolloServer, UserInputError, gql } = require('apollo-server') // highlight-line
+const { ApolloServer, UserInputError, gql } = require('@apollo/server') // highlight-line
 
 // ...
 

src/content/8/en/part8c.md

@@ -55,7 +55,7 @@ We also included a few validations. _required: true_, which makes sure that a va
 We can get the application to mostly work with the following changes: 
 
 ```js
-const { ApolloServer, UserInputError, gql } = require('apollo-server')
+const { ApolloServer, UserInputError, gql } = require('@apollo/server')
 const mongoose = require('mongoose')
 const Person = require('./models/person')
 

src/content/8/en/part8e.md

@@ -142,7 +142,7 @@ Let us start by extracting the schema definition to file
 <i>schema.js</i>
 
 ```js
-const { gql } = require('apollo-server')
+const { gql } = require('@apollo/server')
 
 const typeDefs = gql`
   type User {
@@ -198,7 +198,7 @@ module.exports = typeDefs
 The resolvers definition is moved to the file <i>resolvers.js</i>
 
 ```js
-const { UserInputError, AuthenticationError } = require('apollo-server')
+const { UserInputError, AuthenticationError } = require('@apollo/server')
 const jwt = require('jsonwebtoken')
 const Person = require('./models/person')
 const User = require('./models/user')
@@ -311,15 +311,18 @@ module.exports = resolvers
 Next we will replace Apollo Server with [Apollo Server Express](https://www.apollographql.com/docs/apollo-server/integrations/middleware/#apollo-server-express). Following libraries are installed
 
 ```
-npm install apollo-server-express apollo-server-core express @graphql-tools/schema
+npm install express cors body-parser @graphql-tools/schema
 ```
 and the file <i>index.js</i> changes to:
 
 ```js
-const { ApolloServer } = require('apollo-server-express')
-const { ApolloServerPluginDrainHttpServer } = require('apollo-server-core')
+const { ApolloServer } = require('@apollo/server')
+const { expressMiddleware } = require('@apollo/server/express4')
+const { ApolloServerPluginDrainHttpServer } = require('@apollo/server/plugin/drainHttpServer')
 const { makeExecutableSchema } = require('@graphql-tools/schema')
 const express = require('express')
+const cors = require('cors')
+const bodyParser = require('body-parser')
 const http = require('http')
 
 const jwt = require('jsonwebtoken')
@@ -367,14 +370,27 @@ const start = async () => {
     },
     plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
   })
+  
+  app.use(
+    '/',
+    cors(),
+    bodyParser.json(),
+    expressMiddleware(server, {
+      context: async ({ req }) => {
+        const auth = req ? req.headers.authorization : null
+        if (auth && auth.toLowerCase().startsWith('bearer ')) {
+          const decodedToken = jwt.verify(auth.substring(7), JWT_SECRET)
+          const currentUser = await User.findById(decodedToken.id).populate(
+            'friends'
+          )
+          return { currentUser }
+        }  
+      },
+    }),
+  );
 
   await server.start()
 
-  server.applyMiddleware({
-    app,
-    path: '/',
-  })
-
   const PORT = 4000
 
   httpServer.listen(PORT, () =>