Refactor (A2)
We made a decision to migrate the front-end REACT components from Typescript to Javascript. This refactor involved adding new type declarations for function inputs and outputs, as well as changing the import Structure throughout all of the .jsx component files. In the future, we would like to also migrate the Hooks to typescript however resolving this technical debt would have a significant cost, meaning we decided it was out of scope for the current release (2.0.0).
This decision was made because we were getting increasingly confused and frustrated with the lack of type declaration in the code, as it made it much harder to understand what the code was doing, because of this we decided to refactor the code and switch to TypeScript to increase the maintainability of the code by making it more readable.
Since TypeScript enforces type checking during compilation, it can catch type-related errors earlier, which reduces the amount of runtime errors, meaning bugs can be identified and addressed quicker and easier. Additionally, TypeScript encourages self-documenting code through it's explicit type definition. This makes code easier to understand both for the original developer, as well as any future developers that may encounter the code, which makes the codebase easier to maintain.
In the process of reviewing the legacy functionality, we also refactored the structure of several files. The main 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...
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.
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.
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.
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.
We decided to change the issue template for assignment 2 as the previous one lacked clarity by splitting up a user story into it's 3 components but most importantly it lacked any acceptance criteria. We believed these to be crucial issues in the template and so we decided to merge the three sections into one user story and added an acceptance criteria section.
The refactoring efforts mentioned above play a pivotal role in mitigating technical debt while significantly enhancing code maintainability. Centralising our error handling within uniform try-catch blocks minimizes the accumulation of error-related technical debt, as it ensures consistent error reporting and reduces the likelihood of introducing new issues during maintenance. Improved variable naming, along with the integration of comments and documentation, assists not only in code readability but also in addressing the documentation-related aspect of technical debt. The modularisation of code and its consistent formatting further contribute to reducing the overall technical debt by making future enhancements and modifications more efficient and less error-prone.