Update react (#459)

- Updated react with breaking changes - Updated react-dom with breaking changes
tattle-made · Nov 1, 2023 · f29581c · f29581c
1 parent be9eff3
commit f29581c
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 130 deletions.
diff --git a/browser-extension/plugin/package-lock.json b/browser-extension/plugin/package-lock.json
diff --git a/browser-extension/plugin/package.json b/browser-extension/plugin/package.json
@@ -45,8 +45,8 @@
         "grommet-icons": "4.11.0",
         "i18next": "23.6.0",
         "prop-types": "15.8.1",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-feather": "2.0.10",
         "react-i18next": "13.3.1",
         "react-router-dom": "6.17.0",

diff --git a/browser-extension/plugin/src/options.jsx b/browser-extension/plugin/src/options.jsx
@@ -1,11 +1,11 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { App } from './ui-components/pages/App';
 
 const app = document.getElementById('app');
-ReactDOM.render(
+const root = createRoot(app);
+root.render(
     <Router>
         <App />
-    </Router>,
-    app
+    </Router>
 );
diff --git a/browser-extension/plugin/src/transform-v2.js b/browser-extension/plugin/src/transform-v2.js
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 //import { parseTweet } from './twitter/parser';
 import { parseTweet_v2 } from './twitter/parser-v2';
 import { hashCode } from './util';
@@ -38,16 +38,16 @@ function addInlineMenu(id, item, hasSlur) {
     let inlineButtonDiv = document.createElement('div');
     inlineButtonDiv.id = id;
     item.prepend(inlineButtonDiv);
+    let root = createRoot(inlineButtonDiv);
 
-    ReactDOM.render(
+    root.render(
         <TweetControl
             tweet={tweets[id]}
             id={id}
             debug={debug}
             setBlur={setBlur}
             hasSlur={hasSlur}
-        />,
-        inlineButtonDiv
+        />
     );
 }
 

diff --git a/browser-extension/plugin/src/transform.js b/browser-extension/plugin/src/transform.js
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { parseTweet } from './twitter/parser';
 import { hashCode } from './util';
 import { replaceSlur } from './slur-replace';
@@ -37,16 +37,16 @@ function addInlineMenu(id, item, hasSlur) {
     let inlineButtonDiv = document.createElement('div');
     inlineButtonDiv.id = id;
     item.prepend(inlineButtonDiv);
+    let root = createRoot(inlineButtonDiv);
 
-    ReactDOM.render(
+    root.render(
         <TweetControl
             tweet={tweets[id]}
             id={id}
             debug={debug}
             setBlur={setBlur}
             hasSlur={hasSlur}
-        />,
-        inlineButtonDiv
+        />
     );
 }
 

diff --git a/browser-extension/plugin/src/twitter/dom.js b/browser-extension/plugin/src/twitter/dom.js
@@ -4,7 +4,7 @@
  * 2. Registering event handlers
  */
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { InlineButtons } from '../ui-components/pages/InlineButtons';
 import { pages, getPageType } from './pages';
 
@@ -32,9 +32,9 @@ function createTopBannerElement() {
         var inlineButtonDiv = document.createElement('div');
         inlineButtonDiv.id = 'ogbv-inline-button';
         main.prepend(inlineButtonDiv);
-        ReactDOM.render(
-            <InlineButtons style={{ position: 'sticky', top: 0 }} />,
-            inlineButtonDiv
+        var root = createRoot(inlineButtonDiv);
+        root.render(
+            <InlineButtons style={{ position: 'sticky', top: 0 }} />
         );
     } catch (err) {
         console.log('TEST : Error Creating Top Banner', err);

diff --git a/browser-extension/plugin/src/twitter/tweet-controls.jsx b/browser-extension/plugin/src/twitter/tweet-controls.jsx
@@ -71,8 +71,15 @@ export function TweetControl({ tweet, id, setBlur, hasSlur, enableML }) {
     //     debug(id);
     // }
 
-    useEffect(async () => {
-        await updateData();
+    useEffect(() => {
+        async function update() {
+            await updateData();
+        } 
+        let ignore = false;
+        update();
+        return () => {
+            ignore = true;
+        };
     }, []);
 
     async function updateData() {

diff --git a/browser-extension/plugin/src/ui-components/pages/App.jsx b/browser-extension/plugin/src/ui-components/pages/App.jsx
@@ -37,28 +37,33 @@ export function App() {
     /**
      * This loads an existing user into the UserContext at startup.
      */
-    useEffect(async () => {
-        try {
-            const userData = await getUserData();
-            const preferenceData = await getPreferenceData();
-
-            if (userData != undefined && Object.keys(userData).length !== 0) {
-                setUser(userData);
+    useEffect(() => {
+        async function navigatePreferences() {
+            try {
+                const userData = await getUserData();
+                const preferenceData = await getPreferenceData();
+
+                if(!ignore) {
+                    if (userData != undefined && Object.keys(userData).length !== 0) {
+                        setUser(userData);
+                    }
+
+                    if (preferenceData != undefined) {
+                        const { language } = preferenceData;
+                        i18n.changeLanguage(langNameMap[language]);
+
+                        navigate('/preferences');
+                    }    
+                }
+            } catch (error) {
+                console.error('Error in useEffect:', error);
             }
-
-            if (preferenceData != undefined) {
-                const { language } = preferenceData;
-                i18n.changeLanguage(langNameMap[language]);
-
-                navigate('/preferences');
-            }
-        } catch (error) {
-            console.error('Error in useEffect:', error);
-        }
-        // if (userData != undefined && Object.keys(userData).length != 0) {
-        //     setUser(userData);
-        // }
-        // alert(process.env.API_URL);
+        } 
+        let ignore = false;
+        navigatePreferences();
+        return () => {
+            ignore = true;
+        };
     }, []);
 
     let userBrowser;

diff --git a/browser-extension/plugin/src/ui-components/pages/Archive.jsx b/browser-extension/plugin/src/ui-components/pages/Archive.jsx
@@ -46,10 +46,19 @@ export function Archive() {
     const { user, setUser } = useContext(UserContext);
     const { notification, showNotification } = useContext(NotificationContext);
 
-    useEffect(async () => {
-        const archive = await getArchive(user.accessToken);
-        console.log(archive);
-        setArchive(archive);
+    useEffect(() => {
+        async function archive() {
+            const archive = await getArchive(user.accessToken);
+            if(!ignore) {
+                console.log(archive);
+                setArchive(archive);    
+            }
+        }
+        let ignore = false;
+        archive();
+        return () => {
+            ignore = true;
+        }
     }, [user]);
 
     return (

diff --git a/browser-extension/plugin/src/ui-components/pages/Debug.jsx b/browser-extension/plugin/src/ui-components/pages/Debug.jsx
@@ -15,10 +15,20 @@ export function Debug() {
     const [localStorageData, setLocalStorageData] = useState(undefined);
     const { t, i18n } = useTranslation();
 
-    useEffect(async () => {
-        const userData = await getUserData();
-        const preferenceData = await getPreferenceData();
-        setLocalStorageData({ user: userData, preference: preferenceData });
+    useEffect(() => {
+        async function localStorage() {
+            const userData = await getUserData();
+            const preferenceData = await getPreferenceData();
+            if(!ignore) {
+                setLocalStorageData({ user: userData, preference: preferenceData });
+            }
+
+        }
+        let ignore = false;
+        localStorage();
+        return () => {
+            ignore = true;
+        }
     }, []);
 
     async function clickReset() {

diff --git a/browser-extension/plugin/src/ui-components/pages/InlineButtons.jsx b/browser-extension/plugin/src/ui-components/pages/InlineButtons.jsx
@@ -68,8 +68,15 @@ export function InlineButtons() {
         setPreferenceLS(preferenceData);
     }
 
-    useEffect(async () => {
-        updateData();
+    useEffect(() => {
+        async function update() {
+            await updateData();
+        } 
+        let ignore = false;
+        update();
+        return () => {
+            ignore = true;
+        };
     }, []);
 
     useEffect(() => {
@@ -82,19 +89,26 @@ export function InlineButtons() {
         }
     }, [preferenceLS]);
 
-    useEffect(async () => {
-        chrome.runtime.onMessage.addListener(async function (
-            message,
-            sender,
-            sendResponse
-        ) {
-            switch (message.type) {
-                case 'updateData':
-                    await updateData();
-                    sendResponse('date updated');
-                    break;
-            }
-        });
+    useEffect(() => {
+        async function messageListener() {
+            chrome.runtime.onMessage.addListener(async function (
+                message,
+                sender,
+                sendResponse
+            ) {
+                switch (message.type) {
+                    case 'updateData':
+                        await updateData();
+                        sendResponse('date updated');
+                        break;
+                }
+            });    
+        }
+        let ignore = false;
+        messageListener();
+        return () => {
+            ignore = true;
+        }
     });
 
     async function clickArchive() {