Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #7 🎫: AddVehicleForm and AddVehiclePage components #16

Merged
merged 20 commits into from
Jan 30, 2024

Conversation

ITurres
Copy link
Owner

@ITurres ITurres commented Jan 30, 2024

Pull Request Summary for Issue #7 Completion


Added:

/src/features/vehicles/AddVehicleForm.jsx

  • This new feature component renders a form to add a new vehicle to the list of vehicles as well as to the API.
  • Client side validation is implemented to ensure that the user enters valid vehicle information.

/src/helpers/createAsyncThunk.js

  • This new helper function is used to create a thunk action creator that dispatches the pending, fulfilled, and rejected actions for a given async action.
  • This will help us to reduce the amount of boilerplate code in our thunks.

/src/pages/AddVehiclePage.jsx

  • This new page component renders the AddVehicleForm component.

/src/styles/features/vehicles/AddVehicleForm.scss

  • This new stylesheet contains the styles for the AddVehicleForm component.

/src/styles/pages/AddVehiclePage.scss

  • This new stylesheet contains the styles for the AddVehiclePage component.

/src/helpers/setPageTitle.js

  • This new helper will help us to dynamically set each page title.

@mahammad-mostafa, you can use this one when rendering the VehicleDetailPage! passing the vehicle model name as an argument, it will look really good! implementation example.


Modified:

/src/app/App.jsx

  • Imported and render the AddVehiclePage component.
  • Wrap the ReservationPage and AddVehiclePage components in a fragment.

/src/app/store.js

  • Renamed the vehiclesList reducer to vehicles and its imports accordingly.

/src/features/reservations/ReservationForm.jsx

  • Since the vehicles reducer has been renamed, I have updated the useSelector hook to reflect the change.

/src/features/vehicles/VehiclesList.jsx

  • The vehicles thunk fetchVehicles has been named imported instead of default imported.
  • The useSelector hook has been updated to reflect the change in the vehicles reducer name.

/src/features/vehicles/VehiclesThunk.jsx

  • A new thunk postNewVehicle has been added to the vehicles thunk file to handle the POST request to the API.

/src/pages/VehiclesPage.jsx

  • Only the import path has been updated to reflect the new vehicles folder name.

/src/styles/index.scss

  • A new local variable $success-color has been added for any success messages or style related to success.
  • I have added the textarea selector to the group of inputs and select styles.
  • As mentioned below, the .btn.form__error selector has been moved from the ReservationForm.scss file to this file.
  • A new .btn.form__success selector has been added to style success messages.

Renamed:

/src/features/vehiclesList/ to /src/features/vehicles/

  • The vehiclesList folder has been renamed to vehicles to better reflect the purpose of the feature and the variety of components it contains.

⚠️NOTE: Since the vehiclesList folder has been renamed, the following files within will appear as deleted and as new files in the PR. However, the files have not been deleted, they have only been renamed.

  • /src/features/vehiclesList/VehiclesSlice.jsx to /src/features/vehicles/VehiclesSlice.jsx.
  • /src/features/vehiclesList/VehiclesThunk.jsx to /src/features/vehicles/VehiclesThunk.jsx.
  • /src/features/vehiclesList/SplideCarousel.jsx to `/src/features/vehicles/SplideCarousel.jsx
  • /src/features/vehiclesList/VehiclesList.jsx to /src/features/vehicles/VehiclesList.jsx.

Deleted:

/src/styles/features/reservations/ReservationForm.scss

  • I have removed the .btn.form__error selector from this file since it will be moved to the index.scss file.

Thank you for reviewing this PR. Feel free to reach out on Slack as Arturo (Arthur) Emanuel Guerra Iturres for any queries or further assistance. 🌟

…ed imports and names.

- Rename folder 'vehiclesList' to 'vehicles'.
- Update vehicles slice name.
- Update all vehicles-related imports.
- Update vehicles reducer name in 'store.js'.
- Update vehicles access in dispatches.
- Use try/catch to properly handle errors.
- Use rejectWithValue to pass error message to the component.
- Export 'fetchVehicles' thunk as no default.
- Import 'postNewVehicle' thunk and add it to the extraReducers.
- Add 'addNewVehicle' reducer to update the state with the new vehicle.
- Declare 'success-color' variable.
- Add textarea to the inputs group styles.
- Give textarea its own styles.
- Add transition to '.btn' class.
- Add '.btn.form__error' and '.btn.form__success' classes.
- This is to ensure that the background color is visible on older
  browsers that don't support the background image or the image fails to
  load.
@ITurres ITurres added enhancement New feature or request UI/UX User interface / User experience labels Jan 30, 2024
@ITurres ITurres self-assigned this Jan 30, 2024
@ITurres ITurres linked an issue Jan 30, 2024 that may be closed by this pull request
2 tasks
@ITurres ITurres marked this pull request as ready for review January 30, 2024 05:07
Copy link
Collaborator

@mahammad-mostafa mahammad-mostafa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🏆 Approved 🏆

Well done @ITurres 👏🏻 Your branch have been approved and you can merge 📦
🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇

@ITurres ITurres merged commit c63d14e into development Jan 30, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request UI/UX User interface / User experience
Projects
Development

Successfully merging this pull request may close these issues.

[5pt] AddVehicleForm Component
2 participants