Integrating Pre-commit hook & Eslints Testing

eduaid_web/.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+cd ./eduaid_web && npx lint-staged && npm run lint:fix

eduaid_web/.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,jsx,ts,tsx,scss,css,md}": ["eslint --fix", "prettier --write"]
+}

eduaid_web/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true,
+    "endOfLine": "auto"
+  }

eduaid_web/eslint.config.js

@@ -0,0 +1,24 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import pluginReact from 'eslint-plugin-react'
+import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ['**/*.{js,mjs,cjs,jsx}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  eslintPluginPrettier,
+  {
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'no-extra-boolean-cast': 'off',
+      'no-prototype-builtins': 'off',
+      'react/display-name': 'off',
+      'no-unused-vars': 'off',
+      'no-constant-binary-expression': 'off',
+    },
+  },
+]

eduaid_web/package.json

@@ -2,6 +2,7 @@
   "name": "eduaid_web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -19,7 +20,11 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src**",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
+    "lint:fix": "eslint --fix",
+    "prepare": "cd ../ && husky install ./eduaid_web/.husky"
   },
   "eslintConfig": {
     "extends": [
@@ -40,6 +45,15 @@
     ]
   },
   "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.3",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.3.0",
+    "prettier": "3.4.2",
     "tailwindcss": "^3.4.9"
   }
 }

eduaid_web/src/App.js

@@ -1,10 +1,10 @@
-import "./App.css";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Home from "./pages/Home";
-import Question_Type from "./pages/Question_Type";
-import Text_Input from "./pages/Text_Input";
-import Output from "./pages/Output";
-import Previous from "./pages/Previous";
+import './App.css'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import Home from './pages/Home'
+import Question_Type from './pages/Question_Type'
+import Text_Input from './pages/Text_Input'
+import Output from './pages/Output'
+import Previous from './pages/Previous'
 
 function App() {
   return (
@@ -17,7 +17,7 @@ function App() {
         <Route path="/history" element={<Previous />} />
       </Routes>
     </BrowserRouter>
-  );
+  )
 }
 
-export default App;
+export default App

eduaid_web/src/index.css

@@ -4,9 +4,9 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -17,9 +17,9 @@ code {
 }
 
 .border-gradient {
-  border-width: 2px; 
+  border-width: 2px;
   border-style: solid;
   border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
   border-image-slice: 1;
   border-radius: 2rem;
-}
+}

eduaid_web/src/index.js

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

eduaid_web/src/pages/Home.jsx

@@ -1,52 +1,52 @@
-import React, { useState, useEffect } from "react";
-import "../index.css";
-import logo from "../assets/aossie_logo.png";
-import starsImg from "../assets/stars.png";
-import arrow from "../assets/arrow.png";
-import gitStar from "../assets/gitStar.png";
-import { FaGithub } from "react-icons/fa";
+import React, { useState, useEffect } from 'react'
+import '../index.css'
+import logo from '../assets/aossie_logo.png'
+import starsImg from '../assets/stars.png'
+import arrow from '../assets/arrow.png'
+import gitStar from '../assets/gitStar.png'
+import { FaGithub } from 'react-icons/fa'
 
 const Home = () => {
-  const [stars, setStars] = useState(null);
-  const [error, setError] = useState("");
+  const [stars, setStars] = useState(null)
+  const [error, setError] = useState('')
 
   async function fetchGitHubStars() {
     const response = await fetch(
-      "https://api.github.com/repos/AOSSIE-Org/EduAid"
-    );
+      'https://api.github.com/repos/AOSSIE-Org/EduAid'
+    )
     if (!response.ok) {
-      throw new Error("Failed to fetch stars");
+      throw new Error('Failed to fetch stars')
     }
-    const data = await response.json();
-    return data.stargazers_count;
+    const data = await response.json()
+    return data.stargazers_count
   }
 
   function isMoreThanOneDayOld(timestamp) {
-    const oneDay = 24 * 60 * 60 * 1000; // One day in milliseconds
-    return Date.now() - timestamp > oneDay;
+    const oneDay = 24 * 60 * 60 * 1000 // One day in milliseconds
+    return Date.now() - timestamp > oneDay
   }
 
   useEffect(() => {
-    const storedStars = localStorage.getItem("stars");
-    const storedTime = localStorage.getItem("fetchTime");
+    const storedStars = localStorage.getItem('stars')
+    const storedTime = localStorage.getItem('fetchTime')
     if (
       storedStars &&
       storedTime &&
       !isMoreThanOneDayOld(parseInt(storedTime))
     ) {
-      setStars(parseInt(storedStars));
+      setStars(parseInt(storedStars))
     } else {
       fetchGitHubStars()
         .then((starCount) => {
-          setStars(starCount);
-          localStorage.setItem("stars", starCount);
-          localStorage.setItem("fetchTime", Date.now().toString());
+          setStars(starCount)
+          localStorage.setItem('stars', starCount)
+          localStorage.setItem('fetchTime', Date.now().toString())
         })
         .catch((err) => {
-          setError("Failed to fetch stars");
-        });
+          setError('Failed to fetch stars')
+        })
     }
-  }, []);
+  }, [])
 
   return (
     <div className="popup w-screen h-screen bg-[#02000F] flex justify-center items-center">
@@ -64,7 +64,7 @@ const Home = () => {
           <div className="text-white text-[1.5rem] text-center my-4">
             <div>A tool that can auto-generate short quizzes</div>
             <div className="flex text-center justify-center gap-4">
-              based on user input{" "}
+              based on user input{' '}
               <img src={starsImg} width={32} height={12} alt="" />
             </div>
           </div>
@@ -94,7 +94,7 @@ const Home = () => {
             <div className="mt-8 rounded-2xl">
               <a href="question-type">
                 <button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
-                  Let’s get Started{" "}
+                  Let’s get Started{' '}
                   <img src={arrow} width={28} height={24} alt="" />
                 </button>
               </a>
@@ -131,7 +131,7 @@ const Home = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Home;
+export default Home