Issue #25 🎫: Finish final touches left overs

[ITurres]

Pull Request Summary for Issue #25 Completion

Overview:

There were a couple of issues that this PR is intended to fix. Please see Issue #25 for more details.

Changes Made:

Added:

/src/helpers/getCookie.js

• This new helper function has been created to simplify the process of getting the value of a cookie by its name.
• This function uses the logic prior coded in the apiRequest.js file to get the cookie by its name.

/src/components/DataStatusDialog.jsx

• This new shared component has been created to display a dialog kind of message to the user when the data is being fetched, loaded, or an error has occurred.

/src/styles/components/DataStatusDialog.scss

• This new shared component style file has been created to style the DataStatusDialog component.

---

Modified:

/public/index.html

• Added the meta => theme-color tag to set the theme color of the website to the primary color of the theme, which value is the same used under the sass variable $secondary-main-color (red).
• I have also uncommented the line that imports the manifest.json file, which is used to provide metadata used when the website is added to the home screen of a mobile device and enables the website to have a native app-like experience.

/public/manifest.json

• Updated the theme_color property to match the value of the $secondary-main-color sass variable (red).
• Updated the background_color property to match the value of the $main-color sass variable (off-white).
• Updated the icons property to include the project's icon tesla-red-logo-favicon.png with a size of 512x512 pixels, which is used when the website is added to the home screen of a mobile device.
• Added the apple-touch-icon property to include the project's icon tesla-apple-touch-icon.png with a size of 192x192 pixels, which is used when the website is added to the home screen of an iOS device.

/src/app/App.jsx

The issue when the user hard loads the page and the app does not deletes the cookie has been fixed.

• There are two new functions added to the App component to handle the deletion of the cookie when the user hard loads the page. One is the getAndDeleteCookie(), this function will have the cookie bearer name and it will use the helpers getCookie() and deleteCookie() to successfully delete the cookie. The other functions is the isNavigationTimingSupported(), this function will check if the performance object is in the window object and if the getEntriesByType object is in the performance object. If both conditions are met, the function will return true, otherwise it will return false.

Now there is an event listener attach to the document that will listen for the DOMContentLoaded event, when this event is triggered, it will check if the isNavigationTimingSupported() function returns true, if it does, it will check if a reload has been done, if it has, it will call the getAndDeleteCookie() function with the cookie bearer name. Otherwise it will check if the user has reload the page by using the now deprecated performance.navigation.type property, if the user has reload the page, it will call the getAndDeleteCookie() function with the cookie bearer name.

/src/components/SidePanel.jsx

• I have just give the menu button's React icon a class name of bars_icon_svg to be able to style it with the bars_icon_svg class in the SidePanel.scss file.
• This will fix the issue that the svg is small in mobile view.
• Added a class name of mobile_close_button to the close button to be able to style it with the mobile_close_button class in the SidePanel.scss file.

/src/features/reservations/ReservationForm.jsx

• The state array constant vehicles destructured from the vehicles slice has been renamed from vehicles to vehicleList to better reflect the data it holds.

/src/features/reservations/ReservationItem.jsx

• The prop type for the ReservationItem => rentalPrice has been updated to be a string instead of a number. Solving the issue of the rentalPrice prop being passed as a number.

/src/features/reservations/ReservationsList.jsx

• The state array constant reservations destructured from the reservations slice has been renamed from reservations to reservationsList to better reflect the data it holds.

/src/features/reservations/reservationsSlice.js

• The reservationsSlice has been updated by renaming the array reservations to reservationsList to better reflect the data it holds. As well as updating all its references in the slice.

/src/features/vehicles/SplideCarousel.jsx

• Updated the component's prop name vehicles to vehiclesList to match the prop name passed to the component.

/src/features/vehicles/VehiclesList.jsx

• Updated the class vehicle_loader for a more descriptive and reusable class name loader-indicator to be used on other components.

• The state array constant vehicles destructured from the vehicles slice has been renamed from vehicles to vehicleList to better reflect the data it holds.

• References to the vehicles array have been updated to vehicleList to match the new name.

• Now the VehiclesList component will also render an static vehicle list that it is imported from src/json/vehicles.json file when the dynamic vehicle list is taking more than 3 seconds to load. Why? this happens in the first render of the page and when the database currently hosted in Render.com is in dormant state. This will prevent the user from seeing a blank page when the dynamic vehicle list is taking too long to load.

