-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo): possible to try tavla without creating a user (#1569)
* feat(demo): add demo board in local storage * style(stoplist): margin top * feat(demo): delete tiles * refactor(nav): move nav to root level * feat(nav): add demo to top nav * feat(footer): add demo link * fix(navbar): mobile view * chore(demo): rename * chore(demo): move logic and useLocalStorageHook * chore(rename): misspelling * fix(demo): add more descriptive text * fix(demo): remove button when logged in * fix(demo): tracking on login btn and add stopplace btn * fix(demo): move clinet component to own file * refactor(demo): move nav-item from login to topnav component
- Loading branch information
Showing
15 changed files
with
244 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| export const useLocalStorage = <T>(key: string, defaultValue: T) => { | ||
| const [localStorageValue, setLocalStorageValue] = useState(() => { | ||
| try { | ||
| const value = localStorage.getItem(key) | ||
|
|
||
| if (value) { | ||
| return JSON.parse(value) | ||
| } else { | ||
| localStorage.setItem(key, JSON.stringify(defaultValue)) | ||
| return defaultValue | ||
| } | ||
| } catch (error) { | ||
| localStorage.setItem(key, JSON.stringify(defaultValue)) | ||
| return defaultValue | ||
| } | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| localStorage.setItem(key, JSON.stringify(localStorageValue)) | ||
| }, [key, localStorageValue]) | ||
|
|
||
| return [localStorageValue, setLocalStorageValue] | ||
| } | ||
|
|
||
| export default useLocalStorage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,12 @@ | ||
| import { Metadata } from 'next' | ||
| import { ReactNode } from 'react' | ||
| import { cookies } from 'next/headers' | ||
| import { TopNavigation } from './components/TopNavigation' | ||
| import { verifySession } from './utils/firebase' | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: 'Mine organisasjoner | Entur Tavla', | ||
| } | ||
|
|
||
| async function AdminLayout({ children }: { children: ReactNode }) { | ||
| const session = cookies().get('session')?.value | ||
| const loggedIn = (await verifySession(session)) !== null | ||
| return ( | ||
| <> | ||
| <TopNavigation loggedIn={loggedIn} /> | ||
| <main className="container mx-auto pt-4 pb-20">{children}</main> | ||
| </> | ||
| ) | ||
| return <main className="container mx-auto pt-4 pb-20">{children}</main> | ||
| } | ||
|
|
||
| export default AdminLayout |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| 'use client' | ||
|
|
||
| import { Button } from '@entur/button' | ||
| import { Heading3, Paragraph } from '@entur/typography' | ||
| import Link from 'next/link' | ||
| import { usePostHog } from 'posthog-js/react' | ||
|
|
||
| export const CreateUserButton = () => { | ||
| const posthog = usePostHog() | ||
|
|
||
| return ( | ||
| <div> | ||
| <Heading3 margin="bottom">Opprett bruker</Heading3> | ||
| <Paragraph margin="none"> | ||
| Det er helt gratis å bruke Tavla! | ||
| </Paragraph> | ||
| <Button | ||
| variant="success" | ||
| as={Link} | ||
| href="?login" | ||
| className="mt-2" | ||
| onClick={() => { | ||
| posthog.capture('LOGIN_BTN_DEMO_PAGE') | ||
| }} | ||
| > | ||
| Opprett bruker / Logg inn | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default CreateUserButton |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| 'use client' | ||
| import { Heading2 } from '@entur/typography' | ||
| import { TileSelector } from 'app/(admin)/components/TileSelector' | ||
| import { formDataToTile } from 'app/(admin)/components/TileSelector/utils' | ||
| import { Preview } from 'app/(admin)/edit/[id]/components/Preview' | ||
| import { TileCard } from 'app/(admin)/edit/[id]/components/TileCard' | ||
| import useLocalStorage from '../../(admin)/hooks/useLocalStorage' | ||
| import { TTile } from 'types/tile' | ||
| import { usePostHog } from 'posthog-js/react' | ||
|
|
||
| const emptyDemoBoard = { | ||
| id: 'demo', | ||
| meta: { title: 'Demo' }, | ||
| tiles: [], | ||
| } | ||
|
|
||
| function DemoBoard() { | ||
| const [board, setBoard] = useLocalStorage('board', emptyDemoBoard) | ||
|
|
||
| const posthog = usePostHog() | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex flex-col gap-4"> | ||
| <Heading2>Hvilke stoppesteder vil du vise i tavlen?</Heading2> | ||
| <TileSelector | ||
| action={async (data: FormData) => { | ||
| const tile = formDataToTile(data) | ||
| setBoard({ ...board, tiles: [...board.tiles, tile] }) | ||
| posthog.capture('ADD_STOP_PLACE_DEMO_PAGE') | ||
| }} | ||
| col={false} | ||
| /> | ||
| {board.tiles?.map((tile: TTile) => ( | ||
| <TileCard | ||
| key={tile.uuid} | ||
| tile={tile} | ||
| bid={board.id ?? 'demo'} | ||
| demoBoard={board} | ||
| setDemoBoard={setBoard} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <div className="flex flex-col gap-4"> | ||
| <Heading2>Forhåndsvisning</Heading2> | ||
| <Preview board={board} /> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export { DemoBoard } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { | ||
| Heading1, | ||
| Heading2, | ||
| LeadParagraph, | ||
| ListItem, | ||
| Paragraph, | ||
| UnorderedList, | ||
| } from '@entur/typography' | ||
| import { verifySession } from 'app/(admin)/utils/firebase' | ||
| import { cookies } from 'next/headers' | ||
| import { DemoBoard } from './components/DemoBoard' | ||
| import CreateUserButton from './components/CreateUserButton' | ||
|
|
||
| async function Demo() { | ||
| const session = cookies().get('session')?.value | ||
| const loggedIn = (await verifySession(session)) !== null | ||
|
|
||
| return ( | ||
| <main className="container mx-auto pt-8 pb-20 flex flex-col gap-10"> | ||
| <div> | ||
| <Heading1>Prøv og lag din egen avgangstavle!</Heading1> | ||
| <LeadParagraph margin="none" className="lg:w-4/5"> | ||
| Dette er en demo-løsning hvor du kan prøve å opprette din | ||
| egen tavle. Du må logge inn for å lagre tavlen og få tilgang | ||
| til all funksjonalitet. Tavlen du lager her blir ikke | ||
| lagret. | ||
| </LeadParagraph> | ||
| </div> | ||
| {!loggedIn && <CreateUserButton />} | ||
|
|
||
| <div className="flex flex-col gap-10"> | ||
| <Heading1 margin="none">Lag en demo-tavle</Heading1> | ||
| <DemoBoard /> | ||
| </div> | ||
| <div> | ||
| <Heading2>Innstillinger som krever innlogging</Heading2> | ||
| <Paragraph margin="none">Hvis du logger inn, kan du:</Paragraph> | ||
| <UnorderedList className="flex flex-col gap-1 pl-6"> | ||
| <ListItem>Endre tekststørrelse</ListItem> | ||
| <ListItem> | ||
| Legge til en info-melding nederst i tavlen | ||
| </ListItem> | ||
| <ListItem>Endre fargetema (lys eller mørk modus)</ListItem> | ||
| <ListItem> | ||
| Legge inn adressen som tavlen står på og vise gåavstand | ||
| fra tavlen til stoppested(ene) | ||
| </ListItem> | ||
| <ListItem> | ||
| Opprette så mange tavler du vil og samle disse i ulike | ||
| organisasjoner (mapper) | ||
| </ListItem> | ||
| <ListItem> | ||
| Gi andre tilgang til å administrere tavlen | ||
| </ListItem> | ||
| </UnorderedList> | ||
| </div> | ||
| {!loggedIn && <CreateUserButton />} | ||
| </main> | ||
| ) | ||
| } | ||
|
|
||
| export default Demo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.