feat(edit): replaces disabled add tile button with toast (#1135)

* feat(edit): replaces disabled add tile button with toast * test(add tile): fixes tests by adding toast provider * chore(test): layout of test component consistent with ui
entur · Jul 18, 2023 · 9f582ad · 9f582ad
1 parent 9b0bceb
commit 9f582ad
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/next-tavla/src/Admin/scenarios/AddTile/AddTile.cy.tsx b/next-tavla/src/Admin/scenarios/AddTile/AddTile.cy.tsx
@@ -5,6 +5,7 @@ import { TilesOverview } from '../TilesOverview'
 import { AddTile } from './index'
 import { SettingsDispatchContext } from 'Admin/utils/contexts'
 import { settingsReducer } from '../Edit/reducer'
+import { ToastProvider } from '@entur/alert'
 
 describe('<AddTile />', () => {
     const TestComponent = () => {
@@ -14,10 +15,12 @@ describe('<AddTile />', () => {
 
         return (
             <Contrast>
-                <SettingsDispatchContext.Provider value={dispatch}>
-                    <TilesOverview tiles={settings.tiles} />
-                    <AddTile />
-                </SettingsDispatchContext.Provider>
+                <ToastProvider>
+                    <SettingsDispatchContext.Provider value={dispatch}>
+                        <AddTile />
+                        <TilesOverview tiles={settings.tiles} />
+                    </SettingsDispatchContext.Provider>
+                </ToastProvider>
             </Contrast>
         )
     }

diff --git a/next-tavla/src/Admin/scenarios/AddTile/index.tsx b/next-tavla/src/Admin/scenarios/AddTile/index.tsx
@@ -6,10 +6,30 @@ import { Dropdown } from '@entur/dropdown'
 import { fetchItems } from 'Admin/utils'
 import { SearchIcon } from '@entur/icons'
 import { Heading1 } from '@entur/typography'
+import { useToast } from '@entur/alert'
 
 function AddTile() {
     const dispatch = useSettingsDispatch()
+    const { addToast } = useToast()
     const [stopPlaceId, setStopPlaceId] = useState<string>()
+
+    function handleAddTile() {
+        if (!stopPlaceId) {
+            addToast({
+                title: 'Ingen holdeplass er valgt',
+                content: 'Vennligst velg en holdeplass å legge til',
+                variant: 'info',
+            })
+            return
+        }
+        dispatch({
+            type: 'addTile',
+            tile: {
+                type: 'stop_place',
+                placeId: stopPlaceId,
+            },
+        })
+    }
     return (
         <div>
             <Heading1 className={classes.Heading1}>Holdeplasser</Heading1>
@@ -28,21 +48,7 @@ function AddTile() {
                     }}
                 />
 
-                <Button
-                    variant="primary"
-                    onClick={() => {
-                        if (stopPlaceId) {
-                            dispatch({
-                                type: 'addTile',
-                                tile: {
-                                    type: 'stop_place',
-                                    placeId: stopPlaceId,
-                                },
-                            })
-                        }
-                    }}
-                    disabled={!stopPlaceId}
-                >
+                <Button variant="primary" onClick={handleAddTile}>
                     Legg til
                 </Button>
             </div>