tiefen_space_h5/components/BottomNav/index.js

"use client";

import React, { useEffect } from "react";
import { TabBar, Image, Toast, Badge } from "antd-mobile";
import "./index.css";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import WebSocketComponent from "../Websocket";
import { changeNoticeCount, changeInviter } from "@/store/actions";
import { connect } from "react-redux";
import { get } from "@/utils/storeInfo";
import requireAPI from "@/utils/requireAPI";
import { ErrorBoundary } from "react-error-boundary";
function BottomNav({ changeNoticeCount, changeInviter, noticeCount }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  useEffect(() => {
    const currentInviter = searchParams.get("inviter");
    if (currentInviter) {
      changeInviter(currentInviter);
    }
  }, [pathname]);
  useEffect(() => {
    const getDtata = async () => {
      try {
        const { mid } = get("account");
        const body = {
          mid,
        };
        const _data = await requireAPI(
          "POST",
          "/api/notification/get_unread_count",
          {
            body,
          }
        );
        if (_data.ret === -1) {
          return;
        }
        changeNoticeCount(_data.data.total);
      } catch (error) {}
    };
    getDtata();
    return () => {};
  }, []);
  const setRouteActive = (value) => {
    router.replace(value);
  };
  const tabs = [
    {
      key: "/",
      title: "广场",
      icon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postblur.png"}
          />
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postfocus.png"
            }
          />
        </div>
      ),
    },
    {
      key: "/space",
      title: "空间",
      icon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_blur.png"
            }
          />
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_focus.png"
            }
          />
        </div>
      ),
    },
    {
      key: "/noticeDetail",
      title: "消息",
      icon: (
        <div className="w-8 h-8 relative">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/streamblur.png"
            }
          />
          {!!noticeCount && (
            <Badge
              content={noticeCount > 99 ? "+99" : noticeCount}
              className="absolute top-0 right-1"
            />
          )}
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8 relative">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/streamfocus.png"
            }
          />
          {!!noticeCount && (
            <Badge
              content={noticeCount > 99 ? "+99" : noticeCount}
              className="absolute top-0 right-1"
            />
          )}
        </div>
      ),
    },
    {
      key: "/my",
      title: "我的",
      icon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myblur.png"}
          />
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myfocus.png"}
          />
        </div>
      ),
    },
  ];
  const checkPath = () => {
    const pathnames = ["/", "/space", "/noticeDetail", "/my"];
    const isActive = pathnames.some((path) => path === pathname);
    return isActive;
  };
  const handleGetWebsocketData = (data) => {
    if (data.d.unread_cnt > 0) {
      changeNoticeCount(data.d.unread_cnt);
      const { n_type, title } = data.d.notif;
      Toast.show({
        type: "info",
        maskClassName: "notice-toast",
        content: (
          <div className="flex flex-col gap-2">
            <p className="text-base">{`🔔 收到一条${
              n_type === 0
                ? "系统"
                : n_type === 1
                ? "审核"
                : n_type === 2
                ? "付费"
                : "活动"
            }通知`}</p>
            <p className="text-sm text-[#ffffff80]">{title}</p>
          </div>
        ),
        position: "top",
        duration: 5000,
      });
    }
  };
  return (
    <>
      <TabBar
        activeKey={pathname}
        onChange={(value) => setRouteActive(value)}
        className={!checkPath() ? "hidden" : ""}
      >
        {tabs.map((item) => (
          <TabBar.Item
            key={item.key}
            icon={pathname === item.key ? item.activeIcon : item.icon}
            title={item.title}
            className="text-[#ffffff40]"
          />
        ))}
      </TabBar>
      <WebSocketComponent getData={handleGetWebsocketData} />
    </>
  );
}

const mapStateToProps = ({ reducer }) => {
  return {
    noticeCount: reducer.noticeCount,
  };
};
const mapDispatchToProps = {
  changeNoticeCount,
  changeInviter,
};
export default connect(mapStateToProps, mapDispatchToProps)(BottomNav);