user search added

Author: MayankSingh173

src/components/Card/UserSearchCard/UserSerchCard.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {StyleSheet, View, TouchableOpacity} from 'react-native';
+import {UserInterface} from '../../../models/User/User';
+import {Text} from '@ui-kitten/components';
+import FastImage from 'react-native-fast-image';
+import {DEFAULT_AVATAR} from '../../../constants/Images/Images';
+import {RALEWAY_BOLD, RALEWAY_REGULAR} from '../../../constants/Fonts/Fonts';
+
+interface props {
+  user: UserInterface;
+  onPress: () => void;
+}
+
+const UserSerchCard = ({user, onPress}: props) => {
+  return (
+    <TouchableOpacity style={styles.main} onPress={onPress}>
+      <View style={styles.imgView}>
+        <FastImage
+          source={{uri: user.photoURL ? user.photoURL : DEFAULT_AVATAR}}
+          style={{flex: 1, height: 50, width: 50, borderRadius: 30}}
+        />
+      </View>
+      <View style={styles.content}>
+        <Text style={styles.name}>{user.name ? user.name : 'Robot'}</Text>
+        <Text style={styles.tagLine}>
+          {user.tagLine ? user.tagLine : 'Baithak user'}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  main: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  imgView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  content: {
+    flex: 4,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    //  borderBottomWidth: 0.3,
+    //  borderColor: 'grey',
+    //  paddingBottom: 15,
+  },
+  name: {
+    fontFamily: RALEWAY_BOLD,
+  },
+  tagLine: {
+    fontFamily: RALEWAY_REGULAR,
+    color: 'grey',
+  },
+});
+
+export default UserSerchCard;

src/components/Headers/GeneralHeader/GeneralHeader.tsx

