added redux

2022-12-26 22:39:33 +05:00
commit 2838655cd4
156 changed files with 35988 additions and 0 deletions
@@ -0,0 +1,64 @@
+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> = ({ text, 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))}
+            text={text.popupConnect}
+            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}
+            text={text.popupConnectEx}
+          ></PopupConnectEx>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};