fix: try fix can not navigation inbox item in prod

fix: try fix can not navigation inbox item in prod

Author: Innei

apps/desktop/layer/renderer/src/hooks/biz/useNavigateEntry.ts

@@ -4,6 +4,7 @@ import { useSheetContext } from "@follow/components/ui/sheet/context.js"
 import type { FeedViewType } from "@follow/constants"
 import { tracker } from "@follow/tracker"
 import { useCallback } from "react"
+import { toast } from "sonner"
 
 import { disableShowAISummaryOnce } from "~/atoms/ai-summary"
 import { disableShowAITranslationOnce } from "~/atoms/ai-translation"
@@ -46,14 +47,14 @@ export const useNavigateEntry = () => {
   )
 }
 
-/*
- * /timeline/:timelineId/:feedId/:entryId
- * timelineId: view-1
- * feedId: xxx, folder-xxx, list-xxx, inbox-xxx
- * entryId: xxx
- */
-export const navigateEntry = (options: NavigateEntryOptions) => {
-  const { entryId, feedId, view, folderName, inboxId, listId, timelineId, backPath } = options || {}
+type ParsedNavigateEntryOptions = {
+  feedId: string
+  timelineId: string
+  entryId: string
+}
+
+const parseNavigateEntryOptions = (options: NavigateEntryOptions): ParsedNavigateEntryOptions => {
+  const { entryId, feedId, view, folderName, inboxId, listId, timelineId } = options || {}
   const route = getReadonlyRoute()
   const { params } = route
   let finalFeedId = feedId || params.feedId || ROUTE_FEED_PENDING
@@ -62,10 +63,6 @@ export const navigateEntry = (options: NavigateEntryOptions) => {
   const subscription = getSubscriptionByFeedId(finalFeedId)
   const finalView = subscription?.view || view
 
-  if (backPath) {
-    setPreviewBackPath(backPath)
-  }
-
   if ("feedId" in options && feedId === null) {
     finalFeedId = ROUTE_FEED_PENDING
   }
@@ -88,17 +85,61 @@ export const navigateEntry = (options: NavigateEntryOptions) => {
     finalTimelineId = `${ROUTE_TIMELINE_OF_VIEW}${finalView}`
   }
 
+  return {
+    feedId: finalFeedId,
+    timelineId: finalTimelineId,
+    entryId: finalEntryId,
+  }
+}
+
+export function getNavigateEntryPath(options: NavigateEntryOptions | ParsedNavigateEntryOptions) {
+  if ("feedId" in options) {
+    return `/timeline/${options.timelineId}/${options.feedId}/${options.entryId}`
+  }
+
+  const { feedId, timelineId, entryId } = parseNavigateEntryOptions(options)
+
+  return `/timeline/${timelineId}/${feedId}/${entryId}`
+}
+
+/*
+ * /timeline/:timelineId/:feedId/:entryId
+ * timelineId: view-1
+ * feedId: xxx, folder-xxx, list-xxx, inbox-xxx
+ * entryId: xxx
+ */
+export const navigateEntry = (options: NavigateEntryOptions) => {
+  const parsedOptions = parseNavigateEntryOptions(options)
+  const path = getNavigateEntryPath(parsedOptions)
+  const { backPath } = options || {}
+  const route = getReadonlyRoute()
+  const currentPath = route.location.pathname + route.location.search
+  if (path === currentPath) return
+
+  if (backPath) {
+    setPreviewBackPath(backPath)
+  }
+
+  tracker.navigateEntry({
+    feedId: parsedOptions.feedId,
+    entryId: parsedOptions.entryId,
+    timelineId: parsedOptions.timelineId,
+  })
+
   resetShowSourceContent()
   disableShowAISummaryOnce()
   disableShowAITranslationOnce()
 
-  tracker.navigateEntry({ feedId: finalFeedId, entryId: finalEntryId, timelineId: finalTimelineId })
+  const navigate = getStableRouterNavigate()
 
-  const path = `/timeline/${finalTimelineId}/${finalFeedId}/${finalEntryId}`
+  if (!navigate) {
+    const message =
+      "Navigation is not available, maybe a mistake in the code, please report an issue. thx."
+    toast.error(message)
+    throw new Error(message, { cause: "Navigation is not available" })
+  }
 
-  const currentPath = route.location.pathname + route.location.search
-  if (path === currentPath) return
-  return getStableRouterNavigate()?.(path)
+  return navigate?.(path)
 }
 
 export const useBackHome = (timelineId?: string) => {

apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx

@@ -5,8 +5,9 @@ import { views } from "@follow/constants"
 import { EventBus } from "@follow/utils/event-bus"
 import { cn } from "@follow/utils/utils"
 import type { FC, PropsWithChildren } from "react"
-import { useCallback, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { NavLink } from "react-router"
 import { useDebounceCallback } from "usehooks-ts"
 
 import {
@@ -21,7 +22,7 @@ import { useEntryIsRead } from "~/hooks/biz/useAsRead"
 import { useContextMenuActionShortCutTrigger } from "~/hooks/biz/useContextMenuActionShortCutTrigger"
 import { useEntryActions } from "~/hooks/biz/useEntryActions"
 import { useFeedActions } from "~/hooks/biz/useFeedActions"
-import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
+import { getNavigateEntryPath, useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { getRouteParams, useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { useContextMenu } from "~/hooks/common/useContextMenu"
 import { COMMAND_ID } from "~/modules/command/commands/id"
@@ -74,11 +75,20 @@ export const EntryItemWrapper: FC<
   )
 
   const navigate = useNavigateEntry()
+
+  const navigationPath = useMemo(() => {
+    if (!entry?.id) return "#"
+    return getNavigateEntryPath({
+      entryId: entry?.id,
+    })
+  }, [entry?.id])
   const handleClick = useCallback(
     (e) => {
+      e.preventDefault()
       e.stopPropagation()
 
       const shouldNavigate = getRouteParams().entryId !== entry?.id
+
       if (!shouldNavigate) return
       if (!entry?.feedId) return
       if (!asRead) {
@@ -96,7 +106,7 @@ export const EntryItemWrapper: FC<
     },
     [asRead, entry?.id, entry?.feedId, navigate],
   )
-  const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = useCallback(
+  const handleDoubleClick: React.MouseEventHandler<HTMLAnchorElement> = useCallback(
     () => entry?.url && window.open(entry.url, "_blank"),
     [entry?.url],
   )
@@ -168,9 +178,10 @@ export const EntryItemWrapper: FC<
 
   return (
     <div data-entry-id={entry?.id} style={style}>
-      <div
+      <NavLink
+        to={navigationPath}
         className={cn(
-          "hover:bg-theme-item-hover relative duration-200",
+          "hover:bg-theme-item-hover cursor-button relative block duration-200",
           views[view as FeedViewType]?.wideMode ? "rounded-md" : "px-2",
           (isActive || isContextMenuOpen) && "!bg-theme-item-active",
           itemClassName,
@@ -183,7 +194,7 @@ export const EntryItemWrapper: FC<
         {...(!isMobile ? { onTouchStart: handleClick } : {})}
       >
         {children}
-      </div>
+      </NavLink>
     </div>
   )
 }