Merge branch 'source' into part5-spanish

Author: pablo-maff

src/components/InfoBanner.js

@@ -46,21 +46,9 @@ const InfoBanner = ({ visible, onHide }) => {
     <div style={style}>
       <div style={textStyle}>
         <p>
-          There are some changes in part 9. The <i>Patientor</i> example app
-          structure has been refactored to a less complex form to make it easier
-          to concentrate on learning TypeScript.
+          The testing library used in part 4 was changed 13th February 2024 from Jest to Node:test.
+          If you have started with Jest, you may continue. The relevant material is still available, see the "Legacy: testing with Jest"
         </p>
-        <div style={{ marginTop: 10 }}>
-          If you are just working with the old Patientor, no worries, the old
-          material shall stay online for a couple of weeks.
-        </div>
-
-        <div style={{ marginTop: 10 }}>
-          <i>
-            If you have already completed the part 9, this change has absolutely
-            no effect on your progress.
-          </i>
-        </div>
       </div>
       <div style={buttonDiv}>
         <button style={buttonStyle} onClick={onHide}>

src/components/layout.js

@@ -10,7 +10,7 @@ import Footer from './Footer/Footer';
 import PropTypes from 'prop-types';
 import SkipToContent from './SkipToContent/SkipToContent';
 
-const BANNER_TO_KEY = 'part_9_changes';
+const BANNER_TO_KEY = 'part_4_changes';
 
 const Layout = props => {
   const { i18n } = useTranslation();
@@ -23,7 +23,8 @@ const Layout = props => {
   useEffect(() => {
     const key = localStorage.getItem(BANNER_TO_KEY)
     if (!key) {
-      setVisible(true);
+      const relevant = window.location.href.includes('osa4') || window.location.href.includes('en/part4')
+      setVisible(relevant);
     }
   }, []);
 
@@ -38,7 +39,7 @@ const Layout = props => {
 
       <Header lang={siteLanguage} />
 
-      <InfoBanner onHide={() => hideNote()} visible={false} />
+      <InfoBanner onHide={() => hideNote()} visible={visible} />
 
       <main id="main-content">{children}</main>
 

src/content/13/en/part13a.md

@@ -112,7 +112,7 @@ We can use the _heroku config_ command to get the <i>connect string</i>, which i
 ```bash
 heroku config -a <app-name>
 === cryptic-everglades-76708 Config Vars
-DATABASE_URL: postgres://<username>:<password>@<host-of-postgres-addon>:5432/<db-name>
+DATABASE_URL: postgres://<username>:thepasswordishere@<host-of-postgres-addon>:5432/<db-name>
 ```
 
 The database can be accessed by running _psql_ command on the Heroku server as follows (note that the command parameters depend on the connection url of the Heroku database):
@@ -317,7 +317,7 @@ If Heroku is used, the connect string can be seen by using the command _heroku c
 
 ```bash
 $ cat .env
-DATABASE_URL=postgres://<username>:<password>@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
+DATABASE_URL=postgres://<username>:thepasswordishere@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
 ```
 
 When using Fly.io, the local connection to the database should first be enabled by [tunneling](https://fly.io/docs/reference/postgres/#connecting-to-postgres-from-outside-fly) 
@@ -339,7 +339,7 @@ The Fly.io connect-string is of the form
 
 ```bash
 $ cat .env
-DATABASE_URL=postgres://postgres:<password>@127.0.0.1:5432/postgres
+DATABASE_URL=postgres://postgres:thepasswordishere@127.0.0.1:5432/postgres
 ```
 
 Password was shown when the database was created, so hopefully you have not lost it!

src/content/13/es/part13a.md

@@ -81,7 +81,7 @@ heroku create
 heroku addons:create heroku-postgresql:hobby-dev -a <app-name>
 heroku config -a <app-name>
 === cryptic-everglades-76708 Config Vars
-DATABASE_URL: postgres://<username>:<password>@<host-of-postgres-addon>:5432/<db-name>
+DATABASE_URL: postgres://<username>:thepasswordishere@<host-of-postgres-addon>:5432/<db-name>
 ```
 
 Particularmente cuando se utiliza una base de datos relacional, también es esencial acceder a la base de datos directamente. Hay muchas maneras de hacer esto, hay varias interfaces gráficas de usuario diferentes, como [pgAdmin](https://www.pgadmin.org/). Sin embargo, utilizaremos la herramienta de línea de comandos de Postgres [psql](https://www.postgresql.org/docs/current/app-psql.html).
@@ -236,7 +236,7 @@ La <i>cadena de conexión</i> de la base de datos, que es revelada por el comand
 
 ```bash
 $ cat .env
-DATABASE_URL=postgres://<username>:<password>@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
+DATABASE_URL=postgres://<username>:thepasswordishere@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
 ```
 
 Probemos una conexión exitosa:

src/content/13/fi/osa13a.md

@@ -108,7 +108,7 @@ heroku create
 heroku addons:create heroku-postgresql:hobby-dev
 heroku config
 === cryptic-everglades-76708 Config Vars
-DATABASE_URL: postgres://<username>:<password>@ec2-44-199-83-229.compute-1.amazonaws.com:5432/<db-name>
+DATABASE_URL: postgres://<username>:thepasswordishere@ec2-44-199-83-229.compute-1.amazonaws.com:5432/<db-name>
 ```
 
 Tietokantaan saadaan psql-konsoliyhteys suorittamalla _psql_ Herokun palvelimella seuraavasti (huomaa, että komennon parametrit riippuvat Heroku-sovelluksen connect urlista):
@@ -308,7 +308,7 @@ Herokua käyttäessäsi saat connect stringin selville komennolla _heroku config
 
 ```bash
 $ cat .env
-DATABASE_URL=postgres://<username>:<password>@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
+DATABASE_URL=postgres://<username>:thepasswordishere@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
 ```
 
 Fly.io:a käyttäessä paikallinen tietokantayhteys taytyy ensin tehdä mahdolliseksi [tunneloimalla](https://fly.io/docs/reference/postgres/#connecting-to-postgres-from-outside-fly) paikallisen koneen portti 5432 Fly.io:n tietokannan porttiin komennolla
@@ -329,7 +329,7 @@ Fly.io:n connect-string on seuraavaa muotoa:
 
 ```bash
 $ cat .env
-DATABASE_URL=postgres://postgres:<password>@localhost:5432/postgres
+DATABASE_URL=postgres://postgres:thepasswordishere@localhost:5432/postgres
 ```
 
 Salasana on se, jonka on otettu talteen tietokantaa luodessa.

src/content/13/zh/part13a.md

@@ -97,7 +97,7 @@ heroku create
 heroku addons:create heroku-postgresql:hobby-dev -a <app-name>
 heroku config -a <app-name>
 === cryptic-everglades-76708 Config Vars
-DATABASE_URL: postgres://<username>:<password>@<host-of-postgres-addon>:5432/<db-name>
+DATABASE_URL: postgres://<username>:thepasswordishere@<host-of-postgres-addon>:5432/<db-name>
 ```
 
 <!-- Particularly when using a relational database, it is essential to access the database directly as well. There are many ways to do this, there are several different graphical user interfaces, such as [pgAdmin](https://www.pgadmin.org/). However, we will be using Postgres [psql](https://www.postgresql.org/docs/current/app-psql.html) command-line tool.-->
@@ -262,7 +262,7 @@ The database <i>connect string</i>, which is revealed by the _heroku config_ com
 
 ```bash
 $ cat .env
-DATABASE_URL=postgres://<username>:<password>@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
+DATABASE_URL=postgres://<username>:thepasswordishere@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
 ```
 
 Let's test for a successful connection:

src/content/3/en/part3.md

@@ -8,7 +8,7 @@ lang: en
 
 In this part our focus shifts towards the backend, that is, towards implementing functionality on the server side of the stack. We will implement a simple REST API in Node.js by using the Express library, and the application's data will be stored in a MongoDB database. At the end of this part, we will deploy our application to the internet.
 
-<i>Part updated 14th August 2023</i>
-- <i>Create React App replaced with Vite</i>
+<i>Part updated 9th February 2024</i>
+- <i>No major changes</i>
 
 </div>

src/content/3/en/part3a.md

@@ -93,7 +93,7 @@ echo "Error: no test specified" && exit 1
 
 ### Simple web server
 
-Let's change the application into a web server by editing the _index.js_ file as follow:
+Let's change the application into a web server by editing the _index.js_ file as follows:
 
 ```js
 const http = require('http')
@@ -120,7 +120,7 @@ We can open our humble application in the browser by visiting the address <http:
 
 The server works the same way regardless of the latter part of the URL. Also the address <http://localhost:3001/foo/bar> will display the same content.
 
-**NB** if port 3001 is already in use by some other application, then starting the server will result in the following error message:
+**NB** If port 3001 is already in use by some other application, then starting the server will result in the following error message:
 
 ```bash
 ➜  hello npm start
@@ -138,7 +138,7 @@ Error: listen EADDRINUSE :::3001
     at listenInCluster (net.js:1378:12)
 ```
 
-You have two options. Either shut down the application using port 3001 (the json-server in the last part of the material was using port 3001), or use a different port for this application.
+You have two options. Either shut down the application using port 3001 (the JSON Server in the last part of the material was using port 3001), or use a different port for this application.
 
 Let's take a closer look at the first line of the code:
 
@@ -154,7 +154,7 @@ import http from 'http'
 
 These days, code that runs in the browser uses ES6 modules. Modules are defined with an [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) and taken into use with an [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
 
-However, Node.js uses so-called [CommonJS](https://en.wikipedia.org/wiki/CommonJS) modules. The reason for this is that the Node ecosystem needed modules long before JavaScript supported them in the language specification. Node supports now also the use of ES6 modules, but since the support is not quite perfect yet, we'll stick to CommonJS modules.
+Node.js uses by default so-called [CommonJS](https://en.wikipedia.org/wiki/CommonJS) modules. The reason for this is that the Node ecosystem needed modules long before JavaScript supported them in the language specification. Currently, Node also supports the use of ES6 modules, but since the support is not quite perfect yet, we'll stick to CommonJS modules.
 
 CommonJS modules function almost exactly like ES6 modules, at least as far as our needs in this course are concerned.
 
@@ -251,7 +251,7 @@ The source code for the dependency is installed in the <i>node\_modules</i> dire
 
 These are the dependencies of the express library and the dependencies of all of its dependencies, and so forth. These are called the [transitive dependencies](https://lexi-lambda.github.io/blog/2016/08/24/understanding-the-npm-dependency-model/) of our project.
 
-The version 4.18.2 of express was installed in our project. What does the caret in front of the version number in <i>package.json</i> mean?
+Version 4.18.2 of Express was installed in our project. What does the caret in front of the version number in <i>package.json</i> mean?
 
 ```json
 "express": "^4.18.2"
@@ -273,7 +273,7 @@ Likewise, if we start working on the project on another computer, we can install
 npm install
 ```
 
-If the <i>major</i> number of a dependency does not change, then the newer versions should be [backwards compatible](https://en.wikipedia.org/wiki/Backward_compatibility). This means that if our application happened to use version 4.99.175 of express in the future, then all the code implemented in this part would still have to work without making changes to the code. In contrast, the future 5.0.0 version of express [may contain](https://expressjs.com/en/guide/migrating-5.html) changes that would cause our application to no longer work.
+If the <i>major</i> number of a dependency does not change, then the newer versions should be [backwards compatible](https://en.wikipedia.org/wiki/Backward_compatibility). This means that if our application happened to use version 4.99.175 of Express in the future, then all the code implemented in this part would still have to work without making changes to the code. In contrast, the future 5.0.0 version of Express [may contain](https://expressjs.com/en/guide/migrating-5.html) changes that would cause our application to no longer work.
 
 ### Web and express
 
@@ -379,7 +379,7 @@ The contents of <i>package.json</i> have also changed:
     "express": "^4.18.2"
   },
   "devDependencies": {
-    "nodemon": "^2.0.20"
+    "nodemon": "^3.0.3"
   }
 }
 ```
@@ -603,8 +603,8 @@ Many tools exist for making the testing of backends easier. One of these is a co
 Let's install the Postman desktop client [from here](https://www.postman.com/downloads/)  and try it out:
 
 ![postman screenshot on api/notes/2](../../images/3/11x.png)
-NB: Postman is also available on VS Code which can be dowloaded from the Extension tab on the left -> search for Postman -> First result (Verified Publisher) -> Install
-You will then see an extra icon added on the activity bar below the extensions tab. Once you login, you can follow from the steps below 
+NB: Postman is also available on VS Code which can be downloaded from the Extension tab on the left -> search for Postman -> First result (Verified Publisher) -> Install
+You will then see an extra icon added on the activity bar below the extensions tab. Once you log in, you can follow the steps below 
 
 Using Postman is quite easy in this situation. It's enough to define the URL and then select the correct request type (DELETE).
 
@@ -672,9 +672,9 @@ The application prints the data that we sent in the request to the console:
 
 **NB** <i>Keep the terminal running the application visible at all times</i> when you are working on the backend. Thanks to Nodemon any changes we make to the code will restart the application. If you pay attention to the console, you will immediately be able to pick up on errors that occur in the application:
 
-![nodemon error as typing requre not defined](../../images/3/16.png)
+![nodemon error as typing requre not defined](../../images/3/16e.png)
 
-Similarly, it is useful to check the console for making sure that the backend behaves as we expect it to in different situations, like when we send data with an HTTP POST request. Naturally, it's a good idea to add lots of <em>console.log</em> commands to the code while the application is still being developed.
+Similarly, it is useful to check the console to make sure that the backend behaves as we expect it to in different situations, like when we send data with an HTTP POST request. Naturally, it's a good idea to add lots of <em>console.log</em> commands to the code while the application is still being developed.
 
 A potential cause for issues is an incorrectly set <i>Content-Type</i> header in requests. This can happen with Postman if the type of body is not defined correctly: