Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-01-20 14:32:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Improve customizations page load speed with SSR (#1477)

Browse Source
This commit is contained in:
Thomas Camlong
2023-10-22 18:00:16 +02:00
committed by GitHub
parent a41bee0d44
commit f8dfa0d7f0
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/board/[slug]/customize.tsx
View File

@@ -18,17 +18,19 @@ import {
IconChartCandle,
IconCheck,
IconDragDrop,
IconLayout, IconLock,
IconLayout,
IconLock,
IconX,
TablerIconsProps,
} from '@tabler/icons-react';
import { GetServerSideProps } from 'next';
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { useTranslation } from 'next-i18next';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ReactNode } from 'react';
import { z } from 'zod';
import { AccessCustomization } from '~/components/Board/Customize/Access/AccessCustomization';
import { AppearanceCustomization } from '~/components/Board/Customize/Appearance/AppearanceCustomization';
import { GridstackCustomization } from '~/components/Board/Customize/Gridstack/GridstackCustomization';
import { LayoutCustomization } from '~/components/Board/Customize/Layout/LayoutCustomization';
@@ -46,21 +48,30 @@ import { firstUpperCase } from '~/tools/shared/strings';
import { api } from '~/utils/api';
import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
import { boardCustomizationSchema } from '~/validations/boards';
import { AccessCustomization } from '~/components/Board/Customize/Access/AccessCustomization';
const notificationId = 'board-customization-notification';
export default function CustomizationPage() {
const query = useRouter().query as { slug: string };
export default function CustomizationPage({
initialConfig,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
const query = useRouter().query as {
slug: string;
};
const utils = api.useContext();
const { data: config } = api.config.byName.useQuery({ name: query.slug });
const { data: config } = api.config.byName.useQuery(
{ name: query.slug },
{
initialData: initialConfig,
refetchOnMount: false,
}
);
const { mutateAsync: saveCusomization, isLoading } = api.config.saveCusomization.useMutation();
const { i18nZodResolver } = useI18nZodResolver();
const { t } = useTranslation('boards/customize');
const form = useBoardCustomizationForm({
initialValues: {
access: {
allowGuests: config?.settings.access.allowGuests ?? false
allowGuests: config?.settings.access.allowGuests ?? false,
},
layout: {
leftSidebarEnabled: config?.settings.customization.layout.enabledLeftSidebar ?? false,
@@ -143,6 +154,7 @@ export default function CustomizationPage() {
<Button
component={Link}
passHref
color={config?.settings.customization.colors.primary ?? 'red'}
href={backToBoardHref}
variant="light"
leftIcon={<IconArrowLeft size={16} />}
@@ -290,7 +302,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
'settings/customization/shade-selector',
'settings/customization/opacity-selector',
'settings/customization/gridstack',
'settings/customization/access'
'settings/customization/access',
],
locale,
req,
@@ -299,6 +311,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
return {
props: {
initialConfig: config,
primaryColor: config.settings.customization.colors.primary,
secondaryColor: config.settings.customization.colors.secondary,
primaryShade: config.settings.customization.colors.shade,