Started animation

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "2.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2398,6 +2398,16 @@
         }
       }
     },
+    "@rive-app/canvas": {
+      "version": "1.0.83",
+      "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-1.0.83.tgz",
+      "integrity": "sha512-IARYWsnh1NPWY2wTYZ15TBg8Bbe9LEPGSHHd8TivmCfagK61WtAPiPjApGUN3Fbk0MUWjmbNwtv9aK3x7QRkog=="
+    },
+    "@rive-app/webgl": {
+      "version": "1.0.79",
+      "resolved": "https://registry.npmjs.org/@rive-app/webgl/-/webgl-1.0.79.tgz",
+      "integrity": "sha512-zP8q0D1EOvS0bllhRy3iWwwLxsZ6y7Q01HdZNWo4tNui6EDRC7DRNr40mLSMDKqgF79eZo9vf3lkk8/Wai0fsA=="
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -15102,6 +15112,15 @@
         "inherits": "^2.0.1"
       }
     },
+    "rive-react": {
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/rive-react/-/rive-react-3.0.23.tgz",
+      "integrity": "sha512-CMJaWgnVEZKLAsu5p1bBkBniCbaTLI+kqBh++y3XdK2aG4MCfYgxYr90rHstn/z4VW8/NP/i/l1NRYxrzgSgsw==",
+      "requires": {
+        "@rive-app/canvas": "1.0.83",
+        "@rive-app/webgl": "1.0.79"
+      }
+    },
     "rollup": {
       "version": "1.32.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",

package.json

@@ -41,6 +41,7 @@
     "redux-persist": "^6.0.0",
     "redux-persist-transform-filter": "0.0.20",
     "redux-saga": "^1.1.3",
+    "rive-react": "^3.0.23",
     "sass": "^1.34.1",
     "socket.io": "^4.5.1",
     "socket.io-client": "^4.5.1",

src/App.js

@@ -12,94 +12,94 @@ import GlobalStyle from "./components/Styles/globalStyles";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-const URL = "https://trampa-api-test.dilig.net/";
-const socket = io(URL, {autoConnect: true});
+// const URL = "https://trampa-api-test.dilig.net/";
+// const socket = io(URL, {autoConnect: true});
 const App = () => {
-  console.log(socket);
+  // console.log(socket);
 
-  const [isConnected, setIsConnected] = useState(socket.connected);
-  const [lastPong, setLastPong] = useState(null);
-  console.log();
-  useEffect(() => {
-    socket.auth = {
-      // userId: "62de57c6dff6f986e43d14ec",
-      userId: "62de5844dff6f986e43d14f6",
-      sessionID: localStorage.getItem("sessionID"),
-    };
-    socket.on("connect", (client) => {
-      console.log("client: ", client);
-      setIsConnected(true);
-    });
-    socket.on("session", ({ sessionID, userID }) => {
-      localStorage.setItem("sessionID", sessionID);
-      localStorage.setItem("userID", userID);
-      console.log("sessionID: ", sessionID);
-      console.log("userID: ", userID);
-    });
-    // socket.on("connect_error", (err) => {
-    //   console.log(err);
-    // });
+  // const [isConnected, setIsConnected] = useState(socket.connected);
+  // const [lastPong, setLastPong] = useState(null);
+  // console.log();
+  // useEffect(() => {
+  //   socket.auth = {
+  //     // userId: "62de57c6dff6f986e43d14ec",
+  //     userId: "62de5844dff6f986e43d14f6",
+  //     sessionID: localStorage.getItem("sessionID"),
+  //   };
+  //   socket.on("connect", (client) => {
+  //     console.log("client: ", client);
+  //     setIsConnected(true);
+  //   });
+  //   socket.on("session", ({ sessionID, userID }) => {
+  //     localStorage.setItem("sessionID", sessionID);
+  //     localStorage.setItem("userID", userID);
+  //     console.log("sessionID: ", sessionID);
+  //     console.log("userID: ", userID);
+  //   });
+  //   // socket.on("connect_error", (err) => {
+  //   //   console.log(err);
+  //   // });
 
-    socket.on("connection", (client) => {
-      console.log(client);
-    });
+  //   socket.on("connection", (client) => {
+  //     console.log(client);
+  //   });
 
-    socket.on("disconnect", () => {
-      setIsConnected(false);
-    });
+  //   socket.on("disconnect", () => {
+  //     setIsConnected(false);
+  //   });
 
-    socket.on("user disconnected", (userID) => {
-      console.log(userID);
-    });
+  //   socket.on("user disconnected", (userID) => {
+  //     console.log(userID);
+  //   });
 
-    // socket.on('emit', (client) => {
-    //   console.log(client);
-    // })
-    socket.on("sokkk", (clg) => {
-      console.log(clg);
-    });
-    // socket.onAny((event, ...args) => {
-    //   console.log(event, args);
-    // });
-    socket.on("povratna", (data) => {
-      console.log(data);
-    });
-    socket.on("private_message", (data) => {
-      console.log(data);
-    });
+  //   // socket.on('emit', (client) => {
+  //   //   console.log(client);
+  //   // })
+  //   socket.on("sokkk", (clg) => {
+  //     console.log(clg);
+  //   });
+  //   // socket.onAny((event, ...args) => {
+  //   //   console.log(event, args);
+  //   // });
+  //   socket.on("povratna", (data) => {
+  //     console.log(data);
+  //   });
+  //   socket.on("private_message", (data) => {
+  //     console.log(data);
+  //   });
 
-    // socket.open;
+  //   // socket.open;
 
-    socket.on("pong", () => {
-      setLastPong(new Date().toISOString());
-    });
+  //   socket.on("pong", () => {
+  //     setLastPong(new Date().toISOString());
+  //   });
 
-    // socket.connect();
+  //   // socket.connect();
 
-    return () => {
-      socket.off("connect");
-      socket.off("disconnect");
-      socket.off("pong");
-    };
-  }, []);
-  const handleClick = () => {
-    // socket.connect();
-    // socket.emit("sokkk 2", "sock");
-    // socket.emit("sock")
-  };
-  const sendPing = () => {
-    socket.emit("private_message", {
-      text: "Probica",
-      // toUserId: "62de5844dff6f986e43d14f6",
-      toUserId: "62de57c6dff6f986e43d14ec",
-      chatId: "62eb8424632e1112ef467750",
-    });
-  };
-  const disconnect = () => {
-    // socket.disconnect();
-    socket.disconnect();
-  };
-  console.log(socket);
+  //   return () => {
+  //     socket.off("connect");
+  //     socket.off("disconnect");
+  //     socket.off("pong");
+  //   };
+  // }, []);
+  // const handleClick = () => {
+  //   // socket.connect();
+  //   // socket.emit("sokkk 2", "sock");
+  //   // socket.emit("sock")
+  // };
+  // const sendPing = () => {
+  //   socket.emit("private_message", {
+  //     text: "Probica",
+  //     // toUserId: "62de5844dff6f986e43d14f6",
+  //     toUserId: "62de57c6dff6f986e43d14ec",
+  //     chatId: "62eb8424632e1112ef467750",
+  //   });
+  // };
+  // const disconnect = () => {
+  //   // socket.disconnect();
+  //   socket.disconnect();
+  // };
+  // console.log(socket);
   return (
     <Router history={history}>
       <Helmet>

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

@@ -15,15 +15,31 @@ import { useTranslation } from "react-i18next";
 import { SelectField } from "../CreateOffer.styled";
 import { useSelector } from "react-redux";
 import useIsMobile from "../../../../hooks/useIsMobile";
+import { useRive } from "rive-react";
+import AnimationRiv from "../../../../assets/animations/register.riv";
 
 const FirstPartCreateOffer = (props) => {
   const [subcat, setSubcat] = useState([]);
   const locations = useSelector((state) => state.locations.locations);
   const categories = useSelector((state) => state.categories.categories);
+  const [isPlayed, setIsPlayed] = useState(false);
   const { isMobile } = useIsMobile();
+  const {RiveComponent, rive} = useRive({
+    src:AnimationRiv,
+    autoplay: false,
+    animations: "Successful Registration"
+  })
+  useEffect(() => {
+    if (rive && !isPlayed) {
+      rive.play();
+      setIsPlayed(true);
+      console.log(rive);
+    }
+  }, [rive])
 
   const { t } = useTranslation();
 
+
   useEffect(() => {
     if (!props.offer) {
       if (Object.keys(props.informations).length !== 0) {
@@ -86,6 +102,7 @@ const FirstPartCreateOffer = (props) => {
   return (
     <>
       <CreateOfferFormContainer component="form" onSubmit={formik.handleSubmit}>
+      <RiveComponent />
         <FieldLabel leftText={t("offer.title")} />
         <TitleField
           name="nameOfProduct"