From b2a2a6d4ce3c900817e65c78cba34a12e4ee999a Mon Sep 17 00:00:00 2001 From: swaraj Date: Fri, 12 Apr 2024 17:55:33 +0530 Subject: [PATCH 01/23] added initial code network connection --- .../NetworkConnection/NetworkConnection.js | 119 ++++++++++++++++++ __app/component/NetworkConnection/README.md | 43 +++++++ __app/component/NetworkConnection/index.js | 5 + package.json | 6 +- 4 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 __app/component/NetworkConnection/NetworkConnection.js create mode 100644 __app/component/NetworkConnection/README.md create mode 100644 __app/component/NetworkConnection/index.js diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js new file mode 100644 index 0000000..0a9e402 --- /dev/null +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -0,0 +1,119 @@ +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { handleSuccess, handleError } from '../services/handlerService'; +import Wrapper from '../Wrapper/Wrapper'; + +const failureMsgDefault = { + unSupported: 'NetworkConnection is not supported in your device', + error: 'Unable to fetch details from NetworkConnection', +}; + +const defaultConnectionValue = { + downlink: '', + effectiveType: '', + rtt: '', + saveData: '', +}; + +function NetworkConnection({ + successCb, + failureCb, + successMsg, + failureMsg: failureMsgProps, + children, +}) { + const [isOnline, setIsOnline] = useState(navigator.onLine); + const [connectionDetails, setConnectionDetails] = useState(defaultConnectionValue); + + const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; + + const updateNetworkConnection = () => { + setIsOnline(navigator?.onLine); + + const newObj = navigator?.connection; + setConnectionDetails({ + downlink: newObj?.downlink, + effectiveType: newObj?.effectiveType, + rtt: newObj?.rtt, + saveData: newObj?.saveData, + }); + }; + + const onlineOflineHandler = () => { + setIsOnline(navigator?.onLine); + }; + + const networkChangeHandler = () => { + const newObj = navigator?.connection; + console.log(connectionDetails); + console.log(`${connectionDetails.effectiveType}!==${newObj.effectiveType}`); + if (connectionDetails.effectiveType !== newObj.effectiveType) { + console.log(newObj, ' newObj'); + setConnectionDetails({ + downlink: newObj?.downlink, + effectiveType: newObj?.effectiveType, + rtt: newObj?.rtt, + saveData: newObj?.saveData, + }); + } + }; + + const handleUpdate = () => { + if (NetworkConnection.isBrowserSupport() === true + || NetworkConnection.isBrowserSupport() === false) { + handleSuccess({ msgType: 'SUCCESSFULFUL', + msg: successMsg, + successCb, + data: { + online: isOnline, + connectionDetail: connectionDetails, + } }); + } else { + return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); + } + return true; + }; + + useEffect(() => { + handleUpdate(); + }, [isOnline, connectionDetails.effectiveType]); + + useEffect(() => { + globalThis.addEventListener('online', onlineOflineHandler); + globalThis.addEventListener('offline', onlineOflineHandler); + globalThis?.navigator.connection.addEventListener('change', networkChangeHandler); + + updateNetworkConnection(); + + return () => { + globalThis.removeEventListener('online', onlineOflineHandler); + globalThis.removeEventListener('offline', onlineOflineHandler); + globalThis.navigator.connection.removeEventListener('change', networkChangeHandler); + }; + }, []); + + console.log(connectionDetails, ' outside connectionDetails'); + return ( + React.Children.map(children || 'NetworkConnection', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)) + ); +} + +NetworkConnection.isBrowserSupport = () => globalThis?.navigator?.onLine; + +NetworkConnection.propTypes = { + successCb: PropTypes.func, + failureCb: PropTypes.func, + loadingCb: PropTypes.func, + successMsg: PropTypes.string, + failureMsg: PropTypes.object, +}; + +NetworkConnection.defaultProps = { + successCb: () => {}, + failureCb: () => {}, + loadingCb: () => {}, + successMsg: 'NetworkConnection details fetch Successfully', + failureMsg: { ...failureMsgDefault }, +}; + +export default Wrapper(NetworkConnection); diff --git a/__app/component/NetworkConnection/README.md b/__app/component/NetworkConnection/README.md new file mode 100644 index 0000000..ee8a906 --- /dev/null +++ b/__app/component/NetworkConnection/README.md @@ -0,0 +1,43 @@ +## 1. Happy Flow +#### a) Passing child + + + + +## 2. Success: successCb callBack Fn along with success msg + + + + + +> [!Note] +> **successCb** will get an object contains the property **msgType**, **msg**, **data** + +## 3. Failure: failureCb callBack Fn along with failure msg + + + + + +> [!Note] +> **failureCb** will get an object contains the property **msgType**, **msg** + +> [!Important] +Failure can happend due to multiple reasons, due to that reason **failureMsg** is an object having different kind of error property according to the error can occur in component + +## 4. Failure: Device don't support the feature and you want to hide the feauture from User + + + + + +> [!Note] +> if **showForever** props value is false, feature will be hidden in case of unSupported by the device + +## 5. Combine with all props + + + + + + \ No newline at end of file diff --git a/__app/component/NetworkConnection/index.js b/__app/component/NetworkConnection/index.js new file mode 100644 index 0000000..470bc8b --- /dev/null +++ b/__app/component/NetworkConnection/index.js @@ -0,0 +1,5 @@ +import NetworkConnection from './NetworkConnection'; + +export { NetworkConnection }; + +export default NetworkConnection; diff --git a/package.json b/package.json index f94e3e8..1b8cb7e 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "detectmylocation", "colorpicker", "wakelock", - "WhatsappShare" + "WhatsappShare", + "NetworkConnection" ], "config": { "commitizen": { @@ -99,7 +100,8 @@ "VoiceRecognition/", "Vibrate/", "ColorPicker/", - "WhatsappShare/" + "WhatsappShare/", + "NetworkConnection/" ], "devDependencies": { "@babel/cli": "^7.23.9", From a005fb484c80291908d4e84d5f0094971e124b41 Mon Sep 17 00:00:00 2001 From: swaraj Date: Thu, 25 Apr 2024 16:47:10 +0530 Subject: [PATCH 02/23] removed console --- .../NetworkConnection/NetworkConnection.js | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js index 0a9e402..e3b32b2 100644 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -44,18 +44,15 @@ function NetworkConnection({ }; const networkChangeHandler = () => { + if (!navigator?.onLine) return; const newObj = navigator?.connection; - console.log(connectionDetails); - console.log(`${connectionDetails.effectiveType}!==${newObj.effectiveType}`); - if (connectionDetails.effectiveType !== newObj.effectiveType) { - console.log(newObj, ' newObj'); - setConnectionDetails({ - downlink: newObj?.downlink, - effectiveType: newObj?.effectiveType, - rtt: newObj?.rtt, - saveData: newObj?.saveData, - }); - } + + setConnectionDetails({ + downlink: newObj?.downlink, + effectiveType: newObj?.effectiveType, + rtt: newObj?.rtt, + saveData: newObj?.saveData, + }); }; const handleUpdate = () => { @@ -92,7 +89,6 @@ function NetworkConnection({ }; }, []); - console.log(connectionDetails, ' outside connectionDetails'); return ( React.Children.map(children || 'NetworkConnection', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)) ); From 73def56c4220caaf7ebe912fc891b0941b55fd5e Mon Sep 17 00:00:00 2001 From: swaraj Date: Tue, 30 Apr 2024 11:37:19 +0530 Subject: [PATCH 03/23] added globalThis wwith navigator --- .../NetworkConnection/NetworkConnection.js | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js index e3b32b2..a26c5c0 100644 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -16,21 +16,21 @@ const defaultConnectionValue = { }; function NetworkConnection({ - successCb, - failureCb, - successMsg, + successCb = () => {}, + failureCb = () => {}, + successMsg = 'NetworkConnection details fetch Successfully', failureMsg: failureMsgProps, children, }) { - const [isOnline, setIsOnline] = useState(navigator.onLine); + const [isOnline, setIsOnline] = useState(globalThis?.navigator.onLine); const [connectionDetails, setConnectionDetails] = useState(defaultConnectionValue); const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; const updateNetworkConnection = () => { - setIsOnline(navigator?.onLine); + setIsOnline(globalThis?.navigator?.onLine); - const newObj = navigator?.connection; + const newObj = globalThis?.navigator?.connection; setConnectionDetails({ downlink: newObj?.downlink, effectiveType: newObj?.effectiveType, @@ -40,12 +40,12 @@ function NetworkConnection({ }; const onlineOflineHandler = () => { - setIsOnline(navigator?.onLine); + setIsOnline(globalThis?.navigator?.onLine); }; const networkChangeHandler = () => { - if (!navigator?.onLine) return; - const newObj = navigator?.connection; + if (!globalThis?.navigator?.onLine) return; + const newObj = globalThis?.navigator?.connection; setConnectionDetails({ downlink: newObj?.downlink, @@ -58,7 +58,7 @@ function NetworkConnection({ const handleUpdate = () => { if (NetworkConnection.isBrowserSupport() === true || NetworkConnection.isBrowserSupport() === false) { - handleSuccess({ msgType: 'SUCCESSFULFUL', + handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: { @@ -104,12 +104,4 @@ NetworkConnection.propTypes = { failureMsg: PropTypes.object, }; -NetworkConnection.defaultProps = { - successCb: () => {}, - failureCb: () => {}, - loadingCb: () => {}, - successMsg: 'NetworkConnection details fetch Successfully', - failureMsg: { ...failureMsgDefault }, -}; - export default Wrapper(NetworkConnection); From 1cb5b78f75793c692c69ca6d11ac2f83ca7f079f Mon Sep 17 00:00:00 2001 From: swaraj Date: Tue, 30 Apr 2024 11:39:40 +0530 Subject: [PATCH 04/23] renamed function --- __app/component/NetworkConnection/NetworkConnection.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js index a26c5c0..e6bd9e5 100644 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -39,7 +39,7 @@ function NetworkConnection({ }); }; - const onlineOflineHandler = () => { + const onlineOfflineHandler = () => { setIsOnline(globalThis?.navigator?.onLine); }; @@ -76,15 +76,15 @@ function NetworkConnection({ }, [isOnline, connectionDetails.effectiveType]); useEffect(() => { - globalThis.addEventListener('online', onlineOflineHandler); - globalThis.addEventListener('offline', onlineOflineHandler); + globalThis.addEventListener('online', onlineOfflineHandler); + globalThis.addEventListener('offline', onlineOfflineHandler); globalThis?.navigator.connection.addEventListener('change', networkChangeHandler); updateNetworkConnection(); return () => { - globalThis.removeEventListener('online', onlineOflineHandler); - globalThis.removeEventListener('offline', onlineOflineHandler); + globalThis.removeEventListener('online', onlineOfflineHandler); + globalThis.removeEventListener('offline', onlineOfflineHandler); globalThis.navigator.connection.removeEventListener('change', networkChangeHandler); }; }, []); From cb7403954f2a74684cdc9a9146949c29f08dd7c5 Mon Sep 17 00:00:00 2001 From: swaraj Date: Tue, 30 Apr 2024 12:21:52 +0530 Subject: [PATCH 05/23] added online offline component --- __app/component/NetworkConnection/NetworkConnection.js | 4 +++- __app/component/NetworkConnection/Offline.js | 7 +++++++ __app/component/NetworkConnection/Online.js | 7 +++++++ __app/component/NetworkConnection/index.js | 4 +++- 4 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 __app/component/NetworkConnection/Offline.js create mode 100644 __app/component/NetworkConnection/Online.js diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js index e6bd9e5..c81abe0 100644 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -90,7 +90,9 @@ function NetworkConnection({ }, []); return ( - React.Children.map(children || 'NetworkConnection', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)) + React.Children.map(children, (child) => React.cloneElement(child, { + isOnline, + })) ); } diff --git a/__app/component/NetworkConnection/Offline.js b/__app/component/NetworkConnection/Offline.js new file mode 100644 index 0000000..c131c81 --- /dev/null +++ b/__app/component/NetworkConnection/Offline.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function Offline({ children, isOnline }) { + return !isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)); +} + +export default Offline; diff --git a/__app/component/NetworkConnection/Online.js b/__app/component/NetworkConnection/Online.js new file mode 100644 index 0000000..60bc71c --- /dev/null +++ b/__app/component/NetworkConnection/Online.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function Online({ children, isOnline }) { + return isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)); +} + +export default Online; diff --git a/__app/component/NetworkConnection/index.js b/__app/component/NetworkConnection/index.js index 470bc8b..c48e025 100644 --- a/__app/component/NetworkConnection/index.js +++ b/__app/component/NetworkConnection/index.js @@ -1,5 +1,7 @@ import NetworkConnection from './NetworkConnection'; +import Online from './Online'; +import Offline from './Offline'; -export { NetworkConnection }; +export { NetworkConnection, Online, Offline }; export default NetworkConnection; From a85052a2f2a4df35790357ab698f75ac681963dc Mon Sep 17 00:00:00 2001 From: swaraj Date: Tue, 30 Apr 2024 15:21:44 +0530 Subject: [PATCH 06/23] added readme file --- __app/component/NetworkConnection/README.md | 55 ++++++++------------- 1 file changed, 21 insertions(+), 34 deletions(-) diff --git a/__app/component/NetworkConnection/README.md b/__app/component/NetworkConnection/README.md index ee8a906..1d499b9 100644 --- a/__app/component/NetworkConnection/README.md +++ b/__app/component/NetworkConnection/README.md @@ -1,43 +1,30 @@ -## 1. Happy Flow -#### a) Passing child +# Network Connection +A Network Connection Component returns online status and also information about the system's connection in terms of general connection type (e.g., 'Wi-Fi, 'cellular', etc.). Which can be used to select high-definition content or low-definition content based on the user's connection. -## 2. Success: successCb callBack Fn along with success msg +## Usage/Examples +```javascript +import { NetworkConnection, Online, Offline} from 'fe-pilot/NetworkConnection'; + const success = (response) => { + console.log(response, " success response") + } + const failure = (response) => { + console.log(response, " failure response") + } + return ( + + Online + +
Pass custom Html to be displayed when appeared offline
+ + + ); +} +``` -> [!Note] -> **successCb** will get an object contains the property **msgType**, **msg**, **data** - -## 3. Failure: failureCb callBack Fn along with failure msg - - - - - -> [!Note] -> **failureCb** will get an object contains the property **msgType**, **msg** - -> [!Important] -Failure can happend due to multiple reasons, due to that reason **failureMsg** is an object having different kind of error property according to the error can occur in component - -## 4. Failure: Device don't support the feature and you want to hide the feauture from User - - - - - -> [!Note] -> if **showForever** props value is false, feature will be hidden in case of unSupported by the device - -## 5. Combine with all props - - - - - - \ No newline at end of file From 7320edda0e8e99b33518dd51beb83ca509a9b105 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Tue, 30 Apr 2024 23:32:15 +0530 Subject: [PATCH 07/23] refactor(locateme): added locateme as a service --- .../CopyToClipboard/CopyToClipboard.js | 2 +- __app/component/LocateMe/LocateMe.js | 85 +++++++++++-------- __app/component/LocateMe/index.js | 7 +- __app/component/PhoneBook/PhoneBook.js | 2 +- __app/component/Scanner/Scanner.js | 2 +- __app/component/Share/Share.js | 2 +- __app/component/Vibrate/Vibrate.js | 2 +- __app/component/WakeLock/WakeLock.js | 2 +- 8 files changed, 57 insertions(+), 47 deletions(-) diff --git a/__app/component/CopyToClipboard/CopyToClipboard.js b/__app/component/CopyToClipboard/CopyToClipboard.js index 79adc00..a205a57 100644 --- a/__app/component/CopyToClipboard/CopyToClipboard.js +++ b/__app/component/CopyToClipboard/CopyToClipboard.js @@ -8,7 +8,7 @@ const failureMsgDefault = { error: 'Unable To Copy', }; -const isBrowserSupport = () => globalThis?.navigator?.clipboard; +const isBrowserSupport = () => globalThis.navigator?.clipboard; const copyToClipboard = ({ successCb = () => {}, diff --git a/__app/component/LocateMe/LocateMe.js b/__app/component/LocateMe/LocateMe.js index e200695..1864be5 100644 --- a/__app/component/LocateMe/LocateMe.js +++ b/__app/component/LocateMe/LocateMe.js @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; -import Wrapper from '../Wrapper/Wrapper'; import { handleSuccess, handleError, handleLoading } from '../services/handlerService'; +import Wrapper from '../Wrapper/Wrapper'; import dependentJsService from '../services/dependentJsService'; const failureMsgDefault = { @@ -14,6 +14,10 @@ const failureMsgDefault = { error: '', }; +const isBrowserSupport = () => globalThis.navigator?.geolocation + && globalThis.navigator?.permissions?.query + && globalThis.navigator?.geolocation?.getCurrentPosition; + const checkPermitByBrowser = async (failureMsg, failureCb) => { try { const permissions = await navigator.permissions.query({ name: 'geolocation' }); @@ -83,23 +87,24 @@ const onSuccss = async ( handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: zipcode }); }; -const onFailure = async (failureCb, error, failureMsg) => handleError({ msgType: 'ERROR', msg: failureMsg.error || JSON.stringify(error), failureCb }); - -function LocateMe({ - successCb, - failureCb, - successMsg, - failureMsg: failureMsgProps, - loadingCb, - children, - isProdKey, - googleKey, -}) { +const onFailure = async (failureCb, error, failureMsg) => handleError({ msgType: 'ERROR', msg: failureMsg.error || error, failureCb }); + +const locateMe = ({ + successCb = () => {}, + failureCb = () => {}, + loadingCb = () => {}, + successMsg = 'Located Successfully!!', + failureMsg: failureMsgProps = { ...failureMsgDefault }, + isProdKey = true, + googleKey = '', +} = {}) => { const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; - const onClick = async () => { - if (LocateMe.isBrowserSupport()) { + const init = async () => { + if (isBrowserSupport()) { handleLoading({ loadingCb }); + + // Your Code will start from here const isPermitByBrowser = await checkPermitByBrowser(failureMsg, failureCb); const isScriptInBrowser = await checkScriptInBrowser( failureMsg, @@ -120,12 +125,25 @@ function LocateMe({ onFailure(failureCb, error, failureMsg); }); } + // Your Code will end here } else { return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); } return true; }; + init(); +}; + +function LocateMe({ + children, + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + ...props +}) { useEffect(() => { globalThis.console.error = (...arg) => { if (arg[0] && arg[0]?.indexOf('https://developers.google.com/maps/documentation/javascript/error-messages') !== -1) { @@ -138,36 +156,31 @@ function LocateMe({ }; }, []); - return ( - React.Children.map(children || 'Use my current location', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { - onClick, - })) - ); + return React.Children.map(children || 'LocateMe', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { + onClick: () => locateMe({ + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + ...props, + }), + })); } -LocateMe.isBrowserSupport = () => navigator.geolocation - && navigator?.permissions?.query - && navigator?.geolocation?.getCurrentPosition - && true; - LocateMe.propTypes = { + showForever: PropTypes.bool, successCb: PropTypes.func, failureCb: PropTypes.func, loadingCb: PropTypes.func, successMsg: PropTypes.string, failureMsg: PropTypes.object, isProdKey: PropTypes.bool, - googleKey: PropTypes.string.isRequired, + googleKey: PropTypes.string, }; -LocateMe.defaultProps = { - successCb: () => {}, - failureCb: () => {}, - loadingCb: () => {}, - successMsg: 'Located Successfully', - failureMsg: { ...failureMsgDefault }, - isProdKey: true, - googleKey: '', -}; +const WLocateMe = Wrapper(LocateMe, isBrowserSupport); + +export { locateMe, WLocateMe as LocateMe }; -export default Wrapper(LocateMe); +export default WLocateMe; diff --git a/__app/component/LocateMe/index.js b/__app/component/LocateMe/index.js index 68aa381..20bbb7b 100644 --- a/__app/component/LocateMe/index.js +++ b/__app/component/LocateMe/index.js @@ -1,5 +1,2 @@ -import LocateMe from './LocateMe'; - -export { LocateMe }; - -export default LocateMe; +export * from './LocateMe'; +export { default } from './LocateMe'; diff --git a/__app/component/PhoneBook/PhoneBook.js b/__app/component/PhoneBook/PhoneBook.js index 3834b6a..a9d8f58 100644 --- a/__app/component/PhoneBook/PhoneBook.js +++ b/__app/component/PhoneBook/PhoneBook.js @@ -9,7 +9,7 @@ const failureMsgDefault = { error: 'Unable to fetch details from PhoneBook', }; -const isBrowserSupport = () => globalThis?.navigator?.contacts && globalThis?.ContactsManage; +const isBrowserSupport = () => globalThis.navigator?.contacts && globalThis.ContactsManage; const phoneBook = ({ successCb = () => {}, diff --git a/__app/component/Scanner/Scanner.js b/__app/component/Scanner/Scanner.js index eef410f..19cd8d9 100644 --- a/__app/component/Scanner/Scanner.js +++ b/__app/component/Scanner/Scanner.js @@ -17,7 +17,7 @@ const failureMsgDefault = { unableToScan: 'Unable to scan', }; -const isBrowserSupport = () => navigator?.mediaDevices && globalThis.BarcodeDetector; +const isBrowserSupport = () => globalThis.navigator?.mediaDevices && globalThis.BarcodeDetector; function Scanner({ successCb, diff --git a/__app/component/Share/Share.js b/__app/component/Share/Share.js index ef907d3..6a52cde 100644 --- a/__app/component/Share/Share.js +++ b/__app/component/Share/Share.js @@ -18,7 +18,7 @@ const isShareAPIDataValid = (sharingData) => { return true; }; -const isBrowserSupport = () => globalThis.navigator?.share && true; +const isBrowserSupport = () => globalThis.navigator?.share; const share = ({ successCb = () => {}, diff --git a/__app/component/Vibrate/Vibrate.js b/__app/component/Vibrate/Vibrate.js index 64ac06d..87f5e80 100644 --- a/__app/component/Vibrate/Vibrate.js +++ b/__app/component/Vibrate/Vibrate.js @@ -8,7 +8,7 @@ const failureMsgDefault = { error: 'Unable to fetch details from Vibrate', }; -const isBrowserSupport = () => globalThis?.navigator?.vibrate; +const isBrowserSupport = () => globalThis.navigator?.vibrate; const vibrate = ({ successCb = () => {}, diff --git a/__app/component/WakeLock/WakeLock.js b/__app/component/WakeLock/WakeLock.js index ec20042..1b302b7 100644 --- a/__app/component/WakeLock/WakeLock.js +++ b/__app/component/WakeLock/WakeLock.js @@ -8,7 +8,7 @@ const failureMsgDefault = { error: 'Unable to fetch details from WakeLock', }; -const isBrowserSupport = () => globalThis?.navigator.wakeLock; +const isBrowserSupport = () => globalThis.navigator?.wakeLock; const wakeLock = ({ successCb = () => {}, From c00834c7d06b3effdf1be73d419a7b7fb9ffb832 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Fri, 3 May 2024 11:36:00 +0530 Subject: [PATCH 08/23] (fect): Removed space from template in boilerplate --- __app/script/boilerPlate.js | 1 - 1 file changed, 1 deletion(-) diff --git a/__app/script/boilerPlate.js b/__app/script/boilerPlate.js index fbb7fe7..1b7c3dd 100644 --- a/__app/script/boilerPlate.js +++ b/__app/script/boilerPlate.js @@ -58,7 +58,6 @@ const ${COMPONENT_SERVICE} = ({ init(); }; - function ${COMPONENT}({ children, successCb, From fe2b5e5f864ad463402f964aed1bbc5c9c384c80 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Fri, 3 May 2024 16:04:12 +0530 Subject: [PATCH 09/23] (fect): Updated react version to 18.3.1 from 18.2.0 --- __app/component/Scanner/Scanner.js | 1 + package-lock.json | 50 ++++++++++++++---------------- package.json | 8 ++--- 3 files changed, 26 insertions(+), 33 deletions(-) diff --git a/__app/component/Scanner/Scanner.js b/__app/component/Scanner/Scanner.js index 19cd8d9..10024ce 100644 --- a/__app/component/Scanner/Scanner.js +++ b/__app/component/Scanner/Scanner.js @@ -96,6 +96,7 @@ function Scanner({ video.style.top = '0'; video.style.left = '0'; video.style.objectFit = 'fill'; + video.style.transform = 'rotateY(180deg)'; list = document.getElementById(id); list.before(video); }; diff --git a/package-lock.json b/package-lock.json index 8a597a7..d2d09a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "1.2.0", "license": "MIT", "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { "@babel/cli": "^7.23.9", @@ -28,10 +28,6 @@ "lint-staged": "^15.2.2", "mkdirp": "^3.0.1", "semantic-release": "^23.0.2" - }, - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -11834,9 +11830,9 @@ } }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dependencies": { "loose-envify": "^1.1.0" }, @@ -11845,15 +11841,15 @@ } }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^18.3.1" } }, "node_modules/react-is": { @@ -12315,9 +12311,9 @@ "dev": true }, "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "dependencies": { "loose-envify": "^1.1.0" } @@ -22115,20 +22111,20 @@ } }, "react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "requires": { "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.23.2" } }, "react-is": { @@ -22457,9 +22453,9 @@ "dev": true }, "scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "requires": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index 109e87f..2eced07 100644 --- a/package.json +++ b/package.json @@ -118,11 +118,7 @@ "semantic-release": "^23.0.2" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - }, - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" } } From 6ee54451afb98693f5a1878657370bedc4f87789 Mon Sep 17 00:00:00 2001 From: swaraj Date: Mon, 6 May 2024 12:01:14 +0530 Subject: [PATCH 10/23] reverted code --- .../NetworkConnection/NetworkConnection.js | 109 ------------------ __app/component/NetworkConnection/Offline.js | 7 -- __app/component/NetworkConnection/Online.js | 7 -- __app/component/NetworkConnection/README.md | 30 ----- __app/component/NetworkConnection/index.js | 7 -- package.json | 6 +- 6 files changed, 2 insertions(+), 164 deletions(-) delete mode 100644 __app/component/NetworkConnection/NetworkConnection.js delete mode 100644 __app/component/NetworkConnection/Offline.js delete mode 100644 __app/component/NetworkConnection/Online.js delete mode 100644 __app/component/NetworkConnection/README.md delete mode 100644 __app/component/NetworkConnection/index.js diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js deleted file mode 100644 index c81abe0..0000000 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import { handleSuccess, handleError } from '../services/handlerService'; -import Wrapper from '../Wrapper/Wrapper'; - -const failureMsgDefault = { - unSupported: 'NetworkConnection is not supported in your device', - error: 'Unable to fetch details from NetworkConnection', -}; - -const defaultConnectionValue = { - downlink: '', - effectiveType: '', - rtt: '', - saveData: '', -}; - -function NetworkConnection({ - successCb = () => {}, - failureCb = () => {}, - successMsg = 'NetworkConnection details fetch Successfully', - failureMsg: failureMsgProps, - children, -}) { - const [isOnline, setIsOnline] = useState(globalThis?.navigator.onLine); - const [connectionDetails, setConnectionDetails] = useState(defaultConnectionValue); - - const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; - - const updateNetworkConnection = () => { - setIsOnline(globalThis?.navigator?.onLine); - - const newObj = globalThis?.navigator?.connection; - setConnectionDetails({ - downlink: newObj?.downlink, - effectiveType: newObj?.effectiveType, - rtt: newObj?.rtt, - saveData: newObj?.saveData, - }); - }; - - const onlineOfflineHandler = () => { - setIsOnline(globalThis?.navigator?.onLine); - }; - - const networkChangeHandler = () => { - if (!globalThis?.navigator?.onLine) return; - const newObj = globalThis?.navigator?.connection; - - setConnectionDetails({ - downlink: newObj?.downlink, - effectiveType: newObj?.effectiveType, - rtt: newObj?.rtt, - saveData: newObj?.saveData, - }); - }; - - const handleUpdate = () => { - if (NetworkConnection.isBrowserSupport() === true - || NetworkConnection.isBrowserSupport() === false) { - handleSuccess({ msgType: 'SUCCESSFUL', - msg: successMsg, - successCb, - data: { - online: isOnline, - connectionDetail: connectionDetails, - } }); - } else { - return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); - } - return true; - }; - - useEffect(() => { - handleUpdate(); - }, [isOnline, connectionDetails.effectiveType]); - - useEffect(() => { - globalThis.addEventListener('online', onlineOfflineHandler); - globalThis.addEventListener('offline', onlineOfflineHandler); - globalThis?.navigator.connection.addEventListener('change', networkChangeHandler); - - updateNetworkConnection(); - - return () => { - globalThis.removeEventListener('online', onlineOfflineHandler); - globalThis.removeEventListener('offline', onlineOfflineHandler); - globalThis.navigator.connection.removeEventListener('change', networkChangeHandler); - }; - }, []); - - return ( - React.Children.map(children, (child) => React.cloneElement(child, { - isOnline, - })) - ); -} - -NetworkConnection.isBrowserSupport = () => globalThis?.navigator?.onLine; - -NetworkConnection.propTypes = { - successCb: PropTypes.func, - failureCb: PropTypes.func, - loadingCb: PropTypes.func, - successMsg: PropTypes.string, - failureMsg: PropTypes.object, -}; - -export default Wrapper(NetworkConnection); diff --git a/__app/component/NetworkConnection/Offline.js b/__app/component/NetworkConnection/Offline.js deleted file mode 100644 index c131c81..0000000 --- a/__app/component/NetworkConnection/Offline.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -function Offline({ children, isOnline }) { - return !isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)); -} - -export default Offline; diff --git a/__app/component/NetworkConnection/Online.js b/__app/component/NetworkConnection/Online.js deleted file mode 100644 index 60bc71c..0000000 --- a/__app/component/NetworkConnection/Online.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -function Online({ children, isOnline }) { - return isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)); -} - -export default Online; diff --git a/__app/component/NetworkConnection/README.md b/__app/component/NetworkConnection/README.md deleted file mode 100644 index 1d499b9..0000000 --- a/__app/component/NetworkConnection/README.md +++ /dev/null @@ -1,30 +0,0 @@ - -# Network Connection - -A Network Connection Component returns online status and also information about the system's connection in terms of general connection type (e.g., 'Wi-Fi, 'cellular', etc.). Which can be used to select high-definition content or low-definition content based on the user's connection. - - -## Usage/Examples - -```javascript -import { NetworkConnection, Online, Offline} from 'fe-pilot/NetworkConnection'; - - const success = (response) => { - console.log(response, " success response") - } - - const failure = (response) => { - console.log(response, " failure response") - } - - return ( - - Online - -
Pass custom Html to be displayed when appeared offline
- - - ); -} -``` - diff --git a/__app/component/NetworkConnection/index.js b/__app/component/NetworkConnection/index.js deleted file mode 100644 index c48e025..0000000 --- a/__app/component/NetworkConnection/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import NetworkConnection from './NetworkConnection'; -import Online from './Online'; -import Offline from './Offline'; - -export { NetworkConnection, Online, Offline }; - -export default NetworkConnection; diff --git a/package.json b/package.json index 1b8cb7e..f94e3e8 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,7 @@ "detectmylocation", "colorpicker", "wakelock", - "WhatsappShare", - "NetworkConnection" + "WhatsappShare" ], "config": { "commitizen": { @@ -100,8 +99,7 @@ "VoiceRecognition/", "Vibrate/", "ColorPicker/", - "WhatsappShare/", - "NetworkConnection/" + "WhatsappShare/" ], "devDependencies": { "@babel/cli": "^7.23.9", From 7d414872ff992b4d50bf2250e82f788144f83e4d Mon Sep 17 00:00:00 2001 From: swaraj Date: Tue, 7 May 2024 11:47:13 +0530 Subject: [PATCH 11/23] refactored code --- .github/README.md | 1 + README.md | 1 + .../NetworkConnection/NetworkConnection.js | 108 ++++++++++++++++++ __app/component/NetworkConnection/Offline.js | 7 ++ __app/component/NetworkConnection/Online.js | 7 ++ __app/component/NetworkConnection/README.md | 30 +++++ __app/component/NetworkConnection/index.js | 7 ++ package.json | 6 +- 8 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 __app/component/NetworkConnection/NetworkConnection.js create mode 100644 __app/component/NetworkConnection/Offline.js create mode 100644 __app/component/NetworkConnection/Online.js create mode 100644 __app/component/NetworkConnection/README.md create mode 100644 __app/component/NetworkConnection/index.js diff --git a/.github/README.md b/.github/README.md index c2d6006..f949678 100644 --- a/.github/README.md +++ b/.github/README.md @@ -97,6 +97,7 @@ import Share from 'fe-pilot/Share'; > 00. :white_check_mark:   [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md) > 00. :white_check_mark:   [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md) > 00. :white_check_mark:   [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md) +> 00. :white_check_mark:   [NetworkConnection](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/NetworkConnection/README.md) > ## Online Editor Templates diff --git a/README.md b/README.md index ecbe0a1..339dec6 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ import Share from 'fe-pilot/Share'; 12. :white_check_mark:   [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md) 13. :white_check_mark:   [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md) 14. :white_check_mark:   [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md) +15. :white_check_mark:   [NetworkConnection](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/NetworkConnection/README.md) ## Online Editor Templates diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js new file mode 100644 index 0000000..cfe9846 --- /dev/null +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -0,0 +1,108 @@ +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { + handleSuccess, + handleError, + handleLoading, +} from '../services/handlerService'; +import Wrapper from '../Wrapper/Wrapper'; + +const failureMsgDefault = { + unSupported: 'NetworkConnection is not supporting in your device', + error: 'Unable to fetch details from NetworkConnection', +}; + +const isBrowserSupport = () => globalThis?.navigator?.onLine; + +const networkConnection = ({ + successCb = () => {}, + failureCb = () => {}, + loadingCb = () => {}, + successMsg = 'NetworkConnection details fetch Successfully!', + failureMsg: failureMsgProps = { ...failureMsgDefault }, +} = {}) => { + const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; + + const init = () => { + if (isBrowserSupport() === true || isBrowserSupport() === false) { + handleLoading({ loadingCb }); + + handleSuccess({ + msgType: 'SUCCESSFUL', + msg: successMsg, + successCb, + data: { + online: globalThis?.navigator?.onLine, + connectionDetail: globalThis?.navigator?.connection, + }, + }); + } else { + return handleError({ + msgType: 'UN_SUPPORTED_FEATURE', + msg: failureMsg.unSupported, + failureCb, + }); + } + return true; + }; + + init(); +}; + +function NetworkConnection({ + children, + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, +}) { + const [isOnline, setIsOnline] = useState(globalThis?.navigator.onLine); + + const onlineOfflineHandler = () => { + setIsOnline(globalThis?.navigator?.onLine); + networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg); + }; + + const networkChangeHandler = () => { + if (!globalThis?.navigator?.onLine) return; + + networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg); + }; + + useEffect(() => { + networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg); + + globalThis.addEventListener('online', onlineOfflineHandler); + globalThis.addEventListener('offline', onlineOfflineHandler); + globalThis?.navigator.connection.addEventListener('change', networkChangeHandler); + + return () => { + globalThis.removeEventListener('online', onlineOfflineHandler); + globalThis.removeEventListener('offline', onlineOfflineHandler); + globalThis.navigator.connection.removeEventListener('change', networkChangeHandler); + }; + }, []); + + return React.Children.map(children || 'NetworkConnection', (child) => React.cloneElement( + typeof child === 'string' ? {child} : child, + { + isOnline, + }, + )); +} + +NetworkConnection.propTypes = { + showForever: PropTypes.bool, + successCb: PropTypes.func, + failureCb: PropTypes.func, + loadingCb: PropTypes.func, + successMsg: PropTypes.string, + failureMsg: PropTypes.object, +}; + +const WNetworkConnection = Wrapper(NetworkConnection, isBrowserSupport); + +export { networkConnection, WNetworkConnection as NetworkConnection }; + +export default WNetworkConnection; diff --git a/__app/component/NetworkConnection/Offline.js b/__app/component/NetworkConnection/Offline.js new file mode 100644 index 0000000..c131c81 --- /dev/null +++ b/__app/component/NetworkConnection/Offline.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function Offline({ children, isOnline }) { + return !isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)); +} + +export default Offline; diff --git a/__app/component/NetworkConnection/Online.js b/__app/component/NetworkConnection/Online.js new file mode 100644 index 0000000..60bc71c --- /dev/null +++ b/__app/component/NetworkConnection/Online.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function Online({ children, isOnline }) { + return isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? {child} : child)); +} + +export default Online; diff --git a/__app/component/NetworkConnection/README.md b/__app/component/NetworkConnection/README.md new file mode 100644 index 0000000..1d499b9 --- /dev/null +++ b/__app/component/NetworkConnection/README.md @@ -0,0 +1,30 @@ + +# Network Connection + +A Network Connection Component returns online status and also information about the system's connection in terms of general connection type (e.g., 'Wi-Fi, 'cellular', etc.). Which can be used to select high-definition content or low-definition content based on the user's connection. + + +## Usage/Examples + +```javascript +import { NetworkConnection, Online, Offline} from 'fe-pilot/NetworkConnection'; + + const success = (response) => { + console.log(response, " success response") + } + + const failure = (response) => { + console.log(response, " failure response") + } + + return ( + + Online + +
Pass custom Html to be displayed when appeared offline
+ + + ); +} +``` + diff --git a/__app/component/NetworkConnection/index.js b/__app/component/NetworkConnection/index.js new file mode 100644 index 0000000..5f70fbb --- /dev/null +++ b/__app/component/NetworkConnection/index.js @@ -0,0 +1,7 @@ +import { NetworkConnection } from './NetworkConnection'; +import Online from './Online'; +import Offline from './Offline'; + +export { NetworkConnection, Online, Offline }; + +export default NetworkConnection; diff --git a/package.json b/package.json index 2eced07..bbe5f5c 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "detectmylocation", "colorpicker", "wakelock", - "WhatsappShare" + "WhatsappShare", + "NetworkConnection" ], "config": { "commitizen": { @@ -98,7 +99,8 @@ "VoiceRecognition/", "Vibrate/", "ColorPicker/", - "WhatsappShare/" + "WhatsappShare/", + "NetworkConnection/" ], "devDependencies": { "@babel/cli": "^7.23.9", From 683d2556b4f347de69309f42fe6eba37554a99d3 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 16 May 2024 01:03:48 +0530 Subject: [PATCH 12/23] (fect): Refector Text to speech and provided the support as a service and component bth --- __app/component/TextToSpeech/README.md | 54 +++++++++-- __app/component/TextToSpeech/TextToSpeech.js | 97 +++++++++++-------- .../TextToSpeech/TextToSpeechStart.js | 25 ++++- .../TextToSpeech/TextToSpeechStop.js | 8 +- __app/component/TextToSpeech/index.js | 18 +--- package-lock.json | 80 ++++++++------- package.json | 7 +- 7 files changed, 178 insertions(+), 111 deletions(-) diff --git a/__app/component/TextToSpeech/README.md b/__app/component/TextToSpeech/README.md index b32b667..3c199f7 100644 --- a/__app/component/TextToSpeech/README.md +++ b/__app/component/TextToSpeech/README.md @@ -1,15 +1,47 @@ ## 1. Happy Flow +#### a) Passing child + + + Start Icon/Text/Element + + + Stop Icon/Text/Element + + + + + +## 2. Success: successCb callBack Fn along with success msg + + + + + +> [!Note] +> **successCb** will get an object contains the property **msgType**, **msg**, **data** + +## 3. Failure: failureCb callBack Fn along with failure msg + + -```js - - - Voice Icon - - -
Voice Modal
- - -``` + + +> [!Note] +> **failureCb** will get an object contains the property **msgType**, **msg** + +> [!Important] +Failure can happend due to multiple reasons, due to that reason **failureMsg** is an object having different kind of error property according to the error can occur in component + +## 4. Failure: Device don't support the feature and you want to hide the feauture from User + + + + + +> [!Note] +> if **showForever** props value is false, feature will be hidden in case of unSupported by the device + +## 5. Combine with all props ```mermaid @@ -18,3 +50,5 @@ graph TD; TextToSpeech--->TextToSpeechStart; TextToSpeech--->TextToSpeechStop; ``` + + diff --git a/__app/component/TextToSpeech/TextToSpeech.js b/__app/component/TextToSpeech/TextToSpeech.js index f94165e..d766c60 100644 --- a/__app/component/TextToSpeech/TextToSpeech.js +++ b/__app/component/TextToSpeech/TextToSpeech.js @@ -1,56 +1,79 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import Wrapper from '../Wrapper/Wrapper'; -import textToSpeech from './textToSpeechService'; import { handleSuccess, handleError, handleLoading } from '../services/handlerService'; +import Wrapper from '../Wrapper/Wrapper'; +import textToSpeechService from './textToSpeechService'; const failureMsgDefault = { unSupported: 'Text To Speech feature is not supporting in your device', - badRequest: 'Missing props', + badRequest: 'Missing props/params', error: 'Unable to convert text to voice', }; -function TextToSpeech({ - successCb, - failureCb, - loadingCb, - successMsg, - failureMsg: failureMsgProps, - children, +const isBrowserSupport = () => globalThis?.speechSynthesis +&& globalThis?.speechSynthesis?.cancel +&& globalThis?.speechSynthesis?.speak; + +const textToSpeechStart = ({ + successCb = () => {}, + failureCb = () => {}, + loadingCb = () => {}, + setIsAudioOn = () => {}, + successMsg = 'Converted text to voice Successfully!!', + failureMsg: failureMsgProps = { ...failureMsgDefault }, text, -}) { +} = {}) => { const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; - const [isAudioOn, setIsAudioOn] = useState(false); - const handlePlay = async () => { - if (TextToSpeech.isBrowserSupport()) { + const init = async () => { + if (isBrowserSupport()) { + handleLoading({ loadingCb }); + + // Your Code will start from here if (text) { handleLoading({ loadingCb }); setIsAudioOn(true); try { - const utteranceCbk = await textToSpeech(text); + const utteranceCbk = await textToSpeechService(text); utteranceCbk.onend = () => { setIsAudioOn(false); handleSuccess({ msgType: 'SUCCESSFULFUL', msg: successMsg, successCb, data: text }); }; - utteranceCbk.onerror = () => setIsAudioOn(false); + utteranceCbk.onerror = (e) => { + setIsAudioOn(false); + return handleError({ msgType: 'ERROR', msg: failureMsg.error || e.error, failureCb }); + }; } catch (error) { return handleError({ msgType: 'ERROR', msg: failureMsg.error, failureCb }); } } else { return handleError({ msgType: 'MISSING_PARAMS', msg: failureMsg.badRequest, failureCb }); } + // Your Code will end here } else { return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); } - return true; }; - const handleStop = () => { - globalThis.speechSynthesis.cancel(); - setIsAudioOn(false); - }; + init(); +}; + +const textToSpeechStop = ({ setIsAudioOn }) => { + globalThis.speechSynthesis.cancel(); + setIsAudioOn(false); +}; + +function TextToSpeech({ + children, + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + ...props +}) { + const [isAudioOn, setIsAudioOn] = useState(false); useEffect(() => { globalThis.speechSynthesis.cancel(); @@ -60,35 +83,31 @@ function TextToSpeech({ }, []); return React.Children.map(children, (child) => React.cloneElement(child, { - handleStop, - handlePlay, - isAudioOn, successCb, - successMsg, failureCb, + loadingCb, + successMsg, failureMsg, + textToSpeechStart, + textToSpeechStop, + setIsAudioOn, + isAudioOn, + ...props, })); } -TextToSpeech.isBrowserSupport = () => globalThis.speechSynthesis - && globalThis.speechSynthesis?.cancel - && globalThis.speechSynthesis?.speak - && true; - TextToSpeech.propTypes = { + showForever: PropTypes.bool, successCb: PropTypes.func, failureCb: PropTypes.func, loadingCb: PropTypes.func, successMsg: PropTypes.string, failureMsg: PropTypes.object, + text: PropTypes.string, }; -TextToSpeech.defaultProps = { - successCb: () => {}, - failureCb: () => {}, - loadingCb: () => {}, - successMsg: 'Converted text to voice Successfully', - failureMsg: { ...failureMsgDefault }, -}; +const WTextToSpeech = Wrapper(TextToSpeech, isBrowserSupport); + +export { textToSpeechStart, textToSpeechStop, WTextToSpeech as TextToSpeech }; -export default Wrapper(TextToSpeech); +export default WTextToSpeech; diff --git a/__app/component/TextToSpeech/TextToSpeechStart.js b/__app/component/TextToSpeech/TextToSpeechStart.js index 1aaa6d7..952e831 100644 --- a/__app/component/TextToSpeech/TextToSpeechStart.js +++ b/__app/component/TextToSpeech/TextToSpeechStart.js @@ -1,10 +1,31 @@ import React from 'react'; -function TextToSpeechStart({ children, handlePlay, isAudioOn }) { +function TextToSpeechStart({ + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + children, + isAudioOn, + textToSpeechStart, + setIsAudioOn, + text, +}) { return !isAudioOn && React.Children.map(children || 'Start', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { - onClick: handlePlay, + onClick: () => textToSpeechStart({ + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + setIsAudioOn, + text, + }), type: 'ttsStart', })); } +export { TextToSpeechStart }; + export default TextToSpeechStart; diff --git a/__app/component/TextToSpeech/TextToSpeechStop.js b/__app/component/TextToSpeech/TextToSpeechStop.js index 9c3f8d4..45d180b 100644 --- a/__app/component/TextToSpeech/TextToSpeechStop.js +++ b/__app/component/TextToSpeech/TextToSpeechStop.js @@ -1,10 +1,14 @@ import React from 'react'; -function TextToSpeechStop({ children, handleStop, isAudioOn }) { +function TextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn }) { return isAudioOn && React.Children.map(children || 'Stop', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { - onClick: handleStop, + onClick: () => textToSpeechStop({ + setIsAudioOn, + }), type: 'ttsStop', })); } +export { TextToSpeechStop }; + export default TextToSpeechStop; diff --git a/__app/component/TextToSpeech/index.js b/__app/component/TextToSpeech/index.js index 48b2230..64db027 100644 --- a/__app/component/TextToSpeech/index.js +++ b/__app/component/TextToSpeech/index.js @@ -1,15 +1,5 @@ -import TextToSpeech from './TextToSpeech'; -import TextToSpeechStart from './TextToSpeechStart'; -import TextToSpeechStop from './TextToSpeechStop'; +export * from './TextToSpeech'; +export * from './TextToSpeechStart'; +export * from './TextToSpeechStop'; -export { - TextToSpeech, - TextToSpeechStart, - TextToSpeechStop, -}; - -export default { - Init: TextToSpeech, - Start: TextToSpeechStart, - Stop: TextToSpeechStop, -}; +export { default } from './TextToSpeechStart'; diff --git a/package-lock.json b/package-lock.json index d2d09a9..48e2882 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,6 @@ "name": "fe-pilot", "version": "1.2.0", "license": "MIT", - "dependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1" - }, "devDependencies": { "@babel/cli": "^7.23.9", "@babel/core": "^7.24.3", @@ -28,6 +24,10 @@ "lint-staged": "^15.2.2", "mkdirp": "^3.0.1", "semantic-release": "^23.0.2" + }, + "peerDependencies": { + "react": "^19.0.0-beta-73bcdfbae5-20240502", + "react-dom": "^19.0.0-beta-73bcdfbae5-20240502" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -7205,7 +7205,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "node_modules/js-yaml": { "version": "4.1.0", @@ -7930,6 +7931,8 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "peer": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -11830,26 +11833,24 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.0.0-beta-73bcdfbae5-20240502", + "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-beta-73bcdfbae5-20240502.tgz", + "integrity": "sha512-OAZUcEZcXojt2qDPJcLdg7flwTNrPTu4QhpqXsM8rfi+JQt7yjtbVUR6fhkir5aqteamtvps82K8+2/HcjKgxg==", + "peer": true, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.0.0-beta-73bcdfbae5-20240502", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-beta-73bcdfbae5-20240502.tgz", + "integrity": "sha512-9VJGpNiylMbNiYyT88vo3MHRthswqsjuHzOgYN+RqzZ7vSN6XoWAwIUWyp2Ina4PDDZiWox0NNgyuXLC3axHTQ==", + "peer": true, "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "0.25.0-beta-73bcdfbae5-20240502" }, "peerDependencies": { - "react": "^18.3.1" + "react": "19.0.0-beta-73bcdfbae5-20240502" } }, "node_modules/react-is": { @@ -12311,12 +12312,10 @@ "dev": true }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.25.0-beta-73bcdfbae5-20240502", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-beta-73bcdfbae5-20240502.tgz", + "integrity": "sha512-iKGFGP2oQk0lUIHT3+uA/4gy6LEmVUTj/cKPWjE+d9Rm2YNPVObESaaQ0jv26WeW4Mt4jmYdXdsz6OEGZuz2ng==", + "peer": true }, "node_modules/semantic-release": { "version": "23.0.2", @@ -18996,7 +18995,8 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "js-yaml": { "version": "4.1.0", @@ -19531,6 +19531,8 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "peer": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -22111,20 +22113,18 @@ } }, "react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "requires": { - "loose-envify": "^1.1.0" - } + "version": "19.0.0-beta-73bcdfbae5-20240502", + "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-beta-73bcdfbae5-20240502.tgz", + "integrity": "sha512-OAZUcEZcXojt2qDPJcLdg7flwTNrPTu4QhpqXsM8rfi+JQt7yjtbVUR6fhkir5aqteamtvps82K8+2/HcjKgxg==", + "peer": true }, "react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.0.0-beta-73bcdfbae5-20240502", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-beta-73bcdfbae5-20240502.tgz", + "integrity": "sha512-9VJGpNiylMbNiYyT88vo3MHRthswqsjuHzOgYN+RqzZ7vSN6XoWAwIUWyp2Ina4PDDZiWox0NNgyuXLC3axHTQ==", + "peer": true, "requires": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "0.25.0-beta-73bcdfbae5-20240502" } }, "react-is": { @@ -22453,12 +22453,10 @@ "dev": true }, "scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "requires": { - "loose-envify": "^1.1.0" - } + "version": "0.25.0-beta-73bcdfbae5-20240502", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-beta-73bcdfbae5-20240502.tgz", + "integrity": "sha512-iKGFGP2oQk0lUIHT3+uA/4gy6LEmVUTj/cKPWjE+d9Rm2YNPVObESaaQ0jv26WeW4Mt4jmYdXdsz6OEGZuz2ng==", + "peer": true }, "semantic-release": { "version": "23.0.2", diff --git a/package.json b/package.json index 2eced07..9388854 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "detectmylocation", "colorpicker", "wakelock", - "WhatsappShare" + "WhatsappShare", + "TextToSpeech" ], "config": { "commitizen": { @@ -118,7 +119,7 @@ "semantic-release": "^23.0.2" }, "peerDependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1" + "react": "^19.0.0-beta-73bcdfbae5-20240502", + "react-dom": "^19.0.0-beta-73bcdfbae5-20240502" } } From 3559d201eb58cce1cff3cb134f0a180cdd58293a Mon Sep 17 00:00:00 2001 From: swaraj Date: Thu, 16 May 2024 14:31:57 +0530 Subject: [PATCH 13/23] resolved all the comments --- __app/component/NetworkConnection/NetworkConnection.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js index cfe9846..f31e22b 100644 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -12,7 +12,7 @@ const failureMsgDefault = { error: 'Unable to fetch details from NetworkConnection', }; -const isBrowserSupport = () => globalThis?.navigator?.onLine; +const isBrowserSupport = () => globalThis?.navigator?.onLine || false; const networkConnection = ({ successCb = () => {}, @@ -57,7 +57,7 @@ function NetworkConnection({ successMsg, failureMsg, }) { - const [isOnline, setIsOnline] = useState(globalThis?.navigator.onLine); + const [isOnline, setIsOnline] = useState(isBrowserSupport()); const onlineOfflineHandler = () => { setIsOnline(globalThis?.navigator?.onLine); @@ -65,7 +65,7 @@ function NetworkConnection({ }; const networkChangeHandler = () => { - if (!globalThis?.navigator?.onLine) return; + if (!isBrowserSupport()) return; networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg); }; From bfda0ffb5333391bcbef843dcc8784fc1ef49eb3 Mon Sep 17 00:00:00 2001 From: swaraj Date: Thu, 16 May 2024 16:17:35 +0530 Subject: [PATCH 14/23] changes as per feedback --- __app/component/NetworkConnection/NetworkConnection.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__app/component/NetworkConnection/NetworkConnection.js b/__app/component/NetworkConnection/NetworkConnection.js index f31e22b..c0c1690 100644 --- a/__app/component/NetworkConnection/NetworkConnection.js +++ b/__app/component/NetworkConnection/NetworkConnection.js @@ -32,7 +32,7 @@ const networkConnection = ({ msg: successMsg, successCb, data: { - online: globalThis?.navigator?.onLine, + online: isBrowserSupport(), connectionDetail: globalThis?.navigator?.connection, }, }); @@ -60,7 +60,7 @@ function NetworkConnection({ const [isOnline, setIsOnline] = useState(isBrowserSupport()); const onlineOfflineHandler = () => { - setIsOnline(globalThis?.navigator?.onLine); + setIsOnline(isBrowserSupport()); networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg); }; From bb829419544d0de084c58703aeb61c2dae364dfb Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 16 May 2024 16:56:40 +0530 Subject: [PATCH 15/23] (fect): Refector Text to speech and provided the support as a service and component bth --- __app/component/TextToSpeech/TextToSpeech.js | 3 ++- __app/component/TextToSpeech/TextToSpeechStart.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/__app/component/TextToSpeech/TextToSpeech.js b/__app/component/TextToSpeech/TextToSpeech.js index d766c60..18fca6b 100644 --- a/__app/component/TextToSpeech/TextToSpeech.js +++ b/__app/component/TextToSpeech/TextToSpeech.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { handleSuccess, handleError, handleLoading } from '../services/handlerService'; import Wrapper from '../Wrapper/Wrapper'; import textToSpeechService from './textToSpeechService'; +import { TextToSpeechStart } from './TextToSpeechStart'; const failureMsgDefault = { unSupported: 'Text To Speech feature is not supporting in your device', @@ -82,7 +83,7 @@ function TextToSpeech({ }; }, []); - return React.Children.map(children, (child) => React.cloneElement(child, { + return React.Children.map(children || , (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { successCb, failureCb, loadingCb, diff --git a/__app/component/TextToSpeech/TextToSpeechStart.js b/__app/component/TextToSpeech/TextToSpeechStart.js index 952e831..b1bdcf3 100644 --- a/__app/component/TextToSpeech/TextToSpeechStart.js +++ b/__app/component/TextToSpeech/TextToSpeechStart.js @@ -11,8 +11,9 @@ function TextToSpeechStart({ textToSpeechStart, setIsAudioOn, text, + defaultShow = false, }) { - return !isAudioOn && React.Children.map(children || 'Start', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { + return (!isAudioOn || defaultShow) && React.Children.map(children || 'Start', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { onClick: () => textToSpeechStart({ successCb, failureCb, From 084efb1495449b6aff1285f1bc0358f9492d7b74 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 16 May 2024 17:20:51 +0530 Subject: [PATCH 16/23] (fect): Refector Voice Recognition and provided the support as a service and component bth --- __app/component/VoiceRecognition/README.md | 47 +++++++++-- .../VoiceRecognition/VoiceRecognition.js | 83 ++++++++++++------- .../VoiceRecognition/VoiceRecognitionIcon.js | 28 ++++++- .../VoiceRecognition/VoiceRecognitionModal.js | 12 ++- __app/component/VoiceRecognition/index.js | 18 +--- package.json | 3 +- 6 files changed, 130 insertions(+), 61 deletions(-) diff --git a/__app/component/VoiceRecognition/README.md b/__app/component/VoiceRecognition/README.md index cce53f8..ae439a0 100644 --- a/__app/component/VoiceRecognition/README.md +++ b/__app/component/VoiceRecognition/README.md @@ -1,12 +1,45 @@ - ## 1. Happy Flow +#### a) Passing child + + TextToSpeech-Start Icon/Text/Component + TextToSpeech-Stop Icon/Text/Component-Stop + + + + +## 2. Success: successCb callBack Fn along with success msg + + + + + +> [!Note] +> **successCb** will get an object contains the property **msgType**, **msg**, **data** + +## 3. Failure: failureCb callBack Fn along with failure msg + + + + + +> [!Note] +> **failureCb** will get an object contains the property **msgType**, **msg** + +> [!Important] +Failure can happend due to multiple reasons, due to that reason **failureMsg** is an object having different kind of error property according to the error can occur in component + +## 4. Failure: Device don't support the feature and you want to hide the feauture from User + + + + + +> [!Note] +> if **showForever** props value is false, feature will be hidden in case of unSupported by the device + +## 5. Combine with all props + -```js - - TextToSpeech-Start - TextToSpeech-Stop - -``` ```mermaid diff --git a/__app/component/VoiceRecognition/VoiceRecognition.js b/__app/component/VoiceRecognition/VoiceRecognition.js index 4cf84b2..de69a23 100644 --- a/__app/component/VoiceRecognition/VoiceRecognition.js +++ b/__app/component/VoiceRecognition/VoiceRecognition.js @@ -1,30 +1,34 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import Wrapper from '../Wrapper/Wrapper'; import { handleSuccess, handleError, handleLoading } from '../services/handlerService'; +import Wrapper from '../Wrapper/Wrapper'; +import VoiceRecognitionIcon from './VoiceRecognitionIcon'; const failureMsgDefault = { - unSupported: 'Voice Recognition feature is not supporting in your device', + unSupported: 'VoiceRecognition is not supporting in your device', error: 'Unable to convert your voice to text', }; -function VoiceRecognition({ - successCb, - failureCb, - loadingCb, - successMsg, - failureMsg: failureMsgProps, - children, -}) { +const isBrowserSupport = () => globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition; + +const voiceRecognition = ({ + successCb = () => {}, + failureCb = () => {}, + loadingCb = () => {}, + successMsg = 'Successfully converted your voice to text!!', + failureMsg: failureMsgProps = { ...failureMsgDefault }, + + setIsModalVisible = () => {}, + setIsVoiceStarted = () => {}, + setVoiceText = () => {}, +} = {}) => { const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; - const [isModalVisible, setIsModalVisible] = useState(false); - const [isVoiceStarted, setIsVoiceStarted] = useState(false); - const [voiceText, setVoiceText] = useState(''); - const listen = () => { - if (VoiceRecognition.isBrowserSupport()) { + const init = () => { + if (isBrowserSupport()) { handleLoading({ loadingCb }); + // Your Code will start from here const SpeechRecognition = globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition; const recognition = new SpeechRecognition(); @@ -61,31 +65,50 @@ function VoiceRecognition({ setTimeout(() => setIsModalVisible(false), 1500); }; setIsModalVisible(true); + // Your Code will end here } else { return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); } - return true; }; - return React.Children.map(children, (child) => React.cloneElement(child, { + init(); +}; + +function VoiceRecognition({ + children, + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + ...props +}) { + const [isModalVisible, setIsModalVisible] = useState(false); + const [isVoiceStarted, setIsVoiceStarted] = useState(false); + const [voiceText, setVoiceText] = useState(''); + return React.Children.map(children || , (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { successCb, - successMsg, failureCb, + loadingCb, + successMsg, failureMsg, - listen, - isVoiceStarted, + + voiceRecognition, + isModalVisible, + isVoiceStarted, voiceText, - onClose: () => setIsModalVisible(false), + setIsModalVisible, + setIsVoiceStarted, + setVoiceText, + ...props, })); } -VoiceRecognition.isBrowserSupport = () => globalThis.SpeechRecognition - || globalThis.webkitSpeechRecognition; - VoiceRecognition.propTypes = { + showForever: PropTypes.bool, successCb: PropTypes.func, failureCb: PropTypes.func, loadingCb: PropTypes.func, @@ -93,12 +116,8 @@ VoiceRecognition.propTypes = { failureMsg: PropTypes.object, }; -VoiceRecognition.defaultProps = { - successCb: () => {}, - failureCb: () => {}, - loadingCb: () => {}, - successMsg: 'Successfully converted your voice to text', - failureMsg: { ...failureMsgDefault }, -}; +const WVoiceRecognition = Wrapper(VoiceRecognition, isBrowserSupport); + +export { voiceRecognition, WVoiceRecognition as VoiceRecognition }; -export default Wrapper(VoiceRecognition); +export default WVoiceRecognition; diff --git a/__app/component/VoiceRecognition/VoiceRecognitionIcon.js b/__app/component/VoiceRecognition/VoiceRecognitionIcon.js index 92d10e9..02d8f4d 100644 --- a/__app/component/VoiceRecognition/VoiceRecognitionIcon.js +++ b/__app/component/VoiceRecognition/VoiceRecognitionIcon.js @@ -1,9 +1,31 @@ import React from 'react'; -function VoiceRecognitionIcon({ children, listen }) { +function WVoiceRecognitionIcon({ + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + children, + voiceRecognition, + setIsModalVisible, + setIsVoiceStarted, + setVoiceText, +}) { return React.Children.map(children || 'Voice Recognition', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { - onClick: listen, + onClick: () => voiceRecognition({ + successCb, + failureCb, + loadingCb, + successMsg, + failureMsg, + setIsModalVisible, + setIsVoiceStarted, + setVoiceText, + }), })); } -export default VoiceRecognitionIcon; +export { WVoiceRecognitionIcon as VoiceRecognitionIcon }; + +export default WVoiceRecognitionIcon; diff --git a/__app/component/VoiceRecognition/VoiceRecognitionModal.js b/__app/component/VoiceRecognition/VoiceRecognitionModal.js index 74605bf..58dde48 100644 --- a/__app/component/VoiceRecognition/VoiceRecognitionModal.js +++ b/__app/component/VoiceRecognition/VoiceRecognitionModal.js @@ -1,19 +1,23 @@ import React from 'react'; -export default function VoiceRecognitionModal({ +function WVoiceRecognitionModal({ children, + setIsModalVisible, isModalVisible, isVoiceStarted, - onClose, voiceText, }) { let isReactElement = true; return isModalVisible && React.Children.map(children, (child) => { - isReactElement = child.type[0] === child.type[0].toUpperCase(); + isReactElement = child.type && child.type?.[0] === child.type?.[0]?.toUpperCase(); return React.cloneElement(typeof child === 'string' ? {child} : child, { - onClose, + onClose: () => setIsModalVisible(false), [isReactElement ? 'voiceText' : 'voicetext']: voiceText, [isReactElement ? 'isVoiceStarted' : 'isvoicestarted']: isVoiceStarted.toString(), }); }); } + +export { WVoiceRecognitionModal as VoiceRecognitionModal }; + +export default WVoiceRecognitionModal; diff --git a/__app/component/VoiceRecognition/index.js b/__app/component/VoiceRecognition/index.js index 80a169c..50b305f 100644 --- a/__app/component/VoiceRecognition/index.js +++ b/__app/component/VoiceRecognition/index.js @@ -1,15 +1,5 @@ -import VoiceRecognition from './VoiceRecognition'; -import VoiceRecognitionIcon from './VoiceRecognitionIcon'; -import VoiceRecognitionModal from './VoiceRecognitionModal'; +export * from './VoiceRecognition'; +export * from './VoiceRecognitionIcon'; +export * from './VoiceRecognitionModal'; -export { - VoiceRecognition, - VoiceRecognitionIcon, - VoiceRecognitionModal, -}; - -export default { - Init: VoiceRecognition, - Icon: VoiceRecognitionIcon, - Modal: VoiceRecognitionModal, -}; +export { default } from './VoiceRecognition'; diff --git a/package.json b/package.json index 9388854..ccea780 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,8 @@ "colorpicker", "wakelock", "WhatsappShare", - "TextToSpeech" + "TextToSpeech", + "VoiceRecognition" ], "config": { "commitizen": { From c8b016b0202e105d6c182b478c5ae05ecb1e189b Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 16 May 2024 17:28:13 +0530 Subject: [PATCH 17/23] (fect): Refector Text to speech child component, now supporting default and multi export --- __app/component/TextToSpeech/TextToSpeechStart.js | 6 +++--- __app/component/TextToSpeech/TextToSpeechStop.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/__app/component/TextToSpeech/TextToSpeechStart.js b/__app/component/TextToSpeech/TextToSpeechStart.js index b1bdcf3..fc961c2 100644 --- a/__app/component/TextToSpeech/TextToSpeechStart.js +++ b/__app/component/TextToSpeech/TextToSpeechStart.js @@ -1,6 +1,6 @@ import React from 'react'; -function TextToSpeechStart({ +function WTextToSpeechStart({ successCb, failureCb, loadingCb, @@ -27,6 +27,6 @@ function TextToSpeechStart({ })); } -export { TextToSpeechStart }; +export { WTextToSpeechStart as TextToSpeechStart }; -export default TextToSpeechStart; +export default WTextToSpeechStart; diff --git a/__app/component/TextToSpeech/TextToSpeechStop.js b/__app/component/TextToSpeech/TextToSpeechStop.js index 45d180b..3986aa7 100644 --- a/__app/component/TextToSpeech/TextToSpeechStop.js +++ b/__app/component/TextToSpeech/TextToSpeechStop.js @@ -1,6 +1,6 @@ import React from 'react'; -function TextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn }) { +function WTextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn }) { return isAudioOn && React.Children.map(children || 'Stop', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { onClick: () => textToSpeechStop({ setIsAudioOn, @@ -9,6 +9,6 @@ function TextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn })); } -export { TextToSpeechStop }; +export { WTextToSpeechStop as TextToSpeechStop }; -export default TextToSpeechStop; +export default WTextToSpeechStop; From 4d93d882996ffa6494e7f8e03b7cb766d14ab133 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 16 May 2024 17:33:28 +0530 Subject: [PATCH 18/23] (fect): Refector export default and multi export in child component of Text to speech and Voice Recognition --- .eslintrc.json | 3 ++- __app/component/TextToSpeech/TextToSpeech.js | 2 +- __app/component/TextToSpeech/TextToSpeechStart.js | 6 +++--- __app/component/TextToSpeech/TextToSpeechStop.js | 6 +++--- __app/component/VoiceRecognition/VoiceRecognitionIcon.js | 6 +++--- __app/component/VoiceRecognition/VoiceRecognitionModal.js | 6 +++--- 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 7530d81..d3a7376 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,7 +21,8 @@ "react/jsx-fragments": ["off" ], "react/jsx-props-no-spreading": ["off"], "func-names": ["off"], - "no-restricted-exports": ["off"] + "no-restricted-exports": ["off"], + "import/no-named-as-default": 0 }, "parserOptions": { "ecmaVersion":"latest" diff --git a/__app/component/TextToSpeech/TextToSpeech.js b/__app/component/TextToSpeech/TextToSpeech.js index 18fca6b..1bde080 100644 --- a/__app/component/TextToSpeech/TextToSpeech.js +++ b/__app/component/TextToSpeech/TextToSpeech.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { handleSuccess, handleError, handleLoading } from '../services/handlerService'; import Wrapper from '../Wrapper/Wrapper'; import textToSpeechService from './textToSpeechService'; -import { TextToSpeechStart } from './TextToSpeechStart'; +import TextToSpeechStart from './TextToSpeechStart'; const failureMsgDefault = { unSupported: 'Text To Speech feature is not supporting in your device', diff --git a/__app/component/TextToSpeech/TextToSpeechStart.js b/__app/component/TextToSpeech/TextToSpeechStart.js index fc961c2..b1bdcf3 100644 --- a/__app/component/TextToSpeech/TextToSpeechStart.js +++ b/__app/component/TextToSpeech/TextToSpeechStart.js @@ -1,6 +1,6 @@ import React from 'react'; -function WTextToSpeechStart({ +function TextToSpeechStart({ successCb, failureCb, loadingCb, @@ -27,6 +27,6 @@ function WTextToSpeechStart({ })); } -export { WTextToSpeechStart as TextToSpeechStart }; +export { TextToSpeechStart }; -export default WTextToSpeechStart; +export default TextToSpeechStart; diff --git a/__app/component/TextToSpeech/TextToSpeechStop.js b/__app/component/TextToSpeech/TextToSpeechStop.js index 3986aa7..45d180b 100644 --- a/__app/component/TextToSpeech/TextToSpeechStop.js +++ b/__app/component/TextToSpeech/TextToSpeechStop.js @@ -1,6 +1,6 @@ import React from 'react'; -function WTextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn }) { +function TextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn }) { return isAudioOn && React.Children.map(children || 'Stop', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { onClick: () => textToSpeechStop({ setIsAudioOn, @@ -9,6 +9,6 @@ function WTextToSpeechStop({ children, isAudioOn, textToSpeechStop, setIsAudioOn })); } -export { WTextToSpeechStop as TextToSpeechStop }; +export { TextToSpeechStop }; -export default WTextToSpeechStop; +export default TextToSpeechStop; diff --git a/__app/component/VoiceRecognition/VoiceRecognitionIcon.js b/__app/component/VoiceRecognition/VoiceRecognitionIcon.js index 02d8f4d..272c7e7 100644 --- a/__app/component/VoiceRecognition/VoiceRecognitionIcon.js +++ b/__app/component/VoiceRecognition/VoiceRecognitionIcon.js @@ -1,6 +1,6 @@ import React from 'react'; -function WVoiceRecognitionIcon({ +function VoiceRecognitionIcon({ successCb, failureCb, loadingCb, @@ -26,6 +26,6 @@ function WVoiceRecognitionIcon({ })); } -export { WVoiceRecognitionIcon as VoiceRecognitionIcon }; +export { VoiceRecognitionIcon }; -export default WVoiceRecognitionIcon; +export default VoiceRecognitionIcon; diff --git a/__app/component/VoiceRecognition/VoiceRecognitionModal.js b/__app/component/VoiceRecognition/VoiceRecognitionModal.js index 58dde48..8936d87 100644 --- a/__app/component/VoiceRecognition/VoiceRecognitionModal.js +++ b/__app/component/VoiceRecognition/VoiceRecognitionModal.js @@ -1,6 +1,6 @@ import React from 'react'; -function WVoiceRecognitionModal({ +function VoiceRecognitionModal({ children, setIsModalVisible, isModalVisible, @@ -18,6 +18,6 @@ function WVoiceRecognitionModal({ }); } -export { WVoiceRecognitionModal as VoiceRecognitionModal }; +export { VoiceRecognitionModal }; -export default WVoiceRecognitionModal; +export default VoiceRecognitionModal; From 388e3df626d5dca20ef61d27949ce349a432b0d6 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 16 May 2024 18:46:49 +0530 Subject: [PATCH 19/23] (fect): added id's in scanner child cmponent --- .eslintrc.json | 3 +- __app/component/Scanner/Scanner.js | 48 +++++++++-------------- __app/component/Scanner/ScannerCamera.js | 1 + __app/component/Scanner/ScannerClose.js | 1 + __app/component/Scanner/ScannerFacing.js | 1 + __app/component/Scanner/ScannerFlash.js | 1 + __app/component/Scanner/ScannerGallery.js | 1 + __app/component/Scanner/ScannerScanBox.js | 32 ++++++++------- __app/component/Share/Share.js | 1 - 9 files changed, 42 insertions(+), 47 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d3a7376..6cd26c9 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -22,7 +22,8 @@ "react/jsx-props-no-spreading": ["off"], "func-names": ["off"], "no-restricted-exports": ["off"], - "import/no-named-as-default": 0 + "import/no-named-as-default": 0, + "react/require-default-props": ["off"] }, "parserOptions": { "ecmaVersion":"latest" diff --git a/__app/component/Scanner/Scanner.js b/__app/component/Scanner/Scanner.js index 10024ce..7bed684 100644 --- a/__app/component/Scanner/Scanner.js +++ b/__app/component/Scanner/Scanner.js @@ -1,4 +1,3 @@ -/* eslint-disable no-inner-declarations */ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { handleSuccess, handleError, handleLoading } from '../services/handlerService'; @@ -20,13 +19,13 @@ const failureMsgDefault = { const isBrowserSupport = () => globalThis.navigator?.mediaDevices && globalThis.BarcodeDetector; function Scanner({ - successCb, - failureCb, - loadingCb, - successMsg, - failureMsg: failureMsgProps, - cameraType, - zIndex, + successCb = () => {}, + failureCb = () => {}, + loadingCb = () => {}, + successMsg = 'OTP autofilled successfully', + failureMsg: failureMsgProps = { ...failureMsgDefault }, + cameraType = 'back', + zIndex = 9, children, }) { let list = null; @@ -35,7 +34,6 @@ function Scanner({ const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; const [flash, setFlash] = useState(false); - const [isBrowser, setIsBrowser] = useState(false); const stopStreaming = () => { if (mediaStream) { @@ -79,11 +77,11 @@ function Scanner({ }; const createVideo = async (id) => { - document.getElementById('streaming-video')?.remove(); + document.getElementById('fe-pilot-video')?.remove(); video = document.createElement('video'); - video.id = 'streaming-video'; + video.id = 'fe-pilot-video'; video.srcObject = mediaStream; video.autoplay = true; video.play(); @@ -98,7 +96,7 @@ function Scanner({ video.style.objectFit = 'fill'; video.style.transform = 'rotateY(180deg)'; list = document.getElementById(id); - list.before(video); + list.insertBefore(video, list.firstChild); }; const startStreaming = async () => { @@ -119,7 +117,7 @@ function Scanner({ return mediaStream; }; - const startVideo = async (id = 'camera') => { + const startVideo = async (id = 'fe-pilot-scanner') => { mediaStream = await startStreaming(); createVideo(id); detectCodes(); @@ -155,9 +153,8 @@ function Scanner({ const handleBrowserSupport = () => { if (isBrowserSupport()) { - facingMode = cameraType === 'back' ? 'environment' : 'user'; handleLoading({ loadingCb }); - + facingMode = cameraType === 'back' ? 'environment' : 'user'; startVideo(); } else { return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb }); @@ -167,7 +164,6 @@ function Scanner({ }; useEffect(() => { - setIsBrowser(true); handleBrowserSupport(); return () => { @@ -175,9 +171,9 @@ function Scanner({ }; }, []); - return isBrowser && isBrowserSupport() && ( -
-
+ return isBrowserSupport() && ( +
+ { React.Children.map(children, (child) => React.cloneElement(child, { zIndex, @@ -195,6 +191,8 @@ function Scanner({ } Scanner.propTypes = { + // eslint-disable-next-line react/no-unused-prop-types + showForever: PropTypes.bool, successCb: PropTypes.func, failureCb: PropTypes.func, loadingCb: PropTypes.func, @@ -204,18 +202,8 @@ Scanner.propTypes = { cameraType: PropTypes.oneOf(['back', 'front']), }; -Scanner.defaultProps = { - successCb: () => {}, - failureCb: () => {}, - loadingCb: () => {}, - successMsg: '', - failureMsg: { ...failureMsgDefault }, - zIndex: 9, - cameraType: 'back', -}; - const WScanner = Wrapper(Scanner, isBrowserSupport); export { WScanner as Scanner }; -export default Scanner; +export default WScanner; diff --git a/__app/component/Scanner/ScannerCamera.js b/__app/component/Scanner/ScannerCamera.js index 647353c..595e666 100644 --- a/__app/component/Scanner/ScannerCamera.js +++ b/__app/component/Scanner/ScannerCamera.js @@ -43,6 +43,7 @@ function ScannerCamera({ return (