Merge pull request #77 from UNLV-CS472-672/adding-to-ci-pipeline

Adding to ci pipeline

Author: ashley-arellano

.github/workflows/django_ci_cd.yml

@@ -28,6 +28,12 @@ jobs:
           sudo service redis-server start
           sudo service redis-server status
 
+      - name: Install Flake8 and Run Linter
+        run: |
+          pip install flake8
+          flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
+          flake8 . --count --exit-zero --max-complexity=10 --max-line-length=88 --statistics
+
       - name: Install Dependencies
         run: |
           python -m pip install --upgrade pip
@@ -59,3 +65,4 @@ jobs:
         with:
           name: coverage-report-html
           path: backend/htmlcov/  # Upload the entire 'htmlcov' directory
+

.github/workflows/reactjs_ci_cd.yml

@@ -0,0 +1,31 @@
+name: ReactJS CI/CD
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    name: Run ESLint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install root dependencies
+        run: npm install  # This will install the dependencies from the root `package.json`
+
+      - name: Install frontend dependencies
+        run: |
+          cd frontend  # Navigate to the frontend directory
+          npm install  # Install the frontend dependencies from `frontend/package.json`
+
+      - name: Run ESLint # Finds syntax/style errors
+        run: npx eslint --config ./frontend/eslint.config.js frontend

backend/apps/uploads/views.py

@@ -80,7 +80,7 @@ def patch(self, request, public_id):
             # Return updated specific upload details to front-end
             return Response({'status': 'success', 'data': serializer.data}, status=status.HTTP_200_OK)
         else:
-            return Response(status=HTTP_400_BAD_REQUEST)
+            return Response(status=status.HTTP_400_BAD_REQUEST)
     # Note: Tested this PATCH request by entering this into the command line
     # curl -X PATCH http://127.0.0.1:8000/uploads/{public_id}/ -H "Content-Type: application/json" -d '{"description": "Updated upload description"}'
 

frontend/eslint.config.js

@@ -7,7 +7,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 export default [
   { ignores: ['dist'] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ['**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
@@ -35,4 +35,4 @@ export default [
       ],
     },
   },
-]
+]

frontend/package-lock.json

@@ -21,10 +21,10 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.19.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.14.0",
     "vite": "^6.1.0"
   }

frontend/package.json

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import Calendar from "react-calendar";
 import "react-calendar/dist/Calendar.css"; // npm install react-calendar
 import "../Styles/Booking.css";

frontend/src/Components/Booking.jsx

@@ -2,18 +2,18 @@ import '../Styles/Contact.css'
 export default function Contact() {
     return (
         <>
-            <section class="contact-header">
-                <div class="container">
-                    <h1 class="text-center fw-bold">Contact Us</h1>
-                    <p class="text-center text-muted">
+            <section className="contact-header">
+                <div className="container">
+                    <h1 className="text-center fw-bold">Contact Us</h1>
+                    <p className="text-center text-muted">
                         Have questions? We’re here to help.
                     </p>
                 </div>
             </section>
 
-            <section class="contact-info container my-5">
-                <div class="row">
-                    <div class="col-md-6">
+            <section className="contact-info container my-5">
+                <div className="row">
+                    <div className="col-md-6">
                         <h3>Contact Information</h3>
                         <p><strong>Email:</strong> support@lessonconnect.com</p>
                         <p><strong>Phone:</strong> (702) 555-1234</p>
@@ -23,37 +23,37 @@ export default function Contact() {
                         </p>
                         <p><strong>Location:</strong> University of Nevada, Las Vegas</p>
                     </div>
-                    <div class="col-md-6">
+                    <div className="col-md-6">
                         <h3>Get in Touch</h3>
                         <form>
-                            <div class="mb-3">
-                                <label for="name" class="form-label">Full Name</label>
+                            <div className="mb-3">
+                                <label htmlFor="name" className="form-label">Full Name</label>
                                 <input
                                     type="text"
-                                    class="form-control"
+                                    className="form-control"
                                     id="name"
                                     placeholder="Enter your name"
                                 />
                             </div>
-                            <div class="mb-3">
-                                <label for="email" class="form-label">Email Address</label>
+                            <div className="mb-3">
+                                <label htmlFor="email" className="form-label">Email Address</label>
                                 <input
                                     type="email"
-                                    class="form-control"
+                                    className="form-control"
                                     id="email"
                                     placeholder="Enter your email"
                                 />
                             </div>
-                            <div class="mb-3">
-                                <label for="message" class="form-label">Message</label>
+                            <div className="mb-3">
+                                <label htmlFor="message" className="form-label">Message</label>
                                 <textarea
-                                    class="form-control"
+                                    className="form-control"
                                     id="message"
                                     rows="4"
                                     placeholder="Type your message"
                                 ></textarea>
                             </div>
-                            <button type="submit" class="btn btn-primary">Send Message</button>
+                            <button type="submit" className="btn btn-primary">Send Message</button>
                         </form>
                     </div>
                 </div>

frontend/src/Components/Contact.jsx

@@ -4,7 +4,7 @@ export default function FAQS() {
     return (
         <div className="faq-page">
             {/* FAQ Section */}
-            // FAQ Background Section
+            {/* FAQ Background Section */}
             <div className="faq-background">
                 <img src="assets/images/FAQs.webp" alt="FAQs Background" className="faq-bg-image" />
                 <h1 className="faq-title">FAQs:</h1>
@@ -122,15 +122,14 @@ export default function FAQS() {
                             data-bs-parent="#faqAccordion"
                         >
                             <div className="accordion-body">
-                                If you're interested in tutoring, sign up as a tutor and
-                                complete the verification process.
+                                If you&apos;re interested in tutoring, sign up as a tutor and complete the verification process.
                             </div>
                         </div>
                     </div>
                 </div>
                 {/* Didn't find your answer button */}
                 <div className="faq-footer">
-                    <p>Didn't find your answer?</p>
+                    <p>Didn&apos;t find your answer?</p>
                     <a href="/contact" className="faq-button">Click here</a>
                 </div>
             </div>