Fenja-Schedula Front-End Build V1.0.0 🧱 #14
Conversation
Github actions and linters setup for React and Redux
Mlestone: Implement user authentication
Mileston: Add file structures
Styled default project layout
…to details_page
Mobile navbar
There was a problem hiding this comment.
Hi,
Good job so far!
There are some issues that you still need to work on to prepare your project for the final evaluation, but you are almost there!
To highlight:
- Nice code organization ✔️
- Good readme ✔️
- Nice frontend ✔️
You are really close to finishing the Microverse program!! Keep it up! 👍👍👍
After implementing the requested changes, please submit another review request. ♻️
Check the comments under the review.
Cheers and Happy coding!👏👏👏
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the previous reviews unless it is requested otherwise.
| @@ -0,0 +1,30 @@ | |||
| @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); | |||
There was a problem hiding this comment.
- In the desktop home page, the items overlap each other and it's not possible to differentiate among each of them (this is showing 2 items):
Same happens in the mobile view.
Kindly, touch up your styling so the items display correctly.
| import DeleteItems from './components/deleteItems'; | ||
| import './stylesheets/App.css'; | ||
|
|
||
| function App() { |
There was a problem hiding this comment.
- When I visit "reservations" or "delete reservations" the frontend goes into an infinite loop making about 50 requests to the server each second:
The problem gets solved when you visit "home" or reload the page.
Kindly, fix this issue so the server gets requested once.
tip: This is normally because of a useEffect hook that has met an edge case.
| import DeleteItems from './components/deleteItems'; | ||
| import './stylesheets/App.css'; | ||
|
|
||
| function App() { |
There was a problem hiding this comment.
- I was able to reserve in the year 1374:
Kindly, add some validation to make sure your users can only reserve in the future. 👍
| import DeleteItems from './components/deleteItems'; | ||
| import './stylesheets/App.css'; | ||
|
|
||
| function App() { |
There was a problem hiding this comment.
- Please, kindly refactor this and all other functions in your project to ES6 arrow functions, so your code complies with the latest standards.
Refactoring is easy:
const App = () => {
// ...
}Explanation
The function keyword has been soft deprecated in almost all the software industry in favor of ES6 arrow functions. This means, almost nobody uses it anymore, so much that it's considered a non-best practice.
You can do a search in Vscode for the "function" word, and correct as needed. Shouldn't take you more than 5-10 min so don't worry (I found 13):
That way, your code will meet the latest standards. 💪
There was a problem hiding this comment.
Thank you for this feedback.
Each effort to adjust the scripts based on your recommendations is resulting in a linter error, as depicted in the attached screenshot. The linter is compelling us to adhere to our current code structure.
Do you have any recommendations on how to proceed in this situation?
There was a problem hiding this comment.
@yemidada, this is a first. Must be an update on the linter. You can disregard this review comment.
Bug fixing
Bug fixing
IN This PR We present the Fenja-Schedula Appointments Application:🌐
NOTE
Groups of five.Requirements
The following features were implemented in this project:
Interactions
Login page
Navigation panel
Home/Main page
The user can see a list of spa session , When the user selects a specific item, they can see the details page
Reserve
This link directs users to a form where they can make reservations. By clicking on it, users can provide the necessary details to reserve a spa session.
Reservations
Clicking on this link allows users to view their existing reservations. They can access information about their reserved spa session.
Add Session
This link is to add new entries. By clicking on it, users can contribute by adding information about a spa session.
Delete Spa Session
Similar to the previous link. It provides the functionality to remove entries. Users can click on this link to delete a spa session from the system.
Delete Session page