diff --git a/src/App.tsx b/src/App.tsx index af83b64..911da90 100644 --- a/src/App.tsx +++ b/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(); + const [popup, setPopup] = useState({ + message: "Link created successfully", + pop: false, + remove: false, + }); const [sources, setSources] = useState(); @@ -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 ( - +
+ } /> } />} /> diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss index 184a19e..526a8c1 100644 --- a/src/assets/styles/_general.scss +++ b/src/assets/styles/_general.scss @@ -23,6 +23,7 @@ html { body { background-color: $base-black; + position: relative; } body, diff --git a/src/assets/styles/_popup.scss b/src/assets/styles/_popup.scss new file mode 100644 index 0000000..65b5489 --- /dev/null +++ b/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); + } +} diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss index 4f1ea79..b17399a 100644 --- a/src/assets/styles/style.scss +++ b/src/assets/styles/style.scss @@ -10,3 +10,4 @@ @import "./source"; @import "./edit-source"; @import "./loader.scss"; +@import "./popup"; diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx new file mode 100644 index 0000000..ba8a5ae --- /dev/null +++ b/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(PostContext).popupValue.popup; + return ( +
+
+
+ + + + {message} +
+
+
+ ); +}; + +export default Popup; diff --git a/src/pages/CreateSource.tsx b/src/pages/CreateSource.tsx index 035253d..80ff00c 100644 --- a/src/pages/CreateSource.tsx +++ b/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(PostContext).sourceValue; + const { popup, setPopup } = useContext(PostContext).popupValue; const navigate = useNavigate(); const [data, setData] = useState({ 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 diff --git a/src/types/context.ts b/src/types/context.ts index 2d00d67..b9d6830 100644 --- a/src/types/context.ts +++ b/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>; }; + popupValue: { + popup: PopupType; + setPopup: React.Dispatch>; + }; } diff --git a/src/types/popup.ts b/src/types/popup.ts new file mode 100644 index 0000000..0702a9e --- /dev/null +++ b/src/types/popup.ts @@ -0,0 +1,5 @@ +export interface PopupType { + message: string; + pop: boolean; + remove: boolean; +}