Merge branch 'source' into patch-1

Author: kiliczsh

src/components/InfoBanner.js

@@ -43,7 +43,9 @@ const InfoBanner = ({ visible, onHide }) => {
   return (
     <div style={style}>
       <div stule={textStyle}>
-        Numbering of the exercises in part 2 has changed!
+        <p>Part 6 has new content about React Query, useReducer hook and React context.</p>
+        <p>The new content replaces the chapter on Redux connect (that still remains online for a while).</p>
+        <div style={{ marginTop: 10 }}><i>If you have already completed the part 6, this change has no effect on your progress.</i></div>
       </div>
       <div style={buttonDiv}>
         <button style={buttonStyle} onClick={onHide}>

src/components/PartBanner/PartBanner.js

@@ -12,7 +12,7 @@ const partNameTranslations = {
     'Palvelimen ohjelmointi NodeJS:n Express-kirjastolla',
     'Express-sovellusten testaaminen, käyttäjänhallinta',
     'React-sovelluksen testaaminen',
-    'Sovelluksen tilan hallinta Redux-kirjastolla',
+    'Edistynyt tilan hallinta',
     'React router, custom-hookit, tyylikirjastot ja webpack',
     'GraphQL',
     'TypeScript',
@@ -28,7 +28,7 @@ const partNameTranslations = {
     'Programming a server with NodeJS and Express',
     'Testing Express servers, user administration',
     'Testing React apps',
-    'State management with Redux',
+    'Advanced state management',
     'React router, custom hooks, styling app with CSS and webpack',
     'GraphQL',
     'TypeScript',

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 = 'exercise_numbering_part2_seen';
+const BANNER_TO_KEY = 'part_6_changes';
 
 const Layout = props => {
   const { i18n } = useTranslation();

src/content/2/en/part2d.md

@@ -715,17 +715,17 @@ Full stack development is <i> extremely hard</i>, that is why I will use all the
 
 <h3>Exercises 2.12.-2.15.</h3>
 
-<h4>2.12: Phonebook step7</h4>
+<h4>2.12: The Phonebook step7</h4>
 
 Let's return to our phonebook application.
 
 Currently, the numbers that are added to the phonebook are not saved to a backend server. Fix this situation.
 
-<h4>2.13: Phonebook step8</h4>
+<h4>2.13: The Phonebook step8</h4>
 
 Extract the code that handles the communication with the backend into its own module by following the example shown earlier in this part of the course material.
 
-<h4>2.14: Phonebook step9</h4>
+<h4>2.14: The Phonebook step9</h4>
 
 Make it possible for users to delete entries from the phonebook. The deletion can be done through a dedicated button for each person in the phonebook list. You can confirm the action from the user by using the [window.confirm](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) method:
 
@@ -744,7 +744,7 @@ const delete = (id) => {
 }
 ```
 
-<h4>2.15*: Phonebook step10</h4>
+<h4>2.15*: The Phonebook step10</h4>
 
 <i>Why is there a star in the exercise? See [here](/en/part0/general_info#taking-the-course) for the explanation.</i>
 

src/content/2/es/part2a.md

@@ -401,7 +401,7 @@ import ReactDOM from 'react-dom'
 
 [importan](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) dos módulos, lo que les permite ser utilizados en ese archivo. El módulo <i>React</i> se coloca en una variable llamada _React_ y <i>React-DOM</i> en la variable _ReactDOM_.
 
-Muevamos nuestro componente <i>Note</i> a su propio módulo.
+Movamos nuestro componente <i>Note</i> a su propio módulo.
 
 En aplicaciones más pequeñas, los componentes generalmente se colocan en un directorio llamado <i>components</i>, que a su vez se ubica dentro del directorio <i>src</i>. La convención es nombrar el archivo después del componente.
 

src/content/4/en/part4b.md

@@ -195,7 +195,7 @@ and by extending the Jest definitions in the <i>package.json</i> as follows
 {
  //...
  "jest": {
-   "testEnvironment": "node"
+   "testEnvironment": "node",
    "globalTeardown": "./tests/teardown.js" // highlight-line
  }
 }
@@ -1003,11 +1003,11 @@ Full stack development is <i> extremely hard</i>, that is why I will use all the
 
 - I will have my browser developer console open all the time
 - I will use the network tab of the browser dev tools to ensure that frontend and backend are communicating as I expect
-- I will constantly keep on eye the state of the server to make sure that the data sent there by the fronend is saved there as I expect
-- I will keep on eye on the database: does the backend save data there in the right format
-- I progress with small steps
+- I will constantly keep on eye the state of the server to make sure that the data sent there by the frontend is saved there as I expect
+- I will keep an eye on the database: does the backend save data there in the right format
+- I will progress in small steps
 - <i>I will write lots of _console.log_ statements to make sure I understand how the code and the tests behave and to help pinpoint problems</i>
-- If my code does not work, I will not write more code. Instead, I start deleting the code until it works or just return to a state when everything still was still working
+- If my code does not work, I will not write more code. Instead, I start deleting the code until it works or just return to a state when everything was still working
 - <i>If a test does not pass, I make sure that the tested functionality for sure works in the application</i>
 - When I ask for help in the course Discord or Telegram channel or elsewhere I formulate my questions properly, see [here](https://fullstackopen.com/en/part0/general_info#how-to-ask-help-in-discord-telegam) how to ask for help
 

src/content/6/en/part6.md

@@ -6,6 +6,8 @@ lang: en
 
 <div class="intro">
 
-So far, we have placed the application's state and state logic directly inside React components. When applications grow larger, state management should be moved outside React components. In this part, we will introduce the Redux library, which is currently the most popular solution for managing the state of React applications. 
+So far, we have placed the application's state and state logic directly inside React components. When applications grow larger, state management should be moved outside React components. In this part, we will introduce the Redux library, which is currently the most popular solution for managing the state of React applications.
+
+We'll learn about the lightweight version of Redux directly supported by React, namely the React context and useRedux hook, as well as the React Query library that simplifies the server state management.
 
 </div>