Skip to content

Commit

Permalink
ch(#44): add redirect handler (#47)
Browse files Browse the repository at this point in the history
fix: login labels
  • Loading branch information
fredshema authored Oct 7, 2024
1 parent 1a47570 commit c2d89b9
Show file tree
Hide file tree
Showing 15 changed files with 346 additions and 4,499 deletions.
7 changes: 3 additions & 4 deletions __tests__/components/sidebar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('Sidebar', () => {
const attendanceItem = getByText('Attendance').parent;
expect(attendanceItem?.props.style).toEqual(
expect.objectContaining({
backgroundColor: expect.stringContaining('indigo')
backgroundColor: expect.stringContaining('indigo'),
})
);
});
Expand All @@ -56,11 +56,10 @@ describe('Sidebar', () => {
it('navigates and closes sidebar when an item is pressed', async () => {
const { getByText } = render(<Sidebar onClose={mockOnClose} />);
fireEvent.press(getByText('Attendance'));

await waitFor(() => {
expect(mockPush).toHaveBeenCalledWith('/dashboard/trainee');
expect(mockOnClose).toHaveBeenCalled();
});
});

});
});
5 changes: 4 additions & 1 deletion app/(onboarding)/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@ export default function AppOnboarding() {
</View>
<View className={`flex-1 flex-row justify-center items-center ${bgColor}`}>
<TouchableOpacity>
<Text className={`text-lg font-Inter-Medium ${textColor}`} onPress={() => router.push('/auth/login')}>
<Text
className="text-lg font-Inter-Medium dark:text-white"
onPress={() => router.push('/redirect?path=/auth/login&dest=app')}
>
Get Started
</Text>
</TouchableOpacity>
Expand Down
44 changes: 17 additions & 27 deletions app/+not-found.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,30 @@
import { Link } from 'expo-router';
import { StyleSheet } from 'react-native';

import { Text, View } from '@/components/Themed';
import React from 'react';
import { Image } from 'expo-image';

export default function NotFoundScreen() {
return (
<>
<View style={styles.container}>
<Text style={styles.title}>This screen doesn't exist.</Text>
<View className="flex-1 justify-center items-center p-8">
<View className="h-60 w-full mb-10">
<Image
source={require('@/assets/images/page_not_found.svg')}
contentFit="contain"
className="mb-6 justify-center items-end"
style={{ width: '100%', flex: 1 }}
/>
</View>
<Text className="text-2xl font-Inter-Bold dark:text-white text-center max-w-64">
Oops! We can't find the page you're looking for.
</Text>

<Link href="/" style={styles.link}>
<Text style={styles.linkText}>Go to home screen!</Text>
<Link href="/" className="mt-12">
<View className="py-4 px-6 bg-action-500 rounded-full">
<Text className="text-lg text-white">Go to home screen!</Text>
</View>
</Link>
</View>
</>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
link: {
marginTop: 15,
paddingVertical: 15,
},
linkText: {
fontSize: 14,
color: '#2e78b7',
},
});
16 changes: 8 additions & 8 deletions app/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ function RootLayoutNav() {

return (
<ApolloProvider client={client}>
<ToastProvider>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(onboarding)" options={{ headerShown: false }} />
<Stack.Screen name="auth" options={{ headerShown: false }} />
<Stack.Screen name="dashboard" options={{ headerShown: false }}/>
</Stack>
</ThemeProvider>
<ToastProvider placement="top" duration={5000}>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="(onboarding)" options={{ headerShown: false }} />
<Stack.Screen name="auth" options={{ headerShown: false }} />
<Stack.Screen name="dashboard" options={{ headerShown: false }} />
</Stack>
</ThemeProvider>
</ToastProvider>
</ApolloProvider>
);
Expand Down
19 changes: 12 additions & 7 deletions app/auth/register.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ import {
ActivityIndicator,
Alert,
TextInput,
ToastAndroid,
TouchableOpacity,
useColorScheme,
} from 'react-native';
import { SvgXml } from 'react-native-svg';
import { useToast } from 'react-native-toast-notifications';

type FormValues = {
firstName: string;
Expand All @@ -44,6 +44,7 @@ type RegisterResponse = {

export default function RegisterForm() {
const router = useRouter();
const toast = useToast();
const params = useLocalSearchParams();
const colorScheme = useColorScheme();

Expand All @@ -69,7 +70,9 @@ export default function RegisterForm() {
} else {
router.push('/dashboard/trainee');
}
} catch (err) {}
} catch (err) {
toast.show('Invalid token or expired token', { type: 'danger' });
}
}
};

Expand All @@ -94,19 +97,19 @@ export default function RegisterForm() {
});

if (data) {
ToastAndroid.show('Successfully registered', ToastAndroid.LONG);
toast.show('Successfully registered', { type: 'success' });
await AsyncStorage.setItem('org_token', data.createUser.token);
router.push('/auth/login');
}

