hotfix

Components/contentcomp.js

@@ -1,6 +1,6 @@
 // React
 import React, { useEffect, useState } from 'react';
-import { View, ScrollView, useWindowDimensions, Pressable, FlatList, Linking, ToastAndroid, Alert, ImageBackground } from 'react-native';
+import { View, ScrollView, useWindowDimensions, Pressable, FlatList, Linking, ToastAndroid, Alert, ActivityIndicator } from 'react-native';
 // UI
 import { Chip, Text, Avatar, Image, Icon, Button, Overlay } from 'react-native-elements';
 // Navigation
@@ -12,13 +12,12 @@ import Video from 'react-native-video';
 import YoutubeIframe from 'react-native-youtube-iframe';
 import FastImage from 'react-native-fast-image';
 // Data
-import { getOverview } from '../Data Handler/getdata';
+import { getOverview, getStudio } from '../Data Handler/getdata';
 import { copyText } from '../Screens/character';
-import { updateFavorite, updateProgress, updateScore, updateStatus } from '../Data Handler/updatedata';
+import { deleteEntry, updateFavorite, updateProgress, updateScore, updateStatus } from '../Data Handler/updatedata';
 import Markdown from 'react-native-markdown-display';
 import { md, rules } from '../Utils/markdown';
 
-const types = ['Current', 'Planning', 'Completed', 'Repeating', 'Dropped', 'Paused'];
 const scoring = Array.from({ length: (10 - 0) / .1 + 1}, (_, i) => (i * .1).toFixed(1).replace(/\.0/g, '')).reverse();
 
 export const SectionInfo = ({header, info, style=null}) => {
@@ -32,14 +31,72 @@ export const SectionInfo = ({header, info, style=null}) => {
     );
 }
 
