admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic routing implementation.

Browse Source
This commit is contained in:
Patrick Fic
2025-10-07 15:35:03 -07:00
parent befa06a6b5
commit b8261f001e
14 changed files with 127 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app.json
View File

@@ -65,6 +65,12 @@
}, },
"description": "", "description": "",
"plugins": [ "plugins": [
[
"expo-dev-client",
{
"launchMode": "most-recent"
}
],
[ [
"expo-media-library", "expo-media-library",
{ {

35
app/(tabs)/_layout.tsx
View File

@@ -1,35 +0,0 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
tabBarButton: HapticTab,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
}}
/>
</Tabs>
);
}

112
app/(tabs)/explore.tsx
View File

@@ -1,112 +0,0 @@
import { Image } from 'expo-image';
import { Platform, StyleSheet } from 'react-native';
import { Collapsible } from '@/components/ui/collapsible';
import { ExternalLink } from '@/components/external-link';
import ParallaxScrollView from '@/components/parallax-scroll-view';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Fonts } from '@/constants/theme';
export default function TabTwoScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
headerImage={
<IconSymbol
size={310}
color="#808080"
name="chevron.left.forwardslash.chevron.right"
style={styles.headerImage}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText
type="title"
style={{
fontFamily: Fonts.rounded,
}}>
Explore
</ThemedText>
</ThemedView>
<ThemedText>This app includes example code to help you get started.</ThemedText>
<Collapsible title="File-based routing">
<ThemedText>
This app has two screens:{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
</ThemedText>
<ThemedText>
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
sets up the tab navigator.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/router/introduction">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Android, iOS, and web support">
<ThemedText>
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
</ThemedText>
</Collapsible>
<Collapsible title="Images">
<ThemedText>
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
different screen densities
</ThemedText>
<Image
source={require('@/assets/images/react-logo.png')}
style={{ width: 100, height: 100, alignSelf: 'center' }}
/>
<ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Light and dark mode components">
<ThemedText>
This template has light and dark mode support. The{' '}
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Animations">
<ThemedText>
This template includes an example of an animated component. The{' '}
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
the powerful{' '}
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
react-native-reanimated
</ThemedText>{' '}
library to create a waving hand animation.
</ThemedText>
{Platform.select({
ios: (
<ThemedText>
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
component provides a parallax effect for the header image.
</ThemedText>
),
})}
</Collapsible>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'row',
gap: 8,
},
});

98
app/(tabs)/index.tsx
View File

@@ -1,98 +0,0 @@
import { Image } from 'expo-image';
import { Platform, StyleSheet } from 'react-native';
import { HelloWave } from '@/components/hello-wave';
import ParallaxScrollView from '@/components/parallax-scroll-view';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { Link } from 'expo-router';
export default function HomeScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
{Platform.select({
ios: 'cmd + d',
android: 'cmd + m',
web: 'F12',
})}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<Link href="/modal">
<Link.Trigger>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
</Link.Trigger>
<Link.Preview />
<Link.Menu>
<Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
<Link.MenuAction
title="Share"
icon="square.and.arrow.up"
onPress={() => alert('Share pressed')}
/>
<Link.Menu title="More" icon="ellipsis">
<Link.MenuAction
title="Delete"
icon="trash"
destructive
onPress={() => alert('Delete pressed')}
/>
</Link.Menu>
</Link.Menu>
</Link>
<ThemedText>
{`Tap the Explore tab to learn more about what's included in this starter app.`}
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
{`When you're ready, run `}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});

45
app/_layout.tsx
View File

