From fd0d2b12c3696df5c755b011501ef107d6fb9cf7 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Thu, 22 Sep 2022 00:23:17 +0500 Subject: [PATCH] notifications --- src/App.tsx | 7 +++-- src/components/Popup.tsx | 25 ++++++++++-------- src/helpers/apiRequests.ts | 54 +++++++++++++++++++++++++++++++------- src/pages/CreateSource.tsx | 17 ++++++------ src/pages/EditSource.tsx | 16 ++++++----- src/pages/Source.tsx | 8 +++++- src/types/popup.ts | 7 +++-- 7 files changed, 94 insertions(+), 40 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 911da90..2d79f6d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,9 +33,12 @@ const App = () => { const navigate = useNavigate(); const [posts, setPosts] = useState(); const [popup, setPopup] = useState({ - message: "Link created successfully", + success: false, pop: false, - remove: false, + message: { + success: "Success", + failure: "Failure", + }, }); const [sources, setSources] = useState(); diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index ba8a5ae..0015f1d 100644 --- a/src/components/Popup.tsx +++ b/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(PostContext).popupValue.popup; return (
-
- - - - {message} +
+ {success ? ( + + + + ) : ( + + + + )} + {success ? message.success : message.failure}
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts index d7a8a74..61d0c48 100644 --- a/src/helpers/apiRequests.ts +++ b/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, @@ -21,14 +22,27 @@ export const getPosts = ( .finally(() => setLoad(false)); }; -export const deleteLink = (setSuccess: React.Dispatch, id: number) => { +export const deleteLink = ( + setSuccess: React.Dispatch, + popup: PopupType, + setPopup: React.Dispatch>, + 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) => { }; export const createLink = ( - setSuccess: React.Dispatch, - data: { name: string; source: string } + popup: PopupType, + setPopup: React.Dispatch>, + 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, + popup: PopupType, + setPopup: React.Dispatch>, + 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); }); }; diff --git a/src/pages/CreateSource.tsx b/src/pages/CreateSource.tsx index 66fc01e..14125d5 100644 --- a/src/pages/CreateSource.tsx +++ b/src/pages/CreateSource.tsx @@ -15,7 +15,7 @@ import { SourceEditDataType } from "../types/sources"; const CreateSource = () => { const { setSources } = useContext(PostContext).sourceValue; const { popup, setPopup } = useContext(PostContext).popupValue; - // const navigate = useNavigate(); + const navigate = useNavigate(); const [data, setData] = useState({ name: "", source: "", @@ -65,14 +65,13 @@ const CreateSource = () => { disabled={!(data.name.length > 0 && data.source.length > 0)} className="source-edit__submit" onClick={() => { - createLink(() => {}, data); - setPopup({ ...popup, pop: true }); - - setTimeout(() => { - // navigate("/source"); - getLinks(setSources); - }, 2000); - setTimeout(() => setPopup({ ...popup, remove: true }), 2000); + createLink( + popup, + setPopup, + data, + () => navigate("/source"), + () => getLinks(setSources) + ); }} > Create new source diff --git a/src/pages/EditSource.tsx b/src/pages/EditSource.tsx index efeca16..c47865c 100644 --- a/src/pages/EditSource.tsx +++ b/src/pages/EditSource.tsx @@ -19,6 +19,7 @@ const EditSource = () => { const navigate = useNavigate(); const { sources, setSources } = useContext(PostContext).sourceValue; + const { popup, setPopup } = useContext(PostContext).popupValue; const [source, setSource] = useState(); useEffect(() => { if (sources) { @@ -60,7 +61,7 @@ const EditSource = () => { readOnly type="text" id="id" - value={source ? source.name : ""} + value={source ? source.id : ""} />
@@ -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); - setTimeout(() => { - navigate("/source"); - getLinks(setSources); - }, 2000); + updateLink( + popup, + setPopup, + () => navigate("/source"), + () => getLinks(setSources), + id ? parseInt(id) : 0, + data + ); }} > Update source diff --git a/src/pages/Source.tsx b/src/pages/Source.tsx index ef1ab42..b9ac3d0 100644 --- a/src/pages/Source.tsx +++ b/src/pages/Source.tsx @@ -23,6 +23,7 @@ import { ContextType } from "../types/context"; const Source = () => { const { sources, setSources } = useContext(PostContext).sourceValue; + const { popup, setPopup } = useContext(PostContext).popupValue; const [deleted, setDeleted] = useState(false); useEffect(() => { @@ -79,7 +80,12 @@ const Source = () => {