feat(ui): autosave on tiles change and feedback if no tiles added

next-tavla/pages/edit/[id].tsx

@@ -5,6 +5,7 @@ import { getBoardSettings } from 'utils/firebase'
 import classes from 'styles/pages/admin.module.css'
 import { Contrast } from '@entur/layout'
 import { convertSettingsVersion } from 'utils/converters'
+import { ToastProvider } from '@entur/alert'
 
 export async function getServerSideProps({
     params,
@@ -34,8 +35,10 @@ export async function getServerSideProps({
 function AdminPage({ settings, id }: { settings: TSettings; id: string }) {
     return (
         <Contrast className={classes.root}>
-            <Header />
-            <Edit initialSettings={settings} documentId={id} />
+            <ToastProvider>
+                <Header />
+                <Edit initialSettings={settings} documentId={id} />
+            </ToastProvider>
         </Contrast>
     )
 }

next-tavla/src/Admin/scenarios/Edit/hooks/useAutoSaveSettings.ts

@@ -0,0 +1,32 @@
+import { useToast } from '@entur/alert'
+import { useCallback, useEffect, useState } from 'react'
+import { TSettings } from 'types/settings'
+import { setBoardSettings } from 'utils/firebase'
+
+function useAutoSaveSettings(documentId: string, settings: TSettings) {
+    const { addToast } = useToast()
+    const [prevTilesLength, setPrevTilesLength] = useState(
+        settings.tiles.length,
+    )
+
+    const saveSettings = useCallback(() => {
+        addToast({
+            title: 'Lagret!',
+            content: 'Innstillingene er lagret',
+            variant: 'info',
+        })
+        setBoardSettings(documentId, settings)
+    }, [addToast, documentId, settings])
+
+    useEffect(() => {
+        if (settings.tiles.length === prevTilesLength) {
+            return
+        }
+        saveSettings()
+        setPrevTilesLength(settings.tiles.length)
+    }, [settings.tiles.length, prevTilesLength, saveSettings])
+
+    return saveSettings
+}
+
+export { useAutoSaveSettings }

next-tavla/src/Admin/scenarios/Edit/index.tsx

@@ -4,13 +4,12 @@ import { useReducer } from 'react'
 import classes from './styles.module.css'
 import dynamic from 'next/dynamic'
 import { AddTile } from '../AddTile'
-import { setBoardSettings } from 'utils/firebase'
 import { SettingsDispatchContext } from 'Admin/utils/contexts'
 import { settingsReducer } from './reducer'
-import { ToastProvider } from '@entur/alert'
 import { FloatingButton } from '@entur/button'
 import { StyledLink } from 'Admin/components/StyledLink'
 import { ShareTable } from '../ShareTable'
+import { useAutoSaveSettings } from './hooks/useAutoSaveSettings'
 
 function Edit({
     initialSettings,
@@ -20,32 +19,32 @@ function Edit({
     documentId: string
 }) {
     const [settings, dispatch] = useReducer(settingsReducer, initialSettings)
+
     const linkUrl = window.location.host + '/' + documentId
+
+    const saveSettings = useAutoSaveSettings(documentId, settings)
+
     return (
         <SettingsDispatchContext.Provider value={dispatch}>
-            <ToastProvider>
-                <div className={classes.settings}>
-                    <AddTile />
-                    <TilesOverview tiles={settings.tiles} />
-                    <ShareTable text={linkUrl} />
-                    <div className={classes.floatingButtonWrapper}>
-                        <FloatingButton
-                            className={classes.saveButton}
-                            size="medium"
-                            aria-label={'Lagre instillinger'}
-                            onClick={() => {
-                                setBoardSettings(documentId, settings)
-                            }}
-                        >
-                            Lagre innstillinger
-                        </FloatingButton>
-                        <StyledLink
-                            linkUrl={'/' + documentId}
-                            text="Se avgangstavla"
-                        />
-                    </div>
+            <div className={classes.settings}>
+                <AddTile />
+                <TilesOverview tiles={settings.tiles} />
+                <ShareTable text={linkUrl} />
+                <div className={classes.floatingButtonWrapper}>
+                    <FloatingButton
+                        className={classes.saveButton}
+                        size="medium"
+                        aria-label="Lagre instillinger"
+                        onClick={saveSettings}
+                    >
+                        Lagre innstillinger
+                    </FloatingButton>
+                    <StyledLink
+                        linkUrl={'/' + documentId}
+                        text="Se avgangstavla"
+                    />
                 </div>
-            </ToastProvider>
+            </div>
         </SettingsDispatchContext.Provider>
     )
 }

next-tavla/src/Board/scenarios/Board/index.tsx

@@ -3,8 +3,9 @@ import { TTile } from 'types/tile'
 import { StopPlaceTile } from '../StopPlaceTile'
 import { QuayTile } from '../QuayTile'
 import classes from './styles.module.css'
+import { Tile } from 'components/Tile'
 
-function Tile({ tileSpec }: { tileSpec: TTile }) {
+function BoardTile({ tileSpec }: { tileSpec: TTile }) {
     switch (tileSpec.type) {
         case 'stop_place':
             return <StopPlaceTile {...tileSpec} />
@@ -14,10 +15,17 @@ function Tile({ tileSpec }: { tileSpec: TTile }) {
 }
 
 function Board({ settings }: { settings: TSettings }) {
+    if (!settings.tiles.length)
+        return (
+            <Tile className={classes.emptyTile}>
+                <p>Du har ikke lagt til noen holdeplasser enda.</p>
+            </Tile>
+        )
+
     return (
         <div className={classes.board}>
             {settings.tiles.map((tile, index) => {
-                return <Tile key={index} tileSpec={tile} />
+                return <BoardTile key={index} tileSpec={tile} />
             })}
         </div>
     )

next-tavla/src/Board/scenarios/Board/styles.module.css

@@ -1,3 +1,10 @@
+.emptyTile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--main-font-color);
+}
+
 .board {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(50vmin, 1fr));