Cngcruz: included eslint using Javascript standard style guide

client/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+    "settings": {
+        "react": {
+          "version": "detect"
+        }
+    },
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jest": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "eslint:recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}

client/package.json

@@ -31,5 +31,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.29.4"
   }
 }

client/src/App.js

@@ -1,20 +1,21 @@
-import './styles/App.css';
-import ChooseFiles from './Components/ChooseFiles';
-import Receive from './Components/Receive';
-import SuperheroName from './Components/SuperheroName';
-import Header from './Components/Header';
+import './styles/App.css'
+import React from 'react'
+import ChooseFiles from './Components/ChooseFiles'
+import Receive from './Components/Receive'
+import SuperheroName from './Components/SuperheroName'
+import Header from './Components/Header'
 
-function App() {
+function App () {
   return (
     <div className="App">
       <Header />
       <SuperheroName />
       <div>
         <ChooseFiles />
-        <Receive />
+            <Receive />
       </div>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

client/src/App.test.js

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import React from 'react';
 
 test('renders learn react link', () => {
   render(<App />);

client/src/Components/About.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import Header from './Header'
+import { useNavigate } from 'react-router-dom'
+
+const About = () => {
+  const navigate = useNavigate()
+  return (
+    <div className="App">
+      <Header />
+        <h1 className="About">
+            BAM! IS A FILE SHARING WEB APPLICATION, DESIGNED TO MAKE THE
+            PROCESS OF SHARING FILES BETWEEN DEVICES QUICK, EASY, AND FUN!
+            <br/> <br/>
+            <u>HOW TO USE:</u>
+            <br/>
+            SELECT THE FILES THAT YOU WOULD LIKE TO SEND.
+            <br/> <br/>
+            FIST BUMP THE DEVICES TOGETHER!
+            <br/> <br/>
+            DOWNLOAD THE FILES!
+            <button className = "button" onClick={() => {
+              navigate('/')
+            }}>Start Sharing!</button>
+        </h1>
+    </div>
+  )
+}
+
+export default About

client/src/Components/ChooseFiles.js

@@ -1,36 +1,36 @@
-import '../styles/button.css';
-import '../styles/index.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import '../styles/button.css'
+import '../styles/index.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import React from 'react'
 
 const ChooseFiles = () => {
+  // Populates pre component with file names
+  function handleFile (e) {
+    e.preventDefault()
+    const fileListContainer = document.getElementById('fileListContainer')
+    const fileList = document.getElementById('filelist')
+    const userFiles = document.getElementById('files').files
+    fileList.innerHTML = ''
+    for (let i = 0; i < userFiles.length; i++) {
+      fileList.innerHTML += userFiles[i].name + '\n\n'
+    }
+    if (fileList.innerHTML === '' || fileList.innerHTML === null) {
+      fileList.style.display = 'none'
+      fileListContainer.style.display = 'none'
+    } else {
+      fileList.style.display = 'block'
+      fileListContainer.style.display = 'flex'
+    }
+  }
 
-    // Populates pre component with file names
-    function handleFile(e) {
-        e.preventDefault();
-        var fileListContainer = document.getElementById('fileListContainer');
-        var fileList = document.getElementById('filelist');
-        var userFiles = document.getElementById('files').files;
-        fileList.innerHTML = '';
-        for (var i = 0; i < userFiles.length; i++) {
-          fileList.innerHTML += userFiles[i].name + '\n\n';
-        }
-        if (fileList.innerHTML == '' || fileList.innerHTML == null){
-            fileList.style.display = 'none';
-            fileListContainer.style.display = 'none';
-        }else{
-            fileList.style.display = 'block';
-            fileListContainer.style.display = 'flex';
-        } 
-    };
-
-    return (
+  return (
         <div className="chooseFile">
             <input type="file" className="button" id="files" onChange={handleFile} multiple ></input>
             <div className="fileListContainer" id="fileListContainer">
                 <pre className="fileList" id="filelist"></pre>
             </div>
         </div>
-    );
+  )
 }
 
-export default ChooseFiles;
+export default ChooseFiles

client/src/Components/Header.js

@@ -1,14 +1,14 @@
 import '../styles/button.css'
+import React from 'react'
 import BAMLogo from '../assets/BAMLogo.png'
 
 const Header = () => {
-
-    return (
+  return (
         <div className = "Header">
            <img src = {BAMLogo} className="bam-image-size" alt="BAM! Logo"/>
             <button>?</button>
         </div>
-    );
+  )
 }
 
-export default Header;
+export default Header

client/src/Components/Receive.js

@@ -1,16 +1,16 @@
 import '../styles/button.css'
+import React from 'react'
 
 const Receive = () => {
+  const handleClick = () => {
+    alert('Receive Files')
+  }
 
-    const handleClick = () => {
-        alert("Receive Files")
-    }
-
-    return (
+  return (
         <div className = "receivefiles">
             <button type = "button" className="button receiveFilesButton col-2" onClick={handleClick}>RECEIVE FILES</button>
         </div>
-    );
+  )
 }
 
-export default Receive;
+export default Receive

client/src/Components/SuperheroName.js

@@ -1,8 +1,8 @@
 import '../styles/button.css'
+import React from 'react'
 
 const SuperheroName = () => {
-
-    return (
+  return (
         <div className = "SuperheroName">
             <form>
                 Superhero Name<br></br>
@@ -11,7 +11,7 @@ const SuperheroName = () => {
                 </label>
             </form>
         </div>
-    );
+  )
 }
 
-export default SuperheroName;
+export default SuperheroName

client/src/index.js

@@ -1,19 +1,19 @@
-import React from 'react';
-import {createRoot} from 'react-dom/client';
-import './styles/index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import './styles/index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
 
-const rootElement = document.getElementById('root');
-const root = createRoot(rootElement);
+const rootElement = document.getElementById('root')
+const root = createRoot(rootElement)
 
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-);
+  </React.StrictMode>
+)
 
 // 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()

client/src/reportWebVitals.js

@@ -1,13 +1,13 @@
 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

server/.eslintrc.json

@@ -0,0 +1,15 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}