From 680b3d781d0ca720006dfd803238d3ecd3ebc5f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Grutle?= <oyvind.grutle@bekk.no>
Date: Thu, 23 Nov 2023 13:16:29 +0100
Subject: [PATCH] feat(edit): open board button

---
 next-tavla/pages/edit/[id].tsx                | 13 ++--------
 next-tavla/src/Admin/scenarios/Edit/index.tsx | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/next-tavla/pages/edit/[id].tsx b/next-tavla/pages/edit/[id].tsx
index 7f23bc854..6ee24a814 100755
--- a/next-tavla/pages/edit/[id].tsx
+++ b/next-tavla/pages/edit/[id].tsx
@@ -42,26 +42,17 @@ export async function getServerSideProps({
         props: {
             loggedIn,
             board: convertedBoard,
-            id,
         },
     }
 }
 
-function AdminPage({
-    loggedIn,
-    board,
-    id,
-}: {
-    loggedIn: boolean
-    board: TBoard
-    id: string
-}) {
+function AdminPage({ loggedIn, board }: { loggedIn: boolean; board: TBoard }) {
     return (
         <div className={classes.root}>
             <AdminHeader loggedIn={loggedIn} />
             <Contrast>
                 <ToastProvider>
-                    <Edit initialBoard={board} documentId={id} />
+                    <Edit initialBoard={board} />
                 </ToastProvider>
             </Contrast>
         </div>
diff --git a/next-tavla/src/Admin/scenarios/Edit/index.tsx b/next-tavla/src/Admin/scenarios/Edit/index.tsx
index 654933719..079b7f957 100644
--- a/next-tavla/src/Admin/scenarios/Edit/index.tsx
+++ b/next-tavla/src/Admin/scenarios/Edit/index.tsx
@@ -3,7 +3,7 @@ import { useReducer } from 'react'
 import classes from './styles.module.css'
 import dynamic from 'next/dynamic'
 import { SecondaryButton } from '@entur/button'
-import { CopyIcon } from '@entur/icons'
+import { CopyIcon, ExternalIcon } from '@entur/icons'
 import { useToast } from '@entur/alert'
 import { boardReducer } from './utils/reducer'
 import { SettingsDispatchContext } from './utils/contexts'
@@ -14,18 +14,14 @@ import { Heading1, Heading3 } from '@entur/typography'
 import { BoardSettings } from './components/BoardSettings'
 import { useAutoSaveBoard } from './hooks/useAutoSaveBoard'
 import { Preview } from './components/Preview'
+import Link from 'next/link'
+import { useLink } from '../Boards/hooks/useLink'
 
-function Edit({
-    initialBoard,
-    documentId,
-}: {
-    initialBoard: TBoard
-    documentId: string
-}) {
+function Edit({ initialBoard }: { initialBoard: TBoard }) {
     const [board, dispatch] = useReducer(boardReducer, initialBoard)
     const { addToast } = useToast()
 
-    const linkUrl = window.location.host + '/' + documentId
+    const link = useLink(board.id)
 
     useAutoSaveBoard(board)
 
@@ -52,9 +48,19 @@ function Edit({
                         Rediger tavlevisning
                     </Heading1>
                     <div className="flexRow g-2">
+                        <SecondaryButton
+                            as={Link}
+                            aria-label="Åpne tavla"
+                            href={link ?? '/'}
+                            target="_blank"
+                        >
+                            Åpne tavla
+                            <ExternalIcon />
+                        </SecondaryButton>
+
                         <SecondaryButton
                             onClick={() => {
-                                navigator.clipboard.writeText(linkUrl)
+                                navigator.clipboard.writeText(link ?? '')
                                 addToast('Lenke til Tavla kopiert')
                             }}
                         >