added linting and prop validation for react functional components

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    env: {
+      browser: true,
+      node: true,
+      commonjs: true,
+      es2021: true,
+      jest: true,
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended'],
+    overrides: [],
+    parserOptions: {
+      ecmaVersion: 'latest',
+      sourceType: "module",
+      ecmaFeatures: {
+        jsx: true
+    }
+    },
+    rules: {},
+    settings: {
+        react: {
+            version: "detect"
+            }
+    },
+
+  };

package.json

@@ -9,7 +9,8 @@
     "test": "jest --",
     "eject": "react-scripts eject",
     "auth-worker": "wrangler dev ./worker/index",
-    "auth-worker:login": "wrangler login"
+    "auth-worker:login": "wrangler login",
+    "lint": "eslint src/**/*.js"
   },
   "repository": {
     "type": "git",
@@ -44,6 +45,7 @@
   },
   "devDependencies": {
     "eslint": "^8.27.0",
+    "eslint-plugin-react": "^7.31.11",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^27.5.1"
   },

src/AuthDialog.js

@@ -1,7 +1,8 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Button, Form, Modal } from "react-bootstrap";
+import PropTypes from 'prop-types';
 
-export default function AuthDialog({ show, setShow, setToken, setRepository }) {
+function AuthDialog({ show, setShow, setToken, setRepository }) {
   const tokenEl = useRef(null);
   const repoEl = useRef(null);
 
@@ -63,3 +64,12 @@ export default function AuthDialog({ show, setShow, setToken, setRepository }) {
     </Modal>
   );
 }
+
+AuthDialog.propTypes = {
+  show: PropTypes.bool,
+  setToken: PropTypes.func,
+  setRepository: PropTypes.func,
+  setShow: PropTypes.func
+}
+
+export default AuthDialog

src/NavigationBar.js

@@ -1,6 +1,7 @@
-import { Button, Container, Navbar } from "react-bootstrap";
+import React, { Button, Container, Navbar } from "react-bootstrap";
+import PropTypes from 'prop-types';
 
-export default function NavigationBar({isAuthorized, repository, requestAuthDialog}) {
+function NavigationBar({isAuthorized, repository, requestAuthDialog}) {
     return <>
       <Navbar bg="dark" variant="dark">
         <Container className="Nav">
@@ -26,4 +27,12 @@ export default function NavigationBar({isAuthorized, repository, requestAuthDial
         </Container>
       </Navbar>
     </>
-}
+}
+
+NavigationBar.propTypes = {
+  isAuthorized:PropTypes.bool,
+  repository:PropTypes.string,
+  requestAuthDialog:PropTypes.func,
+}
+
+export default NavigationBar

src/UploadInterface.js

@@ -1,12 +1,13 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { FileUploader } from "react-drag-drop-files";
 import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import PropTypes from 'prop-types';
 
 const fileTypes = ["jpg", "jpeg", "png", "bmp", "gif"];
 
-export default function UploadInterface({ isAuthorized }) {
+function UploadInterface({ isAuthorized }) {
   const [image, setImage] = useState(null);
   const imgPreviewEl = useRef(null);
 
@@ -63,3 +64,9 @@ export default function UploadInterface({ isAuthorized }) {
     </div>
   );
 }
+
+UploadInterface.propTypes = {
+  isAuthorized:PropTypes.bool
+}
+
+export default UploadInterface