• Additionally, it will render a DataStatusDialog component with the message "Loading..." when the dynamic vehicle list is taking more than 3 seconds to load and a button to retry the fetch of the vehicle list.

• Incase of an error when fetching the vehicle list, the VehiclesList component will render a DataStatusDialog component with the message "Error loading vehicles" and a button to retry the fetch of the vehicle list.

• If the loading state of the current fetch is false and also the dynamic vehicle list (array) length is greater than 0, it is there that it will render the the dynamic vehicle list.

• The default return of the component will render a loader indicator (spinner) with the message "Loading..." when the dynamic/static vehicle list is being processed.

• All in all, this will provide a better user experience when the vehicle list is taking too long to load or when an error occurs.

/src/features/vehicles/vehiclesSlice.js

• The vehiclesSlice has been updated by renaming the array vehicles to vehiclesList to better reflect the data it holds. As well as updating all its references in the slice.

/src/helpers/apiRequest.js

• With the new helper function getCookie(), the apiRequest helper function has been updated to use the getCookie() function to get the cookie.

/src/styles/components/SidePanel.scss

• Added the new bars_icon_svg class to style the menu button's React icon to be larger in mobile view.

/src/styles/features/vehicles/SplideCarousel.scss

• Updated and added new classes and styles to the SplideCarousel.scss file to style the carousel component and fix the issue of the carousel social icons not being centered at the bottom of each vehicle item.

/src/styles/features/vehicles/VehicleDetail.scss => /src/styles/index.scss

• The classes and styles of .vehicle_loader and .vehicle_error have been renamed to .loader-indicator and error-indicator and moved to the index.scss file to be global and reusable.

/src/styles/index.scss

• Added the new classes .loader-indicator and .error-indicator to the index.scss file to be global and reusable.
• Gave the global .btn class a focus style.
• Now the class .loader-indicator has an utility class of visible to modify the visibility of the loader.

/src/styles/pages/AddVehiclePage.scss

• The class .vehicles__list--wrapper will have different styles if has the class loader-indicator withing it. This is to modify the layout of the wrapper when the loader is visible.

---

Renamed:

/src/features/vehicles/DeleteVehicleList.jsx -> /src/features/vehicles/ListVehiclesToDelete.jsx

• The DeleteVehicleList component has been renamed to ListVehiclesToDelete to better reflect the purpose of the component.

---

Deleted:

/src/styles/features/vehicles/VehiclesList.scss

• The styles in this file have been moved to the DataStatusDialog.scss file to be reused by the DataStatusDialog component.
• The file was deleted because it did not contain any styles that were being targeted by the VehiclesList component.

---

Moved:

/public/vehicles.json -> /src/json/vehicles.json

• The vehicles.json file has been moved from the public directory to the src/json directory to be used as a static data source for the vehicles list at the VehiclesList component.

---

Impact:

• These changes will impact the following components:

  • App.jsx
    • SidePanel.jsx
    • ReservationForm.jsx
    • ReservationItem.jsx
    • ReservationsList.jsx
    • SplideCarousel.jsx
    • VehiclesList.jsx
    • vehiclesSlice.js
    • old DeleteVehicleList.jsx -> new ListVehiclesToDelete
    • apiRequest.js
    • SidePanel.scss
    • SplideCarousel.scss
    • VehicleDetail.scss
    • index.scss

• These changes will impact the following files:

  • public/index.html
  • public/manifest.json
  • src/helpers/getCookie.js

Testing:

• n/a.

Related Issues:

• Closes Issue Project Final Touches left overs (Styles, Components, Token and re-deploy) #25.

Dependencies:

• n/a.

Additional Notes:

• Some functional components like DataStatusDialog and VehiclesList have been changed from ES6 fat arrow functions to ES5 functions for React Developer Tools to display the correct component names (instead of Unknown or anonymous).

• The rest of the components have been left as ES6 fat arrow functions but will need to be changed to ES5 functions as well for consistency.

• These changes have been deployed with the Semantic Versioning (SemVer) version v0.1.0.
  You can see the commit here.

---

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. 🌟

[mahammad-mostafa]

🏆 Approved 🏆

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

[ITurres]

Thank you @mahammad-mostafa! I appreciate it 🤠.