Merge pull request #3 from CatsMeow492/deployment/nospam

dont spam deployments

.github/workflows/deploy.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - master
+    paths:
+      - 'backend/**'  # Only run when there are changes in the backend directory
 
 jobs:
   build-and-deploy:

.github/workflows/frontenddeploy.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - master
+    paths:
+      - 'frontend/**'  # Only run when there are changes in the frontend directory
 
 jobs:
   build-and-deploy:

.github/workflows/lint.yml

@@ -0,0 +1,34 @@
+name: Lint Codebase
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Install dependencies
+        run: |
+          cd frontend
+          npm install
+
+      - name: Run ESLint
+        run: |
+          cd frontend
+          npm run lint

eslint.config.mjs

@@ -1,11 +1,32 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import pluginReact from "eslint-plugin-react";
-
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginImport from "eslint-plugin-import";
 
 export default [
-  {files: ["**/*.{js,mjs,cjs,jsx}"]},
-  {languageOptions: { globals: globals.browser }},
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        process: "readonly",
+        test: "readonly",
+        expect: "readonly",
+      },
+    },
+    plugins: {
+      react: pluginReact,
+      "react-hooks": pluginReactHooks,
+      import: pluginImport,
+    },
+    rules: {
+      "react/prop-types": "error", // Ensure prop-types validation
+      "no-unused-vars": "warn", // Warn about unused variables
+      "no-undef": "error", // Error on undefined variables
+      "react/react-in-jsx-scope": "off", // React 17+ does not require React in scope
+    },
+  },
   pluginJs.configs.recommended,
   pluginReact.configs.flat.recommended,
 ];

frontend/eslint.config.mjs

@@ -0,0 +1,32 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginImport from "eslint-plugin-import";
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        process: "readonly",
+        test: "readonly",
+        expect: "readonly",
+      },
+    },
+    plugins: {
+      react: pluginReact,
+      "react-hooks": pluginReactHooks,
+      import: pluginImport,
+    },
+    rules: {
+      "react/prop-types": "error", // Ensure prop-types validation
+      "no-unused-vars": "warn", // Warn about unused variables
+      "no-undef": "error", // Error on undefined variables
+      "react/react-in-jsx-scope": "off", // React 17+ does not require React in scope
+    },
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

frontend/package.json

@@ -20,7 +20,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint 'src/**/*.{js,jsx}'"
   },
   "eslintConfig": {
     "extends": [
@@ -39,5 +40,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.11.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "globals": "^15.9.0"
   }
 }

frontend/src/App.js

