Merge pull request #16 from anhChillLe/dev

Clean and fix navigation

android/app/src/main/AndroidManifest.xml

@@ -60,9 +60,6 @@
                     android:host="app"
                     android:scheme="unsplash" />
             </intent-filter>
-            <intent-filter>
-                <action android:name="android.intent.action.DOWNLOAD_COMPLETE" />
-            </intent-filter>
         </activity>
     </application>
 

package.json

@@ -6,10 +6,11 @@
     "connect": "adb connect 192.168.200.31",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "ios-release":"npx react-native run-ios --mode Release",
     "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
-    "release": "cd android && ./gradlew assembleRelease && cd app/build/outputs/apk/release && adb install app-release.apk",
+    "android-release": "cd android && ./gradlew assembleRelease && cd app/build/outputs/apk/release && adb install app-release.apk",
     "build-release": "cd android && ./gradlew assembleRelease",
     "install-release": "cd android/app/build/outputs/apk/release && adb install app-release.apk",
     "setup-permission": "react-native setup-ios-permissions && cd ios && pod install"

src/App.tsx

@@ -1,17 +1,20 @@
 import React, { ReactElement } from "react"
-import { Platform, StatusBar, useColorScheme } from "react-native"
+import { Image, Platform, StatusBar, useColorScheme } from "react-native"
 import { Provider as PaperProvider } from "react-native-paper"
 import { SafeAreaProvider } from "react-native-safe-area-context"
 import { Provider as ReduxProvider } from "react-redux"
 import { darkTheme, lightTheme } from "./assets/themes"
 import RootStack from "./navigations/root_stack"
 import { store } from "./redux/store/store"
+import { Images } from "./assets/images"
+import FastImage from "react-native-fast-image"
 
 export default function App(): ReactElement {
 	const colorScheme = useColorScheme()
 	const isDarkMode = colorScheme === "dark"
 	const theme = isDarkMode ? darkTheme : lightTheme
 
+	preloadImages()
 	Platform.OS === "android" && StatusBar.setBackgroundColor(theme.colors.elevation.level1)
 	StatusBar.setBarStyle(isDarkMode ? "light-content" : "dark-content")
 
@@ -25,3 +28,12 @@ export default function App(): ReactElement {
 		</SafeAreaProvider>
 	)
 }
+
+
+function preloadImages() {
+	const images = [Images.landing, Images.landing2]
+	const uris = images.map(image => ({
+		uri: Image.resolveAssetSource(image).uri,
+	}))
+	FastImage.preload(uris)
+}

src/actions/link_actions.ts

@@ -17,7 +17,7 @@ const openPortfolio = (portfolio_url: string) => {
 	Linking.openURL(portfolio_url).catch((err) => console.error("Can not open Portfolio:", err));
 };
 
