chore: lint js code

Author: lpm0073

.eslintrc.js

@@ -100,6 +100,7 @@ client-init:
 
 client-lint:
 	cd ./client && npm run lint
+	# npx prettier --write "src/**/*.{js,cjs,jsx,ts,tsx,json,css,scss,md}"
 
 client-update:
 	npm install -g npm

Makefile

@@ -3,11 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-  ],
+  extends: ["eslint:recommended", "plugin:react/recommended"],
   overrides: [
     {
       env: {
@@ -19,11 +15,10 @@ module.exports = {
       },
     },
   ],
-  parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["@typescript-eslint", "react"],
+  plugins: ["react"],
   rules: {},
 };

client/.eslintrc.cjs

@@ -84,6 +84,7 @@ const Footer = () => {
         <a
           href="https://github.com/FullStackWithLawrence/aws-openai"
           target="_blank"
+          rel="noreferrer"
         >
           <img src="/github-logo.svg" /> Source code
         </a>
@@ -117,7 +118,7 @@ const App = () => {
                   },
                 }}
               >
-                <a href="https://openai.com/" target="_blank">
+                <a href="https://openai.com/" target="_blank" rel="noreferrer">
                   <img
                     src="/OpenAI_Logo.png"
                     alt="OpenAI Logo"

client/src/App.jsx

@@ -2,42 +2,49 @@
 //
 import React from "react";
 import "./Component.css";
-const AboutPage = (props) => {
+const AboutPage = () => {
   return (
     <div className="about-page">
       <div className="app-stack">
         <h2>Application Stack</h2>
         <p>
           This application implements each of the{" "}
-          <a href="https://platform.openai.com/examples" target="_blank">
+          <a
+            href="https://platform.openai.com/examples"
+            target="_blank"
+            rel="noreferrer"
+          >
             30 Code Samples
           </a>{" "}
           as found in the OpenAI API official documentation. Created with{" "}
-          <a href="https://react.dev/" target="_blank">
+          <a href="https://react.dev/" target="_blank" rel="noreferrer">
             React
           </a>{" "}
           leveraging{" "}
           <a
             href="https://www.npmjs.com/package/@chatscope/chat-ui-kit-react"
             target="_blank"
+            rel="noreferrer"
           >
             @chatscope/chat-ui-kit-react
           </a>{" "}
           and{" "}
           <a
             href="https://www.npmjs.com/package/react-pro-sidebar"
             target="_blank"
+            rel="noreferrer"
           >
             react-pro-sidebar
           </a>{" "}
           running on{" "}
-          <a href="https://aws.amazon.com/" target="_blank">
+          <a href="https://aws.amazon.com/" target="_blank" rel="noreferrer">
             AWS
           </a>{" "}
           serverless infrastructure integrated to{" "}
           <a
             href="https://platform.openai.com/docs/api-reference?lang=python"
             target="_blank"
+            rel="noreferrer"
           >
             OpenAI Python API
           </a>
@@ -46,6 +53,7 @@ const AboutPage = (props) => {
         <a
           href="https://github.com/FullStackWithLawrence/aws-openai"
           target="_blank"
+          rel="noreferrer"
         >
           <img src="/app-stack.123.jpeg" />
         </a>
@@ -54,13 +62,18 @@ const AboutPage = (props) => {
           <a
             href="https://github.com/FullStackWithLawrence/aws-openai"
             target="_blank"
+            rel="noreferrer"
           >
             https://github.com/FullStackWithLawrence/aws-openai
           </a>
         </div>
       </div>
       <hr />
-      <a href="https://www.youtube.com/@FullStackWithLawrence" target="_blank">
+      <a
+        href="https://www.youtube.com/@FullStackWithLawrence"
+        target="_blank"
+        rel="noreferrer"
+      >
         <div className="fswl"></div>
       </a>
     </div>

client/src/components/about/Component.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactModal from "react-modal";
+import PropTypes from "prop-types";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamation } from "@fortawesome/free-solid-svg-icons";
@@ -46,3 +47,10 @@ export function ChatModal(props) {
     </ReactModal>
   );
 }
+
+ChatModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onCloseClick: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};

client/src/components/chatApp/Modal.jsx

@@ -1,12 +1,13 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError() {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };
   }
@@ -25,3 +26,7 @@ export class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};

client/src/components/chatApp/errorBoundary.jsx

@@ -8,6 +8,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^9.2.3",
     "@semantic-release/release-notes-generator": "^12.1.0",
+    "prettier": "^3.2.4",
     "typescript": "^5.2.2"
   },
   "dependencies": {