Extract datasource instances from app.tsx

docs/APP_REFACTORING_DESIGN.md

@@ -81,7 +81,7 @@ To refactor `app.tsx` safely and maintain continuous code correctness, we will m
 
 #### Phase 1: Pure Component and Utility Extraction
 *   [x] **Step 1.1:** Create `src/components/error_display.tsx` and move `ErrorMessage` and `ErrorPopup` from `src/app.tsx`. Update imports in `src/app.tsx`.
-*   [ ] **Step 1.2:** Create `src/datasource/instances.ts` and move data source class instantiations. Update references in `src/app.tsx`. Refactor `EmbeddedDataSource` to clean up its message event listener when the loading promise resolves or rejects (or track listener state) to prevent duplicate event listener leaks on multiple page mounts.
+*   [x] **Step 1.2:** Create `src/datasource/instances.ts` and move data source class instantiations. Update references in `src/app.tsx`. Refactor `EmbeddedDataSource` to clean up its message event listener when the loading promise resolves or rejects (or track listener state) to prevent duplicate event listener leaks on multiple page mounts.
 *   [ ] **Step 1.3:** Create `src/util/url_args.ts` (the parsing utility) and `src/util/url_args.spec.ts` (its Jest unit test suite) together. Extract URL query parameter parsing functions and types from `src/app.tsx`, write comprehensive tests, update imports in `src/app.tsx`, and run `npm test` to verify.
 *   [ ] **Step 1.4:** Modify `src/menu/top_bar.tsx` to make chart-specific props and event handlers optional (e.g. `data`, `allowAllRelativesChart`, `allowPrintAndDownload`, `eventHandlers`, etc.), preparing the component for rendering on the landing screen without dummy properties.
 

src/app.tsx

@@ -15,10 +15,9 @@ import {
 } from './chart';
 import {ErrorMessage, ErrorPopup} from './components/error_display';
 import {DataSourceEnum, SourceSelection} from './datasource/data_source';
-import {EmbeddedDataSource, EmbeddedSourceSpec} from './datasource/embedded';
+import {EmbeddedSourceSpec} from './datasource/embedded';
 import {
   GoogleDriveAuthError,
-  GoogleDriveDataSource,
   GoogleDriveSourceSpec,
 } from './datasource/google_drive';
 import {
@@ -27,10 +26,14 @@ import {
   isGoogleDriveConfigured,
 } from './datasource/google_drive_service';
 import {
-  GedcomUrlDataSource,
+  embeddedDataSource,
+  gedcomUrlDataSource,
+  googleDriveDataSource,
+  uploadedDataSource,
+} from './datasource/instances';
+import {
   getSelection,
   revokeObjectUrls,
-  UploadedDataSource,
   UploadSourceSpec,
   UrlSourceSpec,
 } from './datasource/load_data';
@@ -208,11 +211,6 @@ function getArguments(location: H.Location): Arguments {
   };
 }
 
-const uploadedDataSource = new UploadedDataSource();
-const gedcomUrlDataSource = new GedcomUrlDataSource();
-const embeddedDataSource = new EmbeddedDataSource();
-const googleDriveDataSource = new GoogleDriveDataSource();
-
 export function App() {
   /** State of the application. */
   const [state, setState] = useState<AppState>(AppState.INITIAL);

src/datasource/instances.ts

@@ -0,0 +1,8 @@
+import {EmbeddedDataSource} from './embedded';
+import {GoogleDriveDataSource} from './google_drive';
+import {GedcomUrlDataSource, UploadedDataSource} from './load_data';
+
+export const uploadedDataSource = new UploadedDataSource();
+export const gedcomUrlDataSource = new GedcomUrlDataSource();
+export const embeddedDataSource = new EmbeddedDataSource();
+export const googleDriveDataSource = new GoogleDriveDataSource();