Merge pull request #13 from ma-ray/add-not-found-page

Add not found page

src/App.tsx

@@ -2,8 +2,13 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import HomePage from './pages/HomePage.tsx'
 import DiaryPage from './pages/DiaryPage.tsx'
 import { SettingsProvider } from './context/SettingsContext.tsx'
+import NotFoundPage from './pages/NotFoundPage.tsx'
 
 const router = createBrowserRouter([
+  {
+    path: '*',
+    element: <NotFoundPage />,
+  },
   {
     path: '/',
     element: <HomePage />,

src/components/Calendar.tsx

@@ -1,7 +1,7 @@
 import { Calendar as CalendarBase, CalendarDate } from 'calendar-base'
 import moment from 'moment'
 import { Link } from 'react-router-dom'
-import { months } from '../util/time'
+import { months } from '../util/date'
 
 type DayProps = {
   date: CalendarDate

src/pages/DiaryPage.tsx

@@ -1,5 +1,5 @@
 import '@mdxeditor/editor/style.css'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import {
   MDXEditor,
   headingsPlugin,
@@ -20,8 +20,9 @@ import {
   dateStatus,
   getNextDayLink,
   getPreviousDayLink,
+  isDateValid,
   months,
-} from '../util/time'
+} from '../util/date'
 import { debounce } from 'lodash'
 import { useEffect, useRef, useState } from 'react'
 import moment from 'moment'
@@ -34,6 +35,7 @@ type ParamsType = {
 
 const DiaryPage = () => {
   const { year, month, day } = useParams<ParamsType>()
+  const navigate = useNavigate()
   const [canEdit, setCanEdit] = useState(false)
   const [loading, setLoading] = useState(true)
   const [fileContent, setFileContent] = useState('')
@@ -51,6 +53,12 @@ const DiaryPage = () => {
     ])
   )
 
+  useEffect(() => {
+    if (!isDateValid(day, month, year)) {
+      navigate('/')
+    }
+  }, [day, month, year, navigate])
+
   useEffect(() => {
     if (year && month && day) {
       const isToday = moment([year, month, day]).isSame(moment().startOf('day'))

src/pages/NotFoundPage.tsx

@@ -0,0 +1,21 @@
+import { AlertOctagon } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+
+const NotFoundPage = () => {
+  return (
+    <div className="h-screen">
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <AlertOctagon className="h-20 w-20" />
+        <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+          whoops... whatever you are looking for is not here
+        </h3>
+        <Link to="/">
+          <Button>go back home</Button>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default NotFoundPage

src/util/time.ts → src/util/date.ts

@@ -63,3 +63,13 @@ export const getPreviousDayLink = (
     'month'
   )}/${currentDate.get('date')}`
 }
+
+export const isDateValid = (day?: string, month?: string, year?: string) =>
+  !isNaN(Number(year)) &&
+  !isNaN(Number(month)) &&
+  !isNaN(Number(day)) &&
+  moment([
+    parseInt(year ?? ''),
+    parseInt(month ?? ''),
+    parseInt(day ?? ''),
+  ]).isValid()