arranged finally

src/AdminDetail/index.js

@@ -1,3 +1,3 @@
-// Login Details of the user
+// Login Constants of the user
 export const adminUser = 'vishal';
 export const adminPass = 'admin@123';

src/AppView/CssFiles/Slidder.css → src/AppView/Components/CssFiles/Slidder.css

@@ -1,6 +1,8 @@
+/* sub-container of Slidder */
 .posterOfSlidder{
     height: 600px;
 }
+/* mainn container of slidder */
 .mainDivOfSlidder{
     height: 600px;
 }

src/AppView/CssFiles/showMovie.css → src/AppView/Components/CssFiles/showMovie.css

@@ -1,3 +1,4 @@
+/* main sub-container for the card */
 .media{
     display: flex;
     flex-direction: column;
@@ -9,25 +10,30 @@
     position: relative;
     color: white;
 }
+/* Hover Effect on media  container */
 .media:hover{
     background-color: white;
     color: black;
 }
+/* A poster use to reduce radius */
 .poster{
     border-radius: 10px;
 }
+/* use to style title containner */
 .title{
     width: 100%;
     text-align: center;
     font-size: 17px;
     padding: 8px 0;
 }
+/* sub-container of the title container */
 .subTitle{
     display: flex;
     justify-content: space-between;
     padding-bottom: 3px;
     padding:  0 2px;
 }
