part 5b

Author: pablo-maff

src/content/5/en/part5b.md

@@ -121,7 +121,7 @@ const App = () => {
 }
 ```
 
-The <i>App</i> components state now contains the boolean <i>loginVisible</i>, which defines if the login form should be shown to the user or not.
+The <i>App</i> component state now contains the boolean <i>loginVisible</i>, which defines if the login form should be shown to the user or not.
 
 The value of _loginVisible_ is toggled with two buttons. Both buttons have their event handlers defined directly in the component:
 
@@ -284,7 +284,7 @@ React documentation says the [following](https://react.dev/learn/sharing-state-b
 If we think about the state of the forms, so for example the contents of a new note before it has been created, the _App_ component does not need it for anything.
 We could just as well move the state of the forms to the corresponding components.
 
-The component for a note changes like so:
+The component for creating a new note changes like so:
 
 ```js
 import { useState } from 'react'
@@ -322,7 +322,7 @@ export default NoteForm
 
 **NOTE** At the same time, we changed the behavior of the application so that new notes are important by default, i.e. the field <i>important</i> gets the value <i>true</i>.
 
-The <i>newNote</i> state attribute and the event handler responsible for changing it have been moved from the _App_ component to the component responsible for the note form.
+The <i>newNote</i> state variable and the event handler responsible for changing it have been moved from the _App_ component to the component responsible for the note form.
 
 There is only one prop left, the _createNote_ function, which the form calls when a new note is created.
 
