fix: fix user name display in follows-item (#89)

Signed-off-by: Iuri Pereira <[email protected]>

mobile/app.json

@@ -3,7 +3,7 @@
     "name": "dsocial",
     "slug": "dsocial",
     "platforms": ["ios", "android"],
-    "version": "1.0.2",
+    "version": "1.0.4",
     "orientation": "portrait",
     "scheme": "tech.berty.dsocial",
     "icon": "./assets/images/icon.png",

mobile/app/[account]/followers.tsx

@@ -2,13 +2,14 @@ import { selectFollowers } from "redux/features/profileSlice";
 import { useAppSelector } from "@gno/redux";
 import { Following } from "@gno/types";
 import FollowModalContent from "@gno/components/view/follow";
+import { useRouter } from "expo-router";
 
 export default function FollowersPage() {
   const data = useAppSelector(selectFollowers);
+  const router = useRouter();
 
   const onPress = (item: Following) => {
-    // TODO: implement this function
-    console.log("on press", item);
+    router.navigate({ pathname: "account", params: { accountName: item.user?.name } });
   };
 
   return <FollowModalContent data={data} onPress={onPress} />;

mobile/app/[account]/following.tsx

@@ -2,13 +2,14 @@ import { useAppSelector } from "@gno/redux";
 import { Following } from "@gno/types";
 import { selectFollowing } from "redux/features/profileSlice";
 import FollowModalContent from "@gno/components/view/follow";
+import { useRouter } from "expo-router";
 
 export default function FollowingPage() {
   const data = useAppSelector(selectFollowing);
+  const router = useRouter();
 
   const onPress = (item: Following) => {
-    // TODO: implement this function
-    console.log("on press", item);
+    router.navigate({ pathname: "account", params: { accountName: item.user?.name } });
   };
 
   return <FollowModalContent data={data} onPress={onPress} />;

mobile/app/[account]/index.tsx

@@ -9,6 +9,7 @@ import { setPostToReply, useAppSelector } from "@gno/redux";
 import { selectAccount } from "redux/features/accountSlice";
 import { setFollows } from "redux/features/profileSlice";
 import { useFeed } from "@gno/hooks/use-feed";
+import { useUserCache } from "@gno/hooks/use-user-cache";
 
 export default function Page() {
   const { accountName } = useLocalSearchParams<{ accountName: string }>();
@@ -22,9 +23,11 @@ export default function Page() {
   const navigation = useNavigation();
   const feed = useFeed();
   const search = useSearch();
-  const currentUser = useAppSelector(selectAccount);
+  const userCache = useUserCache();
   const dispatch = useDispatch();
 
+  const currentUser = useAppSelector(selectAccount);
+
   useEffect(() => {
     const unsubscribe = navigation.addListener("focus", async () => {
       await fetchData();
@@ -49,6 +52,15 @@ export default function Page() {
       const total = await feed.fetchCount(response.address);
       setTotalPosts(total);
 
+      const enrichFollows = async (follows: Following[]) => {
+        for await (const item of follows) {
+          item.user = await userCache.getUser(item.address);
+        }
+      };
+
+      await enrichFollows(following);
+      await enrichFollows(followers);
+
       dispatch(setFollows({ followers, following }));
     } catch (error: unknown | Error) {
       console.log(error);
@@ -61,7 +73,7 @@ export default function Page() {
     router.navigate({ pathname: "account/following" });
   };
 
-  const onPressFollowers = () => {
+  const onPressFollowers = async () => {
     router.navigate({ pathname: "account/followers" });
   };
 

mobile/components/list/follows/follows-item.tsx

@@ -12,7 +12,7 @@ function FollowsItem({ item, onPress }: Props) {
     <TouchableOpacity onPress={() => onPress(item)} style={styles.container}>
       <Image source={{ uri: "https://www.gravatar.com/avatar/tmp" }} style={{ width: 48, height: 48, borderRadius: 24 }} />
       <View style={styles.textBox}>
-        <Text.Body style={styles.name}>@{item.name}</Text.Body>
+        <Text.Body style={styles.name}>@{item.user?.name}</Text.Body>
         <Text.Caption1 numberOfLines={1} ellipsizeMode="tail" style={styles.caption}>
           {item.address}
         </Text.Caption1>

mobile/redux/features/accountSlice.ts

@@ -1,7 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { User } from "@gno/types";
 import { KeyInfo } from "@buf/gnolang_gnonative.bufbuild_es/gnonativetypes_pb";
-import { useGnoNativeContext } from "@gnolang/gnonative";
 
 export interface CounterState {
   account?: User;

mobile/redux/features/profileSlice.ts

@@ -1,6 +1,5 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { Following } from "@gno/types";
-import { useUserCache } from "@gno/hooks/use-user-cache";
 
 export interface ProfileState {
   following: Following[];
@@ -20,18 +19,6 @@ interface FollowsProps {
 }
 
 export const setFollows = createAsyncThunk("profile/setFollows", async ({ following, followers }: FollowsProps, _) => {
-  const cache = useUserCache();
-
-  const enrichFollows = async (follows: Following[]) => {
-    for await (const item of follows) {
-      const user = await cache.getUser(item.address);
-      item.name = user.name;
-    }
-  };
-
-  await enrichFollows(following);
-  await enrichFollows(followers);
-
   return { following, followers };
 });
 
@@ -49,6 +36,9 @@ export const profileSlice = createSlice({
       state.following = action.payload.following;
       state.followers = action.payload.followers;
     });
+    builder.addCase(setFollows.rejected, (state, action) => {
+      console.log("Error while fetching follows, please, check the logs. %s", action.error.message);
+    });
   },
 });
 

mobile/src/hooks/use-search.ts

@@ -80,7 +80,7 @@ export const useSearch = () => {
     if (excludeActiveAccount) {
       // Remove the active account's own username.
       const currentAccount = await gno.getActiveAccount();
-      const i = usernames.indexOf(currentAccount.key.name, 0);
+      const i = usernames.indexOf(currentAccount.key?.name, 0);
       if (i >= 0) {
         usernames.splice(i, 1);
       }

mobile/types.ts

@@ -21,15 +21,14 @@ export interface User {
 }
 
 export interface Following {
-  name: string;
   address: string;
   started_following_at: string;
+  user?: User;
 }
 
 export interface GetJsonFollowersResult {
   followers: Following[];
   n_followers: number;
-
 }
 export interface GetJsonFollowingResult {
   following: Following[];