feat(date): show date last modified (#1198)

* feat(date) show date last modified

* feat(date) update last modified and created

* feat(date) remove console logs

* feat(date) rebase

* feat(date) update last active time

* feat(date) meta type with meta information

* feat(date) ping to update last active date

* feat(date) fix consistency

* feat(date) change order of last active and created

* feat(date) dynamic api routes and remove last active and created from my boards

* feat(date) rebase master

* fix(edit) delete debug logs

* fix(edit) change from date strings to number

* feat(date) move logic from hook

* feat(date) remove some logic

* feat(date) remove comment

* feat(date) update lastActive field directly

* feat(date) throw error if board does not exist

next-tavla/pages/[id].tsx

@@ -4,6 +4,7 @@ import classes from 'styles/pages/board.module.css'
 import { upgradeBoard } from 'utils/converters'
 import { Board } from 'Board/scenarios/Board'
 import { getBoard } from 'Admin/utils/firebase'
+import { useUpdateLastActive } from 'hooks/useUpdateLastActive'
 
 export async function getServerSideProps({
     params,
@@ -30,6 +31,7 @@ export async function getServerSideProps({
 }
 
 function BoardPage({ board }: { board: TBoard }) {
+    useUpdateLastActive(board.id)
     return (
         <div className={classes.root} data-theme={board.theme || 'dark'}>
             <div className={classes.rootContainer}>

next-tavla/pages/api/ping/[id].ts

@@ -0,0 +1,18 @@
+import { initializeAdminApp, setLastActive } from 'Admin/utils/firebase'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { TBoardID } from 'types/settings'
+
+initializeAdminApp()
+
+export default async function handler(
+    request: NextApiRequest,
+    response: NextApiResponse,
+) {
+    const { id } = request.query
+    try {
+        await setLastActive(id as TBoardID)
+        return response.status(200).json({ message: 'Successfully updated!' })
+    } catch (error) {
+        return response.status(400).json({ error: 'Could not update!' })
+    }
+}

next-tavla/src/Admin/scenarios/BoardList/components/Row/index.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react'
 import { Cell } from 'Admin/scenarios/BoardList/components/Cell'
 import { Tooltip } from '@entur/tooltip'
 import { Info } from 'Admin/scenarios/Info'
+import { formatDate } from 'utils/time'
 
 function Row({ board }: { board: TBoard }) {
     const { addToast } = useToast()
@@ -24,7 +25,7 @@ function Row({ board }: { board: TBoard }) {
 
     return (
         <div className={classes.tableRow}>
-            <Cell>{board?.title ?? 'Tavla'}</Cell>
+            <Cell>{board?.meta?.title ?? 'Tavla'}</Cell>
             <Cell className={classes.link}>
                 {link}
                 <Tooltip content="Kopier lenke" placement="bottom">
@@ -47,6 +48,10 @@ function Row({ board }: { board: TBoard }) {
                     </IconButton>
                 </Tooltip>
             </Cell>
+            <Cell>
+                {board?.meta?.dateModified &&
+                    formatDate(new Date(board.meta.dateModified))}
+            </Cell>
         </div>
     )
 }

next-tavla/src/Admin/scenarios/BoardList/components/Row/styles.module.css

@@ -1,6 +1,6 @@
 .tableRow {
     display: grid;
-    grid-template-columns: 3fr 5fr 1fr;
+    grid-template-columns: 3fr 5fr 2fr 2fr;
     padding: 1rem 0;
     border-bottom: var(--colors-blues-blue20) solid;
 }

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

@@ -18,8 +18,8 @@ function BoardList({ boards }: { boards: TBoard[] }) {
     const [selectedSort, setSelectedSort] = useState(sortOptions[0])
 
     const sortBoards = (boardA: TBoard, boardB: TBoard) => {
-        const titleA = boardA?.title?.toLowerCase() ?? ''
-        const titleB = boardB?.title?.toLowerCase() ?? ''
+        const titleA = boardA?.meta?.title?.toLowerCase() ?? ''
+        const titleB = boardB?.meta?.title?.toLowerCase() ?? ''
         if (!selectedSort) return 0
         switch (selectedSort.value) {
             case 'alphabetical':
@@ -66,7 +66,7 @@ function BoardList({ boards }: { boards: TBoard[] }) {
                 <div className={classes.tableBody}>
                     {boards
                         .filter((board) =>
-                            textSearchRegex.test(board?.title ?? ''),
+                            textSearchRegex.test(board?.meta?.title ?? ''),
                         )
                         .sort(sortBoards)
                         .map((board) => (

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

@@ -33,7 +33,7 @@ function Edit({
         <SettingsDispatchContext.Provider value={dispatch}>
             <div className={classes.settings}>
                 <div className="flexBetween">
-                    <BoardTitle title={board.title} />
+                    <BoardTitle title={board.meta?.title} />
                     <div className="flexGap">
                         <SecondaryButton
                             onClick={() => {

next-tavla/src/Admin/scenarios/Edit/reducer.ts

@@ -53,7 +53,13 @@ export function boardReducer(settings: TBoard, action: Action): TBoard {
     switch (action.type) {
         // Title operations
         case 'setTitle':
-            return { ...settings, title: action.title }
+            return {
+                ...settings,
+                meta: {
+                    ...settings.meta,
+                    title: action.title,
+                },
+            }
         // Theme operations
         case 'changeTheme': {
             return { ...settings, theme: action.theme }

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

@@ -7,6 +7,7 @@ function TableHeader() {
                 <div className={classes.tableCell}>Navn på tavle</div>
                 <div className={classes.tableCell}>Link</div>
                 <div className={classes.tableCell}>Valg</div>
+                <div className={classes.tableCell}>Sist oppdatert</div>
             </div>
         </div>
     )

next-tavla/src/Admin/scenarios/TableHeader/styles.module.css

@@ -5,7 +5,7 @@
 
 .tableRow {
     display: grid;
-    grid-template-columns: 3fr 5fr 1fr;
+    grid-template-columns: 3fr 5fr 2fr 2fr;
 }
 
 .tableCell {

next-tavla/src/Admin/utils/firebase.ts

@@ -75,11 +75,33 @@ export async function setBoard(board: TBoard, uid: TUserID) {
     return await firestore()
         .collection('boards')
         .doc(boardId)
-        .set(sanitizedBoard)
+        .set({
+            ...sanitizedBoard,
+            meta: { ...sanitizedBoard.meta, dateModified: Date.now() },
+        })
+}
+
+export async function setLastActive(bid: TBoardID) {
+    const board = await firestore().collection('boards').doc(bid).get()
+    if (!board.exists)
+        throw new TavlaError({
+            code: 'BOARD',
+            message: 'Board does not exist.',
+        })
+
+    firestore()
+        .collection('boards')
+        .doc(bid)
+        .update({ 'meta.lastActive': Date.now() })
 }
 
 export async function createBoard(uid: TUserID) {
-    const board = await firestore().collection('boards').add({ tiles: [] })
+    const board = await firestore()
+        .collection('boards')
+        .add({
+            tiles: [],
+            meta: { created: Date.now(), dateModified: Date.now() },
+        })
     firestore()
         .collection('users')
         .doc(uid)

next-tavla/src/Shared/hooks/useUpdateLastActive.ts

@@ -0,0 +1,20 @@
+import { useCallback, useEffect } from 'react'
+import { TBoardID } from 'types/settings'
+
+function useUpdateLastActive(documentId: TBoardID | undefined) {
+    const updateLastActive = useCallback(async () => {
+        await fetch(`/api/ping/${documentId}`, {
+            method: 'POST',
+        })
+    }, [documentId])
+
+    useEffect(() => {
+        updateLastActive()
+        const intervalId = setInterval(updateLastActive, 1000 * 60 * 60 * 24)
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [updateLastActive])
+}
+
+export { useUpdateLastActive }

next-tavla/src/Shared/types/meta.ts

@@ -0,0 +1,7 @@
+export type TMeta = {
+    title?: string
+    created?: number
+    lastActive?: number
+    dateModified?: number
+    version?: number
+}

next-tavla/src/Shared/types/settings.ts

@@ -1,12 +1,12 @@
+import { TMeta } from './meta'
 import { TTile } from './tile'
 
 export type TTheme = 'entur' | 'dark' | 'light'
 
 export type TBoard = {
     id?: TBoardID
-    title?: string
+    meta?: TMeta
     tiles: TTile[]
-    version?: number
     theme?: TTheme
 }
 

next-tavla/src/Shared/utils/time.ts

@@ -20,3 +20,15 @@ export function formatTimeStamp(timestamp: number) {
         minute: '2-digit',
     }).format(timestamp)
 }
+
+export function formatDate(date: Date) {
+    return date
+        .toLocaleDateString('no-NB', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        })
+        .replace(',', '')
+}