-function LoginWidthUnsplash() {
+function LoginWithUnsplash() {
 	const baseUrl = "https://unsplash.com/oauth/authorize";
 	const clientId = `client_id=${ACCESS_KEY}`;
 	const redirect = `redirect_uri=unsplash://app/login_success`;
@@ -41,4 +41,4 @@ function LoginWidthUnsplash() {
 	Linking.openURL(url);
 }
 
-export { openInstagramProfile, openTwitterProfile, LoginWidthUnsplash, openPortfolio };
+export { openInstagramProfile, openTwitterProfile, LoginWithUnsplash, openPortfolio };

src/hooks/user_collections.ts

@@ -10,7 +10,6 @@ export default function useUserCollections(username: string) {
 
 	const getCollections = useCallback(() => {
 		if(isLoading) return
-
 		setLoading(true)
 		unsplash.user
 			.listCollection({ username, page: page.current + 1, per_page: 10 })
@@ -19,7 +18,7 @@ export default function useUserCollections(username: string) {
 				setCollections([...collections, ...data])
 				page.current += 1
 			})
-			.catch(error => console.error("Get current user collections: ", error))
+			.catch(error => console.error("Get user collections: ", error))
 			.finally(() => isMounted.current && setLoading(false))
 	}, [username])
 

src/pages/collections/collection_photos.tsx

@@ -18,12 +18,9 @@ export default function CollectionPhotos() {
 
 	const handleItemPress = (photo: Photo, index: number) =>
 		navigation.navigate({
-			name: Screens.detailPager,
+			name: Screens.detail,
 			key: photo.id,
-			params: {
-				photos: [photo],
-				initPosition: index,
-			},
+			params: { photo },
 			merge: false,
 		})
 

src/pages/currentUser/edit_profile.tsx

@@ -5,8 +5,8 @@ import { Avatar, Button, IconButton, Surface, Text } from "react-native-paper"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import * as yup from "yup"
 import { BackAppBar, LoadingScreen, TextField } from "../../components"
-import { useAppDispatch, useUserState } from "../../redux/store/store"
 import { updateCurrentUser } from "../../redux/features/user/action"
+import { useAppDispatch, useUserState } from "../../redux/store/store"
 
 export default function EditUserProfile() {
 	const state = useUserState()
@@ -135,7 +135,7 @@ export default function EditUserProfile() {
 						title="About"
 						control={control}
 						name="bio"
-						initValue={bio}
+						initValue={bio ?? ""}
 						placeholder="Description about you"
 						errors={errors}
 						style={styles.field}
@@ -144,7 +144,7 @@ export default function EditUserProfile() {
 						title="Instagram"
 						control={control}
 						name="instagram_username"
-						initValue={instagram_username}
+						initValue={instagram_username ?? ""}
 						placeholder="Instagram username"
 						errors={errors}
 						style={styles.field}

src/pages/home/CollectionGroup.tsx

@@ -21,7 +21,7 @@ export default function CollectionGroup({ width }: { width: number }) {
 	return (
 		<>
 			<GroupHeading containerStyle={styles.collectionHeading} onMorePress={handleMorePress}>
-				Hot collections
+				Collections
 			</GroupHeading>
 			<ListAlbums
 				data={collectionsState.collections}

src/pages/home/PhotoGroup.tsx

@@ -21,7 +21,7 @@ export default function PhotoGroup({ style }: { style?: StyleProp<ViewStyle> })
 	return (
 		<>
 			<GroupHeading containerStyle={[styles.photoHeading, style]} onMorePress={handleMorePress}>
-				Top of the week
+				Photos
 			</GroupHeading>
 			<HorizontalImageList
 				data={photosState.photos}

src/pages/home/TopicGroup.tsx

@@ -22,7 +22,7 @@ export default function TopicGroup({ width }: { width: number }) {
 	return (
 		<>
 			<GroupHeading containerStyle={styles.heading} onMorePress={handleMorePress}>
-				Hot topics
+				Topics
 			</GroupHeading>
 			<ListAlbums
 				data={topicsState.topics}

src/pages/home/UserGroup.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, useState } from "react"
 import { Pressable, StyleSheet, View } from "react-native"
 import { Avatar, Divider, IconButton, Menu, Text } from "react-native-paper"
 import { useDispatch, useSelector } from "react-redux"
-import { LoginWidthUnsplash as Login } from "../../actions/link_actions"
+import { LoginWithUnsplash as Login } from "../../actions/link_actions"
 import { Icons } from "../../assets/images/icons"
 import { useAppNavigation } from "../../navigations/hooks"
 import { Screens } from "../../navigations/screen_name"
@@ -30,12 +30,12 @@ export default function UserGroup() {
 	}
 
 	const openEdit = () => {
-		navigation.navigate(Screens.editUserProfile)
+		// navigation.navigate(Screens.editUserProfile)
 		closeMenu()
 	}
 
 	const openCreateCollection = () => {
-		navigation.navigate(Screens.createCollection)
+		// navigation.navigate(Screens.createCollection)
 		closeMenu()
 	}
 

src/pages/landing/landing_page.tsx

@@ -1,16 +1,10 @@
 import { ImageBackground, StyleSheet, View } from "react-native"
 import { Button, Text } from "react-native-paper"
-import { LoginWidthUnsplash } from "../../actions/link_actions"
+import { LoginWithUnsplash } from "../../actions/link_actions"
 import { Images } from "../../assets/images"
 import { Icons } from "../../assets/images/icons"
-import { useAppNavigation } from "../../navigations/hooks"
 
 export default function LandingPage() {
-	const navigation = useAppNavigation()
-	const openApp = () => {
-		// navigation.navigate(ScreenName.main)
-	}
-
 	return (
 		<ImageBackground source={Images.landing2} style={styles.container}>
 			<View style={{ alignItems: "flex-start" }}>
@@ -22,18 +16,18 @@ export default function LandingPage() {
 				</Text>
 			</View>
 			<View style={styles.buttonGroup}>
-				<Button
+				{/* <Button
 					mode="contained"
 					rippleColor="transparent"
 					onPress={openApp}
 					style={styles.button}
 					labelStyle={styles.buttonLabel}
 				>
 					Maybe laster
-				</Button>
+				</Button> */}
 				<Button
 					mode="contained"
-					onPress={LoginWidthUnsplash}
+					onPress={LoginWithUnsplash}
 					icon={Icons.unsplash}
 					rippleColor="transparent"
 					style={[styles.button, styles.buttonLogin]}

src/pages/search/search_screen.tsx

@@ -16,12 +16,13 @@ import { Fillter } from "../../service/unsplash/params/search_params"
 export default function SearchScreen() {
 	const { top } = useSafeAreaInsets()
 	const navigation = useAppNavigation()
-	const [searchValue, setSearchValue] = useState<string>("")
+	const [searchValue, setSearchValue] = useState("")
 	const filter = useRef<Fillter>({})
 	const searchRef = useRef<TextInput>(null)
 	const [flag, setFlag] = useState(false)
 
 	const handleSearchSubmit = async (query: string) => {
+		if (searchValue === "") return
 		navigation.navigate({
 			name: Screens.searchResult,
 			params: {
@@ -44,18 +45,14 @@ export default function SearchScreen() {
 					placeholder="Search for image"
 					ref={searchRef}
 					value={searchValue}
-					onLayout={() => searchRef.current?.focus()}
+					onLayout={searchRef.current?.focus}
 					autoCapitalize="none"
 					onChangeText={setSearchValue}
 					onSubmitEditing={() => handleSearchSubmit(searchValue)}
 					style={styles.search}
 				/>
 			</View>
 
-			<Text variant="headlineLarge" style={styles.cardHeader}>
-				Histories
-			</Text>
-
 			<Histories onItemPress={handleSearchSubmit} flag={flag} />
 
 			<Text variant="headlineLarge" style={styles.cardHeader}>
@@ -90,37 +87,46 @@ export default function SearchScreen() {
 	)
 }
 
-function Histories({ onItemPress, flag }: { flag: boolean; onItemPress: (query: string) => void }) {
+type HistoriesProps = {
+	flag: boolean
+	onItemPress: (query: string) => void
+}
+function Histories({ onItemPress, flag }: HistoriesProps) {
 	const [histories, setHistories] = useState<string[]>([])
 	const nonDuplicateHistories = Array.from(new Set(histories))
 
-	function getHistories() {
-		History.get().then(data => {
-			setHistories(data)
-		})
+	const getHistories = () => {
+		History.get().then(data => setHistories(data))
 	}
 
-	function removeHistory(query: string) {
+	const removeHistory = (query: string) => {
 		History.remove(query)
 		setHistories(histories.filter(history => history != query))
 	}
 
 	useEffect(getHistories, [flag])
 
+	if (histories.length === 0) return null
+
 	return (
-		<View style={styles.historiesContainer}>
-			{nonDuplicateHistories.map((query, index) => (
-				<Chip
-					key={index}
-					style={styles.history}
-					mode="outlined"
-					onClose={() => removeHistory(query)}
-					onPress={() => onItemPress(query)}
-				>
-					{query}
-				</Chip>
-			))}
-		</View>
+		<>
+			<Text variant="headlineLarge" style={styles.cardHeader}>
+				Histories
+			</Text>
+			<View style={styles.historiesContainer}>
+				{nonDuplicateHistories.map((query, index) => (
+					<Chip
+						key={index}
+						style={styles.history}
+						mode="outlined"
+						onClose={() => removeHistory(query)}
+						onPress={() => onItemPress(query)}
+					>
+						{query}
+					</Chip>
+				))}
+			</View>
+		</>
 	)
 }
 

src/pages/user/user_collection.tsx

@@ -8,11 +8,12 @@ import { Screens } from "../../navigations/screen_name"
 import { BaseGroup } from "../../service/unsplash/models"
 
 export default function UserCollection() {
-	const route = useUserCollectionsRoute()
-	const user = route.params.user
 	const { width } = Dimensions.get("window")
-	const navigation = useAppNavigation()
 	const { top, bottom } = useSafeAreaInsets()
+
+	const route = useUserCollectionsRoute()
+	const navigation = useAppNavigation()
+	const user = route.params.user
 	const { isLoading, collections, loadMore } = useUserCollections(user.username)
 
 	const handleItemPress = (collection: BaseGroup) =>

src/service/unsplash/service/current_user.ts

@@ -7,7 +7,7 @@ const CurrentUserService = {
 		return response.data
 	},
 	update: async (params: UpdateUserProfieParams) => {
-		const response = await API.put<FullUser>("/me", { params })
+		const response = await API.put<FullUser>("/me", undefined, { params })
 		return response.data
 	},
 }