Merge branch 'source' into patch-1

Author: mluukkai

src/components/InfoBanner.js

@@ -16,7 +16,7 @@ const InfoBanner = ({ visible, onHide }) => {
     flexWrap: 'wrap',
     flexDirection: 'row',
     alignContent: 'space-between',
-    backgroundColor: '#E8E8E8',
+    backgroundColor: 'var(--color-background)',
     zIndex: 2147483647,
   };
 
@@ -38,11 +38,13 @@ const InfoBanner = ({ visible, onHide }) => {
     outline: 'none',
     backgroundColor: 'transparent',
     border: 'none',
+    color: 'var(--color-text)',
+    cursor: 'pointer',
   };
 
   return (
     <div style={style}>
-      <div stule={textStyle}>
+      <div style={textStyle}>
         <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>

src/content/0/en/part0a.md

@@ -43,7 +43,7 @@ Exercise completion time statistics can be found via the [submission system](htt
 
 You can discuss the course and related topics in our dedicated group on Discord <a target='_blank' href='https://study.cs.helsinki.fi/discord/join/fullstack'>https://study.cs.helsinki.fi/discord/join/fullstack</a> and on Telegram: <a target='_blank' href='https://t.me/fullstackcourse'>https://t.me/fullstackcourse</a>. Discord has fullstack_general and part-specific (channel names with fullstack prefix) channels for course-related discussion. Note that Discord's <i>chat channel is not suitable for course-related discussions</i>. Please join the conversation!
 
-### How to ask help in Discord/Telegam
+### How to get help in Discord/Telegram
 
 When you ask for help for a problem in the Discord/Telegram group your question should be as informative and precise as possible. If your question look like this
 

src/content/1/en/part1a.md

@@ -149,7 +149,7 @@ The first rule of frontend web development:
 
 > <i>keep the console open all the time</i>
 
-Let us repeat this together: <i>I promise to keep the console open all the time</i> during this course, and the for the rest of my life when I'm doing web development. 
+Let us repeat this together: <i>I promise to keep the console open all the time</i> during this course, and for the rest of my life when I'm doing web development. 
 
 It is also possible to render dynamic content inside of a component.
 
@@ -343,7 +343,7 @@ I really hope your console was open. If it was not, remember what you promised:
 
 >  <i>I promise to keep the console open all the time during this course, and for the rest of my life when I'm doing web development</i>
 
-Software development is hard. It gets even harder if one is not using all the possible available tools such as the web-console and debug printing with _console.log_. Professionals use both <i>all the time</i> and there is no single reason why a beginner should not adopt the use of these wonderful helper methods that will make the life so much easier.
+Software development is hard. It gets even harder if one is not using all the possible available tools such as the web-console and debug printing with _console.log_. Professionals use both <i>all the time</i> and there is no single reason why a beginner should not adopt the use of these wonderful helper methods that will make life so much easier.
 
 ### Some notes
 
@@ -353,7 +353,7 @@ React has been configured to generate quite clear error messages. Despite this,
 
 ![screenshot of undefined prop error](../../images/1/2a.png)
 
-As we already mentioned, that when programming with React it is possible and worthwhile to write <em>console.log()</em> commands (which print to the console) within your code.
+As we already mentioned, when programming with React, it is possible and worthwhile to write <em>console.log()</em> commands (which print to the console) within your code.
 
 Also, keep in mind that **React component names must be capitalized**. If you try defining a component as follows:
 

src/content/1/en/part1d.md

@@ -1031,7 +1031,7 @@ Programming is hard, that is why I will use all the possible means to make it ea
 - I progress with small steps
 - I will write lots of _console.log_ statements to make sure I understand how the code behaves and to help pinpointing problems
 - 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
-- When I ask for help in the course Discord or Telegram channel or elsewhere I formulate my questions properly, see [here](/en/part0/general_info#how-to-ask-help-in-discord-telegam) how to ask help
+- When I ask for help in the course Discord or Telegram channel or elsewhere I formulate my questions properly, see [here](http://fullstackopen.com/en/part0/general_info#how-to-ask-help-in-discord-telegam) how to ask for help
 
 </div>
 

src/content/1/es/part1b.md

@@ -62,7 +62,7 @@ console.log(t.length) // Se imprime 4
 console.log(t [1]) // -1 es impreso
 
 t.forEach(value => {
-  console.log (valor) // se imprimen los números 1, -1, 3, 5, cada uno en la línea propia
+  console.log (value) // se imprimen los números 1, -1, 3, 5, cada uno en la línea propia
 })
 ```
 

src/content/1/fi/osa1a.md

@@ -635,7 +635,7 @@ const App = () => {
 }
 ```
 
-**VAROITUS** älä yritä tehdä ohjelmassasi kaikkia komponentteja yhtä, sillä se johtaa lähes varmasti siihen että ohjelma ei toimi. Etene pieni askel kerrallaan, tee aluksi esim. komponentti <i>Header</i> ja vasta kun se toimii 100% varmasti, kannattaa edetä seuraavaan komponenttiin.
+**VAROITUS** älä yritä tehdä ohjelmassasi kaikkia komponentteja yhtä aikaa, sillä se johtaa lähes varmasti siihen että ohjelma ei toimi. Etene pieni askel kerrallaan, tee aluksi esim. komponentti <i>Header</i> ja vasta kun se toimii 100% varmasti, kannattaa edetä seuraavaan komponenttiin.
 
 Huolellinen, pienin askelin eteneminen saattaa tuntua hitaalta, mutta se on itseasiassa <i> ylivoimaisesti nopein</i> tapa edetä. Kuuluisa ohjelmistokehittäjä Robert "Uncle Bob" Martin on todennut
 

src/content/1/fi/osa1b.md

@@ -9,7 +9,7 @@ lang: fi
 
 Kurssin aikana on web-sovelluskehityksen rinnalla tavoite ja tarve oppia riittävässä määrin JavaScriptia.
 
-JavaScript on kehittynyt viime vuosina nopeaan tahtiin, ja käytämme kurssilla kielen uusimpien versioiden piirteitä. JavaScript-standardin virallinen nimi on [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript). Tämän hetken tuorein versio on kesäkuussa 2023 julkaistu [ES13](https://www.ecma-international.org/ecma-262/), toiselta nimeltään ECMAScript 2023.
+JavaScript on kehittynyt viime vuosina nopeaan tahtiin, ja käytämme kurssilla kielen uusimpien versioiden piirteitä. JavaScript-standardin virallinen nimi on [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript). Tämän hetken tuorein versio on kesäkuussa 2022 julkaistu [ES13](https://www.ecma-international.org/ecma-262/), toiselta nimeltään ECMAScript 2022.
 
 Selaimet eivät vielä osaa kaikkia JavaScriptin uusimpien versioiden ominaisuuksia. Tämän takia selaimessa suoritetaan useimmiten koodia, joka on käännetty (englanniksi <i>transpiled</i>) uudemmasta JavaScriptin versiosta johonkin vanhempaan, laajemmin tuettuun versioon.
 

src/content/2/fi/osa2b.md

@@ -43,7 +43,7 @@ const App = (props) => {
 }
 ```
 
-Voimme vielä havainnollsitaa tilanteen React Developer Toolsin avulla:
+Voimme vielä havainnollistaa tilanteen React Developer Toolsin avulla:
 
 ![](../../images/2/30.png)
 

src/content/3/en/part3c.md

@@ -644,7 +644,7 @@ In the following exercises, write all Mongoose-specific code into its own module
 
 Change the backend so that new numbers are <i>saved to the database</i>. Verify that your frontend still works after the changes.
 
-At this point, you can choose to simply allow users to create all phonebook entries. At this stage, the phonebook can have multiple entries for a person with the same name. 
+At this stage, you can ignore whether there is already a person in the database with the same name as the person you are adding.
 
 </div>
 

src/content/6/en/part6d.md

@@ -138,7 +138,7 @@ The <i>App</i> component is now slightly simplified
 
 ```js
 import { useQuery } from 'react-query' 
-import { getAnecdotes } from './requests' // highlight-line
+import { getNotes } from './requests' // highlight-line
 
 const App = () => {
   // ...
@@ -153,9 +153,9 @@ The current code for the application is in [GitHub](https://github.com/fullstack
 
 ### Synchronizing data to the server using React Query
 
-Data is already successfully retrieved from the server. Next, I'll make sure that the added and modified data is stored on the server. Let's start by adding new notes.
+Data is already successfully retrieved from the server. Next, we will make sure that the added and modified data is stored on the server. Let's start by adding new notes.
 
-Let's make a function <i>addANote</i> to the file <i>requests.js</i> for saving new notes:
+Let's make a function <i>createNote</i> to the file <i>requests.js</i> for saving new notes:
 
 ```js
 import axios from 'axios'
@@ -332,7 +332,7 @@ const App = () => {
 }
 ```
 
-If you put a console.log statement to the code, you can see form browser console how often React Query causes the application to be re-rendered. The rule of thumb is that rerendering happens at least whenever there is a need for it, i.e. when the state of the query changes. You can read more about it e.g. [here](https://tkdodo.eu/blog/react-query-render-optimizations).
+If you put a console.log statement to the code, you can see from browser console how often React Query causes the application to be re-rendered. The rule of thumb is that rerendering happens at least whenever there is a need for it, i.e. when the state of the query changes. You can read more about it e.g. [here](https://tkdodo.eu/blog/react-query-render-optimizations).
 
 The code for the application is in [GitHub](https://github.com/fullstack-hy2020/query-notes/tree/part6-3) in the branch <i>part6-3</i>.
 
@@ -351,7 +351,7 @@ Most React applications need not only a way to temporarily store the served data
 
 ### Exercises 6.19.-6.21.
 
-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>.
+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
 
@@ -363,7 +363,7 @@ The application should work in such a way that if there are problems communicati
 
 You can find [here](https://react-query-v3.tanstack.com/guides/queries) info how to detect the possible errors.
 
-You can simulate a problem with the server by e.g. turning off the JSON Server. Please note that in a problem situation, the query is first in the state <i>isLoading</i> for a while, because if a requesst fails, React Query tries the request a few times before it states that the request is not successful. You can optionally specify that no retries are made:
+You can simulate a problem with the server by e.g. turning off the JSON Server. Please note that in a problem situation, the query is first in the state <i>isLoading</i> for a while, because if a request fails, React Query tries the request a few times before it states that the request is not successful. You can optionally specify that no retries are made:
 
 
 ```js
@@ -442,13 +442,13 @@ const App = () => {
 export default App
 ```
 
-The hook [useReducer](https://beta.reactjs.org/reference/react/useReducer) provides a mechanism to create a state for an application. The parameter for creating a state is the reduser function that handles state changes, and the initial value of the state:
+The hook [useReducer](https://beta.reactjs.org/reference/react/useReducer) provides a mechanism to create a state for an application. The parameter for creating a state is the reducer function that handles state changes, and the initial value of the state:
 
 ```js
 const [counter, counterDispatch] = useReducer(counterReducer, 0)
 ```
 
-The reduser function that handles state changes is similar to Redux's reducers, i.e. the function gets as parameters the current state and the action that changes the state. The function returns the new state updated based on the type and possible contents of the action:
+The reducer function that handles state changes is similar to Redux's reducers, i.e. the function gets as parameters the current state and the action that changes the state. The function returns the new state updated based on the type and possible contents of the action:
 
 ```js
 const counterReducer = (state, action) => {