Merge pull request #43 from luke-h1/auth

feat(app): authenticate with Twitch API

.eslintrc.json

@@ -90,6 +90,7 @@
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
     "react/state-in-constructor": "off",
+    "camelcase": "off",
     "react/no-unescaped-entities": [
       "error",
       {

.github/workflows/build.yml

@@ -64,3 +64,17 @@ jobs:
 
       - name: tsc
         run: yarn tsc
+
+      - name: 🏗 Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          eas-cache: true
+          expo-cache: true
+          token: ${{ secrets.FOAM_RELEASE_TOKEN }}
+
+      - name: 🚀 Create preview
+        uses: expo/expo-github-action/preview@v8
+        with:
+          command: eas update --auto
+          github-token: ${{ secrets.FOAM_GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,100 @@
+name: Release app
+on:
+    workflow_dispatch:
+env:
+  NODE_VERSION: 18.18.0
+  FOAM_RELEASE_TOKEN: ${{ secrets.FOAM_RELEASE_TOKEN }}
+
+jobs:
+  release:
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}-${{ github.sha }}-release
+      cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Check for FOAM_RELEASE_TOKEN
+        run: |
+          if [ -z "${{ secrets.FOAM_RELEASE_TOKEN }}" ]; then
+            echo "You must provide an FOAM_RELEASE_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      - name: Install moreutils
+        run: sudo apt install moreutils
+
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off            
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: get yarn cache directory
+        id: cache
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+        shell: bash
+        working-directory: ./
+
+      - name: setup yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache
+        with:
+            path: ${{ steps.cache.outputs.dir }}
+            key: yarn-${{ hashFiles('**/yarn.lock') }}
+            restore-keys: |
+                yarn-
+
+      - name: install yarn
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: format:check
+        run: yarn format:check
+
+      - name: lint
+        run: yarn lint
+
+      - name: jest
+        run: yarn test
+
+      - name: tsc
+        run: yarn tsc
+
+    # PUBLISH
+      - name: new version
+        run: |
+            git config user.name "${{ github.actor }}"
+            git config user.email "${{ github.actor }}@users.noreply.github.com"
+            npx lerna publish --yes --conventional-commits --force-publish --no-push --create-release github
+            git push -u origin main --force --no-verify --follow-tags
+
+      - name: get release version
+        id: get_release_version
+        run: echo "release_version=$(cat lerna.json | jq -r '.version')" >> $GITHUB_ENV
+        shell: bash
+        working-directory: ./
+
+      - name: 🏗 Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.FOAM_RELEASE_TOKEN }}
+
+      - name: 🚀 Build app version ${{ github.env.get_release_version.outputs.release_version}}
+        run: eas build --non-interactive
+
+      - name: 🚀 Submit app version ${{ github.env.get_release_version.outputs.release_version}} to play store
+        run: eas submit --latest -p android
+
+      - name: Submit app version ${{ github.env.get_release_version.outputs.release_version}} to app store
+        run: eas submit --latest -p ios

App.tsx

@@ -1,8 +1,23 @@
+import 'expo-dev-client';
 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 { AuthContextProvider } from './src/context/AuthContext';
 import RootNavigator from './src/navigation/RootNavigator';
 
 export default function App() {
+  if (__DEV__) {
+    connectToDevTools({
+      host: 'localhost',
+      port: 8097,
+    });
+
+    LogBox.ignoreAllLogs();
+    activateKeepAwakeAsync();
+    // AsyncStorage.clear().then(() => console.log('AsyncStorage cleared')).catch(e => console.error(e))
+  }
   return (
     <NavigationContainer>
       <AuthContextProvider>

api.json

@@ -0,0 +1,19 @@
+{
+  "data": [
+    {
+      "broadcaster_language": "en",
+      "broadcaster_login": "a_seagull",
+      "display_name": "A_Seagull",
+      "game_id": "506442",
+      "game_name": "DOOM Eternal",
+      "id": "19070311",
+      "is_live": true,
+      "tag_ids": [],
+      "tags": ["English"],
+      "thumbnail_url": "https://static-cdn.jtvnw.net/jtv_user_pictures/a_seagull-profile_image-4d2d235688c7dc66-300x300.png",
+      "title": "a_seagull",
+      "started_at": "2020-03-18T17:56:00Z"
+    }
+  ],
+  "pagination": {}
+}

app.json

@@ -23,10 +23,16 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.foam"
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "950a1e2f-6b25-4be7-adb2-3c16287a2b5e"
+      }
     }
   }
 }

eas.json

@@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 5.9.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

lerna.json

