feat(app): auth

luke-h1 · Nov 18, 2023 · 20700c8 · 20700c8
1 parent adc20b7
commit 20700c8
Show file tree

Hide file tree

Showing 11 changed files with 329 additions and 258 deletions.
diff --git a/App.tsx b/App.tsx
@@ -15,6 +15,7 @@ export default function App() {
 
     LogBox.ignoreAllLogs();
     activateKeepAwakeAsync();
+    // AsyncStorage.clear().then(() => console.log('AsyncStorage cleared')).catch(e => console.error(e))
   }
   return (
     <NavigationContainer>

diff --git a/api.json b/api.json
@@ -0,0 +1,2 @@
+"data": [{"game_id": "687129551", "game_name": "Trackmania", "id": "49736973229", "is_mature": false, "language": "en", "started_at": "2023-11-18T20:29:47Z", "tag_ids": [Array], "tags": [Array], "thumbnail_url": "https://static-cdn.jtvnw.net/previews-ttv/live_user_summit1g-{width}x{height}.jpg", "title": "Trackmania Twitch Rivals tourney w/ Wirtual - @summit1g", "type": "live", "user_id": "26490481", "user_login": "summit1g", "user_name": "summit1g", "viewer_count": 6819}, {"game_id": "509658", "game_name": "Just Chatting", "id": "41421803048", "is_mature": true, "language": "en", "started_at": "2023-11-18T20:31:38Z", "tag_ids": [Array], "tags": [Array], "thumbnail_url": "https://static-cdn.jtvnw.net/previews-ttv/live_user_zoil-{width}x{height}.jpg", "title": "Lethal Company and Movie Night today. surely. the ants go marching one by one hoorah. hoorah.", "type": "live", "user_id": "95304188", "user_login": "zoil", "user_name": "Zoil", "viewer_count": 1921}], "pagination": {}}
+ LOG  {"data": [{"game_id": "687129551", "game_name": "Trackmania", "id": "49736973229", "is_mature": false, "language": "en", "started_at": "2023-11-18T20:29:47Z", "tag_ids": [Array], "tags": [Array], "thumbnail_url": "https://static-cdn.jtvnw.net/previews-ttv/live_user_summit1g-{width}x{height}.jpg", "title": "Trackmania Twitch Rivals tourney w/ Wirtual - @summit1g", "type": "live", "user_id": "26490481", "user_login": "summit1g", "user_name": "summit1g", "viewer_count": 6819}, {"game_id": "509658", "game_name": "Just Chatting", "id": "41421803048", "is_mature": true, "language": "en", "started_at": "2023-11-18T20:31:38Z", "tag_ids": [Array], "tags": [Array], "thumbnail_url": "https://static-cdn.jtvnw.net/previews-ttv/live_user_zoil-{width}x{height}.jpg", "title": "Lethal Company and Movie Night today. surely. the ants go marching one by one hoorah. hoorah.", "type": "live", "user_id": "95304188", "user_login": "zoil", "user_name": "Zoil", "viewer_count": 1921}], "pagination": {}}
diff --git a/src/components/StreamItem.tsx b/src/components/StreamItem.tsx
@@ -1,7 +1,9 @@
-import { Entypo } from '@expo/vector-icons';
-import { Image, StyleSheet, Text, View } from 'react-native';
+import { FlatList, Image, StyleSheet, Text, View } from 'react-native';
 import { Stream } from '../services/twitchService';
+import { Entypo } from '@expo/vector-icons';
 import colors from '../styles/colors';