@@ -1,24 +1,31 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import { ApolloProvider } from "@apollo/client";
import { Stack } from 'expo-router'; import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
import { StatusBar } from 'expo-status-bar'; import { useTranslation } from "react-i18next";
import 'react-native-reanimated'; import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { client } from "../graphql/client";
import { persistor, store } from "../redux/store";
import "../translations/i18n";
import { useColorScheme } from '@/hooks/use-color-scheme'; export default function TabLayout() {
const { t } = useTranslation();
export const unstable_settings = {
anchor: '(tabs)',
};
export default function RootLayout() {
const colorScheme = useColorScheme();
return ( return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <Provider store={store}>
<Stack> <PersistGate persistor={persistor}>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <ApolloProvider client={client}>
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} /> <NativeTabs>
</Stack> <NativeTabs.Trigger name="jobs">
<StatusBar style="auto" /> <Label>{t("joblist.labels.activejobs")}</Label>
</ThemeProvider> <Icon sf="checklist" drawable="custom_android_drawable" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
<Icon sf="gear" drawable="custom_settings_drawable" />
<Label>{t("settings.titles.settings")}</Label>
</NativeTabs.Trigger>
</NativeTabs>
</ApolloProvider>
</PersistGate>
</Provider>
); );
} }

5
app/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Redirect } from "expo-router";
export default function Index() {
return <Redirect href={`/jobs`} />;
}

20
app/jobs/[jobId].tsx Normal file
View File

@@ -0,0 +1,20 @@
import { useLocalSearchParams } from "expo-router";
import { StyleSheet, Text, View } from "react-native";
export default function JobDetail() {
const params = useLocalSearchParams();
return (
<View style={styles.container}>
<Text>Job Details for Job ID: {JSON.stringify(params)}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});

