tiefen_space_h5/components/BottomNav/index.js

"use client";

import React, { useEffect } from "react";
import { TabBar, 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 OwnIcon from "../OwnIcon";
import OwnImage from "../OwnImage";
function BottomNav({ changeNoticeCount, changeInviter, noticeCount }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  useEffect(() => {
    const currentInviter = searchParams.get("inviter");
    if (currentInviter) {
      // console.log("Current Inviter: " + 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 () => {};
  }, [noticeCount, pathname]);
  const setRouteActive = (value) => {
    router.replace(value);
  };
  const tabs = [
    {
      key: "/",
      title: "广场",
      icon: <OwnIcon lazy className="w-8 h-8" src="/icons/postblur.png" />,
      activeIcon: (
        <OwnIcon lazy className="w-8 h-8" src="/icons/postfocus.png" />
      ),
    },
    {
      key: "/space",
      title: "空间",
      icon: <OwnIcon lazy className="w-8 h-8" src="/icons/space_blur.png" />,
      activeIcon: (
        <OwnIcon lazy className="w-8 h-8" src="/icons/space_focus.png" />
      ),
    },
    {
      key: "/noticeDetail",
      title: "消息",
      icon: (
        <div className="relative">
          <OwnIcon lazy className="w-8 h-8" src="/icons/streamblur.png" />
          {!!noticeCount && (
            <Badge
              content={noticeCount > 99 ? "99+" : noticeCount}
              className="absolute top-0 right-0 z-10"
            />
          )}
        </div>
      ),
      activeIcon: (
        <div className="relative">
          <OwnIcon lazy className="w-8 h-8" src="/icons/streamfocus.png" />
          {!!noticeCount && (
            <Badge
              content={noticeCount > 99 ? "99+" : noticeCount}
              className="absolute top-0 right-0 z-10"
            />
          )}
        </div>
      ),
    },
    {
      key: "/my",
      title: "我的",
      icon: <OwnIcon lazy className="w-8 h-8" src="/icons/myblur.png" />,
      activeIcon: <OwnIcon lazy className="w-8 h-8" src="/icons/myfocus.png" />,
    },
  ];
  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 items-center gap-2">
            <OwnImage
              outClassName="w-[42px] h-[42px]"
              className="w-[42px] h-[42px]"
              src="/images/notice.png"
            />
            <div>
              <p className="text-base">{`收到一条${
                n_type === 0
                  ? "系统"
                  : n_type === 1
                  ? "审核"
                  : n_type === 2
                  ? "付费"
                  : "活动"
              }通知`}</p>
              <p className="text-sm text-[#ffffff80]">{title}</p>
            </div>
          </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);