Merge branch 'source' into part6-spanish

Author: pablo-maff

src/components/InfoBanner.js

@@ -45,9 +45,11 @@ const InfoBanner = ({ visible, onHide }) => {
   return (
     <div style={style}>
       <div style={textStyle}>
+        <p style={{ marginBottom: 20}}>
+          The testing libraries used in part 5 were changed 3rd March 2024. In frontend Vite replaced Jest. For End to end-tests Playwright is the new preferred library.
+        </p>  
         <p>
-          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"
+          If you have started with Jest or Cypress, you may continue. The relevant material is still available, for Jest, the link is at the top of part 5c and for the Cypress, the link is at the menu at the left.
         </p>
       </div>
       <div style={buttonDiv}>

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_4_changes';
+const BANNER_TO_KEY = 'part_5_changes';
 
 const Layout = props => {
   const { i18n } = useTranslation();
@@ -23,7 +23,7 @@ const Layout = props => {
   useEffect(() => {
     const key = localStorage.getItem(BANNER_TO_KEY)
     if (!key) {
-      const relevant = window.location.href.includes('osa4') || window.location.href.includes('en/part4')
+      const relevant = window.location.href.includes('osa5') || window.location.href.includes('en/part5')
       setVisible(relevant);
     }
   }, []);

src/content/0/en/part0a.md

@@ -340,8 +340,10 @@ Despite changes *all the submitted exercises remain valid*, and the course can b
 
 Recent major changes
 
-- Parts 1-9 (11th September - 5th October): Create React app replaced with Vite
+- Parts 3-5 (February-March 2024): Libraries used for testing changed
+- Part 10 (February 26, 2024): Library versions updated
 - Part 11 (16th January 2024): Example project dependencies updated
+- Parts 1-2, 6-9 (11th September - 5th October): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 

src/content/0/fi/osa0a.md

@@ -282,8 +282,10 @@ Kurssilla ei ole enää vuosittaisia versiota. Kurssi on siis käynnissä koko a
 Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>, eli voit jatkaa kurssia päivityksistä huolimatta normaaliin tapaan.
 
 Viimeaikaisia isompia muutoksia
-- Osat 1-9 (11.9-5.10.2023): Create React app korvattu Vitellä
+- Osat 3-5 (helmi-maaliskuu 2024): Testaukseen käytetyt kirjastot muutettu
+- Osa 10 (26.2.2024): Kirjastoversiot päivitetty
 - Osa 11 (16.1.2024): Esimerkkiprojektin riippuvuudet päivitetty
+- Osat 1-2, 6-9 (11.9-5.10.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/0/zh/part0a.md

@@ -396,7 +396,7 @@ lang: zh
 ### Interview promise
 
 <!-- Our collaborators, [Houston Inc.](https://houston-inc.com/), [Terveystalo](https://www.terveystalo.com/en/) and [Smartly.io](https://www.smartly.io/), have given the <i>promise of a job interview</i> for everyone who completes the course and the project work with maximum credits (14 + 10). The parts 12 and 13 that were released during 2021 are not required if you finish the project by 15.3.2022.-->
-我们的合作者，[Houston Inc.](https://houston-inc.com/)，[Terveystalo](https://www.terveystalo.com/en/)和[Smartly.io](https://www.smartly.io/)，已经给了每个完成课程和项目工作并获得最高学分（14+10）的人一个工作面试的<i>承诺</i>。如果你在2022年3月15日之前完成项目，那么2021年发布的第12和13章节就不需要了。
+我们的合作者，[Houston Inc.](https://houston-inc.com/)，[Terveystalo](https://www.terveystalo.com/en/)和[Smartly.io](https://www.smartly.io/)，已经给了每个完成课程和项目工作并获得最高学分（14+10）的人一个工作面试的<i> promise </i>。如果你在2022年3月15日之前完成项目，那么2021年发布的第12和13章节就不需要了。
 
 <!-- This means that the student can, if they so choose, sign up for a job interview with a collaborator who has given the promise. The teacher of the course, Matti Luukkainen, will send instructions to the student after the courses have been completed with maximum credits.-->
 这意味着，如果学生选择，报名参加合作方的工作面试。课程的老师Matti Luukkainen会给课程完成后并获得最大的学分的学生发送指引。

src/content/10/en/part10.md

@@ -11,4 +11,13 @@ In this part, we will learn how to build native Android and iOS mobile applicati
 <i>Part updated 17th Feb 2023</i>
 - <i>The last three exercises reordered: the old exercise 10.25 is now the last exercise of the part</i>
 
+<i>Part updated 26th Feb 2024</i>
+- <i>New Node 20 version of rate-repository-api</i>
+- <i>Material updated in parts 10a, 10b and 10c</i>
+
+
+Note: Some updates are not compatible anymore with material before Feb 2024.
+We recommend a fresh start with this new Part 10 material you're reading now. However, if you´re returning to this course after a break, and you want to continue the exercises in your older project, please use [Part 10 material before the upgrade](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/e9784f36de8a0badc28fabde49e33e2959479177/src/content/10/en).
+
+
 </div>

src/content/10/en/part10a.md

@@ -7,11 +7,14 @@ lang: en
 
 <div class="content">
 
+Note: This course material was updated in Feb 2024. Some updates are not compatible anymore with older material.
+We recommend a fresh start with this new Part 10 material. However, if you´re returning to this course after a break, and you want to continue the exercises in your older project, please use [Part 10 material before the upgrade](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/e9784f36de8a0badc28fabde49e33e2959479177/src/content/10/en).
+
 Traditionally, developing native iOS and Android applications has required the developer to use platform-specific programming languages and development environments. For iOS development, this means using Objective C or Swift and for Android development using JVM-based languages such as Java, Scala or Kotlin. Releasing an application for both these platforms technically requires developing two separate applications with different programming languages. This requires lots of development resources.
 
 One of the popular approaches to unify the platform-specific development has been to utilize the browser as the rendering engine. [Cordova](https://cordova.apache.org/) is one of the most popular platforms for building cross-platform applications. It allows for developing multi-platform applications using standard web technologies - HTML5, CSS3, and JavaScript. However, Cordova applications are running within an embedded browser window in the user's device. That is why these applications can not achieve the performance nor the look-and-feel of native applications that utilize actual native user interface components.
 
-[React Native](https://reactnative.dev/) is a framework for developing native Android and iOS applications using JavaScript and React. It provides a set of cross-platform components that behind the scenes utilize the platform's native components. Using React Native allows us to bring all the familiar features of React such as JSX, components, props, state, and hooks into native application development. On top of that, we can utilize many familiar libraries in the React ecosystem such as [React Redux](https://react-redux.js.org/), [Apollo](https://github.com/apollographql/react-apollo), [React Router](https://reacttraining.com/react-router/core/guides/quick-start) and many more.
+[React Native](https://reactnative.dev/) is a framework for developing native Android and iOS applications using JavaScript and React. It provides a set of cross-platform components that behind the scenes utilize the platform's native components. Using React Native allows us to bring all the familiar features of React such as JSX, components, props, state, and hooks into native application development. On top of that, we can utilize many familiar libraries in the React ecosystem such as [React Redux](https://react-redux.js.org/), [Apollo](https://github.com/apollographql/react-apollo), [React Router](https://reactrouter.com/en/main) and many more.
 
 The speed of development and gentle learning curve for developers familiar with React is one of the most important benefits of React Native. Here's a motivational quote from Coinbase's article [Onboarding thousands of users with React Native](https://benbronsteiny.wordpress.com/2020/02/27/onboarding-thousands-of-users-with-react-native/) on the benefits of React Native:
 
@@ -48,15 +51,15 @@ To get started with our application we need to set up our development environmen
 For the development of our application, we will be using [Expo](https://docs.expo.io/versions/latest/). Expo is a platform that eases the setup, development, building, and deployment of React Native applications. Let's get started with Expo by initializing our project with <i>create-expo-app</i>:
 
 ```shell
-npx create-expo-app rate-repository-app --template expo-template-blank@sdk-46
+npx create-expo-app rate-repository-app --template expo-template-blank@sdk-50
 ```
 
-Note, that the <em>@sdk-46</em> sets the project's <i>Expo SDK version to 46</i>, which supports <i>React Native version 0.69</i>. Using other Expo SDK versions might cause you trouble while following this material. Also, Expo has a [few limitations](https://docs.expo.dev/faq/#limitations) when compared to plain React Native CLI. However, these limitations do not affect the application implemented in the material.
+Note, that the <em>@sdk-50</em> sets the project's <i>Expo SDK version to 50</i>, which supports <i>React Native version 0.73</i>. Using other Expo SDK versions might cause you trouble while following this material. Also, Expo has a [few limitations](https://docs.expo.dev/faq/#limitations) when compared to plain React Native CLI. However, these limitations do not affect the application implemented in the material.
 
 Next, let's navigate to the created <i>rate-repository-app</i> directory with the terminal and install a few dependencies we'll be needing soon:
 
 ```shell
-npx expo install react-native-web@~0.18.7 [email protected] @expo/webpack-config@^0.17.0
+npx expo install react-native-web@~0.19.6 [email protected] @expo/metro-runtime@~3.1.1
 ```
 
 Now that our application has been initialized, open the created <i>rate-repository-app</i> directory with an editor such as [Visual Studio Code](https://code.visualstudio.com/). The structure should be more or less the following:
@@ -85,14 +88,9 @@ Let us now run the script *npm start*
 ![metro bundler console output](../../images/10/25new.png)
 
 > <i>If the script fails with error</i>
->
->```bash
->error:03000086:digital envelope routines::initialization
->```
->
-> <i>the problem is most likely your Node version. In case of problems, switch to version *16.19.0*. See eg. [here](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported) for more.</i>
-
-The script starts the [Metro bundler](https://facebook.github.io/metro/) which is a JavaScript bundler for React Native. It can be described as the [Webpack](https://webpack.js.org/) of the React Native ecosystem. In addition to the Metro bundler, the Expo command-line interface should be open in the terminal window. The command-line interface has a useful set of commands for viewing the application logs and starting the application in an emulator or in Expo's mobile application. We will get to emulators and Expo's mobile application soon, but first, let's open our application.
+> <i>the problem is most likely your Node version. In case of problems, switch to version *20*. </i>
+
+The script starts the [Metro bundler](https://facebook.github.io/metro/) which is a JavaScript bundler for React Native.  In addition to the Metro bundler, the Expo command-line interface should be open in the terminal window. The command-line interface has a useful set of commands for viewing the application logs and starting the application in an emulator or in Expo's mobile application. We will get to emulators and Expo's mobile application soon, but first, let's open our application.
 
 Expo command-line interface suggests a few ways to open our application. Let's press the "w" key in the terminal window to open the application in a browser. We should soon see the text defined in the <i>App.js</i> file in a browser window. Open the <i>App.js</i> file with an editor and make a small change to the text in the <em>Text</em> component. After saving the file you should be able to see that the changes you have made in the code are visible in the browser window.
 
@@ -205,19 +203,13 @@ The good old console.log messages appear in the Expo development tools command l
 
 ![GraphQL structure](../../images/10/27new.png)
 
-That might actually be enough in most cases, but sometimes we need more.
-[React Native Debugger](https://docs.expo.io/workflow/debugging/#react-native-debugger) is a tool that offers a similar set of debugging features as the browser's developer tools. Let's get started by installing React Native Debugger with the help of the [installation instructions](https://github.com/jhen0409/react-native-debugger#installation). If you are unsure which installation method to choose, downloading a pre-built binary from the [release page](https://github.com/jhen0409/react-native-debugger/releases) is perhaps the easiest option. On the release page, find the latest release which supports React Native version 0.69 and download the binary suitable for your operating system (for example <i>.dmg</i> file for macOS and <i>.exe</i> file for Windows) under the "Assets" section. Once the installation is complete, start the React Native Debugger, open a new debugger window (shortcuts: <em>Command+T</em> on macOS, <em>Ctrl+T</em> on Linux/Windows) and set the React Native packager port to <em>19000</em>.
-
-**NB:** If the debugger can't connect to the application and you see the error message "Another debugger is already connected", make sure that <i><http://localhost:19000/debugger-ui></i> is not open in some browser tab.
-  
-Next, we need to start our application and connect to the debugger. Start the application by running <em>npm start</em>. Once the application is running, open it with either an emulator or the Expo mobile app. Inside the emulator or the Expo mobile app, open the developer menu by following the [instructions](https://docs.expo.dev/debugging/tools/) in the Expo's documentation. From the developer menu, select <i>Debug remote JS</i> to connect to the debugger. Now, you should be able to see the application's component tree in the debugger:
-
-![React Native Debugger](../../images/10/24.png)
-
-The debugger's <i>Console</i> tab displays the application's logs. Like in the browser's development tools, error messages and messages logged with the <em>console.log</em> method are displayed there. Try adding a message with the <em>console.log</em> method in the <i>App.js</i> file and see that it is displayed in the debugger.
+That might actually be enough in most cases, but sometimes we need more. React Native provides an in-app developer menu which offers several debugging options. Read more about [debugging react native applications](https://reactnative.dev/docs/debugging).
 
-You can use the debugger to inspect the component's state and props as well as <i>change</i> them. Try finding the <em>Text</em> component rendered by the <em>App</em> component using the debugger. You can either use the search or go through the component tree. Once you have found the <em>Text</em> component in the tree, click it, and change the value of the <em>children</em> prop. The change should be automatically visible in the application's preview.
+To inspect the React element tree, props, and state you can install React DevTools. 
 
-For more useful React Native application debugging tools, head out to the Expo's [debugging documentation](https://docs.expo.io/workflow/debugging).
+```shell
+npx react-devtools
+```
+Read here about [React DevTools](https://reactnative.dev/docs/react-devtools). For more useful React Native application debugging tools, also head out to the Expo's [debugging documentation](https://docs.expo.io/workflow/debugging).
 
 </div>