turash/bugulma/frontend/REFACTORING.md

Refactoring Progress and To-Do List

This document tracks the ongoing effort to refactor the codebase to improve its quality, maintainability, and adherence to modern best practices like the Single Responsibility Principle (SRP) and DRY (Don't Repeat Yourself).

Progress

1. Separation of Data and UI Logic

We have established a clear architectural pattern for separating data-fetching and state management from UI rendering logic. This makes components cleaner, easier to test, and more maintainable.

• OrganizationPage Refactor:

  • Created useOrganizationData hook to handle all data fetching and Zod validation for a single organization.
  • Simplified the useOrganizationPage hook to focus exclusively on UI state and user interaction logic.
  • Broke down the main component into smaller, focused components like OrganizationContent.

• MapView Refactor:

  • Created useMapData hook to centralize fetching, filtering, and Zod validation of map-related data (organizations and landmarks).
  • Refactored the monolithic MapViewContext into several smaller, more focused contexts (MapViewportContext, MapInteractionContext, etc.) for better state management.

2. Component Decomposition and Reusability

• PartnershipHub Decomposition: The PartnershipHub component was broken down into smaller sub-components (AIAnalysisTab, WebIntelTab), each responsible for a single tab's content.
• MapSidebar Decomposition: The MapSidebar's content rendering logic was extracted into a dedicated SidebarContent component.
• AddOrganizationWizard Decomposition: The AddOrganizationWizard component was refactored to delegate its rendering logic to new WizardContent and WizardFooter components, improving SRP.
• Reusable IconButton: A new IconButton component was created to standardize the look and feel of icon-only buttons, reducing code duplication.

3. Added Critical Unit Tests

To improve the reliability of our business logic, we have added Vitest unit tests for the following critical functions:

• calculateSymbioticConnections in lib/analytics.ts
• findSimilarOrgs in lib/organizationUtils.ts

To-Do List

• Refactor AddOrganizationWizard:

  • This is a large, multi-step component that manages a lot of state. It should be broken down into smaller sub-components for each step of the wizard.
  • The state management for the wizard should be extracted into a dedicated useAddOrganizationWizard hook to simplify the main component.

• Refactor useAppContext:

  • The useAppContext hook was refactored to only contain navigation logic and was renamed to useNavigation.

• Add more unit tests:

  • Identify other critical business logic in the lib directory and add unit tests for it.
  • Consider adding tests for the data transformation and filtering logic in the useMapData and useOrganizationData hooks.

• Create a reusable FormField component:

  • The forms in the AddOrganizationWizard have a lot of repeated code for rendering labels, inputs, and error messages.
  • Create a generic FormField component to encapsulate this logic and reduce duplication.

• Refactor Chatbot component:

  • The Chatbot component has a lot of state and logic.
  • Extract the state management into a useChatbot hook and break down the component into smaller pieces.

• Create a Card component with variants:

  • The Card component is used in many places with slightly different styles.
  • Add variants to the Card component to handle these different styles and reduce the need for custom CSS.

• Refactor OrganizationTable:

  • The OrganizationTable component has a lot of logic for filtering and sorting.
  • Extract this logic into a useOrganizationTable hook.

• Create a PageHeader component:

  • The AdminPage and OrganizationPage have similar page headers.
  • Create a reusable PageHeader component to reduce duplication.

• Add tests for useOrganizationFilter hook:

  • The useOrganizationFilter hook contains critical filtering logic that should be tested.

• Refactor LiveActivity component:

  • The LiveActivity component has some data transformation logic that could be extracted into a hook.