Platform-Agnostic Architecture: Compartmentalize Platform-Specific Code for Multi-Platform Support

[andreifoldes]

Problem Statement

Currently, the Universal Data Donor application has PlayStation-specific logic scattered throughout the React components, making it difficult to adapt the application for other platforms (e.g., Netflix, Spotify, Instagram, etc.). This reduces the app's modularity and reusability for different data donation studies.

Current Issues

Hardcoded Platform References

• Parser Import: Direct import of parsePlaystationFile in UploadPage.js
• Hardcoded Logo: PlayStation SVG logo hardcoded in ConsentPage.js
• Filename Generation: Hardcoded playstation-data-donation-${submissionId}.json in FilterPage.js
• File Extensions: Hardcoded .xlsx file acceptance in upload component
• Warning Messages: Platform-specific error messages embedded in components

Platform-Specific Logic in Generic Components

• Warning check logic (checkForSignificantParsingErrors) contains PlayStation-specific assumptions
• Sheet name processing with hardcoded quote removal (.replace(/"/g, ''))
• Test files contain hardcoded PlayStation sheet names and data structures

Proposed Solution

1. Dynamic Parser Loading

• Current: import { parsePlaystationFile } from '../parsers/playstationParser'
• Proposed: Load parser dynamically based on config.general.parser setting
• Implementation: Create a parser factory that loads the appropriate parser module

2. Enhanced Configuration Structure

Extend config.json to include platform-specific settings:

{
  "general": {
    "platform": "PlayStation",
    "parser": "playstationParser",
    "fileExtensions": [".xlsx"],
    "downloadFilename": "{{platform}}-data-donation-{{submissionId}}.json"
  },
  "platform": {
    "logo": "/playstation-svgrepo-com.svg",
    "logoAlt": "PlayStation Logo",
    "dataSheets": [...],
    "warningLogic": {
      "checkEmptySheets": true,
      "minimumDataThreshold": 1
    }
  }
}

3. File Structure Reorganization

src/
├── components/          # Platform-agnostic UI components
├── pages/              # Platform-agnostic page components
├── parsers/            # Platform-specific parsers
│   ├── playstationParser.js
│   ├── netflixParser.js  # Future
│   └── spotifyParser.js  # Future
├── configs/            # Platform-specific configurations
│   ├── playstation.json
│   ├── netflix.json     # Future
│   └── spotify.json     # Future
├── utils/              # Generic utilities
│   ├── parserFactory.js # Dynamic parser loader
│   └── warningLogic.js  # Configurable warning logic
└── App.js

4. Specific Changes Required

UploadPage.js

• Replace direct parser import with dynamic loading
• Make file extension acceptance configurable
• Make warning logic configurable via platform config

ConsentPage.js

• Make logo path and alt text configurable
• Remove hardcoded PlayStation references

FilterPage.js

• Make download filename template configurable
• Remove hardcoded data processing assumptions

Test Files

• Create platform-agnostic test patterns
• Move platform-specific test data to separate files

Benefits

1. Multi-Platform Support: Easy adaptation for Netflix, Spotify, Instagram, etc.
2. Maintainability: Clear separation of platform-specific and generic code
3. Scalability: New platforms can be added by creating parser + config files
4. Testing: Platform-specific logic can be tested independently
5. Reusability: Core donation flow becomes truly universal

Implementation Priority

Phase 1 (High Priority)

• Create parser factory with dynamic loading
• Extract platform config from main config.json
• Update UploadPage to use dynamic parser loading
• Make logo and branding configurable

Phase 2 (Medium Priority)

• Implement configurable warning logic
• Make file extensions configurable
• Update FilterPage filename generation
• Refactor tests for platform-agnostic patterns

Phase 3 (Low Priority)

• Create example configs for other platforms
• Documentation for adding new platforms
• Migration guide for existing deployments

Technical Notes

• Maintain backward compatibility with existing config.json structure
• Use ES6 dynamic imports for parser loading: import(\../parsers/${parserName}`)`
• Consider using React Context for platform configuration
• Ensure all platform-specific logic is contained in parser and config files

Success Criteria

• Zero hardcoded platform references in React components
• New platform can be added with only parser + config files
• All existing functionality works unchanged
• Test suite passes with platform-agnostic patterns
• Documentation explains how to add new platforms