Merge pull request #4 from fatehMohamed14/enhancement/upgrade-packages

Enhancement/upgrade packages and fix typing

Author: EgeAytin

package.json

@@ -18,17 +18,17 @@
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^16.3.13",
+    "@types/react": "^18.0.27",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.5.1",
-    "react": "^16.12.0",
+    "css-loader": "^6.7.3",
+    "react": "^18.2.0",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
-    "typescript": "^3.9.10",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "files": [
     "dist"
@@ -39,4 +39,3 @@
     "npm"
   ]
 }
- 

src/PermifyProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { PropsWithChildren, useCallback, useState } from "react";
 
 export interface UserPayload {
     id: string,
@@ -11,9 +11,9 @@ import PermifyContext from "./PermifyContext";
 
 const LOCAL_STORAGE_KEY_USER = "__permifyUser";
 
-const PermifyProvider: React.FunctionComponent = ({
+const PermifyProvider = ({
     children
-}) => {
+}: PropsWithChildren) => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const updateUser = (newUser: UserPayload) => {

src/components/HasAccess.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState, useContext } from 'react'
+import { useEffect, useState, useContext, PropsWithChildren } from 'react'
 
 export interface UserPayload {
   id: string,
@@ -13,17 +13,16 @@ export interface HasAccessProps {
   roles?: string[],
   permissions?: string[]
   isLoading?: React.ReactElement,
-  renderAuthFailed?: React.ReactElement,
-  children: React.ReactChild
+  renderAuthFailed?: React.ReactElement
 }
 
-const HasAccess: React.FunctionComponent<HasAccessProps> = ({
+const HasAccess = ({
   roles,
   permissions,
   isLoading,
   renderAuthFailed,
   children
-}) => {
+}: PropsWithChildren<HasAccessProps>) => {
   const [hasAccess, setHasAccess] = useState(false)
   const [checking, setChecking] = useState(false)
 
@@ -59,9 +58,8 @@ const HasAccess: React.FunctionComponent<HasAccessProps> = ({
 
   if (hasAccess) {
     return (
-      <React.Fragment>
+      // children is of type ReactNode which already includes ReactFragment
         {children}
-      </React.Fragment>
     )
   }