--wip-- [skip ci]

.github/workflows/build.yml

@@ -6,15 +6,14 @@ on:
     branches: [dev, main]
 env:
   NODE_VERSION: 18.18.0
-  BRANCH: ${{ github.ref }}-prerelease-${{ github.run_number }}
 
 jobs:
   build:
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
       cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
-    name: Build    
+    name: Build
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -34,8 +33,11 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
 
-      - name: Checkout
+      - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.head_ref }}
 
       - name: get yarn cache directory
         id: cache
@@ -51,13 +53,20 @@ jobs:
             key: yarn-${{ hashFiles('**/yarn.lock') }}
             restore-keys: |
                 yarn-
+                  
+      - uses: actions/labeler@v4
+        with:
+          sync-labels: true
 
       - name: install yarn
         run: corepack enable
 
       - name: Install dependencies
         run: yarn
 
+      - name: Check commit message
+        run: yarn commitlint --from=HEAD^1
+
       - name: format:check
         run: yarn format:check
 
@@ -70,38 +79,23 @@ jobs:
       - name: tsc
         run: yarn tsc
 
-      - name: Setup Expo
-        uses: expo/expo-github-action@v7
-        with:
-          expo-version: latest
-          eas-version: latest
-          token: ${{ secrets.FOAM_RELEASE_TOKEN }}
+      # - name: Setup Expo
+      #   uses: expo/expo-github-action@v7
+      #   with:
+      #     expo-version: latest
+      #     eas-version: latest
+      #     token: ${{ secrets.FOAM_RELEASE_TOKEN }}
 
-      - name: Setup EAS
-        uses: expo/expo-github-action@v8
-        with:
-          eas-version: latest
-          token: ${{ secrets.FOAM_RELEASE_TOKEN }}
+      # - name: Setup EAS
+      #   uses: expo/expo-github-action@v8
+      #   with:
+      #     eas-version: latest
+      #     token: ${{ secrets.FOAM_RELEASE_TOKEN }}
 
       # - name: Create preview
       #   uses: expo/expo-github-action/preview@v8
       #   with:
-      #     github-token: ${{ secrets.FOAM_GITHUB_TOKEN }}
-      #     command: eas update --auto --non-interactive
-      #     comment-id: auto-preview
+      #     command: eas update --branch preview --message "test"
       #     comment: true
-      #     app-scheme: foam
-
-      # - name: Sanitise          
-      #   uses: actions/github-script@v6
-      #   with:
-      #     script: return `${{ env.BRANCH }}`.replaceAll('"',"'")
-      #     result-encoding: string
-
-      - name: Create preview
-        uses: expo/expo-github-action/preview@v8
-        with:
-          command: eas update --branch preview --message "test"
-          comment: true
-          github-token: ${{ secrets.FOAM_GITHUB_TOKEN }}
-          qr-target: expo-go
+      #     github-token: ${{ secrets.FOAM_GITHUB_TOKEN }}
+      #     qr-target: expo-go

App.tsx

@@ -4,8 +4,9 @@ import { NavigationContainer } from '@react-navigation/native';
 import { activateKeepAwakeAsync } from 'expo-keep-awake';
 import React from 'react';
 import { connectToDevTools } from 'react-devtools-core';
-import { LogBox } from 'react-native';
+import { LogBox, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
 import { AuthContextProvider } from './src/context/AuthContext';
 import RootNavigator from './src/navigation/RootNavigator';
 

app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": false,
       "bundleIdentifier": "com.foam"
@@ -40,5 +38,16 @@
     "updates": {
       "url": "https://u.expo.dev/950a1e2f-6b25-4be7-adb2-3c16287a2b5e"
     }
-  }
+  },
+
+  "plugins": [
+    [
+      "expo-build-properties",
+      {
+        "ios": {
+          "flipper": true
+        }
+      }
+    ]
+  ]
 }

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "cm": "git-cz --disable-emoji",
+    "alphabetize": "node scripts/alphabetizePackageJson.js",
+    "commit": "cz",
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
@@ -20,6 +21,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@expo/webpack-config": "^19.0.0",
     "@gorhom/bottom-sheet": "^4.5.1",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-cookies/cookies": "^6.2.1",
