102 lines
2.9 KiB
TypeScript
Executable File
102 lines
2.9 KiB
TypeScript
Executable File
import {Fragment, useRef} from 'react';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
|
|
import {AppearanceButton} from '@common/admin/appearance/appearance-button';
|
|
import {AceDialog} from '@common/ace-editor/ace-dialog';
|
|
import mergedAppearanceConfig from '@common/admin/appearance/config/merged-appearance-config';
|
|
import {SeoSettingsSectionConfig} from '@common/admin/appearance/types/appearance-editor-config';
|
|
import {MessageDescriptor} from '@common/i18n/message-descriptor';
|
|
import {useSeoTags} from '@common/admin/appearance/sections/seo/use-seo-tags';
|
|
import {useUpdateSeoTags} from '@common/admin/appearance/sections/seo/use-update-seo-tags';
|
|
import {useDialogContext} from '@common/ui/overlays/dialog/dialog-context';
|
|
import {FullPageLoader} from '@common/ui/progress/full-page-loader';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import type ReactAce from 'react-ace';
|
|
|
|
const pages =
|
|
(
|
|
mergedAppearanceConfig.sections['seo-settings']
|
|
.config as SeoSettingsSectionConfig
|
|
)?.pages || [];
|
|
|
|
const names = pages.map(page => page.key);
|
|
|
|
export function SeoSection() {
|
|
const {isLoading} = useSeoTags(names);
|
|
|
|
if (isLoading) {
|
|
return <FullPageLoader />;
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
{pages.map(page => (
|
|
<TagEditorTrigger key={page.key} label={page.label} name={page.key} />
|
|
))}
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
interface TagEditorTriggerProps {
|
|
label: MessageDescriptor;
|
|
name: string;
|
|
}
|
|
function TagEditorTrigger({label, name}: TagEditorTriggerProps) {
|
|
const {data, isLoading} = useSeoTags(names);
|
|
|
|
return (
|
|
<DialogTrigger type="modal">
|
|
<AppearanceButton disabled={isLoading}>
|
|
<Trans {...label} />
|
|
</AppearanceButton>
|
|
{data ? <TagsEditorDialog name={name} value={data[name]} /> : null}
|
|
</DialogTrigger>
|
|
);
|
|
}
|
|
|
|
interface TagsEditorDialogProps {
|
|
name: string;
|
|
value: {custom: string | null; original: string};
|
|
}
|
|
function TagsEditorDialog({name, value}: TagsEditorDialogProps) {
|
|
const {close} = useDialogContext();
|
|
const updateTags = useUpdateSeoTags(name);
|
|
const editorRef = useRef<ReactAce | null>(null);
|
|
|
|
const resetButton = (
|
|
<Button
|
|
variant="outline"
|
|
color="primary"
|
|
onClick={() => {
|
|
if (editorRef.current) {
|
|
editorRef.current.editor.setValue(value.original);
|
|
}
|
|
}}
|
|
>
|
|
<Trans message="Reset to original" />
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<AceDialog
|
|
mode="php_laravel_blade"
|
|
title={<Trans message="Edit SEO meta tags" />}
|
|
footerStartAction={resetButton}
|
|
editorRef={editorRef}
|
|
defaultValue={value.custom || value.original}
|
|
isSaving={updateTags.isPending}
|
|
beautify={false}
|
|
onSave={newValue => {
|
|
if (newValue != null) {
|
|
updateTags.mutate(
|
|
{tags: newValue},
|
|
{
|
|
onSuccess: () => close(),
|
|
},
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|