popup init

src/App.tsx

@@ -10,6 +10,10 @@ import "./assets/styles/style.scss";
 // Types
 import { PostType } from "./types/posts";
 import { SourceType } from "./types/sources";
+import { PopupType } from "./types/popup";
+
+// Components
+import Popup from "./components/Popup";
 
 // Pages
 import Login from "./pages/Login";
@@ -27,8 +31,12 @@ import { getLinks } from "./helpers/apiRequests";
 
 const App = () => {
   const navigate = useNavigate();
-  const date = new Date("0.0.0000");
   const [posts, setPosts] = useState<PostType[]>();
+  const [popup, setPopup] = useState<PopupType>({
+    message: "Link created successfully",
+    pop: false,
+    remove: false,
+  });
 
   const [sources, setSources] = useState<SourceType[]>();
 
@@ -46,6 +54,7 @@ const App = () => {
 
   const userValue = useMemo(() => ({ user, setUser }), [user, setUser]);
   const postValue = useMemo(() => ({ posts, setPosts }), [posts, setPosts]);
+  const popupValue = useMemo(() => ({ popup, setPopup }), [popup, setPopup]);
   const sourceValue = useMemo(
     () => ({ sources, setSources }),
     [sources, setSources]
@@ -65,9 +74,10 @@ const App = () => {
   }, []);
 
   return (
-    <PostContext.Provider value={{ postValue, sourceValue }}>
+    <PostContext.Provider value={{ postValue, sourceValue, popupValue }}>
       <UserContext.Provider value={userValue}>
         <div className="App">
+          <Popup />
           <Routes>
             <Route path="/" element={<Main />} />
             <Route path="/dashboard" element={<Main child={<Dashboard />} />} />

src/assets/styles/_general.scss

@@ -23,6 +23,7 @@ html {
 
 body {
   background-color: $base-black;
+  position: relative;
 }
 
 body,

src/assets/styles/_popup.scss

@@ -0,0 +1,68 @@
+.popup {
+  &__wrapper {
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    position: absolute;
+    overflow: hidden;
+    height: 100vh;
+    width: 100%;
+
+    &__inner {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+  }
+
+  opacity: 0;
+  left: 4rem;
+  bottom: 2rem;
+  border-radius: 0.6rem;
+  z-index: 30;
+  position: absolute;
+  width: 35rem;
+  height: 6rem;
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+  padding: 1.6rem;
+  background: $light-black;
+  @include transition-std;
+
+  span {
+    font-size: 1.6rem;
+  }
+
+  svg {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  &.active {
+    @include transition-std;
+    animation: slideIn 2s ease-in-out 0s 1 forwards;
+  }
+}
+
+// Frames
+
+@keyframes slideIn {
+  0% {
+    transform: translateY(3rem);
+  }
+
+  25% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+}

src/assets/styles/style.scss

@@ -10,3 +10,4 @@
 @import "./source";
 @import "./edit-source";
 @import "./loader.scss";
+@import "./popup";

src/components/Popup.tsx

@@ -0,0 +1,34 @@
+// Modules
+import { IconContext } from "react-icons";
+import { useContext } from "react";
+import { PostContext } from "../context/PostContext";
+
+// Icons
+import { FaCheck } from "react-icons/fa";
+
+// Types
+
+import { ContextType } from "../types/context";
+
+const Popup = () => {
+  const { pop, remove, message } =
+    useContext<ContextType>(PostContext).popupValue.popup;
+  return (
+    <div className="popup__wrapper">
+      <div className="popup__wrapper__inner">
+        <div
+          className={
+            remove ? "popup active disabled" : pop ? "popup active" : "popup"
+          }
+        >
+          <IconContext.Provider value={{ color: "#8DD77F" }}>
+            <FaCheck />
+          </IconContext.Provider>
+          <span>{message}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

src/pages/CreateSource.tsx

@@ -1,5 +1,5 @@
 // Modules
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import { IconContext } from "react-icons";
 import { useNavigate } from "react-router-dom";
 import { ContextType } from "../types/context";
@@ -14,6 +14,7 @@ import { SourceEditDataType } from "../types/sources";
 
 const CreateSource = () => {
   const { setSources } = useContext<ContextType>(PostContext).sourceValue;
+  const { popup, setPopup } = useContext<ContextType>(PostContext).popupValue;
   const navigate = useNavigate();
   const [data, setData] = useState<SourceEditDataType>({
     name: "",
@@ -64,10 +65,13 @@ const CreateSource = () => {
               className="source-edit__submit"
               onClick={() => {
                 createLink(() => {}, data);
+                setPopup({ ...popup, pop: true });
+
                 setTimeout(() => {
-                  navigate("/source");
+                  // navigate("/source");
                   getLinks(setSources);
                 }, 2000);
+                setTimeout(() => setPopup({ ...popup, remove: true }), 2000);
               }}
             >
               Create new source

src/types/context.ts

@@ -4,6 +4,7 @@ import React, { SetStateAction } from "react";
 // Types
 import { PostType } from "../types/posts";
 import { SourceType } from "../types/sources";
+import { PopupType } from "./popup";
 
 // Context type
 
@@ -16,4 +17,8 @@ export interface ContextType {
     sources: SourceType[];
     setSources: React.Dispatch<SetStateAction<SourceType[]>>;
   };
+  popupValue: {
+    popup: PopupType;
+    setPopup: React.Dispatch<SetStateAction<PopupType>>;
+  };
 }

src/types/popup.ts

@@ -0,0 +1,5 @@
+export interface PopupType {
+  message: string;
+  pop: boolean;
+  remove: boolean;
+}