kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-06-30 06:30:11 +02:00
Code

feat(frontend): server side rendering to improve performance

Browse Source
This commit is contained in:
Elias Schneider 2023-02-07 10:21:25 +01:00
parent 82f204e8a9
commit 38de022215
No known key found for this signature in database
GPG Key ID: 07E623B294202B6C
14 changed files with 137 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Meta.tsx
View File

@ -7,18 +7,20 @@ const Meta = ({
title: string;
description?: string;
}) => {
const metaTitle = `${title} - Pingvin Share`;
return (
<Head>
{/* TODO: Doesn't work because script get only executed on client side */}
<title>{title} - Pingvin Share</title>
<meta name="og:title" content={`${title} - Pingvin Share`} />
<title>{metaTitle}</title>
<meta name="og:title" content={metaTitle} />
<meta
name="og:description"
content={
description ?? "An open-source and self-hosted sharing platform."
}
/>
<meta name="twitter:title" content={`${title} - Pingvin Share`} />
<meta property="og:image" content="/img/opengraph-default.png" />
<meta name="twitter:title" content={metaTitle} />
<meta name="twitter:description" content={description} />
</Head>
);

1
frontend/src/components/account/ThemeSwitcher.tsx
View File

@ -18,7 +18,6 @@ const ThemeSwitcher = () => {
);
const { toggleColorScheme } = useMantineColorScheme();
const systemColorScheme = useColorScheme();
return (
<Stack>
<SegmentedControl

1
frontend/src/components/admin/configuration/AdminConfigTable.tsx
View File

@ -82,6 +82,7 @@ const AdminConfigTable = () => {
})
.catch(toast.axiosError);
}
config.refresh();
};
useEffect(() => {

10
frontend/src/components/auth/SignInForm.tsx
View File

@ -18,13 +18,12 @@ import * as yup from "yup";
import useConfig from "../../hooks/config.hook";
import useUser from "../../hooks/user.hook";
import authService from "../../services/auth.service";
import userService from "../../services/user.service";
import toast from "../../utils/toast.util";
const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
const config = useConfig();
const router = useRouter();
const { setUser } = useUser();
const { refreshUser } = useUser();
const [showTotp, setShowTotp] = React.useState(false);
const [loginToken, setLoginToken] = React.useState("");
@ -64,7 +63,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
});
setLoginToken(response.data["loginToken"]);
} else {
setUser(await userService.getCurrentUser());
await refreshUser();
router.replace(redirectPath);
}
})
@ -74,7 +73,10 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
const signInTotp = (email: string, password: string, totp: string) => {
authService
.signInTotp(email, password, totp, loginToken)
.then(() => window.location.replace("/"))
.then(async () => {
await refreshUser();
router.replace(redirectPath);
})
.catch((error) => {
if (error?.response?.data?.message == "Login token expired") {
toast.error("Login token expired");

7
frontend/src/components/auth/SignUpForm.tsx
View File

@ -15,13 +15,12 @@ import * as yup from "yup";
import useConfig from "../../hooks/config.hook";
import useUser from "../../hooks/user.hook";
import authService from "../../services/auth.service";
import userService from "../../services/user.service";
import toast from "../../utils/toast.util";
const SignUpForm = () => {
const config = useConfig();
const router = useRouter();
const { setUser } = useUser();
const { refreshUser } = useUser();
const validationSchema = yup.object().shape({
email: yup.string().email().required(),
@ -42,8 +41,8 @@ const SignUpForm = () => {
await authService
.signUp(email, username, password)
.then(async () => {
setUser(await userService.getCurrentUser());
router.replace("/");
await refreshUser();
router.replace("/upload");
})
.catch(toast.axiosError);
};

6
frontend/src/components/navBar/NavBar.tsx
View File

@ -1,5 +1,4 @@
import {
ActionIcon,
Box,
Burger,
Container,
@ -14,7 +13,6 @@ import {
import { useDisclosure } from "@mantine/hooks";
import Link from "next/link";
import { ReactNode, useEffect, useState } from "react";
import { TbPlus } from "react-icons/tb";
import useConfig from "../../hooks/config.hook";
import useUser from "../../hooks/user.hook";
import Logo from "../Logo";
@ -172,7 +170,9 @@ const NavBar = () => {
href={link.link ?? ""}
onClick={() => toggleOpened.toggle()}
className={cx(classes.link, {
[classes.linkActive]: window.location.pathname == link.link,
[classes.linkActive]:
typeof window != "undefined" &&
window.location.pathname == link.link,
})}
>
{link.label}

12
frontend/src/hooks/config.hook.ts
View File

@ -1,13 +1,17 @@
import { createContext, useContext } from "react";
import configService from "../services/config.service";
import Config from "../types/config.type";
import { ConfigHook } from "../types/config.type";
export const ConfigContext = createContext<Config[] | null>(null);
export const ConfigContext = createContext<ConfigHook>({
configVariables: [],
refresh: () => {},
});
const useConfig = () => {
const configVariables = useContext(ConfigContext) as Config[];
const configContext = useContext(ConfigContext);
return {
get: (key: string) => configService.get(key, configVariables),
get: (key: string) => configService.get(key, configContext.configVariables),
refresh: () => configContext.refresh(),
};
};

2
frontend/src/hooks/user.hook.ts
View File

@ -3,7 +3,7 @@ import { UserHook } from "../types/user.type";
export const UserContext = createContext<UserHook>({
user: null,
setUser: () => {},
refreshUser: async () => null,
});
const useUser = () => {

110
frontend/src/pages/_app.tsx
View File

@ -2,12 +2,14 @@ import {
ColorScheme,
ColorSchemeProvider,
Container,
LoadingOverlay,
MantineProvider,
} from "@mantine/core";
import { useColorScheme } from "@mantine/hooks";
import { ModalsProvider } from "@mantine/modals";
import { NotificationsProvider } from "@mantine/notifications";
import axios from "axios";
import { getCookie, setCookie } from "cookies-next";
import { GetServerSidePropsContext } from "next";
import type { AppProps } from "next/app";
import { useEffect, useState } from "react";
import Header from "../components/navBar/NavBar";
@ -21,38 +23,38 @@ import GlobalStyle from "../styles/global.style";
import globalStyle from "../styles/mantine.style";
import Config from "../types/config.type";
import { CurrentUser } from "../types/user.type";
import { GlobalLoadingContext } from "../utils/loading.util";
function App({ Component, pageProps }: AppProps) {
const systemTheme = useColorScheme();
const systemTheme = useColorScheme(pageProps.colorScheme);
const [colorScheme, setColorScheme] = useState<ColorScheme>(systemTheme);
const preferences = usePreferences();
const [colorScheme, setColorScheme] = useState<ColorScheme>("light");
const [isLoading, setIsLoading] = useState(true);
const [user, setUser] = useState<CurrentUser | null>(null);
const [configVariables, setConfigVariables] = useState<Config[] | null>(null);
const getInitalData = async () => {
setIsLoading(true);
setConfigVariables(await configService.list());
await authService.refreshAccessToken();
setUser(await userService.getCurrentUser());
setIsLoading(false);
};
const [user, setUser] = useState<CurrentUser | null>(pageProps.user);
const [configVariables, setConfigVariables] = useState<Config[]>(
pageProps.configVariables
);
useEffect(() => {
setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
getInitalData();
}, []);
useEffect(() => {
setColorScheme(
const colorScheme =
preferences.get("colorScheme") == "system"
? systemTheme
: preferences.get("colorScheme")
);
: preferences.get("colorScheme");
toggleColorScheme(colorScheme);
}, [systemTheme]);
const toggleColorScheme = (value: ColorScheme) => {
setColorScheme(value ?? "light");
setCookie("mantine-color-scheme", value ?? "light", {
sameSite: "lax",
});
};
return (
<MantineProvider
withGlobalStyles
@ -61,26 +63,35 @@ function App({ Component, pageProps }: AppProps) {
>
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={(value) => setColorScheme(value ?? "light")}
toggleColorScheme={toggleColorScheme}
>
<GlobalStyle />
<NotificationsProvider>
<ModalsProvider>
<GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>
{isLoading ? (
<LoadingOverlay visible overlayOpacity={1} />
) : (
<ConfigContext.Provider value={configVariables}>
<UserContext.Provider value={{ user, setUser }}>
<LoadingOverlay visible={isLoading} overlayOpacity={1} />
<Header />
<Container>
<Component {...pageProps} />
</Container>
</UserContext.Provider>
</ConfigContext.Provider>
)}
</GlobalLoadingContext.Provider>
<ConfigContext.Provider
value={{
configVariables,
refresh: async () => {
setConfigVariables(await configService.list());
},
}}
>
<UserContext.Provider
value={{
user,
refreshUser: async () => {
const user = await userService.getCurrentUser();
setUser(user);
return user;
},
}}
>
<Header />
<Container>
<Component {...pageProps} />
</Container>
</UserContext.Provider>
</ConfigContext.Provider>
</ModalsProvider>
</NotificationsProvider>
</ColorSchemeProvider>
@ -88,4 +99,33 @@ function App({ Component, pageProps }: AppProps) {
);
}
// Fetch user and config variables on server side when the first request is made
// These will get passed as a page prop to the App component and stored in the contexts
App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
let pageProps: {
user?: CurrentUser;
configVariables?: Config[];
colorScheme: ColorScheme;
} = {
colorScheme:
(getCookie("mantine-color-scheme", ctx) as ColorScheme) ?? "light",
};
if (ctx.req) {
const cookieHeader = ctx.req.headers.cookie;
pageProps.user = await axios(`http://localhost:8080/api/users/me`, {
headers: { cookie: cookieHeader },
})
.then((res) => res.data)
.catch(() => null);
pageProps.configVariables = (
await axios(`http://localhost:8080/api/configs`)
).data;
}
return { pageProps };
};
export default App;

4
frontend/src/pages/account/index.tsx
View File

@ -24,7 +24,7 @@ import userService from "../../services/user.service";
import toast from "../../utils/toast.util";
const Account = () => {
const { user, setUser } = useUser();
const { user, refreshUser } = useUser();
const modals = useModals();
const accountForm = useForm({
@ -81,8 +81,6 @@ const Account = () => {
),
});
const refreshUser = async () => setUser(await userService.getCurrentUser());
return (
<>
<Meta title="My account" />

5
frontend/src/pages/account/shares.tsx
View File

@ -4,7 +4,6 @@ import {
Button,
Center,
Group,
LoadingOverlay,
Space,
Stack,
Table,
@ -18,6 +17,7 @@ import Link from "next/link";
import { useEffect, useState } from "react";
import { TbLink, TbTrash } from "react-icons/tb";
import showShareLinkModal from "../../components/account/showShareLinkModal";
import CenterLoader from "../../components/core/CenterLoader";
import Meta from "../../components/Meta";
import useConfig from "../../hooks/config.hook";
import shareService from "../../services/share.service";
@ -35,7 +35,8 @@ const MyShares = () => {
shareService.getMyShares().then((shares) => setShares(shares));
}, []);
if (!shares) return <LoadingOverlay visible />;
if (!shares) return <CenterLoader />;
return (
<>
<Meta title="My shares" />

33
frontend/src/pages/auth/signIn.tsx
View File

@ -1,26 +1,41 @@
import { LoadingOverlay } from "@mantine/core";
import { GetServerSidePropsContext } from "next";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import SignInForm from "../../components/auth/SignInForm";
import Meta from "../../components/Meta";
import useUser from "../../hooks/user.hook";
const SignIn = () => {
const { user } = useUser();
export function getServerSideProps(context: GetServerSidePropsContext) {
return {
props: { redirectPath: context.query.redirect ?? null },
};
}
const SignIn = ({ redirectPath }: { redirectPath?: string }) => {
const { refreshUser } = useUser();
const router = useRouter();
const redirectPath = (router.query.redirect as string) ?? "/upload";
const [isLoading, setIsLoading] = useState(redirectPath ? true : false);
// If the access token is expired, the middleware redirects to this page.
// If the refresh token is still valid, the user will be redirected to the home page.
if (user) {
router.replace(redirectPath);
return <LoadingOverlay overlayOpacity={1} visible />;
}
// If the refresh token is still valid, the user will be redirected to the last page.
useEffect(() => {
refreshUser().then((user) => {
if (user) {
router.replace(redirectPath ?? "/upload");
} else {
setIsLoading(false);
}
});
}, []);
if (isLoading) return <LoadingOverlay overlayOpacity={1} visible />;
return (
<>
<Meta title="Sign In" />
<SignInForm redirectPath={redirectPath} />
<SignInForm redirectPath={redirectPath ?? "/upload"} />
</>
);
};

5
frontend/src/types/config.type.ts
View File

@ -29,4 +29,9 @@ export type AdminConfigGroupedByCategory = {
];
};
export type ConfigHook = {
configVariables: Config[];
refresh: () => void;
};
export default Config;

2
frontend/src/types/user.type.ts
View File

@ -29,7 +29,7 @@ export type CurrentUser = User & {};
export type UserHook = {
user: CurrentUser | null;
setUser: (user: CurrentUser | null) => void;
refreshUser: () => Promise<CurrentUser | null>;
};
export default User;