Skip to content

Commit

Permalink
available search org, fix some bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@doljko
doljko committed Mar 5, 2024
1 parent cd617ac commit 49df29e
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 79 deletions.
4 changes: 2 additions & 2 deletions src/features/Auth/AuthStack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import LoginScreen from 'auth/screens/LoginScreen';
import CreateAccountScreen from 'auth/screens/CreateAccountScreen';
import ConfigScreen from '../Shared/ConfigScreen';
import SignUpScreen from './screens/SignUpScreen';
import OrganizationSwitchScreen from './screens/OrganizationSwitchScreen';
import OrganizationSearchScreen from './screens/OrganizationSearchScreen';

const RootStack = createStackNavigator();

Expand All @@ -16,7 +16,7 @@ const AuthStack = ({ route }) => {
<RootStack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
<RootStack.Screen name="CreateAccount" component={CreateAccountScreen} options={{ headerShown: false }} />
<RootStack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }} />
<RootStack.Screen name="OrganizationSwitchScreen" component={OrganizationSwitchScreen} options={{ headerShown: false }} />
<RootStack.Screen name="OrganizationSearchScreen" component={OrganizationSearchScreen} options={{ headerShown: false }} />
<RootStack.Screen name="ConfigScreen" component={ConfigScreen} options={{ headerShown: false }} />
</RootStack.Navigator>
</SafeAreaProvider>
Expand Down
2 changes: 1 addition & 1 deletion src/features/Auth/screens/LoginScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ const LoginScreen = ({ navigation, route }) => {

{isNotAwaitingVerification && (
<View style={[tailwind('p-4'), config('ui.loginScreen.loginFormContainerStyle')]}>
<TouchableOpacity style={tailwind('mb-2')} onPress={() => navigation.navigate('OrganizationSwitchScreen')}>
<TouchableOpacity style={tailwind('mb-2')} onPress={() => navigation.navigate('OrganizationSearchScreen')}>
<View style={[tailwind('btn bg-gray-900 border border-gray-700'), config('ui.loginScreen.sendVerificationCodeButtonStyle')]}>
{isLoading && <ActivityIndicator size={'small'} color={getColorCode('text-blue-500')} style={tailwind('mr-2')} />}
<Text style={[tailwind('font-semibold text-gray-50 text-lg text-center'), config('ui.loginScreen.sendVerificationCodeButtonTextStyle')]}>
Expand Down
96 changes: 45 additions & 51 deletions src/features/Auth/screens/OrganizationSearchScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import OrderCard from 'components/OrderCard';
import { searchButtonStyle } from 'components/SearchButton';
import { useDriver, useFleetbase, useLocale, useMountedState } from 'hooks';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { ActivityIndicator, ScrollView, TextInput, View } from 'react-native';
import { useFleetbase } from 'hooks';
import React, { useEffect, useRef, useState } from 'react';
import { ActivityIndicator, FlatList, Platform, Text, TextInput, TouchableOpacity, View } from 'react-native';
import tailwind from 'tailwind';
import { debounce, getColorCode, isEmpty, logError, translate } from 'utils';
import { getColorCode, isEmpty } from 'utils';

const isAndroid = Platform.OS === 'android';

const OrganizationSwitchScreen = ({ navigation }) => {
const OrganizationSearchScreen = ({ navigation }) => {
const fleetbase = useFleetbase();
const isMounted = useMountedState();
const searchInput = useRef();
const [driver] = useDriver();
const [locale] = useLocale();

const [isLoading, setIsLoading] = useState(false);
const [results, setResults] = useState([]);
const [query, setQuery] = useState(null);
const [organizations, setOrganizations] = useState([]);
const [search, setSearch] = useState('');

const onOrderPress = useCallback(order => {
navigation.push('OrderScreen', { data: order.serialize() });
});

const fetchResults = useCallback(async (query, cb) => {
setIsLoading(true);

const adapter = fleetbase.getAdapter();
adapter.get('organizations');
const results = await adapter;
console.log('result::::', results);
setIsLoading(false);

if (typeof cb === 'function') {
cb(results);
const fetchOrganizations = async () => {
try {
const adapter = fleetbase.getAdapter();
const response = await adapter.get('organizations');
setOrganizations(response);
return response;
} catch (error) {
console.error('Error fetching organizations:', error);
return [];
}
});

const debouncedSearch = useCallback(
debounce((query, cb) => {
fetchResults(query, cb);
}, 600)
);
};

useEffect(() => {
if (isEmpty(query)) {
return setResults([]);
}
fetchOrganizations();
}, []);

debouncedSearch(query, setResults);
}, [query]);
const handleSearch = text => {
setSearch(text);
if (text === '') {
setResults([]);
} else {
const filteredOrganizations = organizations.filter(org => org.name.toLowerCase().includes(text.toLowerCase()));
setResults(filteredOrganizations);
}
};

console.log('[SearchScreen #results]', results);
const renderItem = ({ item }) => (
console.log("item", JSON.stringify(item)),
<View style={tailwind('p-4')}>
<TouchableOpacity style={tailwind('p-3 bg-gray-900 border border-gray-800 rounded-xl shadow-sm')} onPress={() => navigation.navigate('SignUp', { organization: item })}>
<View style={tailwind('flex-1 flex-col items-start')}>
<Text style={tailwind('text-gray-100')}>{item.name}</Text>
</View>
</TouchableOpacity>
</View>
);

return (
<View style={[tailwind('bg-gray-800 flex-1 relative pt-4')]}>
Expand All @@ -64,36 +64,30 @@ const OrganizationSwitchScreen = ({ navigation }) => {
</View>
<TextInput
ref={searchInput}
value={query}
onChangeText={setQuery}
value={search}
onChangeText={handleSearch}
autoComplete={'off'}
autoCorrect={false}
autoCapitalize={'none'}
autoFocus={isAndroid ? false : true}
clearButtonMode={'while-editing'}
textAlign={'left'}
style={tailwind('flex-1 h-full text-white rounded-md shadow-lg pr-2')}
placeholder={translate('Auth.OrganizationsScreen.searchInputPlaceholderText')}
style={tailwind('flex-1 h-full text-white')}
placeholder={'Search Organizations..'}
placeholderTextColor={getColorCode('text-gray-600')}
/>
{isLoading && (
<View style={tailwind('absolute inset-y-0 right-0 h-full items-center')}>
<View style={[tailwind('items-center justify-center flex-1 opacity-75 mr-10'), isEmpty(query) ? tailwind('mr-3.5') : null]}>
<View style={[tailwind('items-center justify-center flex-1 opacity-75 mr-10'), isEmpty(search) ? tailwind('mr-3.5') : null]}>
<ActivityIndicator color={getColorCode('text-gray-400')} />
</View>
</View>
)}
</View>
</View>

<ScrollView style={tailwind('px-4')} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
{results.map((order, index) => (
<OrderCard key={index} order={order} onPress={() => onOrderPress(order)} wrapperStyle={tailwind('px-0')} />
))}
<View style={tailwind('w-full h-40')}></View>
</ScrollView>
<FlatList data={results} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} contentContainerStyle={{ flexGrow: 1 }} />
</View>
);
};

export default OrganizationSwitchScreen;
export default OrganizationSearchScreen;
85 changes: 60 additions & 25 deletions src/features/Auth/screens/SignUpScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,62 @@
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { useNavigation } from '@react-navigation/native';
import PhoneInput from 'components/PhoneInput';
import { useFleetbase } from 'hooks';
import React, { useState } from 'react';
import { ActivityIndicator, Image, Keyboard, KeyboardAvoidingView, Pressable, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { deepGet, getColorCode, logError, translate } from 'utils';

import { getLocation } from 'utils/Geo';

import { ActivityIndicator, Keyboard, KeyboardAvoidingView, Pressable, Text, TextInput, TouchableOpacity, View } from 'react-native';
import Toast from 'react-native-toast-message';
import tailwind from 'tailwind';

import { getColorCode, translate } from 'utils';
const SignUpScreen = ({ route }) => {
const { organization } = route.params;

const fleetbase = useFleetbase();
const location = getLocation();
const navigation = useNavigation();

const SignUpScreen = ({ navigation }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [phone, setPhone] = useState(null);
const [error, setError] = useState();
const [isLoading, setIsLoading] = useState(false);

const saveDriver = () => {
const adapter = fleetbase.getAdapter();
adapter
.post('driver', {
name,
email,
phone,
company_uuid: organization.id,
})
.then(() => {
Toast.show({
type: 'success',
text1: `Successfully created`,
});
navigation.navigate('OrganizationSwitchScreen');
setIsLoading(false);
})
.catch(error => {
setIsLoading(false);
logError(error);
});
};

const validateInputs = () => {
if (!name || !phone || !email) {
setError('Please enter a required value.');
return false;
}
setError('');
return true;
};

return (
<View style={[tailwind('w-full h-full bg-gray-800')]}>
<Pressable onPress={Keyboard.dismiss} style={tailwind('w-full h-full relative')}>
Expand All @@ -28,8 +73,8 @@ const SignUpScreen = ({ navigation }) => {
<View style={tailwind('mb-4')}>
<Text style={tailwind('font-semibold text-base text-gray-50 mb-2')}>{translate('Auth.SignUpScreen.driverName')}</Text>
<TextInput
value={''}
onChangeText={''}
value={name}
onChangeText={setName}
keyboardType={'default'}
placeholder={translate('Auth.SignUpScreen.driverName')}
placeholderTextColor={getColorCode('text-gray-600')}
Expand All @@ -39,37 +84,27 @@ const SignUpScreen = ({ navigation }) => {
<View style={tailwind('mb-4')}>
<Text style={tailwind('font-semibold text-base text-gray-50 mb-2')}>{translate('Auth.SignUpScreen.email')}</Text>
<TextInput
value={''}
value={email}
onChangeText={setEmail}
keyboardType={'email-address'}
placeholder={translate('Auth.SignUpScreen.email')}
placeholderTextColor={getColorCode('text-gray-600')}
style={tailwind('form-input text-white')}
/>
</View>
<View style={tailwind('mb-4')}>
<Text style={tailwind('font-semibold text-base text-gray-50 mb-2')}>{translate('Auth.SignUpScreen.document')}</Text>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image style={{ width: 200, height: 200 }} />
<TouchableOpacity>
<View style={{ backgroundColor: 'blue', padding: 10, marginTop: 20 }}>
<Text style={{ color: 'white' }}>Select Image</Text>
</View>
</TouchableOpacity>
</View>
</View>

<View style={tailwind('mb-4')}>
<Text style={tailwind('font-semibold text-base text-gray-50 mb-2')}>{translate('Auth.SignUpScreen.phoneNumber')}</Text>
<PhoneInput value={''} onChangeText={''} />
<PhoneInput value={phone} onChangeText={setPhone} defaultCountry={location?.country} autoFocus={true} defaultCountryCode={deepGet(location, 'country', '+1')} />
</View>

<TouchableOpacity onPress={'saveProfile'} disabled={isLoading}>
<View style={tailwind('btn bg-gray-900 border border-gray-700 mt-14')}>
{isLoading && <ActivityIndicator color={getColorCode('text-gray-50')} style={tailwind('mr-2')} />}
<Text style={tailwind('font-semibold text-lg text-gray-50 text-center')}>{translate('Auth.SignUpScreen.saveButtonText')}</Text>
</View>
</TouchableOpacity>
<View style={tailwind('mb-4')}>
<TouchableOpacity onPress={saveDriver}>
<View style={tailwind('btn bg-gray-900 border border-gray-700 mt-14')}>
<Text style={tailwind('font-semibold text-lg text-gray-50 text-center')}>{translate('Auth.SignUpScreen.saveButtonText')}</Text>
</View>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
</Pressable>
Expand Down

0 comments on commit 49df29e

Please sign in to comment.