Repository navigation
Refactor frontend codebase to improve DRY, SRP, and structure #71
Description
Describe the current behavior
The current frontend codebase has multiple inconsistencies and repeated logic across files.
- API calls are duplicated across many
route.tsfiles with similarfetchconfigurations. - SVG icons are directly hardcoded inside page components, making them less reusable and harder to manage.
- Utility/helper functions (e.g., escapeCSVValue) are defined inside page files instead of shared utility modules.
This leads to violations of DRY (Don't Repeat Yourself) and SRP (Single Responsibility Principle), making the code harder to maintain and scale.
Describe the enhancement you'd like
Refactor the frontend codebase to improve structure, reusability, and maintainability:
- Introduce a centralised API client (e.g.,
apiClientorbackendFetch) to handle all API requests and remove duplicated fetch logic. - Create a dedicated
components/iconsdirectory to store reusable SVG components instead of hardcoding them in pages. - Move reusable helper functions (e.g.,
escapeCSVValue) to a sharedutilsorlibdirectory.
Why is this enhancement needed?
- Reduces code duplication (DRY compliance)
- Improves code readability and maintainability
- Encourages proper separation of concerns (SRP)
- Makes the codebase easier to scale and extend
- Simplifies future updates (e.g., changing headers or API logic in one place)
Additional context
Example of duplicated API logic:
const response = await fetch(`${backendUrl}/api/v1/configs/`, {
headers: {
'X-API-KEY': apiKey || '',
},
});Proposed centralized approach:
const { status, data } = await apiClient(
request,
`/api/v1/configs/${config_id}`
);
Activity
Ayush8923 commentedon Mar 20, 2026
Currently, on multiple pages we are fetching the API key from
localStorageusinguseEffect, which results in repeated and duplicated code across the codebase.We can optimize this by introducing a shared context and/or a helper function to manage the API key. This will reduce repetition, minimize state usage across pages, and improve overall code maintainability.
Ayush8923 commentedon Mar 24, 2026
In this, Also implement the prettier with pre-commit hook and CI pipeline.
Ayush8923 commentedon Mar 27, 2026
Most of the codebase has been completed, though a few areas still need to be updated.
Sharing some reference PRs where the refactoring and cleanup have been handled.
routes->main#97Ayush8923 commentedon Apr 1, 2026
Most of the work has been completed in the PR mentioned above. A few pages/components still need some refactoring, which we will continue alongside ongoing feature development.