tiefen_space_h5/app/page.js

"use client";

import React, {
  useEffect,
  useRef,
  useState,
  useImperativeHandle,
  forwardRef,
} from "react";
import { Tabs, Swiper, Toast, InfiniteScroll, List, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRefresh } from "@fortawesome/free-solid-svg-icons";
import PostItem from "../components/PostItem";
// import { sleep } from "antd-mobile/es/utils/sleep";
import "./index.css";
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
import Link from "next/link";
import requireAPI from "@/utils/requireAPI";
import Empty from "@/components/Empty";
import { get } from "@/utils/storeInfo";
import StreamerNavigator from "@/components/StreamerNavigator";
import AddToHome from "@/components/AddToHome";
import InfiniteScrollContent from "@/components/InfiniteScrollContent";
const variables = {
  "@active-line-color": "#f00", // 将主题色改为红色
};
const tabItems = [
  { key: "commend", title: "推荐" },
  { key: "follow", title: "关注" },
];

export default function Home() {
  const recommPostRef = useRef();
  const followPostRef = useRef();
  const swiperRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);

  const [scrollHeight, setScrollHeight] = useState(0);
  const childrenFunc = () => {
    if (!activeIndex) {
      recommPostRef.current?.doRefresh();
    } else {
      followPostRef.current?.doRefresh();
    }
  };
  return (
    <div>
      <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
        <Tabs
          activeKey={tabItems[activeIndex].key}
          onChange={(key) => {
            const index = tabItems.findIndex((item) => item.key === key);
            setActiveIndex(index);
            swiperRef.current?.swipeTo(index);
          }}
        >
          {tabItems.map((item) => (
            <Tabs.Tab
              destroyOnClose={true}
              forceRender={false}
              title={item.title}
              key={item.key}
              className="text-left"
            />
          ))}
        </Tabs>
        <Link
          href="search"
          className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
        >
          <Image
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/search.png"}
          />
        </Link>
      </div>
      <Swiper
        direction="horizontal"
        allowTouchMove={false}
        loop={false}
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          {!activeIndex && (
            <RecommPostList scrollHeight={scrollHeight} ref={recommPostRef} />
          )}
        </Swiper.Item>
        <Swiper.Item>
          {!!activeIndex && (
            <FollowPostList scrollHeight={scrollHeight} ref={followPostRef} />
          )}
        </Swiper.Item>
      </Swiper>
      <div
        id="rightddd"
        className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
        }`}
        onClick={childrenFunc}
      >
        <FontAwesomeIcon
          icon={faRefresh}
          size="xl"
          style={{ maxWidth: "20px" }}
        />
      </div>
      <StreamerNavigator userId={Number(get("inviter"))} />
      <AddToHome />
    </div>
  );
}
const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [currentSearchKey, setCurrentSearchKey] = useState(2);
  const [commenPostList, setCommenPostList] = useState([]);
  useEffect(() => {
    // getRecommPostList(2).then((res) => {
    //   setCommenPostList(res);
    //   setHasMore(true)
    // });
  }, []);
  useImperativeHandle(
    ref,
    () => {
      return { doRefresh };
    },
    []
  );
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth", // 可选，平滑滚动效果
    });
    const list = await getRecommPostList(1);
    setCommenPostList(list);
    setHasMore(true);
  }
  async function loadMore() {
    // debugger
    const list = await getRecommPostList(!commenPostList.length ? 2 : 0);
    if (list.length == 0) {
      setHasMore(false);
    }
    setCommenPostList([...commenPostList, ...list]);
  }
  const getRecommPostList = async (type = 2) => {
    setLoading(true);
    const data = await requireAPI("POST", "/api/moment/recomm_list", {
      body: { op_type: type },
    });
    setLoading(false);
    if (data.ret == -1) {
      // Toast.show({
      //   icon: "fail",
      //   content: data.msg,
      //   position: "top",
      // });
    } else {
      return data.data.recomm_list;
    }
  };
  return (
    // <div className="px-4 pb-20 max-h-screen overflow-y-auto">
    <div className="px-4 pb-20 min-h-screen">
      <List>
        {loading && !commenPostList.length && (
          <div>
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
          </div>
        )}
        {commenPostList?.map((item) => (
          <List.Item key={item.id} className="!p-0">
            <PostItem type="post" data={item} date={new Date(item.ct * 1000)} />
          </List.Item>
        ))}
        {/* {commenPostList?.length == 0 && !loading && (
          <div
            className={`flex flex-col items-center justify-center h-screen`}
            // style={{ height: `${scrollHeight}px` }}
          >
            <Empty type="nodata" />
          </div>
        )} */}
      </List>
      {/* {!!commenPostList?.length && (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      )} */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent
          hasMore={hasMore}
          isEmpty={commenPostList.length == 0}
          showNoMore={commenPostList.length === 0}
        />
      </InfiniteScroll>
    </div>
  );
});
const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(false);
  const [followPostList, setFollowPostList] = useState([]);
  const [currentTime, setCurrentTime] = useState();
  const [offset, setOffset] = useState(0);
  const ids = useRef(null);
  useEffect(() => {
    getFollowIds().then((res) => {
      ids.current = res;
      getFollowPostList(res, 0);
    });
  }, []);
  useImperativeHandle(
    ref,
    () => {
      return { doRefresh };
    },
    []
  );
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    // getRecommPostList(1);
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth", // 可选，平滑滚动效果
    });
    // setFollowPostList([]);
    await getFollowPostList(ids.current, 0);
  }
  async function loadMore() {
    await getFollowPostList(ids.current, offset);
    // const newList = [...followPostList, ...list];
    // setFollowPostList(newList);
  }
  const getFollowIds = async () => {
    setLoading(true);
    setCurrentTime(Math.floor(new Date().getTime() / 1000));
    const data = await requireAPI(
      "POST",
      "/api/account_relation/list_follow",
      {
        body: { offset, limit: 4 },
      },
      true
    );
    return data;
  };
  const getFollowPostList = async (data, offset) => {
    if (data.data.list.length > 0) {
      //查关注主播展示资料
      const followsResponse = await requireAPI(
        "POST",
        "/api/moment/list_by_mids",
        {
          body: {
            offset,
            limit: 4,
            ct_upper_bound: currentTime,
            mids: data.data.list?.map((item) => item.obj_mid),
          },
        }
      );
      // debugger;
      // console.log("offset", followsResponse.data.offset);
      setOffset(followsResponse.data.offset);
      setHasMore(followsResponse.data.more);
      setLoading(false);
      if (data.ret == -1) {
        // Toast.show({
        //   icon: "fail",
        //   content: data.msg,
        //   position: "top",
        // });
      } else {
        setFollowPostList((old) => {
          if (!offset) {
            return followsResponse.data.list;
          } else {
            return [...old, ...followsResponse.data.list];
          }
        });
      }
    } else {
      setLoading(false);
    }
  };

  return (
    <div className="px-4 pb-20">
      {/* <PullToRefresh onRefresh={doRefresh}> */}
      <List>
        {loading && !followPostList.length && (
          <div className="my-[31px]">
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
          </div>
        )}
        {followPostList?.map((item, index) => (
          <List.Item key={item.id + "_" + index} className="!p-0">
            <PostItem type="post" data={item} date={new Date(item.ct * 1000)} />
          </List.Item>
        ))}
        {!followPostList?.length && (
          <div
            className={`flex flex-col items-center justify-center h-screen`}
            style={{ height: `calc(100vh - 133px)` }}
          >
            <Empty type="nodata" />
          </div>
        )}
      </List>
      {!!followPostList?.length && (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      )}
      {/* </PullToRefresh> */}
    </div>
  );
});