iio/pingvin-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
14 changed files with 137 additions and 71 deletions
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}