+import { FontAwesome } from '@expo/vector-icons';
+import viewFormatter from '../utils/viewFormatter';
 
 interface Props {
   stream: Stream;
@@ -13,104 +15,109 @@ const StreamItem = ({ stream }: Props) => {
       <View style={styles.liveScreen}>
         <Image
           source={{
-            height: 300,
-            width: 300,
             uri: stream.thumbnail_url
-              .replace('{width}', '300')
-              .replace('{height}', '100'),
+              .replace('{width}', '1920')
+              .replace('{height}', '1080'),
+            width: 300,
+            height: 100,
           }}
         />
-        <View>
-          <Entypo name="circle" size={24} style={styles.icon} />
-        </View>
+
       </View>
       <View style={styles.liveInfo}>
         <View style={styles.user}>
-          <View>
+          <View style={styles.userPp}>
             <Image
               source={{ uri: stream.thumbnail_url }}
-              style={styles.userProfilePic}
+              style={styles.userPp}
             />
           </View>
           <Text style={styles.userName}>{stream.user_name}</Text>
-          <Text style={styles.gameTitle}>{stream.game_name}</Text>
-          <View style={styles.tags}>
-            {stream.tags.map((tag, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Text style={styles.tag} key={index}>
-                {tag}
-              </Text>
-            ))}
-          </View>
+        </View>
+        <Text style={styles.titleGame}>{stream.title}</Text>
+        <Text style={styles.titleGame}>{stream.game_name}</Text>
+
+        <View style={styles.tagRow}>
+          <FlatList
+            data={stream.tags}
+            renderItem={({ item }) => (
+              <View style={styles.tag}>
+                <Text style={styles.tagText}>{item}</Text>
+              </View>
+            )}
+            keyExtractor={item => item}
+            horizontal
+          />
         </View>
       </View>
     </View>
   );
 };
-
 export default StreamItem;
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
   channelBox: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
+    width: '100%',
+    flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 20,
+    cursor: 'pointer',
     zIndex: 2,
+    color: colors.gray,
   },
   liveScreen: {
     position: 'relative',
     width: '35%',
-    minWidth: 100,
-    minHeight: 100,
-  },
-  icon: {
-    position: 'absolute',
-    bottom: 2,
-    left: 5,
+    minWidth: 150,
+    minHeight: 50,
+    backgroundColor: 'black',
+    borderRadius: 3,
+    overflow: 'hidden',
+    zIndex: -1,
     color: colors.gray,
-    fontSize: 12,
-    display: 'flex',
-    alignItems: 'center',
-    textShadowColor: colors.black,
-    textShadowRadius: 2,
-    textShadowOffset: { width: 1, height: 1 },
-    gap: 3,
   },
+
   liveIcon: {
     color: colors.red,
     fontSize: 9,
   },
   liveInfo: {
     flex: 1,
-    paddingLeft: 10,
-    paddingRight: 10,
+    paddingHorizontal: 10,
+    color: colors.gray,
   },
   user: {
-    display: 'flex',
+    flexDirection: 'row',
+    color: colors.gray,
   },
-  userProfilePic: {
+  userPp: {
     width: 15,
     height: 15,
-    borderRadius: 50,
+    borderRadius: 999,
     overflow: 'hidden',
   },
   userName: {
-    paddingLeft: 5,
-  },
-  gameTitle: {
+    // paddingLeft: 5,
+    fontWeight: '600',
     color: colors.gray,
+  },
+  titleGame: {
     fontSize: 14,
+    color: colors.gray,
   },
-  tags: {
-    display: 'flex',
-    fontSize: 13,
+  tagRow: {
+    marginTop: 17,
+    flexDirection: 'row',
   },
   tag: {
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 5,
-    paddingRight: 5,
+    backgroundColor: colors.tag,
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    borderRadius: 10,
+    marginRight: 10,
+  },
+  tagText: {
+    color: colors.black,
+    fontSize: 13,
   },
 });
diff --git a/src/components/StreamList.tsx b/src/components/StreamList.tsx
@@ -1,13 +1,19 @@
-import { StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
+import { Stream } from '../services/twitchService';
+import StreamListItem from './StreamListItem';
 
-const StreamList = () => {
+interface Props {
+  streams: Stream[];
+}
+
+const StreamList = ({ streams }: Props) => {
   return (
     <View style={styles.list}>
-      {/* <StreamListItem />
-      <StreamListItem />
-      <StreamListItem />
-      <StreamListItem />
-      <StreamListItem /> */}
+      <FlatList
+        data={streams}
+        renderItem={({ item }) => <StreamListItem stream={item} />}
+        keyExtractor={item => item.id}
+      />
     </View>
   );
 };