Replace node-sass package with sass and fix Depreciated modules

frontend/package.json

@@ -15,38 +15,40 @@
     "font-awesome": "^4.7.0",
     "joi-browser": "^13.4.0",
     "jwt-decode": "^3.1.2",
-    "mdbreact": "^5.0.1",
-    "node-sass": "^4.14.1",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-card-flip": "^1.0.11",
-    "react-dnd": "^5.0.0",
-    "react-dnd-html5-backend": "^3.0.2",
-    "react-dom": "^17.0.1",
-    "react-icons": "^4.1.0",
-    "react-multi-select-component": "^3.1.5",
+    "mdbreact": "^5.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-card-flip": "^1.1.5",
+    "react-dnd": "^15.1.1",
+    "react-dnd-html5-backend": "^15.1.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-multi-select-component": "^4.2.3",
     "react-owl-carousel": "^2.3.3",
-    "react-popper": "^2.2.4",
+    "react-popper": "^2.2.5",
     "react-recaptcha": "^2.3.10",
-    "react-redux": "^7.2.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0",
     "react-simple-card": "^2.0.2",
-    "react-tag-input": "^6.5.2",
-    "reactstrap": "^8.7.1",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
+    "react-tag-input": "^6.8.0",
+    "reactstrap": "^9.0.1",
+    "redux": "^4.1.2",
+    "redux-thunk": "^2.4.1",
+    "sass": "^1.49.9",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^2.0.1",
-    "styled-components": "^5.2.1",
-    "suneditor-react": "^2.16.0",
-    "web-vitals": "^1.1.1"
+    "semantic-ui-react": "^2.1.2",
+    "styled-components": "^5.3.5",
+    "suneditor": "^2.42.0",
+    "suneditor-react": "^3.4.0",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "postinstall": "semantic-ui-css-patch"
   },
   "husky": {
     "hooks": {
@@ -78,8 +80,8 @@
     ]
   },
   "devDependencies": {
-    "husky": "^4.3.6",
-    "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1"
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.1"
   }
 }

frontend/src/app.js

@@ -1,7 +1,7 @@
 import { Fragment, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
-  Switch,
+  Routes,
   Route,
   useLocation,
 } from "react-router-dom";
@@ -67,109 +67,116 @@ const App = () => {
 
   return (
     <Fragment>
-      <div className="Container">
+
+       <div className="Container">
         <SimpleToast open={toast} message={"You have changed the theme"} />
-        <Switch>
+
+       <Routes>
           {isSuperAdmin ? (
             <Route
               exact={true}
               path="/admin"
-              render={() => <LoggedIn theme={theme} />}
-            />
-          ) : null}
+              element={ <LoggedIn theme={theme} />}
+              />
+              ) : null}
 
           {isSuperAdmin ? (
-            <Route
+              <Route
               exact={true}
               path="/dashboard"
-              render={() => <Admin theme={theme} />}
-            />
-          ) : null}
+              element={<Admin theme={theme} />}
+              />
+              ) : null}
+
+        </Routes>
           <div>
             <Navbar handleClick={toggleTheme} theme={theme} />
-            <Switch>
+
+            <Routes>
               <Route
                 exact={true}
                 path="/"
-                render={() => <Home theme={theme} />}
+                element={ <Home theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/about-us"
-                render={() => <About theme={theme} />}
+                element={<About theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/Broadcasts"
-                render={() => <Broadcast theme={theme} />}
+                element={<Broadcast theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/all-broadcasts"
-                render={() => <AllBroadcasts theme={theme} />}
+                element={ <AllBroadcasts theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/resources"
-                render={() => <Resources theme={theme} />}
+                element={ <Resources theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/contact-us"
-                render={() => <ContactUs theme={theme} />}
+                element={ <ContactUs theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/faqs"
-                render={() => <Faq theme={theme} />}
+                element={ <Faq theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/admin"
-                render={() => <Login theme={theme} />}
+                element={<Login theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/forgot-password"
-                render={() => <ForgotPassword theme={theme} />}
+                element={ <ForgotPassword theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/forgot-password/:id"
-                component={ForgotPasswordRecovery}
+                element={ForgotPasswordRecovery}
               />
               <Route
                 exact={true}
                 path="/setting"
-                render={() => <Setting theme={theme} />}
+                element={ <Setting theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/terms"
-                render={() => <Terms theme={theme} />}
+                element={ <Terms theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/get-involved"
-                render={() => <GetInvolved theme={theme} />}
+                element={ <GetInvolved theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/privacy-policy"
-                render={() => <PrivacyPolicy theme={theme} />}
+                element={<PrivacyPolicy theme={theme} />}
               />
               <Route
                 exact={true}
                 path="/join-us-form"
-                render={() => <JoinUsForm theme={theme} />}
+                element={ <JoinUsForm theme={theme} />}
               />
-              <Route render={() => <NotFound theme={theme} />} />
-            </Switch>
+              <Route element={ <NotFound theme={theme} />} />
+            </Routes>
+
           </div>
-        </Switch>
+
         <ScrollTop theme={theme} />
         <Footer className="Footer" theme={theme} />
       </div>
+
     </Fragment>
   );
 };

frontend/src/pages/Admin/Components/AddTeamMember/AddTeamMember.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Joi from "joi-browser";
 import styles from "./add-team-member.module.scss";
-import MultiSelect from "react-multi-select-component";
+import {MultiSelect} from "react-multi-select-component";
 
 import { Button2 } from "../../../../components/util/Button/index";
 import { Grid } from "@material-ui/core";

frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/AddBroadcasts.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import SunEditor from "suneditor-react";
-import "suneditor/dist/css/suneditor.min.css";
+import "suneditor/dist/css/suneditor.min.css"
 import styles from "./add-broadcasts.module.scss";
 import Joi from "joi-browser";
 import { Button2 } from "../../../../../components/util/Button/index";

frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/add-broadcasts.module.scss

@@ -130,7 +130,7 @@
     font-weight: 900;
   }
 
-  &:nth-last-child() {
+  &:nth-last-child(n) {
     margin-right: 0;
   }
 }

frontend/src/pages/Home/components/JoinUsForm/Form.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Joi from "joi-browser";
-import MultiSelect from "react-multi-select-component";
+import {MultiSelect} from "react-multi-select-component";
 
 import styles from "./form.module.scss";
 import { Button2 } from "../../../../components/util/Button/index";