From 0e9f53a9b9c529c33f3ebf3da186a836bb49c8c3 Mon Sep 17 00:00:00 2001 From: Ashhhleyyy Date: Tue, 20 Sep 2022 23:36:51 +0100 Subject: [PATCH] feat: start work on new home screen and other QoL changes --- App.tsx | 11 +++++-- package.json | 4 +++ src/pages/comic.tsx | 8 +++-- src/pages/comiclist.tsx | 56 +++++++++++++++++++++++++++++++++++ src/pages/comiclist/Local.tsx | 48 ++++++++++++++++++++++++++++++ src/pages/home.tsx | 9 +++++- src/provider/index.ts | 9 +++++- src/provider/local.ts | 31 ++++++++++++++++--- yarn.lock | 33 +++++++++++++++++++-- 9 files changed, 195 insertions(+), 14 deletions(-) create mode 100644 src/pages/comiclist.tsx create mode 100644 src/pages/comiclist/Local.tsx diff --git a/App.tsx b/App.tsx index 07ddfd1..95b0b84 100644 --- a/App.tsx +++ b/App.tsx @@ -1,4 +1,4 @@ -import { NavigationContainer } from '@react-navigation/native'; +import { NavigationContainer, NavigatorScreenParams } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { StatusBar } from 'expo-status-bar'; import { QueryClient, QueryClientProvider } from 'react-query'; @@ -9,12 +9,14 @@ import Home from './src/pages/home'; import { ComicProviderKey } from './src/provider'; import { NonLocalProviderKey } from './src/provider/local'; import Save from './src/pages/save'; +import ComicList, { TabParamList } from './src/pages/comiclist'; const Stack = createNativeStackNavigator(); const queryClient = new QueryClient(); export type RootStackParamList = { - Home: undefined; + OldHome: undefined; + Home: NavigatorScreenParams; ComicProfile: { provider: ComicProviderKey; comicId: string; }; Chapter: { provider: ComicProviderKey; comicId: string; chapterId: string; }; Page: { provider: ComicProviderKey; comicId: string; pageId: string; }; @@ -26,7 +28,10 @@ export default function App() { - + + diff --git a/package.json b/package.json index 52682ea..8e5d49a 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,14 @@ "react": "18.0.0", "react-dom": "18.0.0", "react-native": "0.69.5", + "react-native-fast-image": "^8.6.1", "react-native-gesture-handler": "~2.5.0", + "react-native-image-progress": "^1.2.0", "react-native-modalize": "^2.1.1", + "react-native-progress": "^5.0.0", "react-native-safe-area-context": "4.3.1", "react-native-screens": "~3.15.0", + "react-native-svg": "12.3.0", "react-native-web": "~0.18.7", "react-query": "^3.39.2" }, diff --git a/src/pages/comic.tsx b/src/pages/comic.tsx index 8e5a956..276e839 100644 --- a/src/pages/comic.tsx +++ b/src/pages/comic.tsx @@ -1,10 +1,14 @@ import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeStackScreenProps } from "@react-navigation/native-stack"; -import { ActivityIndicator, Image, ScrollView, StyleSheet, Text, View } from "react-native"; +import { ActivityIndicator, Image as NativeImage, ScrollView, StyleSheet, Text, View } from "react-native"; +import { createImageProgress } from "react-native-image-progress"; +import { Pie } from 'react-native-progress'; import { RootStackParamList } from "../../App"; import Touchable from "../components/Touchable"; import { useComicPage } from "../provider"; +const Image = createImageProgress(NativeImage); + export default function Comic(props: Props) { const { data, error, isLoading } = useComicPage(props.route.params.provider, props.route.params.comicId, props.route.params.pageId, props.navigation); @@ -25,7 +29,7 @@ export default function Comic(props: Props) { {data.imageSegments.map((item) => )} + }} source={{ uri: item.url }} resizeMode='center' key={item.url} indicator={Pie} />)} newPage(data.previousPageId)} disabled={data.previousPageId === undefined}> diff --git a/src/pages/comiclist.tsx b/src/pages/comiclist.tsx new file mode 100644 index 0000000..b01a7f5 --- /dev/null +++ b/src/pages/comiclist.tsx @@ -0,0 +1,56 @@ +import { MaterialCommunityIcons } from "@expo/vector-icons"; +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; +import LocalComicList from "./comiclist/Local"; + +const Tab = createBottomTabNavigator(); + +export type TabParamList = { + Local: undefined; + Remote: undefined; +}; + +function Remote() { + return ( + + Hello, World! + + ); +} + +export default function ComicList() { + return ( + { + return { + headerRight: () => ( + + { + navigation.push("OldHome"); + }} + > + + + + ), + tabBarIcon: (({ focused, size, color }) => { + const iconName = route.name === 'Local' + ? (focused ? 'download' : 'download-outline') + : (focused ? 'cloud' : 'cloud-outline'); + return + }) + }; + }} + > + + + + ); +} + +const styles = StyleSheet.create({ + padding: { + paddingEnd: 16, + }, +}); diff --git a/src/pages/comiclist/Local.tsx b/src/pages/comiclist/Local.tsx new file mode 100644 index 0000000..8b15b8c --- /dev/null +++ b/src/pages/comiclist/Local.tsx @@ -0,0 +1,48 @@ +import { FC } from "react" +import { ActivityIndicator, FlatList, StyleSheet, Text, View } from "react-native" +import Touchable from "../../components/Touchable"; +import ComicCard from '../../components/ComicCard'; +import { ComicMetadata, useLocalComics } from "../../provider" +import { CompositeNavigationProp, useNavigation } from "@react-navigation/native"; +import { BottomTabNavigationProp } from "@react-navigation/bottom-tabs"; +import { TabParamList } from "../comiclist"; +import { NativeStackNavigationProp } from "@react-navigation/native-stack"; +import { RootStackParamList } from "../../../App"; +import { LocalComicId } from "../../provider/local"; + +export type ComicListNavigationProp = CompositeNavigationProp< + BottomTabNavigationProp, + NativeStackNavigationProp +>; + +const Comic: FC void }> = (props) => { + return props.onClick()}> + + + + +} + +export default function LocalComicList() { + const { data, error, isLoading } = useLocalComics(); + const navigation = useNavigation(); + + if (isLoading) return ; + if (error) return Failed to load comic: {error.toString()}; + if (!data) return Whoops! We couldn't find that comic :/; + + function openComic(comicId: LocalComicId) { + navigation.navigate('ComicProfile', { + provider: 'local', + comicId, + }); + } + + return openComic(item.id)} {...item} />} keyExtractor={item => item.id} /> +} + +const styles = StyleSheet.create({ + comic: { + padding: 8, + }, +}); diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 45884c4..afc63b5 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -31,10 +31,17 @@ export default function Home(props: Props) { alert('library yeeted!'); }} /> + +