Merge pull request #43 from opensrc0/main

fix(facedetector, livelocation tracking): default props pass in params instead of using prop-types
opensrc0 · Jun 14, 2024 · 25b3745 · 25b3745
2 parents 19799da + dcb42e5
commit 25b3745
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 124 deletions.
diff --git a/.github/README.md b/.github/README.md
@@ -243,6 +243,14 @@ Thanks goes to these wonderful people
         </a>
         <br />
       </td>
+      <td align="center" valign="top" width="14.28%">
+        <a target="_blank" href="https://github.com/100beats">
+          <img src="https://avatars.githubusercontent.com/u/172108056?v=4" width="64px;" alt="100beats" />
+          <br />
+          <sub><b>100beats</b></sub>
+        </a>
+        <br />
+      </td>
     </tr>
   </tbody>
 </table>

diff --git a/README.md b/README.md
@@ -241,6 +241,14 @@ Thanks goes to these wonderful people
         </a>
         <br />
       </td>
+      <td align="center" valign="top" width="14.28%">
+        <a target="_blank" href="https://github.com/100beats">
+          <img src="https://avatars.githubusercontent.com/u/172108056?v=4" width="64px;" alt="100beats" />
+          <br />
+          <sub><b>100beats</b></sub>
+        </a>
+        <br />
+      </td>
     </tr>
   </tbody>
 </table>

diff --git a/__app/component/FaceDetector/FaceDetector.js b/__app/component/FaceDetector/FaceDetector.js
@@ -1,7 +1,6 @@
-/* eslint-disable no-inner-declarations */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { handleError, handleLoading } from '../services/handlerService';
+import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
 import Wrapper from '../Wrapper/Wrapper';
 
 let mediaStream = null;
@@ -14,23 +13,24 @@ const failureMsgDefault = {
   flashUnsupported: 'Flash is not supporting in your device',
 };
 
