search.tsx use-debounce

This commit is contained in:
dimitar 2025-01-05 13:21:56 +01:00
parent 2e84813f49
commit ff0bb63367
6 changed files with 108 additions and 29 deletions

View File

@ -1,20 +1,26 @@
import { Link } from "expo-router";
import { Text, View } from "react-native";
import {Image, SafeAreaView, Text, View} from "react-native";
import images from "@/constants/images";
import icons from "@/constants/icons";
import search from "@/components/Search";
import Search from "@/components/Search";
export default function Index() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text className="font-bold my-10 uppercase">Welcome to mobile.mk</Text>
{/*<Link href="/signin">SignIn</Link>*/}
{/*<Link href="/explore">explore</Link>*/}
{/*<Link href="/profile">profile</Link>*/}
{/*<Link href="/cars/1">car</Link>*/}
</View>
<SafeAreaView className={'bg-white h-full'}>
<View className={'px-5'}>
<Search />
<View className={'flex flex-row items-center justify-between mt-5'}>
<View className={'flex flex-row items-cente'}>
<Image source={images.car1} className={'rounded-full size-24'}/>
<View className={'flex flex-col items-start ml-2 justify-center'}>
<Text>good morning</Text>
<Text>pero</Text>
</View>
</View>
<Image source={icons.bell} className={'size-6'}/>
</View>
</View>
</SafeAreaView>
);
}

View File

@ -1,10 +1,39 @@
import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity} from "react-native";
import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity, ImageSourcePropType, Alert} from "react-native";
import React from "react";
import icons from "@/constants/icons"
import images from "@/constants/images";
import {settings} from "@/constants/data";
import {useGlobalContext} from "@/lib/globalProvider";
import {logOut} from "@/lib/appwrite";
import {parseJson} from "ajv/dist/runtime/parseJson";
import message = parseJson.message;
interface SettingsItemsProps{
icon: ImageSourcePropType,
title: string,
onPress?: () => void,
textStyle?: string,
showArrow?: boolean,
}
const SettingsItems = ({icon, title, onPress, textStyle, showArrow = true } : SettingsItemsProps) => (
<TouchableOpacity onPress={onPress} className={'flex flex-row justify-between py-3'}>
<View className={'flex flex-row items-center gap-3'}>
<Image source={icon} className={'size-6'}/>
<Text>{title}</Text>
</View>
{showArrow && <Image source={icons.rightArrow} className={'size-5'}/>}
</TouchableOpacity>
)
const Profile = () => {
const handleLogout = async () => {};
const {user, refetch} = useGlobalContext();
const handleLogout = async () => {
const result = await logOut();
if(result) {
Alert.alert('logged out')
refetch();
}
};
return (
<SafeAreaView className={'h-full bg-white'}>
<ScrollView
@ -16,13 +45,28 @@ const Profile = () => {
</View>
<View className={'flex flex-row justify-center mt-5'}>
<View className={'flex flex-col items-center relative mt-5'}>
<Image source={images.car1} className={'size-44 relative rounded-full'}/>
<Image source={{uri: user?.avatar}}className={'size-44 relative rounded-full'}/>
<TouchableOpacity className={'absolute bottom-11 right-2'}>
<Image source={icons.edit} className={'size-9'}/>
</TouchableOpacity>
<Text>Dimitar -- test</Text>
<Text>{ user?.name}</Text>
</View>
</View>
<View className={'flex flex-col mt-10'}>
<SettingsItems icon = {icons.calendar} title={'MyCars - Возила'}/>
<SettingsItems icon = {icons.wallet} title={'Payments- Плаќања'}/>
</View>
<View className={'flex flex-col mt-5 border-t pt-5 border-blue-200'}>
{settings.slice(2).map((item, index ) => (
<SettingsItems key={index} {...item}/>
) )}
</View>
<View className={'flex flex-col mt-5 border-t pt-5 border-blue-200'}>
<SettingsItems icon={icons.logout} title={'Logout - Одјависе'} onPress={handleLogout} showArrow={false}/>
</View>
</ScrollView>
</SafeAreaView>
);

15
components/Search.tsx Normal file
View File

@ -0,0 +1,15 @@
import {View, Text} from 'react-native'
import React from 'react'
import {useLocalSearchParams, usePathname} from "expo-router";
const Search = () => {
const path = usePathname();
const params = useLocalSearchParams<{query?: string}>();
return (
<View>
<Text>Search</Text>
</View>
)
}
export default Search

View File

@ -71,12 +71,12 @@ export async function getCurrentUser() {
}
}
// export async function logOut(): Promise<boolean> {
// try {
// await account.deleteSession(sessionId: 'current');
// return true;
// } catch (error) {
// console.error("Failed to log out user:", error);
// return false;
// }
// }
export async function logOut(): Promise<boolean> {
try {
const result = await account.deleteSession('current');
return result
} catch (error) {
console.error("Failed to log out user:", error);
return false;
}
}

15
package-lock.json generated
View File

@ -35,7 +35,8 @@
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5",
"tailwindcss": "^3.4.17"
"tailwindcss": "^3.4.17",
"use-debounce": "^10.0.4"
},
"devDependencies": {
"@babel/core": "^7.25.2",
@ -17370,6 +17371,18 @@
"requires-port": "^1.0.0"
}
},
"node_modules/use-debounce": {
"version": "10.0.4",
"resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
"integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
"license": "MIT",
"engines": {
"node": ">= 16.0.0"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/use-latest-callback": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.2.3.tgz",

View File

@ -42,7 +42,8 @@
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5",
"tailwindcss": "^3.4.17"
"tailwindcss": "^3.4.17",
"use-debounce": "^10.0.4"
},
"devDependencies": {
"@babel/core": "^7.25.2",