From 0b7fe629b8f38ff462c84bdb0c6e197fc9ef5fe7 Mon Sep 17 00:00:00 2001
From: Raymond Ma <60418739+ma-ray@users.noreply.github.com>
Date: Sat, 9 Dec 2023 15:16:57 -0500
Subject: [PATCH 1/2] add react router

---
 package.json |  1 +
 yarn.lock    | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/package.json b/package.json
index cb5c967..922391c 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/yarn.lock b/yarn.lock
index 61b5633..bf4c192 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -527,6 +527,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@remix-run/router@1.13.1":
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e"
+  integrity sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==
+
 "@sindresorhus/is@^4.0.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
@@ -2649,6 +2654,21 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-router-dom@^6.20.1:
+  version "6.20.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.1.tgz#e34f8075b9304221420de3609e072bb349824984"
+  integrity sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==
+  dependencies:
+    "@remix-run/router" "1.13.1"
+    react-router "6.20.1"
+
+react-router@6.20.1:
+  version "6.20.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.1.tgz#e8cc326031d235aaeec405bb234af77cf0fe75ef"
+  integrity sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==
+  dependencies:
+    "@remix-run/router" "1.13.1"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"

From 90b5dc4dd537a918e74b767e2319efbb27ac5a31 Mon Sep 17 00:00:00 2001
From: Raymond Ma <60418739+ma-ray@users.noreply.github.com>
Date: Sat, 9 Dec 2023 15:17:13 -0500
Subject: [PATCH 2/2] configure routing

---
 src/App.css                 | 21 ---------------------
 src/App.tsx                 | 12 ------------
 src/Home.tsx                | 12 ------------
 src/components/Calendar.tsx |  9 ++++++---
 src/main.tsx                | 17 +++++++++++++++--
 src/pages/DiaryPage.tsx     | 14 ++++++++++++++
 src/pages/HomePage.tsx      | 12 ++++++++++++
 7 files changed, 47 insertions(+), 50 deletions(-)
 delete mode 100644 src/App.css
 delete mode 100644 src/App.tsx
 delete mode 100644 src/Home.tsx
 create mode 100644 src/pages/DiaryPage.tsx
 create mode 100644 src/pages/HomePage.tsx

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index bd8116c..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/* #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-} */
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index bd920bb..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import './App.css'
-import HomePage from './Home'
-
-function App() {
-  return (
-    <div>
-      <HomePage />
-    </div>
-  )
-}
-
-export default App
diff --git a/src/Home.tsx b/src/Home.tsx
deleted file mode 100644
index 1251152..0000000
--- a/src/Home.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Calendar from './components/Calendar'
-
-const HomePage = () => {
-  return (
-    <div className="flex justify-center items-center">
-      {/* <p>home page</p> */}
-      <Calendar month={11} year={2023} />
-    </div>
-  )
-}
-
-export default HomePage
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index b798bfe..fbc0d29 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -1,5 +1,6 @@
 import { Calendar as CalendarBase, CalendarDate } from 'calendar-base'
 import moment from 'moment'
+import { Link } from 'react-router-dom'
 
 type DayProps = {
   date: CalendarDate
@@ -27,9 +28,11 @@ const Day: React.FC<DayProps> = ({ date }) => {
       className={`flex items-center justify-center border border-black h-24 w-24 col ${bg}
       }`}
     >
-      <h4 className="scroll-m-20 text-2xl font-bold tracking-tight">
-        {date.day}
-      </h4>
+      <Link to={`/diary/${date.year}/${date.month}/${date.day}`}>
+        <h4 className="scroll-m-20 text-2xl font-bold tracking-tight">
+          {date.day}
+        </h4>
+      </Link>
     </div>
   )
 }
diff --git a/src/main.tsx b/src/main.tsx
index 8de0cb6..5c6d60b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,24 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
 import './index.css'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import HomePage from './pages/HomePage.tsx'
+import DiaryPage from './pages/DiaryPage.tsx'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomePage />,
+  },
+  {
+    path: '/diary/:year/:month/:day',
+    element: <DiaryPage />,
+  },
+])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 )
 
diff --git a/src/pages/DiaryPage.tsx b/src/pages/DiaryPage.tsx
new file mode 100644
index 0000000..07d9018
--- /dev/null
+++ b/src/pages/DiaryPage.tsx
@@ -0,0 +1,14 @@
+import { useParams } from 'react-router-dom'
+
+const DiaryPage = () => {
+  const { year, month, day } = useParams()
+
+  return (
+    <div>
+      <p>this is the diary page</p>
+      <p>{`the day is ${year} ${month} ${day}`}</p>
+    </div>
+  )
+}
+
+export default DiaryPage
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..94c78d5
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,12 @@
+import Calendar from '../components/Calendar'
+
+const HomePage = () => {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <p>home page</p>
+      <Calendar month={11} year={2023} />
+    </div>
+  )
+}
+
+export default HomePage