+const isBrowserSupport = () => navigator?.mediaDevices && globalThis.FaceDetector;
+
 function FaceDetector({
-  // successCb,
-  failureCb,
-  loadingCb,
-  // successMsg,
-  failureMsg: failureMsgProps,
-  cameraType,
-  zIndex,
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'Successfully!!',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+  cameraType = 'back',
+  zIndex = 9,
   children,
-}) {
+} = {}) {
   const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
   let list = null;
   let video = null;
   let facingMode;
 
   const [flash, setFlash] = useState(false);
-  const [isBrowser, setIsBrowser] = useState(false);
   const [faces, setFaces] = useState([]);
 
   const stopStreaming = () => {
@@ -58,6 +58,12 @@ function FaceDetector({
 
         if (getFaces[0]) {
           setFaces(getFaces);
+          handleSuccess({
+            msgType: 'SUCCESSFUL',
+            msg: successMsg,
+            successCb,
+            data: [...getFaces],
+          });
           // cancelAnimationFrame(videoUnmount);
           // stopStreaming();
           // clearTimeout(unmoutRenderLoop);
@@ -159,15 +165,14 @@ function FaceDetector({
   };
 
   useEffect(() => {
-    setIsBrowser(true);
     handleBrowserSupport();
 
     return () => {
       allClear();
     };
   }, []);
 
-  return isBrowser && FaceDetector.isBrowserSupport() && (
+  return isBrowserSupport() && (
     <div id="face-detector">
       <div id="camera" style={{ position: 'absolute' }} />
       {
@@ -199,9 +204,8 @@ function FaceDetector({
   );
 }
 
-FaceDetector.isBrowserSupport = () => navigator?.mediaDevices && globalThis.FaceDetector;
-
 FaceDetector.propTypes = {
+  // showForever: PropTypes.bool,
   // successCb: PropTypes.func,
   failureCb: PropTypes.func,
   loadingCb: PropTypes.func,
@@ -211,14 +215,8 @@ FaceDetector.propTypes = {
   cameraType: PropTypes.oneOf(['back', 'front']),
 };
 
-FaceDetector.defaultProps = {
-  // successCb: () => {},
-  failureCb: () => {},
-  loadingCb: () => {},
-  // successMsg: '',
-  failureMsg: { ...failureMsgDefault },
-  zIndex: 9,
-  cameraType: 'back',
-};
+const WFaceDetector = Wrapper(FaceDetector, isBrowserSupport);
+
+export { WFaceDetector as FaceDetector };
 
-export default Wrapper(FaceDetector);
+export default WFaceDetector;
diff --git a/__app/component/FaceDetector/FaceDetectorClose.js b/__app/component/FaceDetector/FaceDetectorClose.js
@@ -38,4 +38,6 @@ function FaceDetectorClose({
   );
 }
 
+export { FaceDetectorClose };
+
 export default FaceDetectorClose;
diff --git a/__app/component/FaceDetector/FaceDetectorFacing.js b/__app/component/FaceDetector/FaceDetectorFacing.js
@@ -32,4 +32,6 @@ function FaceDetectorFacing({
   );
 }
 
+export { FaceDetectorFacing };
+
 export default FaceDetectorFacing;
diff --git a/__app/component/FaceDetector/FaceDetectorFlash.js b/__app/component/FaceDetector/FaceDetectorFlash.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-function FaceDetector({
+function FaceDetectorFlash({
   toggleFlash,
   children,
   zIndex,
@@ -32,4 +32,6 @@ function FaceDetector({
   );
 }
 
-export default FaceDetector;
+export { FaceDetectorFlash };
+
+export default FaceDetectorFlash;
diff --git a/__app/component/FaceDetector/README.md b/__app/component/FaceDetector/README.md
@@ -12,8 +12,8 @@ A minimal [Demo Link](https://6jpxdq.csb.app/?component=FaceDetector)
 
 | Value |  Used as a  | Description|
 |--------- | -------- |-----------------|
-| <b>FaceDetector</b> | Component :white_check_mark: | Can be used as Component |
-| <b>faceDetector<b> |  Service :x: | Can't be used as Service |
+| <b>FaceDetector</b> | :white_check_mark: Component | Can be used as Component |
+| <b>faceDetector<b> | :x: Service | Can be used as Service |
 
 ##### 1. Here's an example of basic usage with Multiple Import: with Default Import:
 ```javascript
@@ -134,21 +134,33 @@ return (
 }
        </pre>
     </td>
-  </tr>
-   <tr>
-    <td>
-        showForever
-    </td>
-     <td>Boolean</td>
-    <td>To hide/remove unsupported feature, make it <b>false</b>. Default value is <b>true</b></td>
-    <td> <pre>---</pre> </td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
+  <th>
+    Props
+  </th>
+  <th>
+    Type
+  </th>
+  <th>
+    Description
+  </th>
+  <th>
+      Default Values
+  </th>
+  <tr>
+    <td>
+      showForever
+    </td>
+    <td>Boolean</td>
+    <td>To hide/remove unsupported feature, make it <b>false</b>.</td>
+    <td>Default value is <b>true.</b></td>
+  </tr>
 </table>
 
 ### Child Component

diff --git a/__app/component/FaceDetector/index.js b/__app/component/FaceDetector/index.js
@@ -1,18 +1,6 @@
-import FaceDetector from './FaceDetector';
-import FaceDetectorFlash from './FaceDetectorFlash';
-import FaceDetectorClose from './FaceDetectorClose';
-import FaceDetectorFacing from './FaceDetectorFacing';
+export * from './FaceDetector';
+export * from './FaceDetectorClose';
+export * from './FaceDetectorFlash';
+export * from './FaceDetectorFacing';
 
-export {
-  FaceDetector,
-  FaceDetectorFlash,
-  FaceDetectorClose,
-  FaceDetectorFacing,
-};
-
-export default {
-  Init: FaceDetector,
-  Flash: FaceDetectorFlash,
-  Close: FaceDetectorClose,
-  Facing: FaceDetectorFacing,
-};
+export { default } from './FaceDetector';
diff --git a/__app/component/LiveLocationTracking/LiveLocationTracking.js b/__app/component/LiveLocationTracking/LiveLocationTracking.js
@@ -2,7 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import dependentJsService from '../services/dependentJsService';
-import { handleError, handleSuccess, handleLoading } from '../services/handlerService';
+import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
 import Wrapper from '../Wrapper/Wrapper';
 
 const failureMsgDefault = {
@@ -16,6 +16,8 @@ const failureMsgDefault = {
   error: '',
 };
 
+const isBrowserSupport = () => navigator?.geolocation?.watchPosition;
+
 const checkPermitByBrowser = async (failureMsg, failureCb) => {
   try {
     const permissions = await navigator.permissions.query({ name: 'geolocation' });
@@ -43,23 +45,23 @@ const checkScriptInBrowser = async (failureMsg, failureCb, isProdKey, googleKey)
 };
 
 function LiveLocationTracking({
-  successCb,
-  failureCb,
-  successMsg,
-  failureMsg: failureMsgProps,
-  loadingCb,
-  googleKey,
-  isProdKey,
-  destinationLatLng,
-  mapTypeControl,
-  panControl,
-  zoomControl,
-  scaleControl,
-  streetViewControl,
-  overviewMapControl,
-  rotateControl,
-  fullscreenControl,
-}) {
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'Successfully!!',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+  googleKey = '',
+  isProdKey = true,
+  destinationLatLng = { lat: 12.9387901, lng: 77.6407703 },
+  mapTypeControl = true,
+  panControl = true,
+  zoomControl = true,
+  scaleControl = true,
+  streetViewControl = true,
+  overviewMapControl = true,
+  rotateControl = true,
+  fullscreenControl = true,
+} = {}) {
   const directionMapRef = useRef();
   let directionsService;
   let directionsRenderer;
@@ -167,8 +169,10 @@ function LiveLocationTracking({
   };
 
   const init = async () => {
-    if (LiveLocationTracking.isBrowserSupport()) {
+    if (isBrowserSupport()) {
       handleLoading({ loadingCb });
+
+      // Your Code will start from here
       const isPermitByBrowser = await checkPermitByBrowser(failureMsg, failureCb);
       const isScriptInBrowser = await checkScriptInBrowser(
         failureMsg,
@@ -203,6 +207,7 @@ function LiveLocationTracking({
           // }, 200);
         }
       };
+      // Your Code will end here
     } else {
       return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb });
     }
@@ -224,9 +229,9 @@ function LiveLocationTracking({
   );
 }
 
-LiveLocationTracking.isBrowserSupport = () => navigator?.geolocation?.watchPosition;
-
 LiveLocationTracking.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  showForever: PropTypes.bool,
   successCb: PropTypes.func,
   failureCb: PropTypes.func,
   loadingCb: PropTypes.func,
@@ -245,28 +250,8 @@ LiveLocationTracking.propTypes = {
   fullscreenControl: PropTypes.bool,
 };
 
-LiveLocationTracking.defaultProps = {
-  successCb: () => {},
-  failureCb: () => {},
-  loadingCb: () => {},
-  successMsg: '',
-  failureMsg: { ...failureMsgDefault },
-
-  destinationLatLng: { lat: 12.9387901, lng: 77.6407703 },
-  isProdKey: true,
-  googleKey: '',
-  mapTypeControl: true,
-  panControl: true,
-  zoomControl: true,
-  scaleControl: true,
-  streetViewControl: true,
-  overviewMapControl: true,
-  rotateControl: true,
-  fullscreenControl: true,
-};
+const WLiveLocationTracking = Wrapper(LiveLocationTracking, isBrowserSupport);
 
-export default Wrapper(LiveLocationTracking);
+export { WLiveLocationTracking as LiveLocationTracking };
 
-// WALKING - bike
-// TWO_WHEELER - Walking
-// DRIVING - Car
+export default WLiveLocationTracking;