feat: main layout

RSSNext · Apr 30, 2024 · 1cd0f6d · 1cd0f6d
1 parent 4e898dc
commit 1cd0f6d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
@@ -17,7 +17,13 @@ const router = createBrowserRouter([
     children: [
       {
         path: "",
-        lazy: () => import("./pages/index"),
+        lazy: () => import("./pages/(main)/layout"),
+        children: [
+          {
+            path: "",
+            lazy: () => import("./pages/(main)/index"),
+          },
+        ],
       },
       {
         path: "login",

diff --git a/src/renderer/src/pages/index.tsx → src/renderer/src/pages/(main)/index.tsx b/src/renderer/src/pages/index.tsx → src/renderer/src/pages/(main)/index.tsx
@@ -1,31 +1,26 @@
-import { FeedColumn } from "@renderer/components/feed-column"
 import { EntryColumn } from "@renderer/components/entry-column"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { ActivedList, ActivedEntry } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
 import { EntryContent } from "@renderer/components/entry-content"
 import { AnimatePresence } from "framer-motion"
+import { useOutletContext } from "react-router-dom"
 
 const wideMode = [1, 2, 3, 4]
 
 export function Component() {
-  const [activedList, setActivedList] = useState<ActivedList>({
-    level: "view",
-    id: 0,
-    name: "Articles",
-    view: 0,
-  })
-  const [activedEntry, setActivedEntry] = useState<ActivedEntry>(null)
+  const { activedList, activedEntry, setActivedEntry } = useOutletContext<{
+    activedList: ActivedList
+    activedEntry: ActivedEntry
+    setActivedEntry: (value: ActivedEntry) => void
+  }>()
 
   useEffect(() => {
     setActivedEntry(null)
   }, [activedList])
 
   return (
     <div className="flex h-full">
-      <div className="w-64 pt-10 border-r shrink-0 bg-[#E1E0DF]">
-        <FeedColumn activedList={activedList} setActivedList={setActivedList} />
-      </div>
       <div
         className={cn(
           "pt-10 border-r shrink-0 h-full overflow-y-auto",

diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
@@ -0,0 +1,33 @@
+import { FeedColumn } from "@renderer/components/feed-column"
+import { useEffect, useState } from "react"
+import { ActivedList, ActivedEntry } from "@renderer/lib/types"
+import { Outlet } from "react-router-dom"
+
+export function Component() {
+  const [activedList, setActivedList] = useState<ActivedList>({
+    level: "view",
+    id: 0,
+    name: "Articles",
+    view: 0,
+  })
+  const [activedEntry, setActivedEntry] = useState<ActivedEntry>(null)
+
+  useEffect(() => {
+    setActivedEntry(null)
+  }, [activedList])
+
+  return (
+    <div className="flex h-full">
+      <div className="w-64 pt-10 border-r shrink-0 bg-[#E1E0DF]">
+        <FeedColumn activedList={activedList} setActivedList={setActivedList} />
+      </div>
+      <Outlet
+        context={{
+          activedList,
+          activedEntry,
+          setActivedEntry,
+        }}
+      />
+    </div>
+  )
+}