From 1aaedaf7e2d59dfb9783e1b0ab424dadb8dd1543 Mon Sep 17 00:00:00 2001
From: laststranger <callmelz@qq.com>
Date: Sat, 10 Feb 2024 18:08:28 +0800
Subject: [PATCH] developing profile page

---
 src/pages/Profile/hooks/useProfileInfo.ts | 20 +++++++++++++-------
 src/pages/Profile/index.tsx               | 15 +++++++++++++--
 src/pages/home/index.tsx                  |  7 +++++--
 src/utils/index.ts                        | 15 +++++++++++++++
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/pages/Profile/hooks/useProfileInfo.ts b/src/pages/Profile/hooks/useProfileInfo.ts
index 94c6ab2..f54d17e 100644
--- a/src/pages/Profile/hooks/useProfileInfo.ts
+++ b/src/pages/Profile/hooks/useProfileInfo.ts
@@ -20,17 +20,23 @@ type ProfileData = {
 
 const useProfileInfo = (id: string) => {
     const [data, setData] = useState<ProfileData | null>(null);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
-        request.get(`/users/${id}`).then(res => {
-            const languages = res.data?.tags
-                ?.filter(each => each.startsWith("language_"))
-                .reduce((acc, tag) => [...acc, getLanguage(tag)], []);
-            setData({ ...res.data, languages });
-        });
+        request
+            .get(`/users/${id}`)
+            .then(res => {
+                const languages = res.data?.tags
+                    ?.filter(each => each.startsWith("language_"))
+                    .reduce((acc, tag) => [...acc, getLanguage(tag)], []);
+                setData({ ...res.data, languages });
+            })
+            .finally(() => {
+                setLoading(false);
+            });
     }, []);
 
-    return data;
+    return [data, loading];
 };
 
 export default useProfileInfo;
diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx
index f8cf7da..e20708a 100644
--- a/src/pages/Profile/index.tsx
+++ b/src/pages/Profile/index.tsx
@@ -11,8 +11,19 @@ type Props = {
     id: string;
 };
 const Index = ({ route, navigation }) => {
-    const data = useProfileInfo(route.params.id);
-    console.warn("22");
+    const [data, loading] = useProfileInfo(route.params.id);
+    // console.warn("22");
+    if (loading) {
+        return (
+            <View className="flex-1 bg-[#0e1013]">
+                <Image
+                    className="h-full w-full"
+                    contentFit="contain"
+                    source="https://assets.vrchat.com/www/images/loading.gif"
+                />
+            </View>
+        );
+    }
     return (
         <View className="flex-1 bg-[#0e1013]">
             {/*<SvgUri*/}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 226e96e..ab6b16c 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -4,7 +4,7 @@ import useUserStore from "../../store/useUserStore";
 import { ParamListBase, useFocusEffect, useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { Url } from "@/navigation/types";
-import { getLanguage, getRank, getRankColor } from "@/utils";
+import { getLanguage, getRank, getRankColor, getRankColorByRank } from "@/utils";
 import { Ionicons } from "@expo/vector-icons";
 import Groups from "@/pages/home/components/Groups";
 import { Image } from "expo-image";
@@ -80,7 +80,10 @@ const Index = () => {
                                 <Text className="w-[210] text-xl text-vrcWhite">{userInfo.statusDescription}</Text>
                             </View>
                             <View
-                                style={{ backgroundColor: getRankColor(currentRank) }}
+                                style={{
+                                    backgroundColor: getRankColorByRank(currentRank),
+                                    transform: [{ scale: 0.8 }],
+                                }}
                                 className="flex-row items-center justify-center rounded-lg px-2 py-1"
                             >
                                 <Ionicons name="shield" size={12} color="black" />
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6a8d2a7..c48219d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -44,6 +44,21 @@ export function getRankColorByTags(tags: string[] = []) {
     }
 }
 
+export function getRankColorByRank(rank: string): string {
+    switch (rank) {
+        case "Trusted":
+            return "text-trusted";
+        case "Known":
+            return "#ff7b42";
+        // case "system_trust_known":
+        //     return "User";
+        // case "system_trust_basic":
+        //     return "New";
+        default:
+            return "#cccccc";
+    }
+}
+
 export function getRankNameByTags(tags: string[]) {
     const prefixRank = tags?.findLast(each => each.indexOf("system_trust_") !== -1);
     return getRank(prefixRank);