pixelstreamingv2/src/components/Main/Main.tsx

import "./main.css";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

import { PopupConnect } from "../popupConnect/popupConnect";
import { PopupConnectEx } from "../popupConnectEx/popupConnectEx";
import { popupAnimation } from "../../utils/animationProps";
import { useAppDispatch, useAppSelector } from "../../hooks/redux";
import {
  createSession,
  connectSession,
} from "../../store/reducers/ActionCreator";

export const Main: React.FC<any> = ({ visible, setVisible }) => {
  const [value, setValue] = useState<string>("");
  const dispatch = useAppDispatch();
  const { popup1, popup2 } = visible;
  const { currentCard, isLoading } = useAppSelector(
    (state) => state.cardReducer
  );

  return (
    <AnimatePresence mode="wait">
      {popup1 && (
        <motion.div
          key={1}
          variants={popupAnimation}
          initial={"hidden"}
          animate={"show"}
          exit={"hidden"}
        >
          <PopupConnect
            isLoading={isLoading}
            logo={currentCard?.image.logo}
            onConnect={() => dispatch(createSession(currentCard.title))}
            visible={visible}
            setVisible={setVisible}
          ></PopupConnect>
        </motion.div>
      )}
      {popup2 && (
        <motion.div
          key={2}
          variants={popupAnimation}
          initial={"hidden"}
          animate={"show"}
          exit={"hidden"}
        >
          <PopupConnectEx
            value={value}
            setValue={setValue}
            isLoading={isLoading}
            logo={currentCard?.image.logo}
            onConnect={() => dispatch(connectSession(value))}
            visible={visible}
            setVisible={setVisible}
          ></PopupConnectEx>
        </motion.div>
      )}
    </AnimatePresence>
  );
};