@@ -20,13 +20,15 @@ interface props {
   onPressLeft: () => void;
   onPressRight?: () => void;
   rightIcon?: string;
+  onPressSearch: () => void;
 }
 const GeneralHeader: FC<props> = ({
   firebaseUser,
   heading,
   rightIcon,
   onPressLeft,
   onPressRight,
+  onPressSearch,
 }) => {
   const theme = useTheme();
   const appTheme = useSelector(
@@ -76,7 +78,7 @@ const GeneralHeader: FC<props> = ({
         )}
       </View>
       <View style={styles.searchBarView}>
-        <ShowSearchBar theme={appTheme} onPress={() => console.log('Search')} />
+        <ShowSearchBar theme={appTheme} onPress={onPressSearch} />
       </View>
     </View>
   );

src/components/Icons/Icons.tsx

@@ -17,6 +17,10 @@ export const PhoneIcon = (style: any) => (
   <Icon {...style} name="phone-outline" />
 );
 
+export const SearchIcon = (style: any) => (
+  <Icon {...style} name="search-outline" />
+);
+
 export const PlusIcon = (style: any) => <Icon {...style} name="plus" />;
 
 export const PasswordIcon = (style: any) => (

src/components/SearchBar/ShowSearchBar.tsx

@@ -36,7 +36,7 @@ const ShowSearchBar = (props: props) => {
 
 const themedStyles = StyleSheet.create({
   main: {
-    borderRadius: 30,
+    borderRadius: 10,
     padding: 8,
     paddingLeft: 10,
     flexDirection: 'row',

src/components/SearchBar/UserSearchBar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {Input} from '@ui-kitten/components';
+import {RALEWAY_MEDIUM} from '../../constants/Fonts/Fonts';
+import {SearchIcon} from '../Icons/Icons';
+
+interface props {
+  query: string;
+  handleQuery: (text: string) => void;
+  placeholder: string;
+  style: any;
+  autoFocus: boolean;
+}
+
+const UserSearchBar = ({
+  query,
+  handleQuery,
+  placeholder,
+  style,
+  autoFocus,
+}: props) => {
+  return (
+    <Input
+      textStyle={{fontFamily: RALEWAY_MEDIUM}}
+      style={[styles.input, style]}
+      status="basic"
+      placeholder={placeholder}
+      keyboardType="default"
+      accessoryLeft={SearchIcon}
+      value={query}
+      onChangeText={(text) => handleQuery(text)}
+      size="large"
+      autoFocus={autoFocus}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {},
+});
+
+export default UserSearchBar;

src/constants/Navigation/Navigation.ts

@@ -13,3 +13,6 @@ export const PROFILE_SCREEN = 'PROFILE_SCREEN';
 export const CREATE_MEET_SCREEN = 'CREATE_MEET_SCREEN';
 export const JOIN_MEET_SCREEN = 'JOIN_MEET_SCREEN';
 export const VIDEO_STREAM = 'VIDEO_STREAM';
+export const EDIT_PROFILE_SCREEN = 'EDIT_PROFILE_SCREEN';
+export const USER_SEARCH_SCREEN = 'USER_SEARCH_SCREEN';
+export const REMOTE_USER_SEARCH_SCREEN = 'REMOTE_USER_SEARCH_SCREEN';

src/hooks/User/useGetUserForProfile.ts

@@ -0,0 +1,96 @@
+import {useEffect, useState} from 'react';
+import Toast from 'react-native-toast-message';
+import {FAIL} from '../../constants/RemoteStates/remotestates';
+import {defaultUser, UserInterface} from '../../models/User/User';
+import {updateFirebaseUserStatus} from '../../store/User/actionCreator/addFirebaseUser';
+import {getRemoteUser} from '../../utils/User/Methods/getRemoteUser';
+import auth from '@react-native-firebase/auth';
+import {useDispatch} from 'react-redux';
+import {generalErrorN} from '../../components/Alerts/GeneralError';
+import {readAsync} from '../../utils/Firestore/read';
+
+const useGetUserForProfile = (uid: string) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [user, setUser] = useState<UserInterface>(defaultUser);
+  const [settingOpen, toggleSetting] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        const localUser = await readAsync('users', uid);
+        localUser && setUser(localUser as UserInterface);
+        setLoading(false);
+      } catch (error) {
+        console.log('Eror in profile fecthing', error);
+        setLoading(false);
+        Toast.show({
+          type: 'error',
+          position: 'top',
+          text1: 'Something went wrong 😔',
+          text2: 'Please try again!!',
+        });
+      }
+    };
+
+    fetchUser();
+  }, [uid]);
+
+  const storeDispatch = useDispatch();
+
+  const signOut = async () => {
+    try {
+      await auth().signOut();
+      Toast.show({
+        type: 'success',
+        position: 'top',
+        text1: 'Great Success✌',
+        text2: 'You have successfully logout ',
+      });
+      storeDispatch(updateFirebaseUserStatus(FAIL));
+    } catch (err) {
+      Toast.show({
+        type: 'error',
+        position: 'top',
+        text1: 'Something went wrong 😔',
+        text2: 'Please try again!!',
+      });
+      storeDispatch(updateFirebaseUserStatus(FAIL));
+      console.log('Error in log out', err);
+    }
+  };
+
+  const onSignOut = async () => {
+    generalErrorN(
+      {
+        title: 'Log Out',
+        textMessage: 'Are you sure you want to logout',
+        okText: 'Yes',
+      },
+      [
+        {
+          text: 'No',
+          onPress: () => {},
+        },
+        {
+          text: 'Yes',
+          onPress: signOut,
+        },
+      ],
+    );
+  };
+
+  const onClickSettings = () => {
+    toggleSetting(!settingOpen);
+  };
+
+  return {
+    loading,
+    user,
+    onSignOut,
+    settingOpen,
+    onClickSettings,
+  };
+};
+
+export default useGetUserForProfile;

src/hooks/User/useGetUsers.ts

@@ -0,0 +1,45 @@
+import {useEffect, useState} from 'react';
+import {UserInterface} from '../../models/User/User';
+import firestore from '@react-native-firebase/firestore';
+
+const useGetUsers = () => {
+  const [users, setUsers] = useState<UserInterface[]>();
+  const [filteredUsers, setFilteredUsers] = useState<UserInterface[]>();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [query, setQuery] = useState<string>('');
+
+  useEffect(() => {
+    const subscriber = firestore()
+      .collection('users')
+      .onSnapshot((querySnapshot) => {
+        const localUsers: UserInterface[] = [];
+        for (const doc of querySnapshot.docs) {
+          doc.exists && localUsers.push(doc.data() as UserInterface);
+        }
+        setUsers(localUsers);
+        setFilteredUsers(localUsers);
+        setLoading(false);
+      });
+
+    return () => subscriber();
+  }, []);
+
+  const handleQuery = (text: string) => {
+    const filterUsers = users?.filter((user) => {
+      return user.name
+        ? user.name.toLocaleLowerCase().indexOf(text.toLocaleLowerCase()) !== -1
+        : false;
+    });
+    setFilteredUsers(filterUsers);
+    setQuery(text);
+  };
+
+  return {
+    filteredUsers,
+    loading,
+    query,
+    handleQuery,
+  };
+};
+
+export default useGetUsers;

src/hooks/auth/useAuth.ts

@@ -69,9 +69,9 @@ const useAuth = () => {
               user.uid,
               Platform.OS,
               user.displayName ? user.displayName : 'Robot',
-              user.phoneNumber ? user.phoneNumber : DEFAULT_AVATAR,
+              user.phoneNumber ? user.phoneNumber : undefined,
               user.email ? user.email : '[email protected]',
-              user.photoURL ? user.photoURL : '',
+              user.photoURL ? user.photoURL : DEFAULT_AVATAR,
             );
           }
 