if (errors) {
ToastAndroid.show(errors[0].message, ToastAndroid.LONG);
toast.show(errors[0].message, { type: 'danger' });
}
} catch (error) {
if (error instanceof ApolloError) {
ToastAndroid.show(`Error: ${error.message}`, ToastAndroid.LONG);
toast.show(`Error: ${error.message}`, { type: 'danger' });
} else {
ToastAndroid.show(`Error: Unknown error`, ToastAndroid.LONG);
toast.show(`Error: Unknown error`, { type: 'danger' });
}
}
setLoading(false);
Expand All @@ -121,7 +124,9 @@ export default function RegisterForm() {
setEmail(parsedToken.email);
setOrgName(parsedToken.name);
}
} catch (err) {}
} catch (err) {
toast.show('Invalid token or expired token', { type: 'danger' });
}
}, []);

return (
Expand Down
39 changes: 25 additions & 14 deletions app/dashboard/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
import { lightLogoIcon, darkLogoIcon, menu, lightNotifyIcon, darkNotifyIcon } from '@/assets/Icons/dashboard/Icons';
import {
lightLogoIcon,
darkLogoIcon,
menu,
lightNotifyIcon,
darkNotifyIcon,
} from '@/assets/Icons/dashboard/Icons';
import { Slot } from 'expo-router';
import { useEffect, useState } from 'react';
import { KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity, View, useColorScheme, Image } from 'react-native';
import {
KeyboardAvoidingView,
Platform,
ScrollView,
TouchableOpacity,
View,
useColorScheme,
Image,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { SvgXml } from 'react-native-svg';
import Sidebar from '@/components/sidebar';
Expand All @@ -13,7 +27,6 @@ export default function AuthLayout() {

const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);


return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
Expand All @@ -39,17 +52,17 @@ export default function AuthLayout() {
<TouchableOpacity onPress={toggleSidebar}>
<SvgXml xml={menu} width={40} height={40} />
</TouchableOpacity>
<SvgXml
xml={colorScheme === 'dark' ? darkLogoIcon : lightLogoIcon}
width={100}
height={40}
/>
<SvgXml
xml={colorScheme === 'dark' ? darkLogoIcon : lightLogoIcon}
width={100}
height={40}
/>
</View>
<View className="flex-row gap-5">
<TouchableOpacity>
<SvgXml
xml={colorScheme === 'dark' ? darkNotifyIcon : lightNotifyIcon}
width={25}
<SvgXml
xml={colorScheme === 'dark' ? darkNotifyIcon : lightNotifyIcon}
width={25}
height={40}
/>
</TouchableOpacity>
Expand All @@ -67,9 +80,7 @@ export default function AuthLayout() {
</ScrollView>
{isSidebarOpen && (
<View className="absolute top-0 left-0 bottom-0">
<Sidebar
onClose={toggleSidebar}
/>
<Sidebar onClose={toggleSidebar} />
</View>
)}
</KeyboardAvoidingView>
Expand Down
4 changes: 3 additions & 1 deletion app/dashboard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ const Dashboard = () => {
const colorScheme = useColorScheme();
return (
<View>
<Text className={`ml-2 text-base ${colorScheme === 'light' ? 'text-black' : 'text-white'}`}>Dashboard Coming soon</Text>
<Text className={`ml-2 text-base ${colorScheme === 'light' ? 'text-black' : 'text-white'}`}>
Dashboard Coming soon
</Text>
</View>
);
};
Expand Down
51 changes: 51 additions & 0 deletions app/redirect.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Text, View } from '@/components/Themed';
import { Href, Link, useLocalSearchParams, useRouter } from 'expo-router';
import { useEffect } from 'react';
import { Linking } from 'react-native';
import { useToast } from 'react-native-toast-notifications';

type RedirectParams = {
path: string;
dest: 'app' | 'web';
};

export default function Redirect() {
const router = useRouter();
const toast = useToast();
const { path, dest } = useLocalSearchParams<RedirectParams>();

useEffect(() => {
(async () => {
if (!path) {
router.replace('/');
return;
}

if (dest === 'web') {
try {
const url = path.startsWith('http') ? path : `https://${path}`;
await Linking.openURL(url);
} catch (error) {
toast.show('Unable to open link', {
type: 'danger',
duration: 5000,
placement: 'top',
});
}
} else {
router.replace(path as Href);
}
})();
}, [path, dest]);

return (
<View className="flex-1 items-center justify-center">
<Text className="text-xl dark:text-white">Redirecting...</Text>
<Link href="/" className="mt-12">
<View className="py-3 px-4 bg-action-500 rounded-full">
<Text className="text-lg text-white">Go to home screen!</Text>
</View>
</Link>
</View>
);
}
1 change: 0 additions & 1 deletion assets/Icons/auth/Icons.tsx

Large diffs are not rendered by default.

Loading

0 comments on commit c2d89b9

Please sign in to comment.