fix: eslint and linting issues, addition of PR and testing workflows

Author: vanGalilea

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   root: true,
   extends: '@react-native',
+  ignorePatterns: ['e2e/'],
 };

.github/workflows/pr-check.yml

@@ -0,0 +1,13 @@
+name: Check PR title
+
+on:
+  pull_request:
+    types: [opened, edited, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: aslafy-z/conventional-pr-title-action@v3
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/unit-testing.yml

@@ -0,0 +1,38 @@
+name: Unit Testing
+env:
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  #  SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+on:
+  pull_request:
+    types: [opened, edited, synchronize, reopened]
+
+jobs:
+  install-lint-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: ESLint Cache
+        uses: actions/cache@v3
+        with:
+          path: './.eslintcache'
+          key: ${{ runner.os }}-eslintcache-${{ github.ref_name }}-${{ hashFiles('.eslintcache') }}
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Lint
+        run: yarn lint
+
+      - name: test
+        run: yarn test:unit:coverage
+
+  #      - name: SonarCloud Scan
+  #        uses: sonarsource/sonarcloud-github-action@master

__mocks__/react-native-video.ts

@@ -1,3 +1,3 @@
-import {View} from 'react-native'
+import {View} from 'react-native';
 
-export default View
+export default View;

package.json

@@ -27,27 +27,27 @@
     "react-native-video": "6.0.0-alpha.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/runtime": "^7.22.11",
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.11",
-    "@tsconfig/react-native": "^3.0.2",
-    "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.2.2",
-    "@types/jest": "^29.5.4",
-    "@types/react": "^18.2.21",
-    "@types/react-native-video": "^5.0.15",
+    "@tsconfig/react-native": "^3.0.0",
+    "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
-    "axios": "^1.5.0",
-    "babel-jest": "^29.6.4",
-    "eslint": "^8.48.0",
-    "jest": "^29.6.4",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.76.8",
-    "msw": "^1.2.5",
-    "prettier": "^3.0.3",
+    "prettier": "^2.4.1",
     "react-test-renderer": "18.2.0",
-    "typescript": "5.2.2"
+    "typescript": "4.8.4",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.3.0",
+    "@types/jest": "^29.2.1",
+    "@types/react-native-video": "^5.0.15",
+    "axios": "^1.5.0",
+    "msw": "^1.3.0"
   },
   "engines": {
     "node": ">=16"

src/components/Home.tsx

@@ -18,9 +18,9 @@ export default () => {
   return (
     <View style={styles.body}>
       <StatusBar barStyle="dark-content" />
-      <SafeAreaView style={{flex: 1}}>
+      <SafeAreaView style={styles.flex1}>
         <ScrollView
-          style={{flex: 1}}
+          style={styles.flex1}
           contentInsetAdjustmentBehavior="automatic">
           <View style={styles.innerScrollView}>
             <Text>Go to component...</Text>
@@ -49,6 +49,9 @@ export default () => {
 };
 
 const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
   body: {
     backgroundColor: Colors.white,
     ...StyleSheet.absoluteFillObject,

src/components/Modal.tsx

@@ -14,7 +14,7 @@ export default () => {
           <View style={styles.modalView}>
             <Text style={styles.modalText}>Hello World!</Text>
             <Pressable
-              style={{...styles.openButton, backgroundColor: '#2196F3'}}
+              style={[styles.openButton, styles.specialBGColor]}
               onPress={() => {
                 setModalVisible(!modalVisible);
               }}>
@@ -74,4 +74,7 @@ const styles = StyleSheet.create({
     marginBottom: 15,
     textAlign: 'center',
   },
+  specialBGColor: {
+    backgroundColor: '#2196F3',
+  },
 });

src/utils/theme.tsx

@@ -4,21 +4,21 @@ import React, {
   SetStateAction,
   useContext,
   useState,
-} from 'react'
+} from 'react';
 
 export type ThemeType = 'dark' | 'light';
 type ThemeContextType = {
   theme: ThemeType;
   setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
-const ThemeContext = createContext<ThemeContextType | null>(null)
+const ThemeContext = createContext<ThemeContextType | null>(null);
 
 const useTheme = () => {
-  const context = useContext(ThemeContext)
+  const context = useContext(ThemeContext);
   if (!context) {
-    throw new Error('useTheme should be used within a ThemeProvider')
+    throw new Error('useTheme should be used within a ThemeProvider');
   }
-  return context
+  return context;
 };
 
 const ThemeProvider = ({
@@ -28,8 +28,8 @@ const ThemeProvider = ({
   initialTheme: ThemeType;
   children: React.ReactNode;
 }): JSX.Element => {
-  const [theme, setTheme] = useState(initialTheme)
-  return <ThemeContext.Provider value={{theme, setTheme}} {...props} />
+  const [theme, setTheme] = useState(initialTheme);
+  return <ThemeContext.Provider value={{theme, setTheme}} {...props} />;
 };
 
-export {useTheme, ThemeProvider}
+export {useTheme, ThemeProvider};