@@ -0,0 +1,12 @@
+{
+  "command": {
+    "publish": {
+      "conventionalCommits": true,
+      "message": "chore(release): publish %s [skip ci]",
+      "allowBranch": ["main"],
+      "registry": "https://npm.pkg.github.com"
+    }
+  },
+  "npmClient": "yarn",
+  "version": "0.1.0"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foam",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -14,7 +14,8 @@
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,html}\"",
     "format:check": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,css,scss,html}\"",
     "prepare": "husky install",
-    "clean": "rm -rf node_modules ios android .expo && yarn install"
+    "clean": "rm -rf node_modules ios android .expo && yarn install",
+    "version": "printf 'export const version = \"%s\";\n' \"$(node -p \"require('./package.json').version\")\" > src/version.ts && git add ."
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
@@ -32,15 +33,18 @@
     "expo-auth-session": "~5.0.2",
     "expo-clipboard": "~4.3.1",
     "expo-constants": "^14.4.2",
+    "expo-dev-client": "~2.4.12",
     "expo-font": "~11.4.0",
     "expo-image": "~1.3.4",
     "expo-linking": "~5.0.2",
     "expo-screen-orientation": "~6.0.6",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
+    "lerna": "^7.4.2",
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-app-auth": "^7.1.0",
+    "react-native-fast-image": "^8.6.3",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-reanimated-carousel": "^3.5.1",

set-secrets.sh

@@ -0,0 +1,2 @@
+eas secret:create --scope project --name EXPO_PUBLIC_TWITCH_CLIENT_ID --value  --type string
+eas secret:create --scope project --name EXPO_PUBLIC_TWITCH_CLIENT_SECRET --value  --type string

src/components/CategoryItem.tsx

@@ -1,27 +1,31 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Image, StyleSheet, Text, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Category } from '../services/twitchService';
 import colors from '../styles/colors';
 
-export interface Category {
-  name: string;
-  source: string;
+interface Props {
+  category: Category;
 }
 
-interface Props extends Category {}
-
-const CategoryItem = ({ name, source }: Props) => {
+const CategoryItem = ({ category }: Props) => {
   return (
     <TouchableOpacity style={styles.category}>
-      {/* @ts-expect-error */}
-      <Image style={styles.image} source={source} />
+      <Image
+        style={styles.image}
+        source={{
+          // eslint-disable-next-line camelcase
+          uri: category.box_art_url
+            .replace('{width}', '98')
+            .replace('{height}', '130'),
+          width: 98,
+          height: 130,
+        }}
+      />
       <Text style={styles.categoryName} numberOfLines={1}>
-        {name}
+        {category.name}
       </Text>
-      <View style={styles.categoryStatus}>
-        <View style={styles.redCircle} />
-        <Text style={styles.info}>51.9k</Text>
-      </View>
+      <View style={styles.categoryStatus} />
     </TouchableOpacity>
   );
 };

src/components/CategoryList.tsx

@@ -1,32 +1,25 @@
-import { FlatList, StyleSheet } from 'react-native';
-import apex from '../../assets/data/category_apex.jpg';
-import csgo from '../../assets/data/category_csgo.jpg';
-import fallguys from '../../assets/data/category_fallguys.jpg';
-import fortnite from '../../assets/data/category_fortnite.jpg';
-import lol from '../../assets/data/category_lol.jpg';
-import valorant from '../../assets/data/category_valorant.jpg';
-import CategoryItem, { Category } from './CategoryItem';
+import { FlatList, KeyboardAvoidingView, StyleSheet, View } from 'react-native';
+import { Category } from '../services/twitchService';
+import CategoryItem from './CategoryItem';
 
-const data: Category[] = [
-  { name: 'League of Legends', source: lol },
-  { name: 'VALORANT', source: valorant },
-  { name: 'Counter-Strike: Global Offensive', source: csgo },
-  { name: 'Fortnite', source: fortnite },
-  { name: 'Fall Guys', source: fallguys },
-  { name: 'Apex Legends', source: apex },
-];
+interface Props {
+  categories: Category[];
+}
 
-const CategoryList = () => {
+const CategoryList = ({ categories }: Props) => {
   return (
-    <FlatList<Category>
-      style={styles.list}
-      numColumns={3}
-      data={data}
-      // eslint-disable-next-line no-shadow
-      renderItem={data => (
-        <CategoryItem name={data.item.name} source={data.item.source} />
-      )}
-    />
+    <KeyboardAvoidingView>
+      <View>
+        <FlatList<Category>
+          style={styles.list}
+          numColumns={3}
+          data={categories}
+          // eslint-disable-next-line no-shadow
+          renderItem={data => <CategoryItem category={data.item} />}
+          keyExtractor={item => item.id}
+        />
+      </View>
+    </KeyboardAvoidingView>
   );
 };
 
@@ -39,7 +32,7 @@ const styles = StyleSheet.create({
     paddingLeft: 0,
     paddingRight: 0,
     paddingTop: 24,
-    paddingBottom: 24,
+    paddingBottom: 32,
   },
 });