Add localized feed profile-completion nudge

Views/Feed.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { Card, Text, Button } from 'react-native-paper';
 import API from './../API.js';
 import Post from './../components/Post.js';
 import PostPopularUsers from '../components/PostPopularUsers.js';
@@ -7,6 +8,8 @@ import GlobalState from '../contexts/GlobalState.js';
 import * as Linking from 'expo-linking';
 import { posthog } from './../PostHog.js';
 import * as Updates from 'expo-updates';
+import { useSnapshot } from 'valtio';
+import i18n from "../i18nMessages.js";
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -69,6 +72,8 @@ async function onFetchUpdateAsync() {
 }
 
 let Feed = ({ navigation, route }) => {
+    const gState = useSnapshot(GlobalState);
+    const viewer = gState.me || {};
     let [Posts, setPosts] = useState([]);
     const flatListRef = React.useRef()
     logFeed('render', {
@@ -151,12 +156,36 @@ let Feed = ({ navigation, route }) => {
         return (<Post post={item} />);
     });
 
+    const missingProfilePhoto = !viewer?.profile?.photo;
+    const missingDescription = !String(viewer?.profile?.description || '').trim();
+    const shouldShowProfileNudge = missingProfilePhoto || missingDescription;
+    const renderProfileNudge = () => {
+        if (!shouldShowProfileNudge) return null;
+        return (
+                <Card style={styles.profileNudgeCard}>
+                    <Card.Content>
+                    <Text style={styles.profileNudgeTitle}>{i18n.t("message.completeProfileTitle")}</Text>
+                    <Text style={styles.profileNudgeBody}>{i18n.t("message.completeProfileBody")}</Text>
+                    <Text style={styles.profileNudgeHint}>
+                        {i18n.t("message.completeProfileMissingHint")}
+                    </Text>
+                </Card.Content>
+                <Card.Actions>
+                    <Button mode="contained" onPress={() => navigation.navigate("ProfileSettings")}>
+                        {i18n.t("message.updateProfile")}
+                    </Button>
+                </Card.Actions>
+            </Card>
+        );
+    };
+
 
     return (
         <SafeAreaView>
             <FlatList
                 data={Posts}
                 renderItem={renderPost}
+                ListHeaderComponent={renderProfileNudge}
                 keyExtractor={item => item.lastUpdated || item._id || item.createdAt} //This may refresh the component
                 //ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
                 refreshing={Posts.length === 0}
@@ -185,4 +214,22 @@ const styles = StyleSheet.create({
     container: {
         backgroundColor: "#edf2f7",
     },
+    profileNudgeCard: {
+        marginHorizontal: 10,
+        marginTop: 10,
+        marginBottom: 6,
+    },
+    profileNudgeTitle: {
+        fontSize: 18,
+        fontWeight: "700",
+        marginBottom: 4,
+    },
+    profileNudgeBody: {
+        color: "#4b5563",
+    },
+    profileNudgeHint: {
+        marginTop: 8,
+        color: "#6b7280",
+        fontSize: 12,
+    },
 });