src/navigation/MainStackNavigator/MainStackNavigator.tsx

@@ -3,13 +3,20 @@ import {createStackNavigator} from '@react-navigation/stack';
 import MainTabNavigator from '../MainTabNavigator/MainTabNavigator';
 import {
   CREATE_MEET_SCREEN,
+  EDIT_PROFILE_SCREEN,
   JOIN_MEET_SCREEN,
   MAIN_TAB,
+  REMOTE_USER_SEARCH_SCREEN,
+  USER_SEARCH_SCREEN,
   VIDEO_STREAM,
 } from '../../constants/Navigation/Navigation';
 import CreateMeetScreen from '../../screens/Meeting/CreateMeetScreen/CreateMeetScreen';
 import JoinMeetScreen from '../../screens/Meeting/JoinMeetScreen/JoinMeetScreen';
 import VideoStream from '../../screens/Meeting/VideoStream/VideoStream';
+import EditProfileScreen from '../../screens/ProfileScreen/EditProfileScreen';
+import UserSearchScreen from '../../screens/Search/UserSearch/UserSearchScreen';
+import ProfileScreen from '../../screens/ProfileScreen/ProfileScreen';
+import RemoteProfileScreen from '../../screens/ProfileScreen/RemoteProfileScreen';
 
 const Stack = createStackNavigator();
 
@@ -20,6 +27,12 @@ const MainStackNavigator = () => {
       <Stack.Screen name={CREATE_MEET_SCREEN} component={CreateMeetScreen} />
       <Stack.Screen name={JOIN_MEET_SCREEN} component={JoinMeetScreen} />
       <Stack.Screen name={VIDEO_STREAM} component={VideoStream} />
+      <Stack.Screen name={EDIT_PROFILE_SCREEN} component={EditProfileScreen} />
+      <Stack.Screen name={USER_SEARCH_SCREEN} component={UserSearchScreen} />
+      <Stack.Screen
+        name={REMOTE_USER_SEARCH_SCREEN}
+        component={RemoteProfileScreen}
+      />
     </Stack.Navigator>
   );
 };