Files
imexmobile/app/_layout.tsx
2025-10-08 15:30:17 -07:00

137 lines
3.9 KiB
TypeScript

import { checkUserSession } from "@/redux/user/user.actions";
import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
import { ApolloProvider } from "@apollo/client";
import { Stack } from "expo-router";
import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, View } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import { connect, Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { createStructuredSelector } from "reselect";
import { client } from "../graphql/client";
import { persistor, store } from "../redux/store";
import "../translations/i18n";
function AuthenticatedLayout() {
const { t } = useTranslation();
return (
<NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
<NativeTabs.Trigger name="jobs">
<Label>{t("joblist.labels.activejobs")}</Label>
<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.Trigger name="search" role="search">
<Label>Search</Label>
</NativeTabs.Trigger>
</NativeTabs>
);
}
function UnauthenticatedLayout() {
return (
<Stack>
<Stack.Screen name="sign-in" options={{ headerShown: false }} />
</Stack>
);
}
function LoadingLayout() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<ActivityIndicator size="large" />
</View>
);
}
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
checkUserSession: () => dispatch(checkUserSession()),
});
function AppContent({ currentUser, checkUserSession, bodyshop }) {
useEffect(() => {
checkUserSession();
}, []);
if (currentUser.authorized === null) {
return <LoadingLayout />;
}
if (currentUser.authorized) {
return <AuthenticatedLayout />;
}
return <UnauthenticatedLayout />;
}
const ConnectedAppContent = connect(
mapStateToProps,
mapDispatchToProps
)(AppContent);
//Custom values were used as the overrides did not work.
const theme = {
colors: {
primary: "#005fae",
onPrimary: "#ffffff",
primaryContainer: "#d4e3ff",
onPrimaryContainer: "#001c3a",
secondary: "#545f71",
onSecondary: "#ffffff",
secondaryContainer: "#d8e3f8",
onSecondaryContainer: "#111c2b",
tertiary: "#00658d",
onTertiary: "#ffffff",
tertiaryContainer: "#c6e7ff",
onTertiaryContainer: "#001e2d",
error: "#ba1a1a",
onError: "#ffffff",
errorContainer: "#ffdad6",
onErrorContainer: "#410002",
background: "#fdfcff",
onBackground: "#1a1c1e",
surface: "#fdfcff",
onSurface: "#1a1c1e",
surfaceVariant: "#e0e2ec",
onSurfaceVariant: "#43474e",
outline: "#74777f",
outlineVariant: "#c3c6cf",
shadow: "#000000",
scrim: "#000000",
inverseSurface: "#2f3033",
inverseOnSurface: "#f1f0f4",
inversePrimary: "#a5c8ff",
elevation: {
level0: "transparent",
level1: "#f0f4fb",
level2: "#e9eff9",
level3: "#e1ebf6",
level4: "#dfe9f5",
level5: "#dae6f4",
},
surfaceDisabled: "rgba(26, 28, 30, 0.12)",
onSurfaceDisabled: "rgba(26, 28, 30, 0.38)",
backdrop: "rgba(45, 49, 56, 0.4)",
},
};
// ...existing code...
export default function AppLayout() {
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<ApolloProvider client={client}>
<PaperProvider theme={theme}>
<ConnectedAppContent />
</PaperProvider>
</ApolloProvider>
</PersistGate>
</Provider>
);
}