18
app/jobs/_layout.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { Stack } from "expo-router";
function JobsStack() {
return (
<Stack
screenOptions={{
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<Stack.Screen name="index" options={{ title: "Active Jobs" }} />
<Stack.Screen name="[jobId]" options={{ title: "Job Details" }} />
</Stack>
);
}
export default JobsStack;

24
app/jobs/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Link } from "expo-router";
import { StyleSheet, Text, View } from "react-native";
export default function Tab() {
return (
<View style={styles.container}>
<Text>Jobs Screen.</Text>
<Link
href={{ pathname: "/jobs/[jobId]", params: { jobId: 123 } }}
withAnchor
>
Go to detail
</Link>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});

29
app/modal.tsx
View File

@@ -1,29 +0,0 @@
import { Link } from 'expo-router';
import { StyleSheet } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
export default function ModalScreen() {
return (
<ThemedView style={styles.container}>
<ThemedText type="title">This is a modal</ThemedText>
<Link href="/" dismissTo style={styles.link}>
<ThemedText type="link">Go to home screen</ThemedText>
</Link>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
link: {
marginTop: 15,
paddingVertical: 15,
},
});

17
app/settings.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { StyleSheet, Text, View } from 'react-native';
export default function Tab() {
return (
<View style={styles.container}>
<Text>Tab [Home|Settings]</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

5
redux/user/user.sagas.js
View File

@@ -1,7 +1,6 @@
//import * as Analytics from "expo-firebase-analytics";//JF:commenting out the firebase analytics portion //import * as Analytics from "expo-firebase-analytics";//JF:commenting out the firebase analytics portion
import { signInWithEmailAndPassword, signOut } from "firebase/auth"; import { signInWithEmailAndPassword, signOut } from "firebase/auth";
import { all, call, put, takeLatest } from "redux-saga/effects"; import { all, call, put, takeLatest } from "redux-saga/effects";
import * as Sentry from '@sentry/react-native';
import { logImEXEvent } from "../../firebase/firebase.analytics"; import { logImEXEvent } from "../../firebase/firebase.analytics";
import { import {
auth, auth,
@@ -108,7 +107,7 @@ export function* onSignInSuccess() {
export function* signInSuccessSaga({ payload }) { export function* signInSuccessSaga({ payload }) {
try { try {
// Analytics.setUserId(payload.email);//JF:commenting out the firebase analytics portion // Analytics.setUserId(payload.email);//JF:commenting out the firebase analytics portion
//Sentry.setUser({ email: payload.email });
const shop = yield client.query({ query: QUERY_BODYSHOP }); const shop = yield client.query({ query: QUERY_BODYSHOP });
logImEXEvent("imexmobile_sign_in_success", payload); logImEXEvent("imexmobile_sign_in_success", payload);
@@ -123,7 +122,7 @@ export function* signInSuccessSaga({ payload }) {
// ); // );
} catch (error) { } catch (error) {
console.log("UH-OH. Couldn't get shop details.", error); console.log("UH-OH. Couldn't get shop details.", error);
Sentry.captureException(error);
} }
} }

11
util/document-upload.utility.js
View File

@@ -1,4 +1,4 @@
import * as Sentry from "@sentry/react-native";
import axios from "axios"; import axios from "axios";
import * as MediaLibrary from "expo-media-library"; import * as MediaLibrary from "expo-media-library";
import env from "../env"; import env from "../env";
@@ -6,12 +6,11 @@ import { client } from "../graphql/client";
import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries"; import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries";
import { axiosAuthInterceptorId } from "./CleanAxios"; import { axiosAuthInterceptorId } from "./CleanAxios";
//import { splitClient } from "../components/screen-main/screen-main.component"; //import { splitClient } from "../components/screen-main/screen-main.component";
import { File } from "expo-file-system";
//Context: currentUserEmail, bodyshop, jobid, invoiceid //Context: currentUserEmail, bodyshop, jobid, invoiceid
//Required to prevent headers from getting set and rejected from Cloudinary. //Required to prevent headers from getting set and rejected from Cloudinary.
var cleanAxios = axios.create(); let cleanAxios = axios.create();
cleanAxios.interceptors.request.eject(axiosAuthInterceptorId); cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
export const handleUpload = async (ev, context) => { export const handleUpload = async (ev, context) => {
@@ -49,7 +48,7 @@ export const handleUpload = async (ev, context) => {
} catch (error) { } catch (error) {
console.log("Error creating upload promise", error.message, error.stack); console.log("Error creating upload promise", error.message, error.stack);
if (onError) onError(error.message); if (onError) onError(error.message);
Sentry.captureException(error);
return { return {
success: false, success: false,
error: error.message, error: error.message,
@@ -91,7 +90,7 @@ export const uploadToImgproxy = async (
const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } =
signedURLResponse.data.signedUrls[0]; signedURLResponse.data.signedUrls[0];
var options = { let options = {
headers: { headers: {
"Content-Type": fileType, "Content-Type": fileType,
"Content-Length": file.size, "Content-Length": file.size,
@@ -133,7 +132,7 @@ export const uploadToImgproxy = async (
} catch (error) { } catch (error) {
console.log("Error uploading to S3", error.message, error.stack); console.log("Error uploading to S3", error.message, error.stack);
if (onError) onError(error.message); if (onError) onError(error.message);
Sentry.captureException(error);
return { return {
success: false, success: false,
error: error.message, error: error.message,

8
util/local-document-upload.utility.js
View File

@@ -1,8 +1,8 @@
import axios from "axios"; import axios from "axios";
import { store } from "../redux/store";
import mime from "mime";
import * as MediaLibrary from "expo-media-library"; import * as MediaLibrary from "expo-media-library";
import * as Sentry from "@sentry/react-native"; import mime from "mime";
import { store } from "../redux/store";
axios.interceptors.request.use( axios.interceptors.request.use(
function (config) { function (config) {
@@ -96,14 +96,12 @@ export const handleLocalUpload = async ({
}); });
} }
} catch (error) { } catch (error) {
Sentry.captureException(error);
console.log("Error uploading documents:", error.message); console.log("Error uploading documents:", error.message);
onError && onError({ error: error.message }); onError && onError({ error: error.message });
} }
} catch (error) { } catch (error) {
console.log("Uncaught error", error); console.log("Uncaught error", error);
Sentry.captureException(error);
onError && onError({ error: error.message }); onError && onError({ error: error.message });
} }