mirror of
https://github.com/DocNR/POWR.git
synced 2025-04-19 19:01:18 +00:00
193 lines
4.8 KiB
Markdown
193 lines
4.8 KiB
Markdown
After analyzing Olas's social feed implementation, I can provide you with valuable insights for building your workout-focused social feed using Nostr. Here's a breakdown of their implementation and how you can adapt it for POWR:
|
|
|
|
### Key Components of Olas's Feed Implementation
|
|
|
|
1. **Feed Architecture**
|
|
- They use a main `Feed` component with two key parts:
|
|
- `useFeedEvents` hook for managing feed data
|
|
- `useFeedMonitor` hook for monitoring and updating feed entries
|
|
|
|
2. **NDK Integration**
|
|
```typescript
|
|
import {
|
|
NDKEvent,
|
|
NDKFilter,
|
|
NDKKind,
|
|
NDKSubscription,
|
|
useNDK
|
|
} from "@nostr-dev-kit/ndk-mobile";
|
|
```
|
|
|
|
3. **Event Filtering**
|
|
- They filter events based on specific kinds:
|
|
```typescript
|
|
switch (event.kind) {
|
|
case NDKKind.VerticalVideo:
|
|
case NDKKind.HorizontalVideo:
|
|
case 30018:
|
|
case 30402:
|
|
case NDKKind.Text:
|
|
case NDKKind.Media:
|
|
case NDKKind.Image:
|
|
return handleContentEvent(eventId, event);
|
|
```
|
|
|
|
### Implementing POWR's Workout Feed
|
|
|
|
For your workout app, here's how you can adapt their implementation:
|
|
|
|
1. **Event Kind Definition**
|
|
```typescript
|
|
// Define workout event kind
|
|
const WORKOUT_EVENT_KIND = 30311; // Choose an appropriate kind number for workouts
|
|
```
|
|
|
|
2. **Feed Filter Setup**
|
|
```typescript
|
|
const workoutFeedFilters: NDKFilter[] = [{
|
|
kinds: [WORKOUT_EVENT_KIND],
|
|
// Add any additional filters like tags
|
|
}];
|
|
```
|
|
|
|
3. **Feed Component**
|
|
```typescript
|
|
import { NDKEvent, NDKFilter, useNDK } from "@nostr-dev-kit/ndk-mobile";
|
|
|
|
export function WorkoutFeed() {
|
|
const { entries, newEntries, updateEntries } = useFeedEvents(
|
|
workoutFeedFilters,
|
|
{
|
|
subId: 'workout-feed',
|
|
filterFn: (entry) => {
|
|
// Add custom filtering for workout events
|
|
return true;
|
|
}
|
|
}
|
|
);
|
|
|
|
return (
|
|
<FlashList
|
|
data={entries}
|
|
renderItem={({ item }) => (
|
|
<WorkoutPost
|
|
event={item.event}
|
|
timestamp={item.timestamp}
|
|
/>
|
|
)}
|
|
estimatedItemSize={400}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
4. **Useful NDK Tools to Leverage**
|
|
- **Subscription Management**
|
|
```typescript
|
|
const subscription = ndk.subscribe(
|
|
workoutFeedFilters,
|
|
{
|
|
groupable: false,
|
|
skipVerification: true,
|
|
subId: 'workout-feed'
|
|
}
|
|
);
|
|
|
|
subscription.on("event", handleWorkoutEvent);
|
|
subscription.once('eose', handleEose);
|
|
```
|
|
|
|
- **Event Processing**
|
|
```typescript
|
|
const handleWorkoutEvent = (event: NDKEvent) => {
|
|
// Process workout specific data
|
|
const workout = {
|
|
id: event.id,
|
|
type: event.tagValue('workout-type'),
|
|
duration: event.tagValue('duration'),
|
|
// other workout specific fields
|
|
};
|
|
|
|
// Update feed
|
|
updateEntry(event.id, (entry) => ({
|
|
...entry,
|
|
event,
|
|
workout,
|
|
timestamp: event.created_at
|
|
}));
|
|
};
|
|
```
|
|
|
|
5. **Feed Entry Type**
|
|
```typescript
|
|
type WorkoutFeedEntry = {
|
|
id: string;
|
|
event?: NDKEvent;
|
|
workout?: {
|
|
type: string;
|
|
duration: string;
|
|
// other workout metadata
|
|
};
|
|
timestamp: number;
|
|
};
|
|
```
|
|
|
|
### Key NDK Tools to Use
|
|
|
|
1. **Event Subscription**
|
|
- `NDKSubscription` for real-time workout updates
|
|
- `NDKFilter` for filtering workout-specific events
|
|
|
|
2. **Event Processing**
|
|
- `NDKEvent` for handling workout event data
|
|
- Event tags for workout metadata
|
|
|
|
3. **Feed Management**
|
|
- `useFeedEvents` hook pattern for managing workout feed state
|
|
- Entry caching and update mechanisms
|
|
|
|
### Best Practices from Olas's Implementation
|
|
|
|
1. **Performance Optimization**
|
|
- Use of `FlashList` for efficient list rendering
|
|
- Implement entry caching
|
|
- Handle new entries efficiently
|
|
|
|
2. **State Management**
|
|
- Track active entries
|
|
- Manage subscription lifecycle
|
|
- Handle feed updates appropriately
|
|
|
|
3. **User Experience**
|
|
- Implement pull-to-refresh
|
|
- Show new entries notification
|
|
- Handle scrolling and viewing positions
|
|
|
|
### Additional Recommendations for POWR
|
|
|
|
1. **Workout-Specific Filters**
|
|
- Add filters for workout types
|
|
- Filter by duration, intensity, etc.
|
|
- Use workout-specific tags
|
|
|
|
2. **Data Structure**
|
|
```typescript
|
|
// Workout event structure
|
|
const workoutEvent = {
|
|
kind: WORKOUT_EVENT_KIND,
|
|
tags: [
|
|
['workout-type', 'strength'],
|
|
['duration', '45'],
|
|
['exercises', JSON.stringify(exercises)],
|
|
// Additional metadata
|
|
],
|
|
content: workoutDescription
|
|
};
|
|
```
|
|
|
|
3. **Real-time Updates**
|
|
- Implement real-time workout progress updates
|
|
- Show active workouts in progress
|
|
- Enable social interactions during workouts
|
|
|
|
This implementation will give you a solid foundation for building a workout-focused social feed using Nostr. The key is adapting Olas's efficient feed management system while customizing it for workout-specific content and interactions. |