search.tsx use-debounce

app/(root)/(tabs)/index.tsx

@@ -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
+      <SafeAreaView className={'bg-white h-full'}>
-      style={{
+          <View className={'px-5'}>
-        flex: 1,
+              <Search />
-        justifyContent: "center",
+              <View className={'flex flex-row items-center justify-between mt-5'}>
-        alignItems: "center",
+                  <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 className="font-bold my-10 uppercase">Welcome to mobile.mk</Text>
+                          <Text>good morning</Text>
-      {/*<Link href="/signin">SignIn</Link>*/}
+                          <Text>pero</Text>
-      {/*<Link href="/explore">explore</Link>*/}
+                      </View>
-      {/*<Link href="/profile">profile</Link>*/}
+                  </View>
-      {/*<Link href="/cars/1">car</Link>*/}
+                  <Image source={icons.bell} className={'size-6'}/>
-    </View>
+              </View>
+          </View>
+      </SafeAreaView>
   );
 }

app/(root)/(tabs)/profile.tsx

@@ -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>
   );

components/Search.tsx

@@ -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

lib/appwrite.ts

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

package-lock.json

@@ -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",

package.json

@@ -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",