@@ -46,6 +48,7 @@
     "expo-updates": "~0.18.18",
     "lerna": "^7.4.2",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.72.6",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
@@ -54,7 +57,9 @@
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",
     "react-native-video": "^5.2.1",
-    "react-native-webview": "13.2.2"
+    "react-native-web": "~0.19.6",
+    "react-native-webview": "13.2.2",
+    "tmi.js": "^1.8.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -64,9 +69,12 @@
     "@types/jest": "^29.5.6",
     "@types/react": "~18.2.14",
     "@types/react-native-video": "^5.0.17",
+    "@types/tmi.js": "^1.8.6",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
+    "commitizen": "4.3.0",
     "conventional-changelog-angular-all": "1.7.0",
+    "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "7.0.0",
     "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -107,13 +115,7 @@
   },
   "config": {
     "commitizen": {
-      "path": "node_modules/cz-customizable"
-    },
-    "cz-customizable": {
-      "config": "commitizen.config.js"
+      "path": "cz-conventional-changelog"
     }
-  },
-  "cz-customizable": {
-    "config": "commitizen.config.js"
   }
-}
+}

src/components/CategoryItem.tsx

@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { NavigationProp, useNavigation } from '@react-navigation/native';
 import { StyleSheet, Text, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import { CategoryRoutes } from '../navigation/Category/CategoryStack';
+import { HomeTabsParamList } from '../navigation/Home/HomeTabs';
+import { RootRoutes } from '../navigation/RootStack';
 import { Category } from '../services/twitchService';
 import colors from '../styles/colors';
 import Image from './Image';
@@ -10,8 +14,21 @@ interface Props {
 }
 
 const CategoryItem = ({ category }: Props) => {
+  const { navigate } = useNavigation<NavigationProp<HomeTabsParamList>>();
+
   return (
-    <TouchableOpacity style={styles.category}>
+    <TouchableOpacity
+      style={styles.category}
+      onPress={() =>
+        // @ts-ignore
+        navigate(RootRoutes.Category, {
+          screen: CategoryRoutes.Category,
+          params: {
+            id: category.id,
+          },
+        })
+      }
+    >
       <Image
         style={styles.image}
         source={{

src/hooks/useMounted.ts

@@ -0,0 +1,31 @@
+/* eslint-disable  react-hooks/exhaustive-deps */
+import { EffectCallback, useEffect, useState } from 'react';
+
+/**
+ * Simple hook that returns true once a component
+ * has mounted.
+ *
+ * This is particularly useful for progressively
+ * enhancing components in SSR where not all attributes
+ * should be set until the client-side JS loads.
+ */
+export const useMounted = (effect?: EffectCallback, initialState = false) => {
+  const [isMounted, setMounted] = useState(initialState);
+
+  useEffect(() => {
+    setMounted(true);
+
+    if (effect) {
+      return effect();
+    }
+
+    return undefined;
+  }, []);
+
+  return {
+    isMounted,
+    onMounted<T, R>(value: T, defaultValue?: R): T | R | undefined {
+      return isMounted ? value : defaultValue;
+    },
+  };
+};

src/lib/tmi.ts

@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+import tmijs from 'tmi.js';
+
+const tmiClient = (channelId: string, token?: string, username?: string) => {
+  const client = new tmijs.Client({
+    options: {
+      debug: false,
+      clientId: process.env.EXPO_PUBLIC_TWITCH_CLIENT_ID,
+    },
+    channels: [channelId],
+    identity: {
+      username: username ?? undefined,
+      password: token ?? undefined,
+    },
+    connection: {
+      maxReconnectAttempts: 5,
+      reconnect: true,
+      reconnectDecay: 1.5,
+      reconnectInterval: 1500,
+    },
+    logger: {
+      info: (message: string) => console.log(message),
+      warn: (message: string) => console.log(message),
+      error: (message: string) => console.log(message),
+    },
+  });
+
+  return client;
+};
+export default tmiClient;