Final

.eslintrc.json

@@ -1,24 +1,31 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+    "env": {
+        "browser": true,
+        "es2021": true
     },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error"
-  }
-}
+    "extends": [
+        "plugin:react/recommended",
+        "airbnb"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules":{
+         "no-restricted-syntax": ["error", "FunctionExpression", "WithStatement", "BinaryExpression[operator='in']"],
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+        "react/function-component-definition": [
+        2,
+        {
+            "namedComponents": "arrow-function",
+            "unnamedComponents": "arrow-function"
+        }
+    ]
+      }
+}

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.1.3",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
@@ -16,14 +17,16 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
+    "sweetalert": "^2.1.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.js"
+    "lint": "eslint src/**/*.js",
+    "lint-fix": "eslint src/**/*.js --fix"
   },
   "eslintConfig": {
     "extends": [
@@ -44,14 +47,14 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^8.20.0",
+    "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "2.7.1"
   }
 }

src/App.js

@@ -1,23 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 // import Packages
 
-import { userContext } from './Context/UserContext';
+import userContext from './Context/UserContext';
 // imported Created Context
 
 import Routing from './Routing';
 import Auth from './Authrization';
 // imported Requried Componenets
 
-function App() {
-//state for the context
-  const [loginData,setLoginData] = useState({
-    username : '',
-    password : '',
-    loggedIn : false
+const App = () => {
+// state for the context
+  const [loginData, setLoginData] = useState({
+    username: '',
+    password: '',
+    loggedIn: false,
   });
+  const AuthContext = useMemo(() => ({
+    loginData, setLoginData,
+  }));
   return (
     // Providing the context value to our App
-    <userContext.Provider value={{loginData,setLoginData}}>
+    <userContext.Provider value={AuthContext}>
       <div className="App">
         {/* Use for Authrization */}
         <Auth />
@@ -27,6 +30,6 @@ function App() {
       </div>
     </userContext.Provider>
   );
-}
+};
 
 export default App;

src/AppView/Components/MovieCard.js

@@ -2,46 +2,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-//imported High Order Component
+// imported High Order Component
 import HocComponent from '../../HOC/HocComponent';
 
-//imported css file
+// imported css file
 import './CssFiles/showMovie.css';
 
 /**
  * use to render every movie
- * @param {props} param0 destructure Data Which have to dispay on the Dashboard
- * @returns
+ * @param {object}  Data Which need to dispay on the Dashboard
+ * @returns A node
  */
-const MovieCard = ({ data }) => {
-    return (
-        <div className="trending">
-                    // render evry movie using map method
-            {data &&
-                data.map((item) => {
-                    return (
-                        <div key={item.id} className="media">
-                            {/* Displaying the Movie Data */}
-                            <img
-                                src={item.posterUrl}
-                                alt={item.title}
-                                style={{ width: '300px', height: '450px' }}
-                                className="poster"
-                            />
-                            <b className="title">{item.title}</b>
-                            <span className="subTitle">
-                                {item.director}
-                                <span className="subTitle">{item.year}</span>
-                            </span>
-                        </div>
-                    );
-                })}
-        </div> // trending End
-    );
+const MovieCard = (props) => {
+  const { data } = props;
+  return (
+    <div className="trending">
+      {/* render evry movie using map method */}
+      {data
+                && data.map((item) => (
+                  <div key={item.id} className="media">
+                    {/* Displaying the Movie Data */}
+                    <img
+                      src={item.posterUrl}
+                      alt={item.title}
+                      style={{ width: '300px', height: '450px' }}
+                      className="poster"
+                    />
+                    <b className="title">{item.title}</b>
+                    <span className="subTitle">
+                      {item.director}
+                      <span className="subTitle">{item.year}</span>
+                    </span>
+                  </div>
+                ))}
+    </div> // trending End
+  );
 };
 // validating props
 MovieCard.propTypes = {
-    data: PropTypes.array.isRequired,
+  data: PropTypes.arrayOf.isRequired,
 };
 /**
  *  Created Component using High Order Component

src/AppView/Components/Slidder.js

@@ -13,35 +13,35 @@ import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import './CssFiles/Slidder.css';
 
 /**
- *
- * @param {props} param0 destructure Data Which have to dispay on the Dashboard
- * @returns
+ * Add two numbers.
+ * @param {object} props The Data ehich needs to display.
+ * @returns {number} The sum of the two numbers.
  */
-function Slidder({ data }) {
-    return (
-        <Carousel showThumbs={false} infiniteLoop={true} autoplay>
-            {
+const Slidder = (props) => {
+  const { data } = props;
+  return (
+    <Carousel showThumbs={false} infiniteLoop autoplay>
+      {
                 // display the data using map method
-                data &&
-                    data.map((item) => {
-                        return (
-                            <div className="mainDivOfSlidder" key={item.id}>
-                                {/* displaying the data in Slidder */}
-                                <img
-                                    className="posterOfSlidder"
-                                    src={item.posterUrl}
-                                />
-                                <h3 className="legend">{item.title}</h3>
-                            </div> // mainDivOfSlidder end
-                        );
-                    })
+                data
+                    && data.map((item) => (
+                      <div className="mainDivOfSlidder" key={item.id}>
+                        {/* displaying the data in Slidder */}
+                        <img
+                          className="posterOfSlidder"
+                          src={item.posterUrl}
+                          alt={item.title}
+                        />
+                        <h3 className="legend">{item.title}</h3>
+                      </div> // mainDivOfSlidder end
+                    ))
             }
-        </Carousel>
-    );
-}
+    </Carousel>
+  );
+};
 // validating props
 Slidder.propTypes = {
-    data: PropTypes.array.isRequired,
+  data: PropTypes.arrayOf.isRequired,
 };
 
 /**