bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

Render the website inside an iframe to preview the changes being applied
All checks were successful
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m39s
Details
Add copyright notice / copyright_notice (pull_request) Successful in 2m15s
Details
Build Nginx-based docker image / build-static-assets (push) Successful in 6m45s
Details
Playwright Tests / test (pull_request) Successful in 6m46s
Details

Browse Source
This commit is contained in:
Manuel Bustillo 2025-06-08 23:36:32 +02:00
parent a60523b97a
commit 0d35668efe
1 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/[slug]/dashboard/website/page.tsx
View File

@ -3,16 +3,23 @@
'use client' 'use client'
import { AbstractApi } from '@/app/api/abstract-api'; import { AbstractApi } from '@/app/api/abstract-api';
import { getSlug } from '@/app/lib/utils';
import { Website, WebsiteSerializer } from '@/app/lib/website'; import { Website, WebsiteSerializer } from '@/app/lib/website';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Tiptap from '../../../components/Tiptap'; import Tiptap from '../../../components/Tiptap';
export default function Page() { export default function Page() {
const [website, setWebsite] = useState<Website>() const [website, setWebsite] = useState<Website>()
const api = new AbstractApi<Website>(); const api = new AbstractApi<Website>();
const serializer = new WebsiteSerializer(); const serializer = new WebsiteSerializer();
const [slug, setSlug] = useState<string>("default");
useEffect(() => { setSlug(getSlug()) }, []);
const [iframeKey, setIframeKey] = useState<number>(Math.random());
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null); const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
useEffect(() => { useEffect(() => {
@ -29,18 +36,30 @@ export default function Page() {
setTimeoutId( setTimeoutId(
setTimeout(() => { setTimeout(() => {
api.update(serializer, new Website('', newContent), () => { }); api.update(serializer, new Website('', newContent), () => {
setIframeKey(Math.random()); // Change key to force iframe reload
});
}, 500) }, 500)
); );
} }
return ( return (
<div className="border rounded-lg p-4"> <div className="flex">
<Tiptap <div className="w-1/2 border rounded-lg p-4">
key={website?.content ?? 'empty'} <Tiptap
content={website?.content || ''} key={website?.content ?? 'empty'}
onUpdate={updateWebsite} content={website?.content || ''}
/> onUpdate={updateWebsite}
/>
</div>
<div className="w-1/2 border rounded-lg p-4 ml-4">
<iframe
key={iframeKey}
src={`/${slug}/site`}
title="Website Preview"
className="w-full h-[80vh] rounded"
/>
</div>
</div> </div>
); );
} }