@mereb/app-feed 0.0.2 → 0.0.4

package/dist/src/headless.d.ts

@@ -1,6 +1,22 @@
 import type { FeedQuery } from '@mereb/shared-graphql';
 export { FeedDocument } from '@mereb/shared-graphql';
 export type FeedNode = FeedQuery['feedHome']['edges'][number]['node'];
+export type CreatePostResponse = {
+    createPost: {
+        id: string;
+        body: string;
+        createdAt: string;
+        author: {
+            id: string;
+            handle: string;
+        };
+    };
+};
+export type CreatePostVariables = {
+    body: string;
+    mediaKeys?: string[];
+};
+export declare const CreatePostDocument: import("@apollo/client").DocumentNode;
 export declare const FEED_PAGE_SIZE = 20;
 export declare function parseFeedTimestamp(value?: string | null): Date | null;
 export declare function formatRelativeFeedTimestamp(value?: string | null, now?: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mereb/app-feed",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Feed experience building blocks for Mereb apps",
   "type": "module",
   "main": "src/index.tsx",

package/src/headless.ts

@@ -1,7 +1,37 @@
+import { gql } from '@apollo/client';
 import type { FeedQuery } from '@mereb/shared-graphql';
 export { FeedDocument } from '@mereb/shared-graphql';
 
 export type FeedNode = FeedQuery['feedHome']['edges'][number]['node'];
+export type CreatePostResponse = {
+  createPost: {
+    id: string;
+    body: string;
+    createdAt: string;
+    author: {
+      id: string;
+      handle: string;
+    };
+  };
+};
+export type CreatePostVariables = {
+  body: string;
+  mediaKeys?: string[];
+};
+
+export const CreatePostDocument = gql`
+  mutation CreatePost($body: String!, $mediaKeys: [String!]) {
+    createPost(body: $body, mediaKeys: $mediaKeys) {
+      id
+      body
+      createdAt
+      author {
+        id
+        handle
+      }
+    }
+  }
+`;
 
 export const FEED_PAGE_SIZE = 20;
 
@@ -42,7 +72,7 @@ export function formatRelativeFeedTimestamp(value?: string | null, now: number =
   }
 
   return date.toLocaleDateString(undefined, {
-    year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined,
+    year: date.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
     month: 'short',
     day: 'numeric'
   });

package/src/index.tsx

@@ -1,155 +1,261 @@
-import { useCallback, useMemo } from 'react';
-import {
-  FlatList,
-  RefreshControl,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View
-} from 'react-native';
-import { useFeedQuery } from '@mereb/shared-graphql';
-import { tokens } from '@mereb/tokens/native';
-import { cardRecipes } from '@mereb/ui-shared';
-import {
-  formatRelativeFeedTimestamp,
-  selectFeedNodes,
-  type FeedNode
-} from './headless.js';
+import {useCallback, useMemo} from 'react';
+import {FlatList, RefreshControl, StyleSheet, Text, TouchableOpacity, View, type ViewStyle} from 'react-native';
+import {useFeedQuery} from '@mereb/shared-graphql';
+import {tokens} from '@mereb/tokens/native';
+import {cardRecipes} from '@mereb/ui-shared';
+import {type FeedNode, formatRelativeFeedTimestamp, selectFeedNodes} from './headless.js';
+
+type SeparatorProps = {
+    style?: ViewStyle;
+};
+
+function Separator({style}: Readonly<SeparatorProps>) {
+    return <View style={style}/>;
+}
+
+/* Top-level wrapper so FlatList receives a stable component reference */
+function SeparatorWithStyle() {
+    return <Separator style={styles.separator} />;
+}
 
 type PostCardProps = {
-  post: FeedNode;
-  onSelectAuthor?: (handle: string) => void;
+    post: FeedNode;
+    onSelectAuthor?: (handle: string) => void;
 };
 
-function PostCard({ post, onSelectAuthor }: Readonly<PostCardProps>) {
-  const handlePress = useCallback(() => {
-    onSelectAuthor?.(post.author.handle);
-  }, [onSelectAuthor, post.author.handle]);
-
-  return (
-    <View style={styles.card}>
-      <View style={styles.metaRow}>
-        {onSelectAuthor ? (
-          <TouchableOpacity onPress={handlePress} accessibilityRole="button">
-            <Text style={styles.handleLink}>@{post.author.handle}</Text>
-          </TouchableOpacity>
-        ) : (
-          <Text style={styles.handle}>@{post.author.handle}</Text>
-        )}
-        <Text style={styles.metaSeparator}>•</Text>
-        <Text style={styles.timestamp}>{formatRelativeFeedTimestamp(post.createdAt)}</Text>
-      </View>
-      <Text style={styles.body}>{post.body}</Text>
-    </View>
-  );
+function PostCard({post, onSelectAuthor}: Readonly<PostCardProps>) {
+    const handlePress = useCallback(() => {
+        onSelectAuthor?.(post.author.handle);
+    }, [onSelectAuthor, post.author.handle]);
+
+    return (
+        <View style={styles.card}>
+            <View style={styles.metaRow}>
+                {onSelectAuthor ? (
+                    <TouchableOpacity onPress={handlePress} accessibilityRole="button">
+                        <Text style={styles.handleLink}>@{post.author.handle}</Text>
+                    </TouchableOpacity>
+                ) : (
+                    <Text style={styles.handle}>@{post.author.handle}</Text>
+                )}
+                <Text style={styles.metaSeparator}>•</Text>
+                <Text style={styles.timestamp}>{formatRelativeFeedTimestamp(post.createdAt)}</Text>
+            </View>
+            <Text style={styles.body}>{post.body}</Text>
+        </View>
+    );
 }
 
 type FeedScreenProps = {
-  onSelectAuthor?: (handle: string) => void;
+    onSelectAuthor?: (handle: string) => void;
+};
+
+type Suggestion = {
+    handle: string;
+    hint?: string;
 };
 
-export function FeedScreen({ onSelectAuthor }: Readonly<FeedScreenProps>) {
-  const { data, loading, error, refetch } = useFeedQuery();
+const FALLBACK_SUGGESTIONS: Suggestion[] = [
+    {handle: 'mereb-team', hint: 'Product updates'},
+    {handle: 'designers', hint: 'Design drops'},
+    {handle: 'dev-journal', hint: 'Engineering notes'}
+];
+
+function SuggestionsSection({
+    suggestions,
+    onSelectAuthor
+}: Readonly<{
+    suggestions: Suggestion[];
+    onSelectAuthor?: (handle: string) => void;
+}>) {
+    if (suggestions.length === 0) return null;
+
+    return (
+        <View style={styles.suggestionsCard}>
+            <Text style={styles.suggestionsTitle}>Discover people to follow</Text>
+            <Text style={styles.suggestionsBody}>
+                Follow a few profiles to keep your feed fresh.
+            </Text>
+            <View style={styles.suggestionsList}>
+                {suggestions.map((sugg) => (
+                    <TouchableOpacity
+                        key={sugg.handle}
+                        style={styles.suggestionPill}
+                        onPress={() => onSelectAuthor?.(sugg.handle)}
+                        accessibilityRole="button"
+                    >
+                        <Text style={styles.suggestionHandle}>@{sugg.handle}</Text>
+                        {sugg.hint ? (
+                            <Text style={styles.suggestionHint}>{sugg.hint}</Text>
+                        ) : null}
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    );
+}
+
+export function FeedScreen({onSelectAuthor}: Readonly<FeedScreenProps>) {
+    const {data, loading, error, refetch} = useFeedQuery();
 
-  const posts = useMemo(() => selectFeedNodes(data), [data]);
+    const posts = useMemo(() => selectFeedNodes(data), [data]);
+    const suggestions = useMemo(() => {
+        const seen = new Set<string>();
+        const derived: Suggestion[] = [];
+        for (const post of posts) {
+            if (seen.has(post.author.handle)) continue;
+            seen.add(post.author.handle);
+            derived.push({handle: post.author.handle});
+        }
+        const combined = [...derived, ...FALLBACK_SUGGESTIONS].filter(
+            (s) => !seen.has(s.handle) // avoid dupes with fallbacks
+        );
+        return combined.slice(0, 5);
+    }, [posts]);
+    const shouldShowSuggestions = !loading && posts.length < 5;
 
-  const handleRefresh = useCallback(() => {
-    void refetch();
-  }, [refetch]);
+    const handleRefresh = useCallback(() => {
+        void refetch();
+    }, [refetch]);
+
+    if (error) {
+        return (
+            <View style={styles.centered}>
+                <Text style={styles.errorText}>Failed to load feed</Text>
+            </View>
+        );
+    }
 
-  if (error) {
     return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load feed</Text>
-      </View>
+        <FlatList
+            data={posts}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={SeparatorWithStyle}
+            refreshControl={<RefreshControl refreshing={loading} onRefresh={handleRefresh}/>}
+            ListHeaderComponent={
+                shouldShowSuggestions ? (
+                    <SuggestionsSection
+                        suggestions={suggestions}
+                        onSelectAuthor={onSelectAuthor}
+                    />
+                ) : null
+            }
+            renderItem={({item}) => (
+                <PostCard post={item} onSelectAuthor={onSelectAuthor}/>
+            )}
+            ListEmptyComponent={
+                loading ? null : (
+                    <View style={styles.centered}>
+                        <Text style={styles.emptyTitle}>No posts yet</Text>
+                        <Text style={styles.emptyBody}>
+                            Pull down to refresh or check back later for new updates.
+                        </Text>
+                    </View>
+                )
+            }
+        />
     );
-  }
-
-  return (
-    <FlatList
-      data={posts}
-      keyExtractor={(item) => item.id}
-      contentContainerStyle={styles.listContent}
-      ItemSeparatorComponent={() => <View style={styles.separator} />}
-      refreshControl={<RefreshControl refreshing={loading} onRefresh={handleRefresh} />}
-      renderItem={({ item }) => (
-        <PostCard post={item} onSelectAuthor={onSelectAuthor} />
-      )}
-      ListEmptyComponent={
-        !loading ? (
-          <View style={styles.centered}>
-            <Text style={styles.emptyTitle}>No posts yet</Text>
-            <Text style={styles.emptyBody}>
-              Pull down to refresh or check back later for new updates.
-            </Text>
-          </View>
-        ) : null
-      }
-    />
-  );
 }
 
-const { color, spacing, radius, shadow } = tokens;
+const {color, spacing, radius, shadow} = tokens;
 const feedCardRecipe = cardRecipes.elevated;
 
 const styles = StyleSheet.create({
-  listContent: {
-    padding: spacing.lg,
-    gap: spacing.md
-  },
-  separator: {
-    height: 0
-  },
-  card: {
-    backgroundColor: color[feedCardRecipe.backgroundColor],
-    borderRadius: radius[feedCardRecipe.radius],
-    padding: spacing[feedCardRecipe.padding],
-    ...shadow[feedCardRecipe.elevation]
-  },
-  metaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: spacing.sm
-  },
-  handle: {
-    fontWeight: '600',
-    color: color.text
-  },
-  handleLink: {
-    fontWeight: '600',
-    color: color.primary
-  },
-  metaSeparator: {
-    marginHorizontal: spacing.xs,
-    color: color.textMuted
-  },
-  timestamp: {
-    color: color.textMuted
-  },
-  body: {
-    fontSize: 16,
-    lineHeight: 22,
-    color: color.text
-  },
-  centered: {
-    flex: 1,
-    padding: spacing.xxxl,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  errorText: {
-    fontSize: 16,
-    color: '#d22c2c'
-  },
-  emptyTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: color.text,
-    marginBottom: spacing.sm
-  },
-  emptyBody: {
-    fontSize: 14,
-    color: color.textMuted,
-    textAlign: 'center'
-  }
+    listContent: {
+        padding: spacing.lg,
+        gap: spacing.md
+    },
+    separator: {
+        height: 0
+    },
+    card: {
+        backgroundColor: color[feedCardRecipe.backgroundColor],
+        borderRadius: radius[feedCardRecipe.radius],
+        padding: spacing[feedCardRecipe.padding],
+        ...shadow[feedCardRecipe.elevation]
+    },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: spacing.sm
+    },
+    handle: {
+        fontWeight: '600',
+        color: color.text
+    },
+    handleLink: {
+        fontWeight: '600',
+        color: color.primary
+    },
+    metaSeparator: {
+        marginHorizontal: spacing.xs,
+        color: color.textMuted
+    },
+    timestamp: {
+        color: color.textMuted
+    },
+    body: {
+        fontSize: 16,
+        lineHeight: 22,
+        color: color.text
+    },
+    centered: {
+        flex: 1,
+        padding: spacing.xxxl,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    errorText: {
+        fontSize: 16,
+        color: '#d22c2c'
+    },
+    emptyTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: color.text,
+        marginBottom: spacing.sm
+    },
+    emptyBody: {
+        fontSize: 14,
+        color: color.textMuted,
+        textAlign: 'center'
+    },
+    suggestionsCard: {
+        backgroundColor: color.surface,
+        borderRadius: radius.lg,
+        padding: spacing.lg,
+        marginBottom: spacing.lg
+    },
+    suggestionsTitle: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: color.text,
+        marginBottom: spacing.xs
+    },
+    suggestionsBody: {
+        color: color.textMuted,
+        marginBottom: spacing.md
+    },
+    suggestionsList: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: spacing.sm
+    },
+    suggestionPill: {
+        paddingVertical: spacing.xs,
+        paddingHorizontal: spacing.md,
+        borderRadius: radius.pill ?? radius.lg,
+        backgroundColor: color.neutralMuted ?? color.surfaceMuted,
+        flexDirection: 'column',
+        gap: spacing.xxs
+    },
+    suggestionHandle: {
+        color: color.text,
+        fontWeight: '600'
+    },
+    suggestionHint: {
+        color: color.textMuted,
+        fontSize: 12
+    }
 });