mini-programs/src/components/NTRPTestEntryCard/index.tsx

import React, { useState, useEffect, useCallback, memo } from "react";
import { View, Image, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useUserInfo, useUserActions } from "@/store/userStore";
// import { getCurrentFullPath } from "@/utils";
import evaluateService, { StageType } from "@/services/evaluateService";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import ArrowRight from "@/static/ntrp/ntrp_arrow_right_color.svg";
import {
  EvaluateScene,
  useEvaluate,
  EvaluateCallback,
} from "@/store/evaluateStore";
import styles from "./index.module.scss";

function NTRPTestEntryCard(props: {
  type: EvaluateScene;
  evaluateCallback?: EvaluateCallback;
}) {
  const [testFlag, setTestFlag] = useState(false);
  const { type, evaluateCallback } = props;
  const userInfo = useUserInfo();
  const { setCallback } = useEvaluate();
  const { fetchUserInfo } = useUserActions();

  console.log(userInfo);

  useEffect(() => {
    if (!userInfo.id) {
      fetchUserInfo();
    }
    evaluateService.getLastResult().then((res) => {
      setTestFlag(res.code === 0 && res.data.has_ntrp_level);
    });
  }, [userInfo.id]);

  const handleTest = useCallback(
    function () {
      switch (type) {
        case EvaluateScene.list:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/game_pages/list/index" });
            },
            onCancel: () => {
              // Taro.redirectTo({ url: "/game_pages/list/index" });
              Taro.navigateBack();
            },
          });
          break;
        case EvaluateScene.share:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
          });
          break;
        case EvaluateScene.detail:
        case EvaluateScene.publish:
          setCallback(evaluateCallback as EvaluateCallback);
          break;
        case EvaluateScene.user:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              // Taro.redirectTo({ url: "/user_pages/myself/index" });
              Taro.navigateBack();
            },
          });
          break;
        case EvaluateScene.userEdit:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/game_pages/list/index" });
            },
            onCancel: () => {
              // Taro.redirectTo({ url: "/user_pages/edit/index" });
              Taro.navigateBack();
            },
          });
          break;
        default:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
          });
      }
      Taro.navigateTo({
        url: `/other_pages/ntrp-evaluate/index?stage=${
          testFlag ? StageType.INTRO : StageType.TEST
        }`,
      });
    },
    [setCallback]
  );

  return type === EvaluateScene.list ? (
    <View className={styles.higher} onClick={handleTest}>
      <View className={styles.desc}>
        <View>
          <View className={styles.title}>
            <Text>快速测一测✏️</Text>
          </View>
          <View className={styles.title}>
            <Text>你的</Text>
            <Text className={styles.colorTip}> (</Text>
            <Text className={styles.strongTip}>NTRP</Text>
            <Text className={styles.colorTip}>) </Text>
            <Text>水平?</Text>
          </View>
        </View>
        <View className={styles.entry}>
          <Text>快速测试</Text>
          <Image className={styles.entryIcon} src={ArrowRight} />
        </View>
      </View>
      <View className={styles.avatarWrap}>
        <View className={styles.avatar}>
          <Image
            className={styles.avatarUrl}
            src={userInfo.avatar_url}
            mode="aspectFill"
          />
        </View>
        {/* avatar side */}
        <View className={styles.addonImage}>
          <Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
        </View>
      </View>
    </View>
  ) : (
    <View className={styles.lower} onClick={handleTest}>
      <View className={styles.desc}>
        <View className={styles.title}>
          <Text>不知道自己的</Text>
          <Text className={styles.colorTip}> (</Text>
          <Text className={styles.strongTip}>NTRP</Text>
          <Text className={styles.colorTip}>) </Text>
          <Text>水平?</Text>
        </View>
        <View className={styles.entry}>
          <Text>快速测试</Text>
          <Image className={styles.entryIcon} src={ArrowRight} />
        </View>
      </View>
      <View className={styles.avatarWrap}>
        <View className={styles.avatar}>
          <Image
            className={styles.avatarUrl}
            src={userInfo.avatar_url}
            mode="aspectFill"
          />
        </View>
        {/* avatar side */}
        <View className={styles.addonImage}>
          <Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
        </View>
      </View>
    </View>
  );
}

export default memo(NTRPTestEntryCard);
// export default NTRPTestEntryCard;