feat: use useOutletContext

RSSNext · May 22, 2024 · b3e4270 · b3e4270
1 parent 4ab3633
commit b3e4270
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 79 deletions.
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -8,18 +8,15 @@ import { PictureItem } from "./picture-item"
 import { VideoItem } from "./video-item"
 import { NotificationItem } from "./notification-item"
 import { EntryItemWrapper } from "./item-wrapper"
+import { useOutletContext } from "react-router-dom"
 
 const gridMode = [2, 3]
 
-export function EntryColumn({
-  activedList,
-  activedEntry,
-  setActivedEntry,
-}: {
-  activedList: ActivedList
-  activedEntry: ActivedEntry
-  setActivedEntry: (value: ActivedEntry) => void
-}) {
+export function EntryColumn() {
+  const { activedList, setActivedEntry } = useOutletContext<{
+    activedList: ActivedList
+    setActivedEntry: (value: ActivedEntry) => void
+  }>()
   const entries = useEntries({
     level: activedList?.level,
     id: activedList?.id,
@@ -72,8 +69,6 @@ export function EntryColumn({
               <EntryItemWrapper
                 key={entry.id}
                 entry={entry}
-                activedEntry={activedEntry}
-                setActivedEntry={setActivedEntry}
                 view={activedList?.view}
               >
                 <Item entry={entry} />

diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -2,17 +2,14 @@ import { ActivedEntry, EntriesResponse } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
+import { useOutletContext } from "react-router-dom"
 
 export function EntryItemWrapper({
   entry,
-  activedEntry,
-  setActivedEntry,
   children,
   view,
 }: {
   entry: EntriesResponse[number]
-  activedEntry: ActivedEntry
-  setActivedEntry: (value: ActivedEntry) => void
   children: React.ReactNode
   view?: number
 }) {
@@ -22,6 +19,10 @@ export function EntryItemWrapper({
     view,
     entry,
   })
+  const { activedEntry, setActivedEntry } = useOutletContext<{
+    activedEntry: ActivedEntry
+    setActivedEntry: (value: ActivedEntry) => void
+  }>()
 
   return (
     <div

diff --git a/src/renderer/src/components/feed-column/category.tsx b/src/renderer/src/components/feed-column/category.tsx
@@ -5,7 +5,7 @@ import {
 import { m, AnimatePresence } from "framer-motion"
 import { useEffect, useState } from "react"
 import { levels } from "@renderer/lib/constants"
-import { ActivedList } from "@renderer/lib/types"
+import { ActivedEntry, ActivedList } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
 import { Response as SubscriptionsResponse } from "@renderer/lib/queries/subscriptions"
 import { showNativeMenu } from "@renderer/lib/native-menu"
@@ -15,20 +15,21 @@ import { apiFetch } from "@renderer/lib/queries/api-fetch"
 import { CategoryRenameDialog } from "./category-rename-dialog"
 import { Dialog } from "@renderer/components/ui/dialog"
 import { FeedItem } from "./item"
+import { useOutletContext } from "react-router-dom"
 
 export function FeedCategory({
   data,
-  activedList,
-  setActivedList,
   view,
   expansion,
 }: {
   data: SubscriptionsResponse["list"][number]
-  activedList?: ActivedList
-  setActivedList?: (value: ActivedList) => void
   view?: number
   expansion: boolean
 }) {
+  const { activedList, setActivedList } = useOutletContext<{
+    activedList: ActivedList
+    setActivedList: (value: ActivedList) => void
+  }>()
   const [open, setOpen] = useState(!data.name)
   const [dialogOpen, setDialogOpen] = useState(false)
 
@@ -164,8 +165,6 @@ export function FeedCategory({
               <FeedItem
                 key={feed.feedId}
                 feed={feed}
-                activedList={activedList}
-                setActivedList={setActivedList}
                 view={view}
                 className={!!data.name ? "pl-6" : "pl-2.5"}
               />

diff --git a/src/renderer/src/components/feed-column/index.tsx b/src/renderer/src/components/feed-column/index.tsx
@@ -13,18 +13,15 @@ import { FeedList } from "./list"
 import { ActivedList } from "@renderer/lib/types"
 import { UserButton } from "@renderer/components/user-button"
 import { levels, views } from "@renderer/lib/constants"
-import { Link } from "react-router-dom"
+import { Link, useOutletContext } from "react-router-dom"
 import { Button } from "@renderer/components/ui/button"
 
 const lethargy = new Lethargy()
 
-export function FeedColumn({
-  activedList,
-  setActivedList,
-}: {
-  activedList?: ActivedList
-  setActivedList?: (value: ActivedList) => void
-}) {
+export function FeedColumn() {
+  const { setActivedList } = useOutletContext<{
+    setActivedList: (value: ActivedList) => void
+  }>()
   const carouselRef = useRef<HTMLDivElement>(null)
 
   const [active, setActive] = useState(0)
@@ -140,12 +137,7 @@ export function FeedColumn({
               key={item.name}
               className="snap-center shrink-0 overflow-y-auto"
             >
-              <FeedList
-                className="w-64 px-3 mb-6"
-                view={index}
-                activedList={activedList}
-                setActivedList={setActivedList}
-              />
+              <FeedList className="w-64 px-3 mb-6" view={index} />
             </section>
           ))}
         </m.div>

diff --git a/src/renderer/src/components/feed-column/item.tsx b/src/renderer/src/components/feed-column/item.tsx
@@ -18,21 +18,22 @@ import { Dialog } from "@renderer/components/ui/dialog"
 import { FollowDialog } from "@renderer/components/follow/dialog"
 import { useToast } from "@renderer/components/ui/use-toast"
 import { ToastAction } from "@renderer/components/ui/toast"
+import { useOutletContext } from "react-router-dom"
 
 export function FeedItem({
   feed,
-  activedList,
-  setActivedList,
   view,
   className,
 }: {
   feed: SubscriptionResponse[number]
-  activedList?: ActivedList
-  setActivedList?: (value: ActivedList) => void
   view?: number
   className?: string
 }) {
   const [dialogOpen, setDialogOpen] = useState(false)
+  const { activedList, setActivedList } = useOutletContext<{
+    activedList: ActivedList
+    setActivedList: (value: ActivedList) => void
+  }>()
 
   const setFeedActive = (feed: SubscriptionResponse[number]) => {
     view !== undefined &&

diff --git a/src/renderer/src/components/feed-column/list.tsx b/src/renderer/src/components/feed-column/list.tsx
@@ -4,22 +4,23 @@ import { levels, views } from "@renderer/lib/constants"
 import { ActivedList } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
 import { FeedCategory } from "./category"
+import { useOutletContext } from "react-router-dom"
 
 export function FeedList({
   className,
   view,
-  activedList,
-  setActivedList,
   hideTitle,
 }: {
   className?: string
   view?: number
-  activedList?: ActivedList
-  setActivedList?: (value: ActivedList) => void
   hideTitle?: boolean
 }) {
   const subscriptions = useSubscriptions(view)
   const [expansion, setExpansion] = useState(false)
+  const { setActivedList } = useOutletContext<{
+    activedList: ActivedList
+    setActivedList: (value: ActivedList) => void
+  }>()
 
   return (
     <div className={className}>
@@ -32,7 +33,7 @@ export function FeedList({
             onClick={(e) => {
               e.stopPropagation()
               view !== undefined &&
-                setActivedList?.({
+                setActivedList({
                   level: levels.view,
                   id: view,
                   name: views[view].name,
@@ -62,8 +63,6 @@ export function FeedList({
         <FeedCategory
           key={category.name}
           data={category}
-          activedList={activedList}
-          setActivedList={setActivedList}
           view={view}
           expansion={expansion}
         />

diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
@@ -21,25 +21,32 @@ const router = createBrowserRouter([
         children: [
           {
             path: "",
-            lazy: () => import("./pages/(main)/index"),
-          },
-          {
-            path: "/follow",
-            lazy: () => import("./pages/(main)/follow/layout"),
+            lazy: () => import("./pages/(main)/(context)/layout"),
             children: [
               {
                 path: "",
-                lazy: () => import("./pages/(main)/follow/index"),
+                lazy: () => import("./pages/(main)/(context)/index"),
               },
-            ],
-          },
-          {
-            path: "/profile",
-            lazy: () => import("./pages/(main)/profile/layout"),
-            children: [
               {
-                path: "",
-                lazy: () => import("./pages/(main)/profile/index"),
+                path: "/follow",
+                lazy: () => import("./pages/(main)/(context)/follow/layout"),
+                children: [
+                  {
+                    path: "",
+                    lazy: () => import("./pages/(main)/(context)/follow/index"),
+                  },
+                ],
+              },
+              {
+                path: "/profile",
+                lazy: () => import("./pages/(main)/(context)/profile/layout"),
+                children: [
+                  {
+                    path: "",
+                    lazy: () =>
+                      import("./pages/(main)/(context)/profile/index"),
+                  },
+                ],
               },
             ],
           },

diff --git a/...enderer/src/pages/(main)/follow/index.tsx → ...c/pages/(main)/(context)/follow/index.tsx b/...enderer/src/pages/(main)/follow/index.tsx → ...c/pages/(main)/(context)/follow/index.tsx
diff --git a/...nderer/src/pages/(main)/follow/layout.tsx → .../pages/(main)/(context)/follow/layout.tsx b/...nderer/src/pages/(main)/follow/layout.tsx → .../pages/(main)/(context)/follow/layout.tsx
diff --git a/src/renderer/src/pages/(main)/index.tsx → ...erer/src/pages/(main)/(context)/index.tsx b/src/renderer/src/pages/(main)/index.tsx → ...erer/src/pages/(main)/(context)/index.tsx
@@ -29,11 +29,7 @@ export function Component() {
             : "w-[340px]",
         )}
       >
-        <EntryColumn
-          activedList={activedList}
-          activedEntry={activedEntry}
-          setActivedEntry={setActivedEntry}
-        />
+        <EntryColumn />
       </div>
       <AnimatePresence>
         {!(activedList && wideMode.includes(activedList.view)) &&

diff --git a/src/renderer/src/pages/(main)/(context)/layout.tsx b/src/renderer/src/pages/(main)/(context)/layout.tsx
@@ -0,0 +1,29 @@
+import { FeedColumn } from "@renderer/components/feed-column"
+import { ActivedEntry, ActivedList } from "@renderer/lib/types"
+import { Outlet, useOutletContext } from "react-router-dom"
+
+export function Component() {
+  const { activedList, setActivedList, activedEntry, setActivedEntry } =
+    useOutletContext<{
+      activedList: ActivedList
+      setActivedList: (value: ActivedList) => void
+      activedEntry: ActivedEntry
+      setActivedEntry: (value: ActivedEntry) => void
+    }>()
+
+  return (
+    <div className="flex h-full">
+      <div className="w-64 pt-10 border-r shrink-0 bg-native">
+        <FeedColumn />
+      </div>
+      <Outlet
+        context={{
+          activedList,
+          activedEntry,
+          setActivedEntry,
+          setActivedList,
+        }}
+      />
+    </div>
+  )
+}
diff --git a/...nderer/src/pages/(main)/profile/index.tsx → .../pages/(main)/(context)/profile/index.tsx b/...nderer/src/pages/(main)/profile/index.tsx → .../pages/(main)/(context)/profile/index.tsx
diff --git a/...derer/src/pages/(main)/profile/layout.tsx → ...pages/(main)/(context)/profile/layout.tsx b/...derer/src/pages/(main)/profile/layout.tsx → ...pages/(main)/(context)/profile/layout.tsx
diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
@@ -1,4 +1,3 @@
-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"
@@ -28,17 +27,13 @@ export function Component() {
   }
 
   return (
-    <div className="flex h-full">
-      <div className="w-64 pt-10 border-r shrink-0 bg-native">
-        <FeedColumn activedList={activedList} setActivedList={setActivedList} />
-      </div>
-      <Outlet
-        context={{
-          activedList,
-          activedEntry,
-          setActivedEntry,
-        }}
-      />
-    </div>
+    <Outlet
+      context={{
+        activedList,
+        activedEntry,
+        setActivedEntry,
+        setActivedList,
+      }}
+    />
   )
 }