Ci cd improvements (#35)

* Added eslint config file

* Formatted prettier for Airbnb

* Removed updateip.bat from previous commit

* automatic linting setup

* Frontend Linting

* for merge

* Initial Refactoring. Unused vars, styles still to do

* Just 'styles' and console/alerts left

* last non style/console changes

* Refarctored styling

* fixed find route copy

* fix workflow file

* setServerResponse fix and key duplication fix

* Minor fixes

---------

Co-authored-by: FEguare <123463013+FEguare@users.noreply.github.com>

Author: Ma-Golden

.github/workflows/backend-ci.yml

@@ -17,6 +17,10 @@ jobs:
     name: Lint Python Code (PEP8)
     runs-on: ubuntu-latest
 
+    defaults:
+      run:
+        working-directory: ./server
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -28,17 +32,17 @@ jobs:
 
       - name: Install dependencies
         run: |
-          cd server
           python -m pip install --upgrade pip
           pip install flake8 black
-      - name: Run Black (Formatting Check)
+      
+      - name: Run Black (Auto Formatting)
         run: |
-          cd server
-          black --check --diff src/ tests/
+          black src/ tests/
+      
       - name: Run flake8 (Linting)
         run: |
-          cd server
           flake8 src/ tests/
+
   test:
     name: Run Backend Tests
     runs-on: ubuntu-latest

.github/workflows/frontend-ci.yml

@@ -10,6 +10,32 @@ permissions:
   contents: read
 
 jobs:
+  lint:
+    name: Run Linting (ESLint & Prettier)
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ./client  # Removes need for cd client when running linting
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+      
+    - name: Set up Node.js
+      uses: actions/setup-node@v4  
+      with:
+        node-version: '20'
+
+    - name: Install dependencies
+      run: |
+        npm install
+      
+      # For code quality, unused vars etc.
+    - name: Run ESLint
+      run: |
+        npm run lint 
+
   test:
     name: Run Frontend Tests (Jest)
     runs-on: ubuntu-latest

.vscode/settings.json

@@ -4,4 +4,7 @@
     ],
     "python.testing.unittestEnabled": false,
     "python.testing.pytestEnabled": true,
+    "[javascript]": {
+        "editor.tabSize": 2
+    }
 }

client/.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  root: true,
+  extends: ['airbnb', 'airbnb/hooks', 'prettier'],
+  plugins: ['react', 'react-hooks', 'import', 'jsx-a11y', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+    jest: true,
+  },
+  rules: {
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+    'react/react-in-jsx-scope': 'off', // Not needed for React Native
+    'import/no-extraneous-dependencies': 'off',
+    'react/jsx-filename-extension': [
+      1,
+      { extensions: ['.js', '.jsx', '.tsx'] },
+    ],
+    'react/prop-types': 'off',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+  },
+};

client/.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+__mocks__
+expo
+coverage
+*.env
+package-lock.json
+package.json
+*.md
+*.bat

client/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true
+}

client/App.js

@@ -1,32 +1,43 @@
 import React from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
-import LoginScreen from './LogIn';
-import MapScreen from './Map';
-import WeatherScreen from './Weather';
-import FindRouteScreen from './FindRoute';
-import SelectRouteScreen from './SelectRoute';
-import Dashboard from './SustainabilityDashboard'
-import PreferencesScreen from './Preferences'
-import AccountScreen from './AccountScreen';
-import SignUpScreen from './SignUp';
-import DisplayRouteScreen from './DisplayRoute';
-import FriendsScreen from './FriendsScreen'
+import LoginScreen from './src/LogIn';
+import MapScreen from './src/Map';
+import WeatherScreen from './src/Weather';
+import FindRouteScreen from './src/FindRoute';
+import SelectRouteScreen from './src/SelectRoute';
+import Dashboard from './src/SustainabilityDashboard';
+import PreferencesScreen from './src/Preferences';
+import AccountScreen from './src/AccountScreen';
+import SignUpScreen from './src/SignUp';
+import DisplayRouteScreen from './src/DisplayRoute';
+import FriendsScreen from './src/FriendsScreen';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator initialRouteName="AccountScreen">
-        <Stack.Screen options={{headerBackVisible:false}} name="Map" component={MapScreen} />
-        <Stack.Screen options={{headerBackVisible:false}} name="AccountScreen" component={AccountScreen} />
+        <Stack.Screen
+          options={{ headerBackVisible: false }}
+          name="Map"
+          component={MapScreen}
+        />
+        <Stack.Screen
+          options={{ headerBackVisible: false }}
+          name="AccountScreen"
+          component={AccountScreen}
+        />
         <Stack.Screen name="LoginScreen" component={LoginScreen} />
         <Stack.Screen name="SignUpScreen" component={SignUpScreen} />
         <Stack.Screen name="WeatherScreen" component={WeatherScreen} />
         <Stack.Screen name="FindRouteScreen" component={FindRouteScreen} />
         <Stack.Screen name="SelectRouteScreen" component={SelectRouteScreen} />
-        <Stack.Screen name="DisplayRouteScreen" component={DisplayRouteScreen} />
+        <Stack.Screen
+          name="DisplayRouteScreen"
+          component={DisplayRouteScreen}
+        />
         <Stack.Screen name="Dashboard" component={Dashboard} />
         <Stack.Screen name="PreferencesScreen" component={PreferencesScreen} />
         <Stack.Screen name="FriendsScreen" component={FriendsScreen} />