Merge branch 'main' into authscreen

Author: jvogt23

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true

.eslintignore

@@ -0,0 +1,3 @@
+build/
+.eslintrc.js
+metro.config.js

.eslintrc.js

@@ -1,4 +1,52 @@
 module.exports = {
   root: true,
-  extends: '@react-native',
-};
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: { jsx: true },
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    project: ['./tsconfig.json'],
+  },
+  plugins: ['@typescript-eslint', 'react', 'react-native', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-native/all',
+    'plugin:prettier/recommended', // Prettier integration
+  ],
+  env: {
+    es2022: true,
+    node: true,
+    browser: true,
+    'react-native/react-native': true,
+  },
+  settings: {
+    react: { version: 'detect' },
+  },
+  rules: {
+    // TypeScript rules
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+    // React rules
+    'react/prop-types': 'off', // TS handles props types
+
+    // React Native rules
+    'react-native/no-inline-styles': 'warn',
+    'react-native/split-platform-components': 'warn',
+    'react-native/no-color-literals': 'off',
+
+    // Prettier formatting rules
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        printWidth: 100,
+        tabWidth: 2,
+        semi: true,
+      },
+    ],
+  },
+};

.github/workflows/eslint.yml

@@ -0,0 +1,43 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+  schedule:
+    - cron: '17 23 * * 6'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint
+        env:
+          SARIF_ESLINT_IGNORE_SUPPRESSED: "true"
+        run: npx eslint .
+          --config .eslintrc.js
+          --ext .js,.jsx,.ts,.tsx
+          --max-warnings=0
+        continue-on-error: false

.prettierrc.js

@@ -1,5 +1,7 @@
 module.exports = {
-  arrowParens: 'avoid',
-  singleQuote: true,
-  trailingComma: 'all',
-};
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true
+}

App.tsx

@@ -1,19 +1,66 @@
 import { NavigationContainer } from '@react-navigation/native';
-import React from 'react';
+import React, { createContext, ReactNode, useEffect, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { AppEnvironmentProvider } from './AppEnvironment';
 import AuthContextProvider from './Auth/AuthContextProvider';
+import { useColorScheme } from 'react-native';
 import RootStack from './Navigation/RootStack';
+import { DarkMode, LightMode, Theme } from './Themes/Themes';
 
-function App() {
+type AuthContextType = {
+  authenticated: boolean | null;
+  setAuthenticated: (u: boolean) => void;
+};
+
+type AuthProviderProps = {
+  children: ReactNode;
+};
+
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+function AuthProvider({ children }: AuthProviderProps) {
+  const [authenticated, setAuthenticated] = useState(false);
+  return (
+    <AuthContext.Provider value={{ authenticated, setAuthenticated }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+type ThemeContextType = {
+  currentTheme: Theme | null | undefined;
+  setTheme: (t: Theme) => void;
+};
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
 
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+function ThemeProvider({ children }: ThemeProviderProps) {
+  const [currentTheme, setTheme] = useState<Theme>(LightMode);
+  const currentSystemTheme = useColorScheme();
+
+  useEffect(() => {
+    currentSystemTheme === 'light' ? setTheme(LightMode) : setTheme(DarkMode);
+  }, [currentSystemTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ currentTheme, setTheme }}>{children}</ThemeContext.Provider>
+  );
+}
+
+function App() {
   return (
     <AppEnvironmentProvider>
       <SafeAreaProvider>
         <AuthContextProvider>
-          <NavigationContainer>
-            <RootStack />
-          </NavigationContainer>
+          <ThemeProvider>
+            <NavigationContainer>
+              <RootStack />
+            </NavigationContainer>
+          </ThemeProvider>
         </AuthContextProvider>
       </SafeAreaProvider>
     </AppEnvironmentProvider>

Attendance/AttendanceScreen.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 function AttendanceScreen() {
-
-    return (
+  return (
+    // eslint-disable-next-line react-native/no-inline-styles
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <Text>Attendance Screen</Text>
+      <Text>Attendance Screen</Text>
     </View>
-    );
+  );
 }
 
-export default AttendanceScreen;
+export default AttendanceScreen;

Auth/AuthenticationScreen.tsx

@@ -10,9 +10,8 @@ import * as Authentication from './Authentication';
 import { authError } from './Authentication';
 import EnvironmentSelect from './EnvironmentSelect';
 
-
 function AuthenticationScreen() {
-
+  const auth = useContext(AuthContext);
     const auth = useContext(AuthContext);
     const {environment} = useAppEnvironment();
     const [envChangeVisible, setEnvChangeVisible] = useState<boolean>(false);
@@ -51,4 +50,4 @@ const styles = StyleSheet.create({
     lower: { flexShrink: 1, padding: 10, alignItems: "center" },
 });
 
-export default AuthenticationScreen;
+export default AuthenticationScreen;

Merchandise/MerchandiseScreen.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 function MerchandiseScreen() {
-
-    return (
+  return (
+    // eslint-disable-next-line react-native/no-inline-styles
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Merchandise Screen</Text>
     </View>
-    );
+  );
 }
 
-export default MerchandiseScreen;
+export default MerchandiseScreen;

Navigation/NavBar.tsx

@@ -5,10 +5,9 @@ import React from 'react';
 import AttendanceScreen from '../Attendance/AttendanceScreen';
 import MerchandiseScreen from '../Merchandise/MerchandiseScreen';
 import SettingsScreen from '../Settings/SettingsScreen';
-
 type NavBarProps = {
-    hidden?: boolean | null;
-}
+  hidden?: boolean | null;
+};
 
 const Tab = createBottomTabNavigator();
 
@@ -69,4 +68,4 @@ function NavBar(props: NavBarProps) {
     )
 }
 
-export default NavBar;
+export default NavBar;