Added linting

.eslintrc.js

@@ -0,0 +1,26 @@
+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"
+            }
+    },
+
+  };
+

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    name: ESLint
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+
+      - name: Setup node ${{matrix.node-version}}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{matrix.node-version}}
+          cache: 'npm'
+
+      - name: Install node dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint

package.json

@@ -9,7 +9,8 @@
     "test": "react-scripts test",
     "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",
@@ -23,27 +24,28 @@
   "homepage": "https://github.com/humphd/my-photohub/#readme",
   "dependencies": {
     "@fontsource/poppins": "^4.5.10",
-    "parcel": "^2.7.0",
-    "photoswipe": "^5.3.3",
+    "@octokit/rest": "^19.0.5",
+    "bootstrap": "^5.2.2",
     "eslint": "^8.27.0",
     "http-status-codes": "^2.2.0",
-    "wrangler": "^2.1.15",
     "octokit": "^2.0.10",
-    "@octokit/rest": "^19.0.5",
+    "parcel": "^2.7.0",
+    "photoswipe": "^5.3.3",
     "react": "^18.2.0",
-    "bootstrap": "^5.2.2",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
     "react-bootstrap": "^2.6.0",
+    "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.7",
+    "react-scripts": "5.0.1",
     "workbox-core": "^6.5.4",
     "workbox-expiration": "^6.5.4",
     "workbox-precaching": "^6.5.4",
     "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4"
+    "workbox-strategies": "^6.5.4",
+    "wrangler": "^2.1.15"
   },
   "devDependencies": {
-    "eslint": "^8.27.0"
+    "eslint": "^8.27.0",
+    "eslint-plugin-react": "^7.31.11"
   },
   "browserslist": {
     "production": [

src/AuthDialog.js

@@ -1,7 +1,10 @@
-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 +66,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,8 @@
-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 +28,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