Use eslint-config-react-app

modules/client/.eslintrc

@@ -1,17 +1,5 @@
 {
   "env": {
     "browser": true
-  },
-  "plugins": ["react", "react-hooks"],
-  "rules": {
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
-  },
-  "settings": {
-    "react": {
-      "version": "16"
-    }
   }
 }

modules/client/browse/FileViewer.js

@@ -15,7 +15,7 @@ function getBasename(path) {
 function ImageViewer({ path, uri }) {
   return (
     <div css={{ padding: 20, textAlign: 'center' }}>
-      <img title={getBasename(path)} src={uri} />
+      <img alt={getBasename(path)} src={uri} />
     </div>
   );
 }

modules/client/main/App.js

@@ -67,6 +67,7 @@ function AboutLogo({ children }) {
 }
 
 function AboutLogoImage(props) {
+  /* eslint-disable-next-line jsx-a11y/alt-text */
   return <img {...props} css={{ maxWidth: '90%' }} />;
 }
 
@@ -442,7 +443,11 @@ export default function App() {
         >
           <AboutLogo>
             <a title="Cloudflare" href="https://www.cloudflare.com">
-              <AboutLogoImage src={CloudflareLogo} height="100" />
+              <AboutLogoImage
+                alt="Cloudflare"
+                src={CloudflareLogo}
+                height="100"
+              />
             </a>
           </AboutLogo>
         </div>
@@ -473,7 +478,7 @@ export default function App() {
         >
           <AboutLogo>
             <a title="Angular" href="https://angular.io">
-              <AboutLogoImage src={AngularLogo} width="200" />
+              <AboutLogoImage alt="Angular" src={AngularLogo} width="200" />
             </a>
           </AboutLogo>
         </div>