Skip to content

Refactor (A2)

vdav02 edited this page Sep 27, 2023 · 20 revisions

Details

Refactor Details

The first aspect of the refactor we undertook was the addition of comments in the code. This was to improve code comprehensibility and streamline the development process, addressing a previously limited presence of explanatory comments within the codebase. This posed a substantial barrier to comprehending the code logic quickly. By adding short but clear comments throughout the code, we have tried to provide clarity and context, empowering developers to better understand and navigate the project. We believe this makes troubleshooting/debugging easier and ultimately elevates the overall code quality, ensuring a more accessible and efficient development experience for all contributors, present and future.

In the process of going through them, we also refactored the structure of several files. The principal objective was to address inconsistencies and discrepancies in variable naming and structure, streamline the code for enhanced readability, and ensure a more maintainable and consistent codebase. To achieve this, we focused on implementing the DRY principle - Don't Repeat Yourself. This was done through methods such as extracting repeated patterns and logic into helper functions or utilities, and ensuring code was reused to avoid redundancy and improve maintainability. Provided below is a detailed explanation of how some of the key files were refactored in the code...

acceptFriendRequests (WE MADE THIS)

In this file, we focused on simplifying the logic and enhancing error handling. The async function acceptFriendRequest was optimized to handle server responses more efficiently, and the error messages were refined to provide clearer feedback. For example, the introduction of the constructFriendRequestUrl function which takes in myUsername and friendUsername as parameters and constructs the URL for the friend request action. Encapsulating the URL construction logic in a separate function makes the code more organized and easier to maintain. This change promotes code reusability as the same URL construction logic is used in multiple places.

declineFriendRequests (WE MADE THIS)

The major refactoring in this file involved streamlining the declineFriendRequest function and improving the code structure for better readability. The error handling mechanism was also refined to ensure that any encountered errors are logged and set in the state appropriately. Similar to the previous function, a major improvement in this refactoring is the addition of the constructDeclineFriendRequestUrl function. This function takes myUsername and friendUsername as parameters and constructs the URL for declining a friend request. Encapsulating the URL construction logic in a separate function makes the code more modular and easier to manage, promoting code reusability as the same URL construction logic is used in multiple places.

addFriend (WE MADE THIS)

This file underwent a comprehensive refactoring process, focusing on standardising variable naming and ensuring consistent use of hooks and context.

useFavourites (WE MADE THIS)

In the useFavourites hook, we refactored the way we fetch and manage the favourites list. The async functions addFavourite, removeFavourite, and isFavourite were optimised for better performance and readability. This was done through the creation of the fetchData function. This function handles data fetching from the server, including handling errors and updating loading states. Instead of duplicating similar fetch request logic for adding and removing favourites, the addFavourite and removeFavourite functions now use the fetchData function with different HTTP methods. This promotes code reusability and maintains a consistent pattern for handling responses. The loading and error states were also managed to provide a smoother user experience. Further, the useEffect hook was introduced to fetch the user's favourites when the user object changes. This ensures the favourites are loaded or updated when the user context changes.

useLogin

The useLogin hook was refactored to enhance the login process. The async login function was streamlined, and the state management for isLoading and error was improved. The refactor also included better handling of server responses and JSON parsing. It now includes try-catch blocks to catch and handle errors that may occur during the login process. This ensures that errors, whether related to network requests or other unexpected issues, are properly handled and the error state is set accordingly. Destructuring was also done so that the user object is destructured directly from the context in the refactored code, making it easier to access user-related actions.

Furthermore, one fundamental change we made solved a potentially dangerous issue. During login, the previous implementation executed success operations even when the server returned an error status. In other words, due to how the previous code was set up, users could successfully log in without ever registering and logging in using made-up names and passwords. This has been amended to appropriately set an error message, signalling a failed login when the server response is not OK.

useLogout

Refactoring in the useLogout hook primarily involved standardising the structure of the logout function and ensuring consistency in using the authentication context. The logout process was optimised by efficiently removing the user item from local storage and dispatching the 'LOGOUT' action to update the context/state.

useRating

In the useRating hook, the rating function underwent significant refactoring. The process of sending a POST request to the rating endpoint and handling the server response was optimised by using Axios, as Axios automatically parses JSON responses. The refactored code maintains consistency by always returning an Axios response object or throwing an error. This consistency simplifies error handling for the caller. Finally, a try-catch block has also been introduced to simplify error handling for the caller.

useSignup

In this hook, a try-catch block was introduced to allow for better handling of errors that may occur during the signup process. If an error occurs, it sets the error state accordingly and sets isLoading to false. This provides a more robust and consistent error-handling mechanism.

Motive

How this refactor has improved maintainability

Clone this wiki locally