memowake-front/app/(tabs)/user-message.tsx

import Choice from '@/components/user-message.tsx/choice';
import Done from '@/components/user-message.tsx/done';
import Look from '@/components/user-message.tsx/look';
import UserName from '@/components/user-message.tsx/userName';
import { checkAuthStatus } from '@/lib/auth';
import { FileUploadItem } from '@/lib/background-uploader/types';
import { fetchApi } from '@/lib/server-api-util';
import { User } from '@/types/user';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useEffect, useState } from 'react';
import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from 'react-native';
export type Steps = "userName" | "look" | "choice" | "done";
export default function UserMessage() {
    const router = useRouter();
    // 步骤
    const [steps, setSteps] = useState<Steps>("userName")
    const [username, setUsername] = useState('')
    const [avatar, setAvatar] = useState('')
    const [fileData, setFileData] = useState<FileUploadItem[]>([])
    const [isLoading, setIsLoading] = useState(false);
    const [userInfo, setUserInfo] = useState<User | null>(null);
    const statusBarHeight = StatusBar?.currentHeight ?? 0;

    // 获取路由参数
    const params = useLocalSearchParams();
    const { username: usernameParam } = params;

    useEffect(() => {
        checkAuthStatus(router);
    }, []);

    // 获取用户信息
    const getUserInfo = async () => {
        const res = await fetchApi<User>("/iam/user-info");
        setUserInfo(res);
        setUsername(res?.nickname || '');
        setAvatar(res?.avatar_file_url || '');
    }

    const handleUser = () => {
        setIsLoading(true);
        fetchApi("/iam/user/info", {
            method: "POST",
            body: JSON.stringify({
                username,
                avatar_file_id: fileData?.[0]?.originalFile?.file_id
            })
        }).then(() => {
            setIsLoading(false);
            setSteps('done');
        }).catch(() => {
            setIsLoading(false);
        });
    };
    useEffect(() => {
        getUserInfo();
        setSteps("userName")
    }, [usernameParam]);

    return (
        <KeyboardAvoidingView
            style={{ flex: 1 }}
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -statusBarHeight}
        >
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1,
                }}
                keyboardShouldPersistTaps="handled"
                bounces={false}
            >
                <View className="h-full" key={steps}>
                    {(() => {
                        const components = {
                            userName: (
                                <UserName
                                    setSteps={setSteps}
                                    username={username}
                                    setUsername={setUsername}
                                />
                            ),
                            look: (
                                <Look
                                    setSteps={setSteps}
                                    fileData={fileData}
                                    setFileData={setFileData}
                                    isLoading={isLoading}
                                    handleUser={handleUser}
                                    avatar={avatar}
                                />
                            ),
                            choice: <Choice setSteps={setSteps} />,
                            done: <Done />
                        };

                        return components[steps as keyof typeof components] || null;
                    })()}
                </View>
            </ScrollView>
        </KeyboardAvoidingView>
    );
}