Merge pull request #70 from peterklingelhofer/add-eslint

feat: add eslint, standardize version across platforms

.eslintrc.js

@@ -0,0 +1,60 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true,
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true,
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint",
+    ],
+    "rules": {
+        "array-bracket-spacing": [
+            "error",
+            "always",
+        ],
+        "comma-dangle": [
+            "error",
+            "always-multiline",
+        ],
+        "indent": [
+            "error",
+            4,
+        ],
+        "linebreak-style": [
+            "error",
+            (process.platform === "win32"
+                ? "windows"
+                : "unix"),
+        ],
+        "multiline-ternary": [
+            "error",
+            "always",
+        ],
+        "quotes": [
+            "error",
+            "double",
+        ],
+        "react/jsx-tag-spacing": 2,
+        "semi": [
+            "error",
+            "always",
+        ],
+        "sort-keys": [
+            "error",
+        ],
+    },
+};

App.tsx

@@ -1,54 +1,54 @@
-import { useKeepAwake } from 'expo-keep-awake';
-import * as SplashScreen from 'expo-splash-screen';
+import { useKeepAwake } from "expo-keep-awake";
+import * as SplashScreen from "expo-splash-screen";
 import {
     getTrackingPermissionsAsync,
     requestTrackingPermissionsAsync,
-} from 'expo-tracking-transparency';
+} from "expo-tracking-transparency";
 import React, {
     useEffect,
     useState,
     useRef,
-} from 'react';
+} from "react";
 import {
     BackHandler,
     Platform,
     StyleSheet,
-} from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { WebView } from 'react-native-webview';
-import CustomStatusBar from './client/components/CustomStatusBar';
+} from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { WebView } from "react-native-webview";
+import CustomStatusBar from "./client/components/CustomStatusBar";
 import {
     cookiePreferences,
     getPermissionsGranted,
     storePermissionsGranted,
-} from './client/helpers/permissions';
-import { originAllowList } from './client/services/originAllowList';
+} from "./client/helpers/permissions";
+import { originAllowList } from "./client/services/originAllowList";
 
 export default function App() {
-    const [areTrackingPermissionsGranted, setAreTrackingPermissionsGranted] = useState(false);
-    const [didPermissionsChange, setDidPermissionsChange] = useState(false);
-    const [isRequestingPermissions, setIsRequestingPermissions] = useState(true);
-    const [uri, setUri] = useState('https://stream.resonate.coop/discover');
-    const [webViewKey, setWebViewKey] = useState(0);
+    const [ areTrackingPermissionsGranted, setAreTrackingPermissionsGranted ] = useState(false);
+    const [ didPermissionsChange, setDidPermissionsChange ] = useState(false);
+    const [ isRequestingPermissions, setIsRequestingPermissions ] = useState(true);
+    const [ uri, setUri ] = useState("https://stream.resonate.coop/discover");
+    const [ webViewKey, setWebViewKey ] = useState(0);
 
     const hideSplashScreen = async () => await SplashScreen.hideAsync();
-    const reloadWebView = () => setWebViewKey(webViewKey + 1)
+    const reloadWebView = () => setWebViewKey(webViewKey + 1);
     useKeepAwake();
 
     const webViewRef = useRef<WebView>(null);
     const onAndroidBackPress = (): boolean => {
         if (webViewRef.current) {
-          webViewRef.current.goBack();
-          return true; // prevent default behavior (exit app)
+            webViewRef.current.goBack();
+            return true; // prevent default behavior (exit app)
         }
         return false;
     };
 
     useEffect((): (() => void) | undefined => {
-        if (Platform.OS === 'android') {
-            BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
+        if (Platform.OS === "android") {
+            BackHandler.addEventListener("hardwareBackPress", onAndroidBackPress);
             return (): void => {
-                BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
+                BackHandler.removeEventListener("hardwareBackPress", onAndroidBackPress);
             };
         }
     }, []);
@@ -66,7 +66,7 @@ export default function App() {
                 }
             } else {
                 const { status } = await requestTrackingPermissionsAsync();
-                const arePermissionsGranted = status === 'granted';
+                const arePermissionsGranted = status === "granted";
                 setAreTrackingPermissionsGranted(arePermissionsGranted);
                 if (arePermissionsGranted !== arePermissionsGrantedHistorically) {
                     setDidPermissionsChange(true);
@@ -85,7 +85,7 @@ export default function App() {
                 allowsBackForwardNavigationGestures
                 allowsInlineMediaPlayback
                 cacheEnabled={didPermissionsChange}
-                decelerationRate={'normal'}
+                decelerationRate={"normal"}
                 ignoreSilentHardwareSwitch
                 injectedJavaScript={cookiePreferences(areTrackingPermissionsGranted)}
                 javaScriptCanOpenWindowsAutomatically
@@ -100,15 +100,17 @@ export default function App() {
                 sharedCookiesEnabled={false}
                 source={{
                     headers: {
-                        'doNotTrack': areTrackingPermissionsGranted ? '0' : '1',
+                        "doNotTrack": areTrackingPermissionsGranted
+                            ? "0"
+                            : "1",
                     },
                     uri,
                 }}
                 startInLoadingState
                 style={styles.container}
             />}
         </SafeAreaProvider>
-    )
+    );
 }
 
 const styles = StyleSheet.create({

app.json

@@ -3,7 +3,7 @@
         "name": "Resonate",
         "slug": "stream-app",
         "privacy": "unlisted",
-        "version": "1.2.0",
+        "version": "1.2.1",
         "orientation": "portrait",
         "icon": "./assets/icon.png",
         "userInterfaceStyle": "automatic",
@@ -21,7 +21,7 @@
         "ios": {
             "supportsTablet": true,
             "bundleIdentifier": "com.resonate.stream-app",
-            "buildNumber": "1.2.0",
+            "buildNumber": "1.2.1",
             "infoPlist": {
                 "UIBackgroundModes": [
                     "audio",
@@ -35,7 +35,7 @@
                 "backgroundColor": "#FFFFFF"
             },
             "package": "com.resonate.streamapp",
-            "versionCode": 20
+            "versionCode": 121
         },
         "web": {
             "favicon": "./assets/favicon.png"

client/components/CustomStatusBar.tsx

@@ -1,20 +1,28 @@
+import * as React from "react";
 import {
     StatusBar,
     StatusBarStyle,
     useColorScheme,
     View,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function CustomStatusBar() {
     const insets = useSafeAreaInsets();
     const colorScheme = useColorScheme();
-    const isDark: boolean = colorScheme === 'dark';
-    const backgroundColor: string = isDark ? '#181A1B' : '#fff';
-    const barStyle: StatusBarStyle = isDark ? 'light-content' : 'dark-content';
+    const isDark: boolean = colorScheme === "dark";
+    const backgroundColor: string = isDark
+        ? "#181A1B"
+        : "#fff";
+    const barStyle: StatusBarStyle = isDark
+        ? "light-content"
+        : "dark-content";
 
     return (
-        <View style={{ height: insets.top, backgroundColor }}>
+        <View style={{
+            backgroundColor,
+            height: insets.top,
+        }}>
             <StatusBar
                 animated={true}
                 backgroundColor={backgroundColor}

client/helpers/permissions.ts

@@ -1,12 +1,14 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
-export const cookiePreferences = (areTrackingPermissionsGranted: boolean) => `const button = document.querySelector('button[value="${areTrackingPermissionsGranted ? 'allow' : 'deny'}"]'); if (button !== null) {button.click();}; true;`;
+export const cookiePreferences = (areTrackingPermissionsGranted: boolean) => `const button = document.querySelector('button[value="${areTrackingPermissionsGranted
+    ? "allow"
+    : "deny"}"]'); if (button !== null) {button.click();}; true;`;
 
 export const getPermissionsGranted = async () => {
     try {
-        const value = await AsyncStorage.getItem('areTrackingPermissionsGranted');
+        const value = await AsyncStorage.getItem("areTrackingPermissionsGranted");
         if (value !== null) {
-            return value === 'true';
+            return value === "true";
         }
     } catch (e) {
         console.log(e);
@@ -17,7 +19,7 @@ export const getPermissionsGranted = async () => {
 
 export const storePermissionsGranted = async (value: boolean) => {
     try {
-        await AsyncStorage.setItem('areTrackingPermissionsGranted', `${value}`);
+        await AsyncStorage.setItem("areTrackingPermissionsGranted", `${value}`);
     } catch (e) {
         console.log(e);
     }

client/services/originAllowList.ts

@@ -1,16 +1,16 @@
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
 
 export const originAllowList: string[] = [
-    'https://community.resonate.is',
-    'https://community.resonate.coop',
-    'https://js.stripe.com',
-    'https://m.stripe.network',
-    'https://offen.resonate.is',
-    'https://offen.stream.resonate.coop',
-    Platform.OS === 'android'
-        ? ''
-        : 'https://resonate.coop',
-    'https://stream.resonate.coop',
-    'https://stream.resonate.ninja',
-    'https://stripe.com',
+    "https://community.resonate.is",
+    "https://community.resonate.coop",
+    "https://js.stripe.com",
+    "https://m.stripe.network",
+    "https://offen.resonate.is",
+    "https://offen.stream.resonate.coop",
+    Platform.OS === "android"
+        ? ""
+        : "https://resonate.coop",
+    "https://stream.resonate.coop",
+    "https://stream.resonate.ninja",
+    "https://stripe.com",
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-app",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -25,9 +25,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
-    "@types/react": "~17.0.21",
     "@types/react-native": "~0.64.12",
-    "typescript": "~4.3.5"
+    "@types/react": "~17.0.21",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint": "^8.21.0",
+    "typescript": "^4.7.4"
   },
   "private": true
 }