Fixed lint warnings and errors and formatted examples

examples/create-react-app/src/App.js

@@ -4,17 +4,14 @@ import {
   Provider as RollbarProvider,
   ErrorBoundary,
   RollbarContext,
-  useRollbar
+  useRollbar,
 } from '@rollbar/react'
 
-import './App.css';
+import './App.css'
 
 const rollbarConfig = {
   accessToken: process.env.REACT_APP_PUBLIC_ROLLBAR_TOKEN,
-  hostSafeList: [
-    'localhost:3000',
-    'localhost:4000',
-  ],
+  hostSafeList: ['localhost:3000', 'localhost:4000'],
   captureUncaught: true,
   captureUnhandledRejections: true,
   payload: {
@@ -26,15 +23,17 @@ const rollbarConfig = {
       },
     },
   },
-};
+}
 
 function App() {
   return (
     <RollbarProvider config={rollbarConfig}>
       <ErrorBoundary
         level="critical"
         errorMessage="example error boundary message"
-        fallbackUI={() => <p style={{ color: 'red' }}>Oops, there was an error.</p>}
+        fallbackUI={() => (
+          <p style={{ color: 'red' }}>Oops, there was an error.</p>
+        )}
         extra={{ more: 'data' }}
         callback={() => console.log('an exception was sent to rollbar')}
       >
@@ -51,61 +50,66 @@ function App() {
         <Router />
       </ErrorBoundary>
     </RollbarProvider>
-  );
+  )
 }
 
-export default App;
+export default App
 
 function Router() {
   return (
     <Routes>
       <Route path="a" element={<RouteA />} />
       <Route path="b" element={<RouteB />} />
     </Routes>
-  );
+  )
 }
 
 function RouteA() {
-  const rollbar = useRollbar();
+  const rollbar = useRollbar()
 
-  const [message, setMessage] = useState('example');
+  const [message, setMessage] = useState('example')
 
-  const fullMessage = useMemo(() => `Hello, ${message}!`, [message]);
+  const fullMessage = useMemo(() => `Hello, ${message}!`, [message])
 
   return (
     <RollbarContext context="/a-context">
       <h1>A</h1>
       <p>Message: {fullMessage}</p>
-      <input value={message} onChange={(event) => setMessage(event.target.value)} />
+      <input
+        value={message}
+        onChange={(event) => setMessage(event.target.value)}
+      />
       <br />
-      <button onClick={() => rollbar.info(`Hello, ${message}.`)}>send message</button>
+      <button onClick={() => rollbar.info(`Hello, ${message}.`)}>
+        send message
+      </button>
     </RollbarContext>
-  );
+  )
 }
 
 function RouteB() {
-  const [errorState, setErrorState] = useState({ error: false });
+  const [errorState, setErrorState] = useState({ error: false })
 
   const updateErrorState = () => {
     // Use an error state and throw inside render,
     // because React won't send errors within event handlers
     // to the error boundary component.
     setErrorState({
-      error: true
-    });
-  };
+      error: true,
+    })
+  }
 
   if (errorState.error) {
     // This uncaught error will be handled by the ErrorBoundary.
-    throw new Error('uncaught test error');
+    throw new Error('uncaught test error')
   }
 
   return (
     <RollbarContext context="/b-context">
       <h1>B</h1>
-      <button id='uncaught-error' onClick={updateErrorState}>
+      <button id="uncaught-error" onClick={updateErrorState}>
         Throw Uncaught Error
       </button>
     </RollbarContext>
-  );
+  )
 }

examples/create-react-app/src/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})

examples/create-react-app/src/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -12,9 +12,9 @@ ReactDOM.render(
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

examples/create-react-app/src/reportWebVitals.js

@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals

examples/create-react-app/src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'