# DiscoverView.vue Migration Documentation

**Migration Start**: 2025-07-08 12:11 UTC  
**Component**: DiscoverView.vue  
**Priority**: High (Critical User Journey)  
**Location**: `src/views/DiscoverView.vue`

## Pre-Migration Analysis

### 🔍 **Current State Assessment**

#### Database Operations
- **Legacy Pattern**: Uses `databaseUtil.retrieveSettingsForActiveAccount()` (line 396)
- **Legacy Pattern**: Uses `databaseUtil.mapQueryResultToValues()` (line 405)
- **Direct PlatformService**: Uses `PlatformServiceFactory.getInstance()` (line 403)
- **Raw SQL**: Uses `"SELECT * FROM contacts"` (line 404)

#### Notification Usage
- **Direct $notify Calls**: 3 instances found (lines 515, 607, 758)
- **Notification Types**: danger, warning, success
- **Messages**: Error handling, search results, loading status

#### Template Complexity
- **Conditional Rendering**: Multiple v-if/v-else conditions for tabs
- **Dynamic Content**: Complex search results and map integration
- **User Interactions**: Search functionality, map interactions, infinite scroll

### 📊 **Migration Complexity Assessment**
- **Database Migration**: Medium (2 database operations)
- **SQL Abstraction**: Low (1 raw SQL query)
- **Notification Migration**: Medium (3 notifications)
- **Template Streamlining**: High (complex conditionals and interactions)

### 🎯 **Migration Goals**
1. Replace `databaseUtil` calls with PlatformServiceMixin methods
2. Abstract raw SQL with service methods
3. Extract all notification messages to constants
4. Replace `$notify()` calls with helper methods
5. Streamline template with computed properties

## Migration Plan

### **Phase 1: Database Migration**
```typescript
// Replace databaseUtil.retrieveSettingsForActiveAccount()
const settings = await this.$accountSettings();

// Replace PlatformServiceFactory.getInstance() + raw SQL
const allContacts = await this.$getAllContacts();

// Replace databaseUtil.mapQueryResultToValues()
// This will be handled by the service method above
```

### **Phase 2: Notification Migration**
```typescript
// Extract to constants
NOTIFY_DISCOVER_SEARCH_ERROR
NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR
NOTIFY_DISCOVER_MAP_SEARCH_ERROR

// Replace direct $notify calls with helper methods
this.notify.error(NOTIFY_DISCOVER_SEARCH_ERROR.message, TIMEOUTS.LONG);
```

### **Phase 3: Template Streamlining**
```typescript
// Extract complex conditional classes to computed properties
computedProjectsTabStyleClassNames()
computedPeopleTabStyleClassNames()
computedLocalTabStyleClassNames()
computedMappedTabStyleClassNames()
computedRemoteTabStyleClassNames()
```

## Migration Implementation

### **Step 1: Add PlatformServiceMixin**
```typescript
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";

@Component({
  components: {
    // ... existing components
  },
  mixins: [PlatformServiceMixin],
})
```

### **Step 2: Add Notification Infrastructure**
```typescript
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import {
  NOTIFY_DISCOVER_SEARCH_ERROR,
  NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR,
  NOTIFY_DISCOVER_MAP_SEARCH_ERROR,
} from "@/constants/notifications";

// Add property
notify!: ReturnType<typeof createNotifyHelpers>;

// Initialize in created()
created() {
  this.notify = createNotifyHelpers(this.$notify);
}
```

### **Step 3: Replace Database Operations**
```typescript
// In mounted() method
const settings = await this.$accountSettings();
this.allContacts = await this.$getAllContacts();
```

### **Step 4: Replace Notification Calls**
```typescript
// Replace error notifications
this.notify.error(NOTIFY_DISCOVER_SEARCH_ERROR.message, TIMEOUTS.LONG);
this.notify.error(NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR.message, TIMEOUTS.LONG);
this.notify.error(NOTIFY_DISCOVER_MAP_SEARCH_ERROR.message, TIMEOUTS.LONG);
```

## Expected Outcomes

### **Technical Improvements**
- ✅ All database operations use PlatformServiceMixin
- ✅ No raw SQL queries in component
- ✅ All notifications use helper methods and constants
- ✅ Template logic streamlined with computed properties
- ✅ Consistent error handling patterns

### **Functional Preservation**
- ✅ Search functionality (local, mapped, anywhere) preserved
- ✅ Map integration and tile loading preserved
- ✅ Infinite scroll functionality preserved
- ✅ Tab switching and state management preserved
- ✅ Error handling and user feedback preserved

### **Performance Improvements**
- ✅ Reduced database query complexity
- ✅ Standardized notification patterns
- ✅ Optimized template rendering
- ✅ Better error handling efficiency

## Testing Requirements

### **Functional Testing**
- [ ] Search functionality works for all tabs (Projects, People)
- [ ] Local search with location selection works
- [ ] Mapped search with map integration works
- [ ] Anywhere search with infinite scroll works
- [ ] Error handling displays appropriate notifications
- [ ] Tab switching preserves state correctly

### **Cross-Platform Testing**
- [ ] Web browser functionality
- [ ] Mobile app functionality (Capacitor)
- [ ] Desktop app functionality (Electron)
- [ ] PWA functionality

### **Error Scenario Testing**
- [ ] Network connectivity issues
- [ ] Invalid search parameters
- [ ] Empty search results
- [ ] Map loading failures
- [ ] Database connection issues

## Security Audit Checklist

### **SQL Injection Prevention**
- [ ] No raw SQL queries in component
- [ ] All database operations use parameterized queries
- [ ] Input validation for search terms
- [ ] Proper error handling without information disclosure

### **Data Privacy**
- [ ] User search terms properly sanitized
- [ ] Location data handled securely
- [ ] Contact information access controlled
- [ ] No sensitive data in error messages

### **Input Validation**
- [ ] Search terms validated and sanitized
- [ ] Map coordinates validated
- [ ] URL parameters properly handled
- [ ] File uploads (if any) validated

## Migration Timeline

### **Estimated Duration**: 25-35 minutes
- **Phase 1 (Database)**: 8-10 minutes
- **Phase 2 (SQL)**: 3-5 minutes
- **Phase 3 (Notifications)**: 8-10 minutes
- **Phase 4 (Template)**: 6-10 minutes

### **Risk Assessment**
- **Functionality Risk**: Low (search is well-contained)
- **Data Risk**: Low (read-only operations)
- **User Impact**: Low (feature is secondary to main workflow)

### **Dependencies**
- PlatformServiceMixin availability
- Notification constants in place
- Map component integration preserved
- Search API endpoints accessible

---

**Author**: Matthew Raymer  
**Date**: 2025-07-08  
**Purpose**: Document DiscoverView.vue migration to Enhanced Triple Migration Pattern