99 lines
2.8 KiB
TypeScript
99 lines
2.8 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 { MD3LightTheme, 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);
|
|
|
|
const theme = {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: "#1890ff",
|
|
accent: "tomato",
|
|
},
|
|
};
|
|
|
|
export default function AppLayout() {
|
|
return (
|
|
<Provider store={store}>
|
|
<PersistGate persistor={persistor}>
|
|
<ApolloProvider client={client}>
|
|
<PaperProvider theme={theme}>
|
|
<ConnectedAppContent />
|
|
</PaperProvider>
|
|
</ApolloProvider>
|
|
</PersistGate>
|
|
</Provider>
|
|
);
|
|
}
|