+/* the main  conntainer of the card */
 .trending{
     display: flex;
     flex-wrap: wrap;

src/AppView/MovieCard.js → src/AppView/Components/MovieCard.js

@@ -1,25 +1,24 @@
+// imported packages
 import React from 'react';
 import PropTypes from 'prop-types';
-// imported packages
 
-import HocComponent from '../HOC/HocComponent';
 //imported High Order Component
+import HocComponent from '../../HOC/HocComponent';
 
-import './CssFiles/showMovie.css';
 //imported css file
+import './CssFiles/showMovie.css';
 
 /**
  * use to render every movie
- * @param {props} param0 the Data Which have to dispay on the Dashboard
+ * @param {props} param0 destructure Data Which have to dispay on the Dashboard
  * @returns
  */
 const MovieCard = ({ data }) => {
-    //destructure props
     return (
         <div className="trending">
+                    // render evry movie using map method
             {data &&
                 data.map((item) => {
-                    // render evry movie using map method
                     return (
                         <div key={item.id} className="media">
                             {/* Displaying the Movie Data */}
@@ -47,7 +46,5 @@ MovieCard.propTypes = {
 /**
  *  Created Component using High Order Component
  */
-
 const Card = HocComponent(MovieCard);
-
 export default Card;

src/AppView/Slidder.js → src/AppView/Components/Slidder.js

@@ -1,28 +1,27 @@
+// imported Packages
 import React from 'react';
 import PropTypes from 'prop-types';
-// imported Packages
 
-import { Carousel } from 'react-responsive-carousel';
 // imported Packeage of the Slidder
+import { Carousel } from 'react-responsive-carousel';
 
-import HocComponent from '../HOC/HocComponent';
 // imported High Order Component
+import HocComponent from '../../HOC/HocComponent';
 
+// imported  css File
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import './CssFiles/Slidder.css';
-// imported  css File
 
 /**
  *
- * @param {props} param0 the Data Which have to dispay on the Dashboard
+ * @param {props} param0 destructure Data Which have to dispay on the Dashboard
  * @returns
  */
 function Slidder({ data }) {
-    // destructure the props
     return (
         <Carousel showThumbs={false} infiniteLoop={true} autoplay>
             {
-                // eslint-disable-next-line react/prop-types
+                // display the data using map method
                 data &&
                     data.map((item) => {
                         return (
@@ -49,5 +48,4 @@ Slidder.propTypes = {
  *  use to create component using Hoc
  */
 const HocSlidder = HocComponent(Slidder);
-
 export default HocSlidder;

src/AppView/Dashboard/Main.js

@@ -1,22 +1,24 @@
+// imported Packages
 import React, { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-// imported Packages
 
+// imported Context constant
 import { userContext } from '../../Context/UserContext';
-// imported Created Context
 
-import HeaderNav from '../Navbar/HeaderNav';
-import HocSlidder from '../Slidder';
-import Card from '../MovieCard';
-import { secureRoute } from '../../Routing/RouteVars';
 // imported Reqiured Components
+import HeaderNav from '../Navbar/HeaderNav';
+import HocSlidder from '../Components/Slidder';
+import Card from '../Components/MovieCard';
+
+// imported Route Constant
+import { secureRoute } from '../../Routing/RouteConstants';
 
 /**
  *  Main is Rendring  Multiple Components in Dashboard
  *
  */
 const Main = () => {
-    // a variable to navigate to the Pages
+    // a constant to navigate to the Pages
     const navigate = useNavigate();
 
     // Get the Context Value using destructring

src/AppView/Login/Login.css

@@ -1,6 +1,8 @@
+/* A body of the login Component */
 body{
     background-color: #36454F;
 }
+/* use to style the login conntainer */
 .login{
     width: 15%;
     margin-top: 18%;

src/AppView/Login/Login.js

@@ -1,30 +1,31 @@
-import React, { useState } from 'react';
-import { useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
 // imported Packages
+import React, { useState , useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 
+// imported Conntext Connstants
 import { userContext } from '../../Context/UserContext';
-// imported Created Context
 
-import { dashboardRoute } from '../../Routing/RouteVars';
-// imported Route Variables
+// imported Route Constant
+import { dashboardRoute } from '../../Routing/RouteConstants';
 
+// imported Masseges
 import { loginFailMsg } from '../../Masseges';
+
+// immported User details
 import { adminUser, adminPass } from '../../AdminDetail';
-// imported Masseges and UserDetails
 
-import './Login.css';
 // imporing css file
+import './Login.css';
 
 /**
  *  Use for Login In the App
  *
  */
 const Login = () => {
-    // a Variable for Navigate to the different Page
+    // a Constant for Navigate to the different Page
     const navigate = useNavigate();
 
-    // states of this Component
+    // states 
     const [loginUser, setLoginUser] = useState('');
     const [loginPassword, setLoginPassword] = useState('');
 
@@ -34,7 +35,7 @@ const Login = () => {
 
     /**
      * On submit the data in Context to go Dashboard of the App
-     * @param {object} event is use for prevent refresh
+     * @param {object} event is use for prevent refresh of the page
      */
     const handelSubmit = (event) => {
         // prevent page refreshing on submit
@@ -59,6 +60,7 @@ const Login = () => {
 
     return (
         <div className="login">
+
             {/* Form for Login */}
             <form onSubmit={handelSubmit}>
                 <div className="mb-3">

src/AppView/Navbar/HeaderNav.js

@@ -1,44 +1,45 @@
+// imported Requried Packages
 import { React, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-// imported Requried Packages
 
 // To Get the Created Context variable
 import { userContext } from '../../Context/UserContext';
 
 // imported Custom Hook for nameChange
 import useForNameChange from '../../CustomHook/useForNameChange';
 
-// imporing Routes Variable
-import { secureRoute } from '../../Routing/RouteVars';
+// imporing Routes Constants
+import { secureRoute } from '../../Routing/RouteConstants';
 
 /**
  * A Navbar with Logout feature and logo of the App
  *
  */
 const HeaderNav = () => {
-    // Providing the Static Values using Custom Hook
+    // Providing the Static Values using Custom Hook and destructure a funnction
     const { changeName } = useForNameChange('Prince');
 
     // A Variable to Navigate to the page
     const navigate = useNavigate();
 
-    // Get the Context value using Destring
+    // Get the Context value using Destructring
     const useForLogout = useContext(userContext);
     const { loginData, setLoginData } = useForLogout;
     const { username } = loginData;
 
     /**
-     *  A logout feature of the App
+     *  A logout function to handel logout button
      *
      */
     const handelLogout = () => {
-        // Clearing the userDeatis to null
+        // Clearing the userDeatis to empty string
         setLoginData({
             ...loginData,
             username: '',
             password: '',
             loggedIn: false,
         });
+        // navigating to  authrization page
         navigate(secureRoute);
     };
 

src/Authrization/index.js

@@ -1,18 +1,19 @@
+// imported Packages
 import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-// imported Packages
 
-import { loginRoute, dashboardRoute } from '../Routing/RouteVars';
+//  imported Required Routes Constants
+import { loginRoute, dashboardRoute } from '../Routing/RouteConstants';
 
+// imported Context Constant
 import { userContext } from '../Context/UserContext';
-// imported Created Context Variable
 
 /**
  *
  *  Auth is use to Provide Authantication in app
  */
 const Auth = () => {
-    // a variable to navigate to the Pages
+    // a constant to navigate to the Pages
     const navigate = useNavigate();
 
     // Get the Context Value using destructring
@@ -25,9 +26,8 @@ const Auth = () => {
             navigate(dashboardRoute);
             return;
         }
-        // Navigating to login page
+        // navigate to login page
         navigate(loginRoute);
     }, [loginData.loggedIn]);
-    // Checking the logged in user
 };
 export default Auth;

src/Context/UserContext.js

@@ -1,7 +1,7 @@
-import { createContext } from 'react';
 //imported Package
+import { createContext } from 'react';
 
 /**
- *  creating the context variable
+ *  creating the context constant
  */
 export const userContext = createContext();

src/CustomHook/useForNameChange.js

@@ -1,16 +1,16 @@
-import { useContext } from 'react';
 // imported Package
+import { useContext } from 'react';
 
+// Imported Context constant
 import { userContext } from '../Context/UserContext';
-// Immported created Context Variable
 
 /**
  *  use to update the username in Context  using custom hook
- * @param {string} nameForChange
+ * @param {string} nameForChange use to provide  name
  * @returns
  */
 const useForNameChange = (nameForChange) => {
-    // Get the Context Value using deestructuring
+    // Get the Context Value using destructuring
     const useForNameChange = useContext(userContext);
     const { loginData, setLoginData } = useForNameChange;
 
@@ -23,7 +23,7 @@ const useForNameChange = (nameForChange) => {
             ...loginData,
             username: nameForChange,
         });
-
+        // return a function
     return { changeName };
 };
 

src/FakeApi/PopularMovie.js

@@ -1,3 +1,4 @@
+// A constant of popular movies
 const popularMovies = {
     movies: [
         {