Files
notesnook/apps/theme-builder/src/app.tsx
2023-08-11 09:51:43 +05:00

82 lines
2.3 KiB
TypeScript

/*
This file is part of the Notesnook project (https://notesnook.com/)
Copyright (C) 2023 Streetwriters (Private) Limited
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useQueryParams } from "@notesnook/web/src/navigation";
import ThemeBuilder from "./components/theme-builder";
import { useEffect, useState } from "react";
import { Loader } from "@notesnook/web/src/components/loader";
import { Flex } from "@theme-ui/components";
import { useStore } from "@notesnook/web/src/stores/theme-store";
import {
loadThemeFromBase64,
loadThemeFromPullRequest,
loadThemeFromURL
} from "./utils/theme-loader";
export function App() {
const [isLoading, setIsLoading] = useState(false);
const [{ from_pr, from_url, from_base64 }] = useQueryParams();
useEffect(() => {
(async () => {
try {
setIsLoading(true);
await useStore.getState().init();
const theme = from_pr
? await loadThemeFromPullRequest(from_pr)
: from_url
? await loadThemeFromURL(from_url)
: from_base64
? loadThemeFromBase64(from_base64)
: null;
if (!theme) return;
useStore.getState().setTheme(theme);
} catch (e) {
console.error(e);
} finally {
setIsLoading(false);
}
})();
}, [from_pr, from_url, from_base64]);
return (
<Flex
sx={{
width: 260,
flexShrink: 0,
bg: "background",
display: "flex",
overflow: "hidden",
flexDirection: "column",
overflowY: "scroll",
pt: 2,
rowGap: 2,
borderLeft: "1px solid var(--border)",
zIndex: 1001
}}
>
{isLoading ? (
<Loader title="Downloading theme" text="Please wait..." />
) : (
<ThemeBuilder />
)}
</Flex>
);
}