@@ -19,8 +19,8 @@ function App() {
   const [performanceData, setPerformanceData] = useState({});
   const [showCharts, setShowCharts] = useState(false);
   const [user, setUser] = useState(null);
-  const [userId, setUserId] = useState('guest'); // Initialize userId state
-  const [currentQuestionId, setCurrentQuestionId] = useState(null); // Add currentQuestionId to state
+  const [userId, setUserId] = useState('guest');
+  const [currentQuestionId, setCurrentQuestionId] = useState(null); 
 
   const fetchUserMetrics = useCallback(() => {
     fetch(`/api/metrics?userId=${userId}`)
@@ -53,7 +53,7 @@ function App() {
 
   useEffect(() => {
     if (user && user.sub) {
-      setUserId(user.sub); // Set userId from user object
+      setUserId(user.sub); 
     }
   }, [user]);
 
@@ -63,7 +63,7 @@ function App() {
       fetchUserMetrics();
       fetchPerformanceData();
     }
-  }, [userId, fetchUserMetrics, fetchPerformanceData]); // Dependencies are now correctly set
+  }, [userId, fetchUserMetrics, fetchPerformanceData]); 
 
   const getUserId = () => {
     return user ? user.sub : null;
@@ -154,7 +154,7 @@ function App() {
       .then(data => {
         console.log('Random question data:', data);
         setQuestion(data);
-        setCurrentQuestionId(data.id); // Now data.id should be correctly set
+        setCurrentQuestionId(data.id); 
         setSelectedAnswers([]);
         setFeedback(null);
         setExplanation(null);
@@ -179,11 +179,11 @@ function App() {
       if (isCorrect) {
         const newCorrect = correctAnswers + 1;
         setCorrectAnswers(newCorrect);
-        updateUserMetrics(true); // Pass true for correct answer
+        updateUserMetrics(true); 
       } else {
         const newIncorrect = incorrectAnswers + 1;
         setIncorrectAnswers(newIncorrect);
-        updateUserMetrics(false); // Pass false for incorrect answer
+        updateUserMetrics(false); 
       }
       updatePerformanceData(currentQuestionId, isCorrect);
     }
@@ -259,7 +259,7 @@ function App() {
   const handleLoginSuccess = (response) => {
     console.log('Login Success:', response);
     const idToken = response.credential;
-    const decodedToken = jwtDecode(idToken); // Decode the JWT token
+    const decodedToken = jwtDecode(idToken); 
     console.log('Decoded Token:', decodedToken);
 
     fetch(`${process.env.REACT_APP_API_URL}/api/login`, {
@@ -275,9 +275,9 @@ function App() {
         }
         return response.json();
       })
-      .then(data => {
-        setUser(decodedToken); // Set user from decoded token
-        setUserId(decodedToken.sub); // Set userId from decoded token
+      .then(() => {
+        setUser(decodedToken); 
+        setUserId(decodedToken.sub); 
       })
       .catch(error => {
         console.error('Error during login:', error);
@@ -312,7 +312,7 @@ function App() {
                   handleAnswerSelect={handleAnswerSelect}
                   handleSubmitAnswer={handleSubmitAnswer}
                   feedback={feedback}
-                  handleExplain={handleExplain}
+                  handleExplain={handleExplain} 
                   loading={loading}
                   explanation={explanation}
                   fetchRandomQuestion={fetchRandomQuestion}

frontend/src/App.test.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

frontend/src/components/PerformanceMetrics.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Bar, Pie } from 'react-chartjs-2';
 
 const PerformanceMetrics = ({ barData, pieData }) => {
@@ -10,4 +11,9 @@ const PerformanceMetrics = ({ barData, pieData }) => {
   );
 };
 
+PerformanceMetrics.propTypes = {
+  barData: PropTypes.object.isRequired,
+  pieData: PropTypes.object.isRequired,
+};
+
 export default PerformanceMetrics;

frontend/src/components/QuestionCard.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './QuestionCard.css';
 
 const QuestionCard = ({ question, selectedAnswers, handleAnswerSelect, handleSubmitAnswer, feedback, handleExplain, loading, explanation, fetchRandomQuestion }) => {
@@ -19,14 +20,39 @@ const QuestionCard = ({ question, selectedAnswers, handleAnswerSelect, handleSub
         ))}
       </ul>
       <button onClick={handleSubmitAnswer}>Submit Answer</button>
+      {feedback && <p className="feedback">{feedback}</p>}
       <button onClick={handleExplain} disabled={loading}>
         {loading ? 'Loading...' : 'Explain'}
       </button>
-      <button onClick={fetchRandomQuestion}>Next Question</button>
-      {feedback && <p className="feedback">{feedback}</p>}
       {explanation && <p className="explanation">{explanation}</p>}
+      <button onClick={fetchRandomQuestion}>Next Question</button>
     </div>
   );
 };
 
+QuestionCard.propTypes = {
+  question: PropTypes.shape({
+    question: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        text: PropTypes.string.isRequired,
+        correct: PropTypes.bool.isRequired,
+      })
+    ).isRequired,
+  }).isRequired,
+  selectedAnswers: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string.isRequired,
+      correct: PropTypes.bool.isRequired,
+    })
+  ).isRequired,
+  handleAnswerSelect: PropTypes.func.isRequired,
+  handleSubmitAnswer: PropTypes.func.isRequired,
+  feedback: PropTypes.string,
+  handleExplain: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  explanation: PropTypes.string,
+  fetchRandomQuestion: PropTypes.func.isRequired,
+};
+
 export default QuestionCard;