feat(alert-hook): added alert hook to display danger and success snac…

src/App.jsx

@@ -38,6 +38,9 @@ import "react-virtualized-tree/lib/main.css";
 import "styles/global.css";
 import GlobalStyles from "styles/globalStyle";
 
+// useAlert hook provider
+import AlertProvider from "components/Widgets/AlertProvider";
+
 function App() {
   const { state } = useContext(GlobalContext);
   return (
@@ -59,7 +62,12 @@ function AppWrapper() {
   }, []);
   return (
     <GlobalProvider>
-      <App />
+      <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
+        <AlertProvider>
+          <GlobalStyles />
+          <Routes />
+        </AlertProvider>
+      </ThemeProvider>
     </GlobalProvider>
   );
 }

src/components/Widgets/AlertProvider/index.jsx

@@ -0,0 +1,130 @@
+/*
+ Copyright (C) 2021 Shruti Agarwal ([email protected]), Aman Dwivedi ([email protected]), Pushkar Saneja ([email protected])
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+import React, {
+  useContext,
+  createContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+import PropTypes from "prop-types";
+
+// provides a function alertUser(message,type), type: 'danger' || 'success'
+// a custom alert box notifies the entered message to user for 5 seconds
+
+const alertContext = createContext();
+
+const AlertProvider = ({ children, time = 5000 }) => {
+  const [alertMessage, setAlertMessage] = useState({
+    message: "",
+    type: "",
+  });
+  const alertUser = useCallback((message, type) => {
+    setAlertMessage({ message, type });
+  }, []);
+
+  useEffect(() => {
+    let clearMessage;
+    if (alertMessage.message)
+      clearMessage = setTimeout(() => {
+        setAlertMessage({ message: "", type: "" });
+      }, time);
+
+    return () => {
+      clearTimeout(clearMessage);
+    };
+  }, [time, alertMessage]);
+
+  return (
+    <alertContext.Provider value={alertUser}>
+      {alertMessage.message && alertMessage.type && (
+        <div>
+          <div
+            className={`alert bg-${alertMessage.type} alert-dismissible fade show font-medium text-white alert-fix-position`}
+            role="alert"
+          >
+            <div className="d-flex">
+              {alertMessage.type === "danger" && (
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="mr-3"
+                >
+                  <path
+                    d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M14.5 25H17.5V22H14.5V25ZM14.5 6V19H17.5V6H14.5Z"
+                    fill="#DC4146"
+                  />
+                </svg>
+              )}
+              {alertMessage.type === "success" && (
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 50 50"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="mr-3"
+                >
+                  <path
+                    d="M25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M38 15L22 33L12 25"
+                    stroke="#28A745"
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+              {alertMessage.message}
+              <button
+                type="button"
+                className="close"
+                data-dismiss="alert"
+                aria-label="Close"
+                onClick={() => setAlertMessage({ message: "", type: "" })}
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      {children}
+    </alertContext.Provider>
+  );
+};
+
+AlertProvider.propTypes = {
+  time: PropTypes.number,
+  children: PropTypes.node.isRequired,
+};
+
+export default AlertProvider;
+export const useAlert = () => useContext(alertContext);

src/pages/Home/index.jsx

@@ -40,7 +40,8 @@ import routes from "constants/routes";
 import { isAuth } from "shared/authHelper";
 
 // Widgets
-import { Alert, Button, Spinner } from "components/Widgets";
+import { Button, Spinner } from "components/Widgets";
+import { useAlert } from "components/Widgets/AlertProvider";
 
 // Features cards
 import Features from "./Features";
@@ -50,6 +51,7 @@ import LoginForm from "./style";
 
 const Home = ({ location }) => {
   const history = useHistory();
+  const alertUser = useAlert();
 
   // Data required for user login
   const [values, setValues] = useState({
@@ -59,8 +61,6 @@ const Home = ({ location }) => {
 
   // State Variables for handling Error Boundaries
   const [loading, setLoading] = useState(false);
-  const [showError, setShowError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState(null);
 
   const { username, password } = values;
 
@@ -77,17 +77,15 @@ const Home = ({ location }) => {
       .then(() => history.push(routes.browse))
       .catch((err) => {
         setLoading(false);
-        setErrorMessage(err.message);
-        setShowError(true);
+        alertUser(err.message, "danger");
       });
   };
 
   useEffect(() => {
     const queryParams = queryString.parse(location?.search);
     const { message } = queryParams;
     if (message) {
-      setErrorMessage(message);
-      setShowError(true);
+      alertUser(message, "danger");
     }
     window.history.replaceState(null, null, window.location.pathname);
   }, [location?.search]);
@@ -96,16 +94,6 @@ const Home = ({ location }) => {
     <>
       <Title title="Getting Started with FOSSology" />
       <div className="main-container my-3">
-        {showError && (
-          <>
-            <Alert
-              type="danger"
-              setShow={setShowError}
-              message={errorMessage}
-              heading="An error occured"
-            />
-          </>
-        )}
         <div className="row m-0">
           <div className="col-md-6">
             <b className="font-size-medium">FOSSology</b> is a framework for