+export const Studio = ({route}) => {
+    const { id, token, routeName, name } = route.params;
+    const [data, setData] = useState([]);
+    const [page, setPage] = useState({});
+    const [refresh, setRefresh] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const { colors } = useTheme();
+
+    useEffect(() => {
+        let mounted = true;
+        getStudio(id, token, 1).then(studio => {
+            if(mounted) {
+                setData(studio.media.nodes);
+                setPage(studio.media.pageInfo);
+                setLoading(false);
+            }
+        });
+        return () => {mounted = false};
+    },[]);
+
+    const onRefresh = async() => {
+        setRefresh(true);
+        const studio = await getStudio(id, token, 1);
+        setData(studio.media.nodes);
+        setPage(studio.media.pageInfo);
+        setRefresh(false);
+    }
+
+    const fetchMore = async() => {
+        if (page.hasNextPage === true) {
+            const newData = await getStudio(id, token, page.currentPage + 1);
+            setData([...data, ...newData.media.nodes]);
+            setPage(newData.media.pageInfo);
+        }
+    }
+
+    if (loading) return <View style={{flex:1, justifyContent:'center'}}><ActivityIndicator size='large' color={colors.primary} /></View>
+
+    return(
+        <View style={{flex:1}}>
+            <FlatList
+                data={data}
+                renderItem={({item}) => <_ContentTile item={item} routeName={routeName} token={token} isSearch={true} />}
+                keyExtractor={(item, index) => index.toString()}
+                onEndReached={fetchMore}
+                onEndReachedThreshold={0.4}
+                refreshing={refresh}
+                onRefresh={onRefresh}
+                numColumns={2}
+                columnWrapperStyle={{marginVertical:5}}
+                contentContainerStyle={{paddingVertical:10}}
+            />
+        </View>
+    );
+}
+
 export const OverView = ({route}) => {
     const {data, auth, id, tags, lang, routeName} = route.params;
+    const types = ['Current', 'Planning', 'Completed', 'Repeating', 'Dropped', 'Paused', ... (data.mediaListEntry !== null) ? ['Remove'] : []];
     const [status, setStatus] = useState((data.mediaListEntry !== null) ? data.mediaListEntry.status : 'Not Added');
     const [progress, setProgress] = useState((data.mediaListEntry !== null) ? data.mediaListEntry.progress : '0');
     const [score, setScore] = useState((data.mediaListEntry !== null) ? data.mediaListEntry.score : '0');
     const [statusVis, setStatusVis] = useState(false);
     const [progressVis, setProgressVis] = useState(false);
     const [scoreVis, setScoreVis] = useState(false);
+    const [entryID, setEntryID] = useState((data.mediaListEntry !== null) ? data.mediaListEntry.id : null);
 
     const { colors } = useTheme();
     const { width, height } = useWindowDimensions();
@@ -49,12 +106,29 @@ export const OverView = ({route}) => {
     syn.toString();
 
     const updateContent = async(item) => {
-        const newItem = await updateStatus(auth, id, item.toUpperCase()); 
-        setStatus(item); 
-        ToastAndroid.show(`Updated to ${item}!`, ToastAndroid.SHORT); 
-        setStatusVis(false);
+        if (item === 'Remove') {
+            const removed = deleteEntry(auth, entryID);
+            setStatus('Not Added');
+            setStatusVis(false);
+        } else {
+            const newItem = await updateStatus(auth, id, item.toUpperCase()); 
+            setEntryID(newItem.id);
+            setStatus(item); 
+            setStatusVis(false);
+        }
+
     }
     const StatusOverlay = () => {
+        if (status === 'Not Added') {
+            const index = types.indexOf('Remove');
+            if (index > -1) {
+                types.splice(index, 1);
+            }
+        } else {
+            if (types.indexOf('Remove') < 0) {
+                types.push('Remove');
+            }
+        }
         return(
             <Overlay isVisible={statusVis} onBackdropPress={() => setStatusVis(false)} overlayStyle={{backgroundColor:colors.card, width:width/2}}>
                 <View >
@@ -138,6 +212,10 @@ export const OverView = ({route}) => {
         );
     }
 
+    const navStudio = () => {
+        navigation.push('Studio', {id:data.studios.nodes[0].id, token:auth, routeName:routeName, name:data.studios.nodes[0].name});
+    }
+
     return(
         <View>
             <ScrollView showsVerticalScrollIndicator={false}>
@@ -172,7 +250,6 @@ export const OverView = ({route}) => {
                         {(data.duration !== null) ? <SectionInfo header='LENGTH' info={(data.duration < 60) ? `${data.duration} min` : `${(data.duration / 60).toFixed(1)} hrs`} /> : null}
                         {(data.source !== null) ? <SectionInfo header='SOURCE' info={data.source.replaceAll('_', ' ').toLowerCase()} style={{ textTransform:'capitalize', textAlign: 'center', color: colors.text }} /> : null}
                         <SectionInfo header='DATE' info={`${(data.startDate.month !== null) ? data.startDate.month : '?'}/${ (data.startDate.day !== null) ? data.startDate.day : '?'}/${(data.startDate.year !== null) ? data.startDate.year : '?'} - ${`${(data.endDate.year !== null) ? `${data.endDate.month}/${data.endDate.day}/${data.endDate.year}` : 'Present'}`}`} />
-                        {(data.studios.edges.length > 0) ? <SectionInfo header='STUDIO' info={data.studios.edges[0].node.name} /> : null}
                         {(data.title.english !== null) ? <SectionInfo header='ENGLISH TITLE' info={data.title.english} /> : (data.title.english === null && syn.length > 0) ? <SectionInfo header='SYNONYMS' info={syn} /> : null}
                     </View>
                 </ScrollView>
@@ -193,6 +270,8 @@ export const OverView = ({route}) => {
                     <Text h3 style={{ color: colors.text, paddingLeft:5 }}>Staff</Text>
                     <FlatList data={data.staff.edges} horizontal={true} showsHorizontalScrollIndicator={false} renderItem={_staff} contentContainerStyle={{marginLeft:5}} /> 
                 </View>
+                {(data.studios.nodes.length > 0) ? <Text h3 style={{ color: colors.text, paddingLeft:5 }}>Studio</Text> : null}
+                {(data.studios.nodes.length > 0) ? <Button title={data.studios.nodes[0].name} onPress={navStudio} titleStyle={{fontWeight:'bold'}} buttonStyle={{borderRadius:8, backgroundColor:colors.primary}} containerStyle={{marginHorizontal:5}} /> : null}
                 {(data.trailer !== null) ?
                 <View>
                     <Text h3 style={{ color: colors.text, paddingLeft:5 }}>Trailer</Text>
@@ -212,7 +291,7 @@ export const OverView = ({route}) => {
     );
 }
 
-export const CharacterItem = ({ item, lang, routeName }) => {
+export const CharacterItem = ({ item, auth, lang, routeName }) => {
     const [liked, setLiked] = useState(false);
     const navigation = useNavigation();
 
@@ -228,10 +307,10 @@ export const CharacterItem = ({ item, lang, routeName }) => {
     }, []);
 
     const handleLike = async() => {
-        if (liked === true) {
+        if (liked === true && typeof auth === 'string') {
             updateFavorite(auth, item.node.id);
             setLiked(false);
-        } else if (liked === false) {
+        } else if (liked === false && typeof auth === 'string') {
             updateFavorite(auth, item.node.id);
             setLiked(true);
         }
@@ -283,7 +362,7 @@ export const Characters = ({route}) => {
             numColumns={2}
             columnWrapperStyle={{paddingBottom:5}}
             windowSize={3}
-            renderItem={({item}) => (<CharacterItem item={item} lang={lang} routeName={routeName}/>) }
+            renderItem={({item}) => (<CharacterItem item={item} auth={auth} lang={lang} routeName={routeName}/>) }
             style={{flex:1, paddingBottom: 10, paddingTop: 10 }}
             keyExtractor={(item, index) => index.toString()}
             contentContainerStyle={{ alignSelf: 'center', paddingBottom:20 }}

Components/customtile.js

@@ -82,7 +82,7 @@ export const _ContentTile = ({ item, routeName, token, isSearch, isNode=false, s
                 containerStyle: normalContainer,
                 titleStyle: normalText,
             },
-            (isSearch === true) ?
+            (isSearch === true && stat !== null) ?
             {
                 title: 'Delete',
                 onPress: () => {deleteItem();},
@@ -109,6 +109,12 @@ export const _ContentTile = ({ item, routeName, token, isSearch, isNode=false, s
         );
     }
 
+    const getLocation = () => {
+        (routeName.name !== 'Info') ?
+            navigation.push((routeName.name === 'SearchPage') ? 'InfoSearch' : 'InfoHome', { screen: 'Info', params: { id: entry.id, title: { romaji: entry.title.romaji, native: entry.title.native, english: entry.title.english } }, })
+        : navigation.push('Info', { id: entry.id, title: { romaji: entry.title.romaji, native: entry.title.native, english: entry.title.english } });
+    }
+
     useEffect(() => {
         let mounted = true;
         fetchLang().then((lang) => {
@@ -122,33 +128,29 @@ export const _ContentTile = ({ item, routeName, token, isSearch, isNode=false, s
     return (
         <View style={{ flex: 1, backgroundColor: colors.background, paddingHorizontal: 10, maxHeight: size[1] + 50, maxWidth: size[0], borderRadius: 8 }}>
             <Pressable style={{ height: size[1], width: size[0] - 20, borderRadius: 8 }}
-                onPress={() => {
-                    (routeName.name !== 'Info') ?
-                        navigation.push((routeName.name === 'SearchPage') ? 'InfoSearch' : 'InfoHome', { screen: 'Info', params: { id: entry.id, title: { romaji: entry.title.romaji, native: entry.title.native, english: entry.title.english } }, })
-                        : navigation.push('Info', { id: entry.id, title: { romaji: entry.title.romaji, native: entry.title.native, english: entry.title.english } });
-                }}
+                onPress={getLocation}
                 onLongPress={() => (typeof token === 'string') ? setVisible(true) : null}
             >
                 <Image source={{ uri: entry.coverImage.extraLarge }} resizeMode='cover' style={{ borderRadius: 8, height: size[1], width: size[0] - 20 }} blurRadius={(status !== null) ? 3 : 0} />
             </Pressable>
             <Text style={{ color: colors.text, fontSize: 16, textAlign: 'center' }} numberOfLines={2}>{(lang !== 'Native') ? entry.title.romaji : entry.title.native}</Text>
-                {((status !== null) && typeof token === 'string') ? 
-                    <Pressable 
-                        onLongPress={() => setVisible(true)} 
-                        onPress={() => { navigation.push((routeName.name === 'SearchPage') ? 'InfoSearch' : 'InfoHome', { screen: 'Info', params: { id: entry.id, title: { romaji: entry.title.romaji, native: entry.title.native, english: entry.title.english } }, }); }} 
-                        style={{ position: 'absolute', top: 0, left: 10, height: size[1], width: size[0] -20, borderRadius: 8, backgroundColor: (status !== null) ? 'rgba(0,0,0,.6)' : 'rgba(0,0,0,0)', justifyContent: 'center'}}
-                    >
-                        <Text style={{ color: '#FFF', textAlign: 'center', fontWeight: 'bold', fontSize: 16 }}>{status}</Text>
-                    </Pressable>
+            {((status !== null) && typeof token === 'string') ?
+                <Pressable
+                    onLongPress={() => setVisible(true)}
+                    onPress={getLocation}
+                    style={{ position: 'absolute', top: 0, left: 10, height: size[1], width: size[0] - 20, borderRadius: 8, backgroundColor: (status !== null) ? 'rgba(0,0,0,.6)' : 'rgba(0,0,0,0)', justifyContent: 'center' }}
+                >
+                    <Text style={{ color: '#FFF', textAlign: 'center', fontWeight: 'bold', fontSize: 16 }}>{status}</Text>
+                </Pressable>
                 : null}
-                {(typeof score === 'number') ? <Badge value={`${score}%`}
-                    containerStyle={{ alignSelf: 'flex-end', position: 'absolute', elevation: 25, top: -5, right: 4 }}
-                    badgeStyle={{ borderColor: 'rgba(0,0,0,0)', transform: [{ scale: 1.20 }] }}
-                    status={(score >= 75) ? 'success'
-                        : (score < 75 && score >= 65) ? 'warning'
-                            : (score < 65) ? 'error' : undefined
-                    }
-                /> : null}
+            {(typeof score === 'number') ? <Badge value={`${score}%`}
+                containerStyle={{ alignSelf: 'flex-end', position: 'absolute', elevation: 25, top: -5, right: 4 }}
+                badgeStyle={{ borderColor: 'rgba(0,0,0,0)', transform: [{ scale: 1.20 }] }}
+                status={(score >= 75) ? 'success'
+                    : (score < 75 && score >= 65) ? 'warning'
+                        : (score < 65) ? 'error' : undefined
+                }
+            /> : null}
             <Action />
         </View>
     );

Components/usercomp.js

@@ -163,15 +163,15 @@ export const Statistics = ({route}) => {
     const ShowTagStats = ({data}) => {
         const colorCut = colors.primary.slice(0, -2);
         return(
-            data.tags.map((tags, index) => 
+            data.tags.map((tags, index) => (index <= 10) ? 
             <View key={index} style={{flex:1, alignItems:'center'}}>
                 {(index === 0) ? <Icon name='crown' containerStyle={{position:'absolute', elevation:5, top:-27, right:0, transform:[{ rotate:'25deg'}]}} size={40} type='foundation' color='#ffd500' /> : null}
                 {(index === 0) ? <View style={{flex:1, width:width-100, height:70, alignItems:'center', marginBottom:10, borderRadius:200, backgroundColor:`${colorCut}.5)`}}>
                     <NumberDisplay key={index} fontWeight='bold' fontsize={25} title={tags.tag.name} number={`${tags.count}`} />
                 </View> : null}
                 {(index !== 0) ? <NumberDisplay key={index} title={tags.tag.name} number={`${tags.count}`} /> : null}
             </View>
-            )
+            : null)
         );
     }
 
@@ -250,7 +250,7 @@ export const Statistics = ({route}) => {
                 <NumberDisplay title='Volumes Read' number={data.volumesRead} />
                 <Text h3 style={{color:colors.text}}>Statuses</Text>
                 <PieChart data={statuses} absolute={true} backgroundColor={colors.background} chartConfig={chartConfig} width={width} height={200} accessor={'count'} />
-                <Text h3 style={{color:colors.text}}>Top Ten Tags</Text>
+                <Text h3 style={{color:colors.text}}>Top 10 Tags</Text>
                 <ShowTagStats data={data} />
                 {/* {data.tags.map((tags, index) => <NumberDisplay key={index} title={tags.tag.name} number={`${tags.count}`} />)} */}
                 <Text h3 style={{color:colors.text, marginTop:10}}>Top 5 Staff</Text>