shoptime/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

import React, { useEffect, useState } from "react";

import { useDispatch, useSelector } from "react-redux";

import TPanel from "../../components/TPanel/TPanel";
import { getBrandLayoutInfo } from "../../features/brand/brandsSlice";
import Banner from "./Banner/Banner";
import css from "./FeaturedBrandsPanel.module.less";
import QuickMenu from "./QuickMenu/QuickMenu";

const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => {
  return brandInfo.find((brand) => brand?.patnrId === selectedPatnrId);
};

export default function FeaturedBrandsPanel() {
  const dispatch = useDispatch();

  const brandInfo = useSelector((state) => state.brand.brandInfoData.brandInfo);
  const brandTopImgInfo = useSelector((state) => state.brand.brandLayoutInfoData.brandTopImgInfo);

  const [selectedBrandInfo, setSelectedBrandInfo] = useState();

  // @@ Todo, provided by GNB as props or global state
  const [selectedPatnrId, setSelectedPatnrId] = useState("1");

  const handleQuickMenu = (patnrId) => {
    setSelectedPatnrId(patnrId);
  };

  useEffect(() => {
    if (brandInfo) {
      setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId));
    }

    dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
  }, [selectedPatnrId]);

  return (
    /* scenario page 98 */
    <TPanel className={css.container}>
      {brandInfo && brandInfo.length > 1 && (
        <QuickMenu
          brandInfo={brandInfo}
          onQuickMenuClick={handleQuickMenu}
          selectedPatnrId={selectedPatnrId}
        />
      )}

      {selectedBrandInfo && (
        <Banner selectedBrandInfo={selectedBrandInfo} brandTopImgInfo={brandTopImgInfo} />
      )}
    </TPanel>
  );
}