notifications

src/App.tsx

@@ -33,9 +33,12 @@ const App = () => {
   const navigate = useNavigate();
   const [posts, setPosts] = useState<PostType[]>();
   const [popup, setPopup] = useState<PopupType>({
-    message: "Link created successfully",
+    success: false,
     pop: false,
-    remove: false,
+    message: {
+      success: "Success",
+      failure: "Failure",
+    },
   });
 
   const [sources, setSources] = useState<SourceType[]>();

src/components/Popup.tsx

@@ -4,27 +4,30 @@ import { useContext } from "react";
 import { PostContext } from "../context/PostContext";
 
 // Icons
-import { FaCheck } from "react-icons/fa";
+import { FaRegThumbsUp } from "react-icons/fa";
+import { FaRegThumbsDown } from "react-icons/fa";
 
 // Types
 
 import { ContextType } from "../types/context";
 
 const Popup = () => {
-  const { pop, remove, message } =
+  const { pop, message, success } =
     useContext<ContextType>(PostContext).popupValue.popup;
   return (
     <div className="popup__wrapper">
       <div className="popup__wrapper__inner">
-        <div
+        <div className={pop ? "popup active" : "popup"}>
-          className={
+          {success ? (
-            remove ? "popup active disabled" : pop ? "popup active" : "popup"
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
-          }
+              <FaRegThumbsUp />
-        >
+            </IconContext.Provider>
-          <IconContext.Provider value={{ color: "#8DD77F" }}>
+          ) : (
-            <FaCheck />
+            <IconContext.Provider value={{ color: "red" }}>
-          </IconContext.Provider>
+              <FaRegThumbsDown />
-          <span>{message}</span>
+            </IconContext.Provider>
+          )}
+          <span>{success ? message.success : message.failure}</span>
         </div>
       </div>
     </div>

src/helpers/apiRequests.ts

@@ -1,10 +1,11 @@
 // Modules
 import axios from "axios";
-import React from "react";
+import React, { SetStateAction } from "react";
 
 // Types
 import { PostType } from "../types/posts";
 import { LinksAll } from "../types/links";
+import { PopupType } from "../types/popup";
 
 export const getPosts = (
   setLoad: React.Dispatch<boolean>,
@@ -21,14 +22,27 @@ export const getPosts = (
     .finally(() => setLoad(false));
 };
 
-export const deleteLink = (setSuccess: React.Dispatch<boolean>, id: number) => {
+export const deleteLink = (
+  setSuccess: React.Dispatch<boolean>,
+  popup: PopupType,
+  setPopup: React.Dispatch<SetStateAction<PopupType>>,
+  id: number
+) => {
   axios
     .delete(`http://95.85.124.41:8080/link/delete/${id}`)
     .then((res) => {
       setSuccess(true);
+      setPopup({ ...popup, success: true, pop: true });
+      setTimeout(() => {
+        setPopup({ ...popup, pop: false });
+      }, 2000);
     })
     .catch((err) => {
       setSuccess(false);
+      setPopup({ ...popup, success: false, pop: true });
+      setTimeout(() => {
+        setPopup({ ...popup, pop: false });
+      }, 2000);
     });
 };
 
@@ -42,8 +56,11 @@ export const getLinks = (setLinks: React.Dispatch<LinksAll[]>) => {
 };
 
 export const createLink = (
-  setSuccess: React.Dispatch<string>,
+  popup: PopupType,
-  data: { name: string; source: string }
+  setPopup: React.Dispatch<SetStateAction<PopupType>>,
+  data: { name: string; source: string },
+  navigate: () => void,
+  getLinks: () => void
 ) => {
   axios
     .post("http://95.85.124.41:8080/link/create", {
@@ -51,24 +68,43 @@ export const createLink = (
       source: data.source,
     })
     .then((res) => {
-      setSuccess(res.data.message);
+      setPopup({ ...popup, success: true, pop: true });
+      navigate();
+      setTimeout(() => {
+        setPopup({ ...popup, pop: false });
+        getLinks();
+      }, 2000);
     })
     .catch((err) => {
-      setSuccess("error");
+      setPopup({ ...popup, success: false, pop: true });
+      setTimeout(() => {
+        setPopup({ ...popup, pop: false });
+      }, 2000);
     });
 };
 
 export const updateLink = (
-  setSuccess: React.Dispatch<string>,
+  popup: PopupType,
+  setPopup: React.Dispatch<SetStateAction<PopupType>>,
+  navigate: () => void,
+  getLinks: () => void,
   id: number,
   data: { name: string; source: string }
 ) => {
   axios
     .put(`http://95.85.124.41:8080/link/update/${id}`, data)
     .then((res) => {
-      setSuccess(res.data.message);
+      setPopup({ ...popup, success: true, pop: true });
+      navigate();
+      setTimeout(() => {
+        setPopup({ ...popup, pop: false });
+        getLinks();
+      }, 2000);
     })
     .catch((err) => {
-      setSuccess("error");
+      setPopup({ ...popup, success: false, pop: true });
+      setTimeout(() => {
+        setPopup({ ...popup, pop: false });
+      }, 2000);
     });
 };

src/pages/CreateSource.tsx

@@ -15,7 +15,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 navigate = useNavigate();
   const [data, setData] = useState<SourceEditDataType>({
     name: "",
     source: "",
@@ -65,14 +65,13 @@ const CreateSource = () => {
               disabled={!(data.name.length > 0 && data.source.length > 0)}
               className="source-edit__submit"
               onClick={() => {
-                createLink(() => {}, data);
+                createLink(
-                setPopup({ ...popup, pop: true });
+                  popup,
-
+                  setPopup,
-                setTimeout(() => {
+                  data,
-                  // navigate("/source");
+                  () => navigate("/source"),
-                  getLinks(setSources);
+                  () => getLinks(setSources)
-                }, 2000);
+                );
-                setTimeout(() => setPopup({ ...popup, remove: true }), 2000);
               }}
             >
               Create new source

src/pages/EditSource.tsx

@@ -19,6 +19,7 @@ const EditSource = () => {
   const navigate = useNavigate();
   const { sources, setSources } =
     useContext<ContextType>(PostContext).sourceValue;
+  const { popup, setPopup } = useContext<ContextType>(PostContext).popupValue;
   const [source, setSource] = useState<SourceType>();
   useEffect(() => {
     if (sources) {
@@ -60,7 +61,7 @@ const EditSource = () => {
                     readOnly
                     type="text"
                     id="id"
-                    value={source ? source.name : ""}
+                    value={source ? source.id : ""}
                   />
                 </div>
                 <div className="source-edit__input">
@@ -113,11 +114,14 @@ const EditSource = () => {
                 disabled={!(data.name.length > 0 && data.source.length > 0)}
                 className="source-edit__submit"
                 onClick={() => {
-                  updateLink(() => {}, id ? parseInt(id) : 0, data);
+                  updateLink(
-                  setTimeout(() => {
+                    popup,
-                    navigate("/source");
+                    setPopup,
-                    getLinks(setSources);
+                    () => navigate("/source"),
-                  }, 2000);
+                    () => getLinks(setSources),
+                    id ? parseInt(id) : 0,
+                    data
+                  );
                 }}
               >
                 Update source

src/pages/Source.tsx

@@ -23,6 +23,7 @@ import { ContextType } from "../types/context";
 const Source = () => {
   const { sources, setSources } =
     useContext<ContextType>(PostContext).sourceValue;
+  const { popup, setPopup } = useContext<ContextType>(PostContext).popupValue;
   const [deleted, setDeleted] = useState<boolean>(false);
 
   useEffect(() => {
@@ -79,7 +80,12 @@ const Source = () => {
                           <div className="source-action__block">
                             <button
                               onClick={() => {
-                                deleteLink(setDeleted, source.id);
+                                deleteLink(
+                                  setDeleted,
+                                  popup,
+                                  setPopup,
+                                  source.id
+                                );
                               }}
                             >
                               <span>Delete</span>

src/types/popup.ts

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