You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
parseError(loadingArray,status)// parseError returns a string based on the loadingArray and status. The returned string is matched to a case so that an appropriate error message will be displayed to the user
32
+
){
33
+
case'Content Script Error':
34
+
return(
35
+
<div>
36
+
Target App not yet found...
37
+
<br/>
38
+
If you encounter this error on the initial launch of Reactime, try refreshing the webpage
39
+
you are developing.
40
+
<br/>
41
+
<br/>
42
+
If Reactime is running as an iframe in your developer tools, right click on the Reactime
43
+
application and click 'Reload Frame'
44
+
<br/>
45
+
<br/>
46
+
NOTE: By default Reactime only launches the content script on URLS starting with
47
+
localhost.
48
+
<br/>
49
+
If your target URL does not match, you can manually launch the content script below.
<ClipLoadercolor='#123abc'size={30}loading={loading}/>// if the loadingArray value is true, we display a loading icon
28
+
) : (
29
+
handleResult(result)// else we display a component produced by 'handleResult' depending on if the result parameter (which takes an argument from the status object in 'ErrorContainer') is true or false
const[loadingArray,setLoading]=useState([true,true,true]);// We create a local state "loadingArray" and set it to an array with three true elements. These will be used as hooks for error checking against a 'status' object that is declared later in a few lines. 'loadingArray' is used later in the return statement to display a spinning loader icon if it's true. If it's false, either a checkmark icon or an exclamation icon will be displayed to the user.
25
+
consttitleTracker=useRef(currentTitle);// useRef returns an object with a property 'initialValue' and a value of whatever was passed in. This allows us to reference a value that's not needed for rendering
26
+
consttimeout=useRef(null);
27
+
const{ port }=props;
12
28
13
-
// function that launches the main app and refreshes the page
29
+
// function that launches the main app
14
30
functionlaunch(): void{
15
31
dispatch(launchContentScript(tabs[currentTab]));
16
-
// Allow the dispatch to complete before refreshing
17
-
setTimeout(()=>{
18
-
chrome.tabs.reload(currentTab);
19
-
},100);
20
32
}
21
33
34
+
functionreinitialize(): void{
35
+
port.postMessage({
36
+
action: 'reinitialize',
37
+
tabId: currentTab,
38
+
});
39
+
}
40
+
41
+
letstatus={
42
+
// We create a status object that we may use later if tabs[currentTab] exists
43
+
contentScriptLaunched: false,
44
+
reactDevToolsInstalled: false,
45
+
targetPageisaReactApp: false,
46
+
};
47
+
48
+
if(tabs[currentTab]){
49
+
// If we do have a tabs[currentTab] object, we replace the status obj we declared above with the properties of the tabs[currentTab].status
50
+
Object.assign(status,tabs[currentTab].status);
51
+
}
52
+
53
+
// hook that sets timer while waiting for a snapshot from the background script, resets if the tab changes/reloads
// 'setLoadingArray' checks an element in our 'loadingArray' local state and compares it with passed in boolean argument. If they don't match, we update our local state replacing the selected element with the boolean argument
58
+
if(loadingArray[i]!==value){
59
+
// this conditional helps us avoid unecessary state changes if the element and the value are already the same
60
+
constloadingArrayClone=[...loadingArray];
61
+
loadingArrayClone[i]=value;
62
+
setLoading(loadingArrayClone);
63
+
}
64
+
}
65
+
66
+
if(titleTracker.current!==currentTitle){
67
+
// if the current tab changes/reloads, we reset loadingArray to it's default [true, true, true]
68
+
titleTracker.current=currentTitle;
69
+
setLoadingArray(0,true);
70
+
setLoadingArray(1,true);
71
+
setLoadingArray(2,true);
72
+
73
+
if(timeout.current){
74
+
// if there is a current timeout set, we clear it
75
+
clearTimeout(timeout.current);
76
+
timeout.current=null;
77
+
}
78
+
}
79
+
80
+
if(!status.contentScriptLaunched){
81
+
// if content script hasnt been launched/found, set a timer or immediately update 'loadingArray' state
82
+
83
+
if(loadingArray[0]===true){
84
+
// if loadingArray[0] is true, then that means our timeout.current is still null so we now set it to a setTimeout function that will flip loadingArray[0] to false after 3 seconds
85
+
timeout.current=setTimeout(()=>{
86
+
setLoadingArray(0,false);
87
+
},3000);// increased from 1500
88
+
}
89
+
}else{
90
+
setLoadingArray(0,false);// if status.contentScriptLaunched is true, that means timeout.current !== null. This means that useEffect was triggered previously.
91
+
}
92
+
93
+
// The next two if statements are written in a way to allow the checking of 'content script hook', 'reactDevTools check', and 'target page is a react app' to be run in chronological order.
// Unload async function when Error Container is unmounted
105
+
return()=>{
106
+
clearTimeout(timeout.current);
107
+
};
108
+
},[status,currentTitle,timeout,loadingArray]);// within our dependency array, we're keeping track of if the status, currentTitle/tab, timeout, or loadingArray changes and we re-run the useEffect hook if they do
0 commit comments