react-easy-router - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

CHANGELOGS.md

@@ -17,2 +17,9 @@ # CHANGELOG
 
+## v2.0.4
+
+#### Documentation
+
+- Comment Added
+- JSDoc Added
+
 ## v2.0.3
@@ -19,0 +26,0 @@

package.json

 {
   "name": "react-easy-router",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "The simplest way to add routing to your React app",
@@ -5,0 +5,0 @@ "type": "module",

src/components/Loader.js

@@ -0,5 +1,14 @@
+/**
+ * Loader component
+ * @author Yousuf Kalim
+ */
 import { Config } from '../Store';
 
+/**
+ * Loader
+ * @returns {JSX.Element}
+ * @constructor Loader
+ */
 function Loader() {
-  const { config } = Config();
+  const { config } = Config(); // Get the config from the store
 
@@ -20,2 +29,3 @@ return (
     >
+      {/* If user has provided the custom loader then show, otherwise show default */}
       <img src={config.loader || 'https://i.imgur.com/FhvNntt.gif'} alt="loader" />
@@ -22,0 +32,0 @@ </div>

src/components/Protected.js

@@ -0,1 +1,5 @@
+/**
+ * Protected component to check if the user is authenticated or not and then render the component
+ * @author Yousuf Kalim
+ */
 import React, { useEffect } from 'react';
@@ -6,15 +10,23 @@ import { Navigate } from 'react-router-dom';
 
+/**
+ * Protected
+ * @param failureRedirect {string} - The path to redirect if the user is not authenticated
+ * @param children {ReactNode} - The component to render if the user is authenticated
+ * @returns {JSX.Element}
+ */
 function Protected({ failureRedirect = '/', children }) {
-  const { auth, setAuth } = Auth();
+  const { auth, setAuth } = Auth(); // Get the auth state from the store
   const {
     config: { isAuthenticated, showLoader },
-  } = Config();
+  } = Config(); // Get the config from the store
 
   useEffect(() => {
+    // Check if the user is authenticated or not
     if (isAuthenticated) {
       isAuthenticated()
         .then((res) => {
+          // If the user is authenticated then set the auth state to true
           setAuth(res);
         })
-        .catch(() => setAuth(false));
+        .catch(() => setAuth(false)); // If the user is not authenticated then set the auth state to false
     } else {
@@ -26,7 +38,8 @@ setAuth(false);
   // eslint-disable-next-line no-nested-ternary
-  return auth === null ? (
+  return auth === null ? ( // If the auth state is null then show the loader
     showLoader && <Loader />
-  ) : auth ? (
+  ) : auth ? ( // If the auth state is true then render the children
     children
   ) : (
+    // If the auth state is false then redirect to the failureRedirect path
     <Navigate to={failureRedirect} />
@@ -33,0 +46,0 @@ );

src/components/Router.js

@@ -0,1 +1,5 @@
+/**
+ * Main router component that handles the routing of the application
+ * @author Yousuf Kalim
+ */
 import React from 'react';
@@ -6,2 +10,8 @@ import { BrowserRouter, Routes } from 'react-router-dom';
 
+/**
+ * Router
+ * @param props Props passed to the component
+ * @returns {JSX.Element}
+ * @constructor Router
+ */
 export default function Router(props) {
@@ -8,0 +18,0 @@ return (

src/index.js

@@ -0,3 +1,7 @@
+/**
+ * Index file for the package
+ * @author Yousuf Kalim
+ */
 import Router from './components/Router';
 
 export default Router;

src/Store.js

@@ -1,2 +0,5 @@
-// Init
+/**
+ * Store using context api
+ * @author Yousuf Kalim
+ */
 import React, { useContext, useState, createContext } from 'react';
@@ -18,2 +21,11 @@
 
+/**
+ * Store Provider with the config provided by the user
+ * @param isAuthenticated Function to check if the user is authenticated
+ * @param showLoader Boolean to show the loader
+ * @param loader Image to show as the loader
+ * @param children Children of the component
+ * @returns {JSX.Element}
+ * @constructor StoreProvider
+ */
 // Initializing Store Provider
@@ -20,0 +32,0 @@ // eslint-disable-next-line react/prop-types

src/utils/elementParser.js

@@ -0,5 +1,15 @@
+/**
+ * Parse the routes according to the config provided
+ * @author Yousuf Kalim
+ */
 import { Route, Navigate } from 'react-router-dom';
 import Protected from '../components/Protected';
 
+/**
+ * elementParser
+ * @param route {Object} - Route object
+ * @returns {JSX.Element} - Route element
+ */
 export default function elementParser(route) {
+  // Navigated route
   if (route.navigate) {
@@ -9,3 +19,5 @@ return <Route key={route.path} path={route.path} element={<Navigate to={route.navigate} />} />;
 
+  // Protected route
   if (route.protected) {
+    // This will call the protected component and pass the route as props
     return (
@@ -20,3 +32,4 @@ <Route
 
+  // Simple route
   return <Route key={route.path} path={route.path} element={route.element} />;
 }

src/utils/getRoutes.js

@@ -0,18 +1,32 @@
+/**
+ * Parse the routes from the config file
+ * @author Yousuf Kalim
+ */
 import pathParser from './pathParser';
 import elementParser from './elementParser';
 
+/**
+ * getRoutes
+ * @param routes {Array} - Array of routes
+ * @param parentPath {String} - Parent path
+ * @returns {*} - Array of rendered routes
+ */
 export default function getRoutes(routes, parentPath = '') {
+  // Loop through the routes and create the route elements
   const renderedRoutes = routes.map((route) => {
     // eslint-disable-next-line no-param-reassign
-    route.path = pathParser(parentPath, route.path);
+    route.path = pathParser(parentPath, route.path); // This will create the path by appending parent path if exist
 
     let children = [];
     if (route.children) {
+      // Recursively call the function to get the children routes
       children = getRoutes(route.children, route.path);
     }
 
+    // Create the route element using the element parser
     return [...children, elementParser(route)];
   });
 
+  // Return the flatten array of routes and children
   return renderedRoutes.flat();
 }

src/utils/pathParser.js

@@ -0,7 +1,21 @@
+/**
+ * Appending the child path to the parent path
+ * @author Yousuf Kalim
+ */
+
+/**
+ * pathParser
+ * @param parent {String} - Parent path
+ * @param child {String} - Child path
+ * @returns {string|string} - Path
+ */
 export default function pathParser(parent, child) {
   const parentPath = parent.split('/');
   const childPath = child.split('/');
+
+  // removing the duplicates
   const path = [...new Set([...parentPath, ...childPath])].join('/');
 
+  // Add the slash at the start of the path
   return path[0] === '/' ? path : `/${path}`;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62173

increased by29.91%

Lines of code

262

increased by50.57%

No dependency changes