Skip to content

Commit 121b2c1

Browse files
garrettlchowgarrettlchow
committed
began style error container
1 parent 9e48e06 commit 121b2c1

File tree

4 files changed

+140
-319
lines changed

4 files changed

+140
-319
lines changed

‎src/app/components/ErrorHandling/ErrorMsg.tsx

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎src/app/components/ErrorHandling/Loader.tsx

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/app/containers/ErrorContainer.tsx

Lines changed: 55 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,74 @@
1-
/* eslint-disable max-len */
2-
import React, { useState, useEffect, useRef } from 'react';
3-
import { launchContentScript } from '../slices/mainSlice';
4-
import Loader from '../components/ErrorHandling/Loader';
5-
import ErrorMsg from '../components/ErrorHandling/ErrorMsg';
1+
import React from 'react';
62
import { useDispatch, useSelector } from 'react-redux';
3+
import { launchContentScript } from '../slices/mainSlice';
74
import { MainState, RootState, ErrorContainerProps } from '../FrontendTypes';
8-
9-
/*
10-
This is the loading screen that a user may get when first initalizing the application. This page checks:
11-
12-
1. if the content script has been launched on the current tab
13-
2. if React Dev Tools has been installed
14-
3. if target tab contains a compatible React app
15-
*/
5+
import { RefreshCw, Github, PlayCircle } from 'lucide-react';
166

177
function ErrorContainer(props: ErrorContainerProps): JSX.Element {
188
const dispatch = useDispatch();
199
const { tabs, currentTitle, currentTab }: MainState = useSelector(
2010
(state: RootState) => state.main,
2111
);
22-
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.
23-
const titleTracker = 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
24-
const timeout = useRef(null);
25-
const { port } = props;
2612

27-
// function that launches the main app
13+
// function that launches the main app and refreshes the page
2814
function launch(): void {
2915
dispatch(launchContentScript(tabs[currentTab]));
16+
// Allow the dispatch to complete before refreshing
17+
setTimeout(() => {
18+
chrome.tabs.reload(currentTab);
19+
}, 100);
3020
}
3121

32-
function reinitialize(): void {
33-
port.postMessage({
34-
action: 'reinitialize',
35-
tabId: currentTab,
36-
});
37-
}
38-
39-
let status = {
40-
// We create a status object that we may use later if tabs[currentTab] exists
41-
contentScriptLaunched: false,
42-
reactDevToolsInstalled: false,
43-
targetPageisaReactApp: false,
44-
};
45-
46-
if (tabs[currentTab]) {
47-
// If we do have a tabs[currentTab] object, we replace the status obj we declared above with the properties of the tabs[currentTab].status
48-
Object.assign(status, tabs[currentTab].status);
49-
}
50-
51-
// hook that sets timer while waiting for a snapshot from the background script, resets if the tab changes/reloads
52-
useEffect(() => {
53-
// We declare a function
54-
function setLoadingArray(i: number, value: boolean) {
55-
// '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
56-
if (loadingArray[i] !== value) {
57-
// this conditional helps us avoid unecessary state changes if the element and the value are already the same
58-
const loadingArrayClone = [...loadingArray];
59-
loadingArrayClone[i] = value;
60-
setLoading(loadingArrayClone);
61-
}
62-
}
63-
64-
if (titleTracker.current !== currentTitle) {
65-
// if the current tab changes/reloads, we reset loadingArray to it's default [true, true, true]
66-
titleTracker.current = currentTitle;
67-
setLoadingArray(0, true);
68-
setLoadingArray(1, true);
69-
setLoadingArray(2, true);
70-
71-
if (timeout.current) {
72-
// if there is a current timeout set, we clear it
73-
clearTimeout(timeout.current);
74-
timeout.current = null;
75-
}
76-
}
77-
78-
if (!status.contentScriptLaunched) {
79-
// if content script hasnt been launched/found, set a timer or immediately update 'loadingArray' state
80-
81-
if (loadingArray[0] === true) {
82-
// 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
83-
timeout.current = setTimeout(() => {
84-
setLoadingArray(0, false);
85-
}, 3000); // increased from 1500
86-
}
87-
} else {
88-
setLoadingArray(0, false); // if status.contentScriptLaunched is true, that means timeout.current !== null. This means that useEffect was triggered previously.
89-
}
90-
91-
// 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.
92-
if (loadingArray[0] === false && status.contentScriptLaunched === true) {
93-
timeout.current = setTimeout(() => {
94-
setLoadingArray(1, false);
95-
}, 3000); // increased from 1500
96-
setLoadingArray(1, false);
97-
}
98-
if (loadingArray[1] === false && status.reactDevToolsInstalled === true) {
99-
setLoadingArray(2, false);
100-
}
101-
102-
// Unload async function when Error Container is unmounted
103-
return () => {
104-
clearTimeout(timeout.current);
105-
};
106-
}, [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
107-
10822
return (
10923
<div className='error-container'>
110-
<img src='../assets/whiteBlackSquareLogo.png' alt='Reactime Logo' height='50px' />
111-
112-
<h2>Launching Reactime on tab: {currentTitle}</h2>
113-
114-
<div className='loaderChecks'>
115-
<p>Checking if content script has been launched on current tab</p>
116-
<Loader loading={loadingArray[0]} result={status.contentScriptLaunched} />
117-
118-
<p>Checking if React Dev Tools has been installed</p>
119-
<Loader loading={loadingArray[1]} result={status.reactDevToolsInstalled} />
120-
121-
<p>Checking if target is a compatible React app</p>
122-
<Loader loading={loadingArray[2]} result={status.targetPageisaReactApp} />
123-
</div>
124-
125-
<br />
126-
<div className='errorMsg'>
127-
<ErrorMsg
128-
loadingArray={loadingArray}
129-
status={status}
130-
launchContent={launch}
131-
reinitialize={reinitialize}
132-
/>
24+
<img src='../assets/whiteBlackSquareLogo.png' alt='Reactime Logo' className='error-logo' />
25+
26+
<div className='error-content'>
27+
<div className='error-alert'>
28+
<div className='error-title'>
29+
<RefreshCw size={20} />
30+
Welcome to Reactime
31+
</div>
32+
33+
<p className='error-description'>
34+
To ensure Reactime works correctly with your React application, please refresh your
35+
development page. This allows Reactime to properly connect with your app and start
36+
monitoring state changes.
37+
</p>
38+
<p className='error-description'>
39+
Important: Reactime requires React Developer Tools to be installed. If you haven't
40+
already, please{' '}
41+
<a
42+
href='https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en'
43+
target='_blank'
44+
rel='noopener noreferrer'
45+
className='devtools-link'
46+
>
47+
install React Developer Tools
48+
</a>{' '}
49+
first.
50+
</p>
51+
</div>
52+
53+
<p className='error-note'>
54+
Note: By default, Reactime only launches on URLs starting with localhost.
55+
</p>
56+
57+
<button type='button' className='launch-button' onClick={launch}>
58+
<PlayCircle size={18} />
59+
Launch Reactime
60+
</button>
61+
62+
<a
63+
href='https://github.com/open-source-labs/reactime'
64+
target='_blank'
65+
rel='noopener noreferrer'
66+
className='github-link'
67+
>
68+
<Github size={18} />
69+
Visit Reactime Github for more information
70+
</a>
13371
</div>
134-
<br />
135-
<a
136-
href='https://github.com/open-source-labs/reactime'
137-
target='_blank'
138-
rel='noopener noreferrer'
139-
>
140-
Please visit the Reactime Github for more info.
141-
</a>
14272
</div>
14373
);
14474
}

0 commit comments

Comments
 (0)