@@ -352,8 +352,7 @@ const App = () => {
 
 We could do the same for the log in form, but we'll leave that for an optional exercise.
 
-The application code can be found on [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-5),
-branch <i>part5-5</i>.
+The application code can be found on [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-5), branch <i>part5-5</i>.
 
 ### References to components with ref
 
@@ -382,7 +381,7 @@ const App = () => {
 }
 ```
 
-The [useRef](https://react.dev/reference/react/useRef) hook is used to create a <i>noteFormRef</i> ref, that is assigned to the <i>Togglable</i> component containing the creation note form. The <i>noteFormRef</i> variable acts as a reference to the component. This hook ensures the same reference (ref) that is kept throughout re-renders of the component.
+The [useRef](https://react.dev/reference/react/useRef) hook is used to create a <i>noteFormRef</i> reference, that is assigned to the <i>Togglable</i> component containing the creation note form. The <i>noteFormRef</i> variable acts as a reference to the component. This hook ensures the same reference (ref) that is kept throughout re-renders of the component.
 
 We also make the following changes to the <i>Togglable</i> component:
 
@@ -492,27 +491,27 @@ The number of moving parts increases. At the same time, the likelihood of ending
 
 So we should once more extend our oath:
 
-Full stack development is <i> extremely hard</i>, that is why I will use all the possible means to make it easier
+Full stack development is <i>extremely hard</i>, that is why I will use all the possible means to make it easier
 
 - 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 an eye on 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 progress with small steps
-- <i>when I suspect that there is a bug in the frontend, I make sure that the backend works for sure</i>
-- <i>when I suspect that there is a bug in the backend, I make sure that the frontend works for sure</i>
+- <i>when I suspect that there is a bug in the frontend, I'll make sure that the backend works as expected</i>
+- <i>when I suspect that there is a bug in the backend, I'll make sure that the frontend works as expected</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
-- 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
-- If a test does not pass, I make sure that the tested functionality for sure works in the application
-- 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-get-help-in-discord-telegram) how to ask for help
+- If my code does not work, I will not write more code. Instead, I'll start deleting it until it works or will just return to a state where everything was still working
+- If a test does not pass, I'll make sure that the tested functionality works properly in the application
+- 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-get-help-in-discord-telegram) how to ask for help
 
 </div>
 
 <div class="tasks">
 
 ### Exercises 5.5.-5.11.
 
-#### 5.5 Blog list frontend, step5
+#### 5.5 Blog List Frontend, step 5
 
 Change the form for creating blog posts so that it is only displayed when appropriate. Use functionality similar to what was shown [earlier in this part of the course material](/en/part5/props_children_and_proptypes#displaying-the-login-form-only-when-appropriate). If you wish to do so, you can use the <i>Togglable</i> component defined in part 5.
 
@@ -524,15 +523,15 @@ It expands when button <i>create new blog</i> is clicked
 
 ![browser showing form with create new](../../images/5/13be.png)
 
-The form closes when a new blog is created.
+The form hides again after a new blog is created.
 
-#### 5.6 Blog list frontend, step6
+#### 5.6 Blog List Frontend, step 6
 
 Separate the form for creating a new blog into its own component (if you have not already done so), and move all the states required for creating a new blog to this component.
 
 The component must work like the <i>NoteForm</i> component from the [material](/en/part5/props_children_and_proptypes#state-of-the-forms) of this part.
 
-#### 5.7 Blog list frontend, step7
+#### 5.7 Blog List Frontend, step 7
 
 Let's add a button to each blog, which controls whether all of the details about the blog are shown or not.
 
@@ -568,17 +567,17 @@ const Blog = ({ blog }) => {
 )}
 ```
 
-**NB:** even though the functionality implemented in this part is almost identical to the functionality provided by the <i>Togglable</i> component, the component can not be used directly to achieve the desired behavior. The easiest solution will be to add a state to the blog post that controls the displayed form of the blog post.
+**NB:** Even though the functionality implemented in this part is almost identical to the functionality provided by the <i>Togglable</i> component, it can't be used directly to achieve the desired behavior. The easiest solution would be to add a state to the blog component that controls if the details are being displayed or not.
 
-#### 5.8: Blog list frontend, step8
+#### 5.8: Blog List Frontend, step 8
 
-We notice that something is wrong. When a new blog is created in the app, the name of the user that added the blog is not shown in the details of the blog:
+We notice that something is wrong. When a new blog is created in the app, the name of the user that added the blog is not shown in its details:
 
 ![browser showing missing name underneath like button](../../images/5/59new.png)
 
 When the browser is reloaded, the information of the person is displayed. This is not acceptable, find out where the problem is and make the necessary correction.
 
-#### 5.9: Blog list frontend, step9
+#### 5.9: Blog List Frontend, step 9
 
 Implement the functionality for the like button. Likes are increased by making an HTTP _PUT_ request to the unique address of the blog post in the backend.
 
@@ -615,11 +614,11 @@ The backend has to be updated too to handle the user reference.
 
 **One last warning:** if you notice that you are using async/await and the _then_-method in the same code, it is almost certain that you are doing something wrong. Stick to using one or the other, and never use both at the same time "just in case".
 
-#### 5.10: Blog list frontend, step10
+#### 5.10: Blog List Frontend, step 10
 
-Modify the application to list the blog posts by the number of <i>likes</i>. Sorting the blog posts can be done with the array [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) method.
+Modify the application to sort the blog posts by the number of <i>likes</i>. The Sorting can be done with the array [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) method.
 
-#### 5.11: Blog list frontend, step11
+#### 5.11: Blog List Frontend, step 11
 
 Add a new button for deleting blog posts. Also, implement the logic for deleting blog posts in the frontend.
 
@@ -768,7 +767,7 @@ module.exports = {
 
 NOTE: If you are using Visual Studio Code together with ESLint plugin, you might need to add a workspace setting for it to work. If you are seeing ```Failed to load plugin react: Cannot find module 'eslint-plugin-react'``` additional configuration is needed. Adding the line ```"eslint.workingDirectories": [{ "mode": "auto" }]``` to settings.json in the workspace seems to work. See [here](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807) for more information.
 
-Let's create [.eslintignore](https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories) file with the following contents to the repository root
+Let's create [.eslintignore](https://eslint.org/docs/latest/use/configure/ignore#the-eslintignore-file) file with the following contents to the repository root
 
 ```bash
 node_modules
@@ -817,7 +816,7 @@ You can find the code for our current application in its entirety in the <i>part
 
 ### Exercise 5.12.
 
-#### 5.12: Blog list frontend, step12
+#### 5.12: Blog List Frontend, step 12
 
 Define PropTypes for one of the components of your application, and add ESlint to the project. Define the configuration according to your liking. Fix all of the linter errors.
 

src/content/5/es/part5a.md

@@ -86,8 +86,7 @@ const App = () => {
 export default App
 ```
 
-
-El código de aplicación actual se puede encontrar en [GitHub](https://github.com/fullstack-hy2020/part2-notes/tree/part5-1), en la rama <i>part5-1</i>. Si clonas el repositorio, no olvides ejecutar el comando _npm install_ antes de intentar ejecutar el frontend.
+El código de aplicación actual se puede encontrar en [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-1), en la rama <i>part5-1</i>. Si clonas el repositorio, no olvides ejecutar el comando _npm install_ antes de intentar ejecutar el frontend.
 
 El frontend no mostrara ninguna nota si no se conecta al backend. Puedes iniciar el backend con el comando _npm run dev_ en su directorio de la Parte 4. Esto ejecutara el backend en el puerto 3001. Mientras esté activo, en una ventana diferente del terminal puedes ejecutar el frontend con _npm start_, y ahora veras las notas que están guardadas en tu base de datos MongoDB de la Parte 4.
 
@@ -314,7 +313,7 @@ La solución no es perfecta, pero la dejaremos así por ahora.
 
 Nuestro componente principal <i>App</i> es demasiado grande en este momento. Los cambios que hicimos ahora son una clara señal de que los formularios deben ser refactorizados en sus propios componentes. Sin embargo, lo dejaremos para un ejercicio opcional.
 
-El código de la aplicación actual se puede encontrar en [GitHub](https://github.com/fullstack-hy2020/part2-notes/tree/part5-2), en la rama <i>part5-2</i>.
+El código de la aplicación actual se puede encontrar en [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-2), en la rama <i>part5-2</i>.
 
 ### Creando nuevas notas
 
@@ -515,7 +514,7 @@ o con el comando que vacía el <i>localstorage</i> por completo:
 window.localStorage.clear()
 ```
 
-El código de la aplicación actual se puede encontrar en [GitHub](https://github.com/fullstack-hy2020/part2-notes/tree/part5-3), en la rama <i>part5-3</i>.
+El código de la aplicación actual se puede encontrar en [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-3), en la rama <i>part5-3</i>.
 
 </div>