interecitpitng routes

apps/bible/README.md

@@ -10,6 +10,7 @@
 - [ ] Intercepting Routes 
 - [ ] Barrel exports
 - [ ] Eslint, Prettier - airbnb?
+- [ ] husky 
 - [ ] Card, Layout How to find reusable components
 - [ ] Types, Naming Types. component Task type = Task?
 - [ ] Spreding props, when to and when not to <Task key={task.id} {...task} />

apps/bible/app/bible/routing/intercepting-routes/@modal/(.)todo/[todo-id]/loading.tsx

@@ -0,0 +1,5 @@
+import { Heading } from '@/components/typography/heading'
+
+export default function Loading() {
+  return <Heading level="4">Loading todo by id in modal..</Heading>
+}

apps/bible/app/bible/routing/intercepting-routes/@modal/(.)todo/[todo-id]/modal.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { type ElementRef, useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
+import { createPortal } from 'react-dom'
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const dialogRef = useRef<ElementRef<'dialog'>>(null)
+
+  useEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal()
+    }
+  }, [])
+
+  function onDismiss() {
+    router.back()
+  }
+
+  return createPortal(
+    <div className="modal-backdrop">
+      <dialog ref={dialogRef} className="modal" onClose={onDismiss}>
+        {children}
+        <button onClick={onDismiss} className="close-button" />
+      </dialog>
+    </div>,
+    document.getElementById('modal-root')!
+  )
+}

apps/bible/app/bible/routing/intercepting-routes/@modal/(.)todo/[todo-id]/page.tsx

@@ -0,0 +1,6 @@
+import { sleep } from '@/lib/utils'
+
+export default async function TodoByIdModalPage() {
+  await sleep(2000)
+  return <div>i am todo modal</div>
+}

apps/bible/app/bible/routing/intercepting-routes/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

apps/bible/app/bible/routing/intercepting-routes/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

apps/bible/app/bible/routing/intercepting-routes/layout.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+type Props = PropsWithChildren & {
+  modal: ReactNode
+}
+
+export default function InterceptingRoutesLayout({ children, modal }: Props) {
+  return (
+    <div>
+      {children}
+      {modal}
+      <div id="modal-root" />
+    </div>
+  )
+}

apps/bible/app/bible/routing/intercepting-routes/loading.tsx

@@ -0,0 +1,5 @@
+import { Heading } from '@/components/typography/heading'
+
+export default function Loading() {
+  return <Heading level="4">Loading todos...</Heading>
+}

apps/bible/app/bible/routing/intercepting-routes/page.tsx

@@ -1,5 +1,20 @@
-const InterceptingRoutes = () => {
-  return <div>hi</div>
+import { Stack } from '@/components/primitives/stack'
+import { todo } from '@/module/todo'
+import Link from 'next/link'
+
+const InterceptingRoutesPage = async () => {
+  const { todos } = await todo.api.getTodos()
+  return (
+    <Stack>
+      {todos.map((item) => {
+        return (
+          <Link href={`/bible/routing/intercepting-routes/todo/${item.id}`} key={item.id}>
+            <todo.components.TodoCard {...item} />
+          </Link>
+        )
+      })}
+    </Stack>
+  )
 }
 
-export default InterceptingRoutes
+export default InterceptingRoutesPage

apps/bible/app/bible/routing/intercepting-routes/todo/[todo-id]/loading.tsx

@@ -0,0 +1,5 @@
+import { Heading } from '@/components/typography/heading'
+
+export default function Loading() {
+  return <Heading level="4">Loading todo by id in page..</Heading>
+}

apps/bible/app/bible/routing/intercepting-routes/todo/[todo-id]/page.tsx

@@ -0,0 +1,6 @@
+import { sleep } from '@/lib/utils'
+
+export default async function TodoByIdPage() {
+  await sleep(2000)
+  return <div>hi</div>
+}