2022-06-30 06:50:52 +00:00
|
|
|
import {
|
2022-07-15 06:06:33 +00:00
|
|
|
DarkTheme as NavigationDarkTheme,
|
|
|
|
DefaultTheme as NavigationDefaultTheme,
|
2022-07-03 01:50:01 +00:00
|
|
|
NavigationContainer,
|
2023-08-12 03:22:50 +00:00
|
|
|
} from "@react-navigation/native";
|
|
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|
|
|
import { DeviceEventEmitter, useColorScheme } from "react-native";
|
2022-07-06 09:03:56 +00:00
|
|
|
import {
|
2023-07-15 01:21:09 +00:00
|
|
|
MD3DarkTheme as PaperDarkTheme,
|
|
|
|
MD3LightTheme as PaperDefaultTheme,
|
2022-10-29 23:56:58 +00:00
|
|
|
Provider as PaperProvider,
|
2022-11-01 02:55:37 +00:00
|
|
|
Snackbar,
|
2023-08-12 03:22:50 +00:00
|
|
|
} from "react-native-paper";
|
|
|
|
import MaterialIcon from "react-native-vector-icons/MaterialIcons";
|
|
|
|
import { AppDataSource } from "./data-source";
|
|
|
|
import { settingsRepo } from "./db";
|
|
|
|
import Routes from "./Routes";
|
|
|
|
import { TOAST } from "./toast";
|
|
|
|
import { ThemeContext } from "./use-theme";
|
2022-07-03 01:50:01 +00:00
|
|
|
|
2022-08-26 01:54:51 +00:00
|
|
|
export const CombinedDefaultTheme = {
|
2022-07-15 06:06:33 +00:00
|
|
|
...NavigationDefaultTheme,
|
2022-09-24 03:59:52 +00:00
|
|
|
...PaperDefaultTheme,
|
2022-07-15 06:06:33 +00:00
|
|
|
colors: {
|
|
|
|
...NavigationDefaultTheme.colors,
|
2022-09-24 03:59:52 +00:00
|
|
|
...PaperDefaultTheme.colors,
|
2022-07-15 06:06:33 +00:00
|
|
|
},
|
2023-08-12 03:22:50 +00:00
|
|
|
};
|
2022-10-14 04:24:02 +00:00
|
|
|
|
2022-08-26 01:54:51 +00:00
|
|
|
export const CombinedDarkTheme = {
|
2022-07-15 06:06:33 +00:00
|
|
|
...NavigationDarkTheme,
|
2022-09-24 03:59:52 +00:00
|
|
|
...PaperDarkTheme,
|
2022-07-15 06:06:33 +00:00
|
|
|
colors: {
|
|
|
|
...NavigationDarkTheme.colors,
|
2022-09-24 03:59:52 +00:00
|
|
|
...PaperDarkTheme.colors,
|
2022-07-15 06:06:33 +00:00
|
|
|
},
|
2023-08-12 03:22:50 +00:00
|
|
|
};
|
2022-07-15 06:06:33 +00:00
|
|
|
|
2022-07-01 01:42:42 +00:00
|
|
|
const App = () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
const phoneTheme = useColorScheme();
|
|
|
|
const [initialized, setInitialized] = useState(false);
|
|
|
|
const [snackbar, setSnackbar] = useState("");
|
|
|
|
const [appTheme, setAppTheme] = useState("system");
|
2022-11-01 03:11:39 +00:00
|
|
|
|
2022-11-26 00:15:12 +00:00
|
|
|
const [lightColor, setLightColor] = useState<string>(
|
2023-08-12 03:22:50 +00:00
|
|
|
CombinedDefaultTheme.colors.primary
|
|
|
|
);
|
2022-11-26 00:15:12 +00:00
|
|
|
|
|
|
|
const [darkColor, setDarkColor] = useState<string>(
|
2023-08-12 03:22:50 +00:00
|
|
|
CombinedDarkTheme.colors.primary
|
|
|
|
);
|
2022-10-04 01:35:56 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
2023-08-12 03:22:50 +00:00
|
|
|
(async () => {
|
|
|
|
if (!AppDataSource.isInitialized) await AppDataSource.initialize();
|
|
|
|
const settings = await settingsRepo.findOne({ where: {} });
|
|
|
|
setAppTheme(settings.theme);
|
|
|
|
if (settings.lightColor) setLightColor(settings.lightColor);
|
|
|
|
if (settings.darkColor) setDarkColor(settings.darkColor);
|
|
|
|
setInitialized(true);
|
|
|
|
})();
|
2022-11-03 07:04:15 +00:00
|
|
|
const description = DeviceEventEmitter.addListener(
|
|
|
|
TOAST,
|
2023-06-27 03:16:59 +00:00
|
|
|
({ value }: { value: string }) => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setSnackbar(value);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
return description.remove;
|
|
|
|
}, []);
|
2022-10-04 01:35:56 +00:00
|
|
|
|
2022-11-01 03:50:03 +00:00
|
|
|
const paperTheme = useMemo(() => {
|
2022-11-26 00:15:12 +00:00
|
|
|
const darkTheme = lightColor
|
2022-10-31 08:32:33 +00:00
|
|
|
? {
|
2023-08-12 03:22:50 +00:00
|
|
|
...CombinedDarkTheme,
|
|
|
|
colors: { ...CombinedDarkTheme.colors, primary: darkColor },
|
|
|
|
}
|
|
|
|
: CombinedDarkTheme;
|
2022-11-26 00:15:12 +00:00
|
|
|
const lightTheme = lightColor
|
2022-10-31 08:32:33 +00:00
|
|
|
? {
|
2023-08-12 03:22:50 +00:00
|
|
|
...CombinedDefaultTheme,
|
|
|
|
colors: { ...CombinedDefaultTheme.colors, primary: lightColor },
|
|
|
|
}
|
|
|
|
: CombinedDefaultTheme;
|
|
|
|
let value = phoneTheme === "dark" ? darkTheme : lightTheme;
|
|
|
|
if (appTheme === "dark") value = darkTheme;
|
|
|
|
else if (appTheme === "light") value = lightTheme;
|
|
|
|
return value;
|
|
|
|
}, [phoneTheme, appTheme, lightColor, darkColor]);
|
2022-11-01 03:08:02 +00:00
|
|
|
|
2022-06-30 06:50:52 +00:00
|
|
|
return (
|
2022-10-31 08:32:33 +00:00
|
|
|
<PaperProvider
|
2022-11-01 03:50:03 +00:00
|
|
|
theme={paperTheme}
|
2023-06-27 03:16:59 +00:00
|
|
|
settings={{ icon: (props) => <MaterialIcon {...props} /> }}
|
|
|
|
>
|
2022-11-01 03:50:03 +00:00
|
|
|
<NavigationContainer theme={paperTheme}>
|
2022-11-01 02:55:37 +00:00
|
|
|
{initialized && (
|
2022-11-26 00:15:12 +00:00
|
|
|
<ThemeContext.Provider
|
|
|
|
value={{
|
2023-07-17 04:21:56 +00:00
|
|
|
theme: appTheme,
|
|
|
|
setTheme: setAppTheme,
|
2022-11-26 00:15:12 +00:00
|
|
|
lightColor,
|
|
|
|
setLightColor,
|
|
|
|
darkColor,
|
|
|
|
setDarkColor,
|
2023-06-27 03:16:59 +00:00
|
|
|
}}
|
|
|
|
>
|
2022-11-01 02:55:37 +00:00
|
|
|
<Routes />
|
2022-11-01 03:50:03 +00:00
|
|
|
</ThemeContext.Provider>
|
2022-11-01 02:55:37 +00:00
|
|
|
)}
|
2022-10-31 08:32:33 +00:00
|
|
|
</NavigationContainer>
|
2022-11-01 02:55:37 +00:00
|
|
|
|
|
|
|
<Snackbar
|
|
|
|
duration={3000}
|
2023-08-12 03:22:50 +00:00
|
|
|
onDismiss={() => setSnackbar("")}
|
2022-11-01 02:55:37 +00:00
|
|
|
visible={!!snackbar}
|
2023-07-17 04:21:56 +00:00
|
|
|
action={{
|
2023-08-12 03:22:50 +00:00
|
|
|
label: "Close",
|
|
|
|
onPress: () => setSnackbar(""),
|
2023-07-17 04:21:56 +00:00
|
|
|
textColor: paperTheme.colors.background,
|
|
|
|
}}
|
2023-06-27 03:16:59 +00:00
|
|
|
>
|
2022-11-01 02:55:37 +00:00
|
|
|
{snackbar}
|
|
|
|
</Snackbar>
|
2022-10-31 08:32:33 +00:00
|
|
|
</PaperProvider>
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
|
|
|
};
|
2022-06-30 06:50:52 +00:00
|
|
|
|
2023-08-12 03:22:50 +00:00
|
|
|
export default App;
|