migrate appboundary to ts

Author: medyo

src/index.js

@@ -4,7 +4,7 @@ import 'normalize.css';
 import './index.css';
 import App from './App';
 import AppWrapper from 'src/providers/AppWrapper'
-import AppErrorBoundary from 'src/providers/AppErrorBoundary'
+import {AppErrorBoundary} from 'src/providers/AppErrorBoundary'
 import { ConfigurationWrapper } from 'src/features/remoteConfig/'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { queryClient } from 'src/lib/react-query'

src/providers/AppErrorBoundary.js src/providers/AppErrorBoundary.tsxsrc/providers/AppErrorBoundary.js renamed to src/providers/AppErrorBoundary.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
+import { ErrorBoundary} from 'react-error-boundary'
 import { AiFillBug } from 'react-icons/ai'
 import { WiRefresh } from 'react-icons/wi'
 
-export default function AppErrorBoundary({ children }) {
-  function ErrorFallback({ error, resetErrorBoundary }) {
+export const AppErrorBoundary = ({ children }: {children: React.ReactNode}) => {
+  
+  const ErrorFallback = ({ error, resetErrorBoundary }: {error: Error, resetErrorBoundary: () => void}) => {
     return (
       <div className="Page appError">
         <AiFillBug size={64} />
         <p>Sorry there was a problem loading this page.</p>
-        <p>{error}</p>
+        <p>{error.message}</p>
         <button onClick={resetErrorBoundary}>
           <WiRefresh size={32} className={'buttonIcon'} /> Try again
         </button>

src/providers/AppWrapper.js

@@ -1,55 +1,9 @@
-import React, { useReducer, useState, useEffect } from 'react'
-import { LS_PREFERENCES_KEY } from 'src/Constants'
-import AppStorage from '../services/localStorage'
-import { PreferencesProvider } from '../preferences/PreferencesContext'
-import { getOSMode } from '../services/os'
-import AppReducer from '../preferences/AppReducer'
-import { useRemoteConfigStore } from 'src/features/remoteConfig'
+import React, { useState, useEffect } from 'react'
 import { migrateToNewStorage } from 'src/utils/StorageMigration'
 
 export default function AppWrapper({ children }) {
-  const {
-    remoteConfig: { supportedTags },
-  } = useRemoteConfigStore()
   const [appReady, setAppReady] = useState(false)
 
-  const [state, dispatcher] = useReducer(
-    AppReducer,
-    {
-      userSelectedTags: supportedTags.filter((t) => t.value === 'javascript'),
-      userBookmarks: [],
-      theme: getOSMode(),
-      openLinksNewTab: true,
-      listingMode: 'normal',
-      searchEngine: 'Google',
-      cards: [
-        { id: 0, name: 'github' },
-        { id: 1, name: 'hackernews' },
-        { id: 2, name: 'devto' },
-        { id: 3, name: 'producthunt' },
-      ],
-    },
-    (initialState) => {
-      let preferences = AppStorage.getItem(LS_PREFERENCES_KEY)
-      if (preferences) {
-        preferences = JSON.parse(preferences)
-        preferences = {
-          ...preferences,
-          userSelectedTags: supportedTags.filter((tag) =>
-            preferences.userSelectedTags.includes(tag.value)
-          ),
-          cards: preferences.cards.filter((card) => card.name !== 'stackoverflow'),
-        }
-        return {
-          ...initialState,
-          ...preferences,
-        }
-      }
-
-      return initialState
-    }
-  )
-
   useEffect(() => {
     try {
       migrateToNewStorage()
@@ -59,9 +13,5 @@ export default function AppWrapper({ children }) {
     }
   }, [])
 
-  return (
-    <PreferencesProvider value={{ ...state, dispatcher: dispatcher }}>
-      {appReady && children}
-    </PreferencesProvider>
-  )
+  return appReady && children
 }