Stage 3: React and JS functionality

[anderswift]

No description provided.

[AygulMalikova]

Unfortunately, your work is rejected without review because when I run the project by npm run dev or launch your deployed version (https://newsexplorer.anderswift.com/) and try to send any requests (i.e. sign-up), all requests are going to localhost instead of the remote server. Please make sure that requests from the remote frontend are sent to deployed API instead of localhost (since I do not have the local version of your backend).

[AygulMalikova]

Summary:

Performance Criteria

• The project functionality is fully implemented according to the current stage's requirements:
  • The preloader is visible and spinning during request execution.
  • All project links and buttons are functioning.
  • All forms are validated on the client side.
  • When clicking on the "Sign up" button in the "Sign up" popup window, a request is sent to the /signup route, provided that all input fields have been filled in correctly. If the request is successful, a message is displayed.
  • When clicking on the "Sign in" button, provided that all input fields have been filled in correctly, a request is sent to the /signin route. If the request is successful, the popup is closed.
  • Both header states function correctly. If the user is not logged in, the header should have the "Sign in" button; and if the user is logged in, there should be no "Sign in" button. The "Saved articles" link, along with a log out button, should appear in its place.
  • Once the search form has been submitted successfully, a block with results appears. If nothing was found, the message "Nothing found" appears.
  • 3 cards are displayed in the results block. Clicking on the "Show more" button will render the next 3 cards.
  • If the user closes the tab and then returns to the site, data is taken from local storage upon mounting the App component.
  • After the user has been authorized, the "Save" icon becomes active in the card block.
  • When clicking the "Save" icon in the card block, a request is made to the /articles route of the Practicum API.
  • When clicking on the active "Save" icon in the card block, a request to delete the card is made. After a successful request, the card is removed from the "Saved articles" page.
  • The "Saved articles" page displays the following: username, number of articles saved, and the keywords by which articles were found.
  • Card blocks in the "Saved articles" page contain the following: the keyword by which the card was found and the trash can icon for deleting the article.
• No errors occur when building or running the project.
• The global state variable currentUser has been created.
• Local storage: the interaction with the JWT token, the results of the search request, and the state variable are set up in the right order.
• Registration and authorization:
  • The /saved-news route is protected using the ProtectedRoute HOC component.
  • When trying to access the /saved-news route, unauthorized users are redirected to /signin with an open authorization popup window.
  • When an unauthorized user clicks on the icon to save an article, the registration popup window opens.
  • After successful authorization, the popup window is closed. A link to "Saved articles" and a logout button with the username appear in the header.
  • The / route is not protected.
  • After a successful onSignOut() handler call, the user is redirected to /.
  • The useHistory() hook is used correctly.
  • The components <Switch />, <Route />, and <Redirect /> are used correctly.
• Components:
  • Hooks are not used inside conditional statements or loops.
  • For class components, effects are described inside the component lifecycle methods.
  • Hooks are called in a component's main function.
  • The Main, NavBar, and SavedNewsHeader components are subscribed to the CurrentUserContext context.
  • The context is embedded in the App component via CurrentUserContext.Provider.
  • The currentUser state variable is created in the App root component. This variable is used as a value of the context provider.
  • The necessary handlers are defined inside the App root component: onRegister(), onLogin(), and onSignOut(). These handlers are passed to the appropriate components: Register.js, Login.js, and NavBar.js.
  • The popup components only contain the submit event handlers. Other handlers, such as handleUpdateUser(), are described inside the App component.
• Asynchronous API requests:
  • Requests can be made through the Fetch API or by using XMLHttpRequest.
  • Third-party libraries (such as axios or jQuery) are not used.
  • API requests are contained in separate files: MainApi.js and NewsApi.js.
  • The chain for processing promises ends with a catch() block.
  • The first then() handler returns res.json.
• Naming:
  • Function and variable names use camelCase.
  • Only nouns are used as variable names.
  • Plural nouns are used for NodeList.
  • Classes are named using nouns that begin with a capital letter.
  • The const keyword is used for variables that won't be changed directly.
    ** In App.js keywordList and keywordFrequency variables might be declared using const**
  • Class names correspond with their content.
  • Names must not include inappropriate or unclear abbreviations.
• No third-party JavaScript libraries are used.
• The date parameters of requests to News API must be calculated automatically (7 days prior to the current date). We recommend converting the from parameter to a timestamp and vice versa.

Best Practices

• The initial state of state variables contain the correct data type.
• The API request for information about the user and for the array of cards is made once during mounting.
• API requests are described inside the App component.
• Arrow functions are not passed as handler functions.
• API error handling:
  • The user receives a message in case of an error.
  • Form fields are blocked while requests are being sent.
• Non-variable values (hard-coded constants) are named in all capital letters and stored in a separate configuration file.

Recommendations

• Semantically correct blocks are used for components.
• No <div> or other unnecessary HTML tags are used for components that consist of single-level blocks.
• The code is clean and easy to understand:
  • The purpose of each listener callback is clear from its name.
  • There are no "magic numbers," i.e. all numeric values are assigned to variables.
    There are some "magic numbers", i.e. in SavedNewsIntro component numeric value 3
  • Сonstants are described in the same scope in which the function is declared. Inside the function, the values of the constants are taken from the closure.

Number of points:

90

Additional comments:

Congratulations, you have successfully completed the last stage of your final project! In your project, there is still an opportunity to improve it, and it would be great if you fix them yourself (see the checklist). I was glad to check your work. I wish you success!