From 67f001efc844403802397b623b49ea19ba833f2a Mon Sep 17 00:00:00 2001
From: riazaia <riazaia.art@gmail.com>
Date: Wed, 5 Jul 2023 17:43:48 -0300
Subject: [PATCH 1/2] Add href properties to thread view change buttons

---
 src/components/thread/ThreadSidebar.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/thread/ThreadSidebar.tsx b/src/components/thread/ThreadSidebar.tsx
index f72333a6..c3267586 100644
--- a/src/components/thread/ThreadSidebar.tsx
+++ b/src/components/thread/ThreadSidebar.tsx
@@ -13,6 +13,7 @@ import { UNCATEGORIZED_LABEL } from "utils/thread-utils";
 import classnames from "classnames";
 import { formatDistanceToNow } from "date-fns";
 import { useFilterableContext } from "components/core/feeds/FilterableContext";
+import { useCachedLinks } from 'components/hooks/useCachedLinks';
 import { useForceHideIdentity } from "components/hooks/useForceHideIdentity";
 import { useThreadContext } from "components/thread/ThreadContext";
 
@@ -25,7 +26,16 @@ export interface ThreadSidebarProps {
 
 const ThreadSidebar: React.FC<ThreadSidebarProps> = (props) => {
   const { forceHideIdentity } = useForceHideIdentity();
-  const { threadRoot, categories, contentNotices } = useThreadContext();
+  const { threadRoot, categories, contentNotices, parentBoardSlug, threadId } = useThreadContext();
+  const { getLinkToThread } = useCachedLinks();
+
+    const linkToThread = getLinkToThread({
+// @ts-ignore
+      slug: parentBoardSlug,
+// @ts-ignore
+    threadId: threadId,
+  });
+ 
   const {
     activeCategories,
     setActiveCategories,
@@ -57,24 +67,24 @@ const ThreadSidebar: React.FC<ThreadSidebarProps> = (props) => {
                 id: THREAD_VIEW_MODE.THREAD,
                 label: "Thread",
                 link: {
-                  // TODO: add href here
                   onClick: () => props.onViewChange(THREAD_VIEW_MODE.THREAD),
+                  href: `${linkToThread.href}?thread`
                 },
               },
               {
                 id: THREAD_VIEW_MODE.MASONRY,
                 label: "Gallery",
                 link: {
-                  // TODO: add href here
                   onClick: () => props.onViewChange(THREAD_VIEW_MODE.MASONRY),
+                  href: `${linkToThread.href}?all&gallery`
                 },
               },
               {
                 id: THREAD_VIEW_MODE.TIMELINE,
                 label: "Timeline",
                 link: {
-                  // TODO: add href here
                   onClick: () => props.onViewChange(THREAD_VIEW_MODE.TIMELINE),
+                  href: `${linkToThread.href}?all&timeline`
                 },
               },
             ]}

From 303569e97f22a8154ed5f00f6628cebcb4c88b65 Mon Sep 17 00:00:00 2001
From: riazaia <riazaia.art@gmail.com>
Date: Fri, 7 Jul 2023 17:57:06 -0300
Subject: [PATCH 2/2] Fixes for code review

---
 src/components/thread/ThreadSidebar.tsx | 34 +++++++++++++++++--------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/thread/ThreadSidebar.tsx b/src/components/thread/ThreadSidebar.tsx
index c3267586..56ea322a 100644
--- a/src/components/thread/ThreadSidebar.tsx
+++ b/src/components/thread/ThreadSidebar.tsx
@@ -5,6 +5,7 @@ import {
   TagType,
   TagsFilterSection,
 } from "@bobaboard/ui-components";
+import { ThreadPageDetails, usePageDetails } from 'utils/router-utils';
 
 import { DisplayManager } from "components/hooks/useDisplayMananger";
 import React from "react";
@@ -12,8 +13,8 @@ import { THREAD_VIEW_MODE } from "contexts/ThreadViewContext";
 import { UNCATEGORIZED_LABEL } from "utils/thread-utils";
 import classnames from "classnames";
 import { formatDistanceToNow } from "date-fns";
-import { useFilterableContext } from "components/core/feeds/FilterableContext";
 import { useCachedLinks } from 'components/hooks/useCachedLinks';
+import { useFilterableContext } from "components/core/feeds/FilterableContext";
 import { useForceHideIdentity } from "components/hooks/useForceHideIdentity";
 import { useThreadContext } from "components/thread/ThreadContext";
 
@@ -26,15 +27,26 @@ export interface ThreadSidebarProps {
 
 const ThreadSidebar: React.FC<ThreadSidebarProps> = (props) => {
   const { forceHideIdentity } = useForceHideIdentity();
-  const { threadRoot, categories, contentNotices, parentBoardSlug, threadId } = useThreadContext();
+  const { threadRoot, categories, contentNotices } = useThreadContext();
   const { getLinkToThread } = useCachedLinks();
 
-    const linkToThread = getLinkToThread({
-// @ts-ignore
-      slug: parentBoardSlug,
-// @ts-ignore
-    threadId: threadId,
-  });
+  const {threadId, slug} = usePageDetails<ThreadPageDetails>();
+
+  const linkToThread = getLinkToThread({
+    slug,
+    threadId,
+    view: "thread"
+  }).href;
+  const linkToGallery = getLinkToThread({
+    slug,
+    threadId,
+    view: "gallery"
+  }).href;
+const linkToTimeline = getLinkToThread({
+    slug,
+    threadId,
+    view: "timeline"
+  }).href;
  
   const {
     activeCategories,
@@ -68,7 +80,7 @@ const ThreadSidebar: React.FC<ThreadSidebarProps> = (props) => {
                 label: "Thread",
                 link: {
                   onClick: () => props.onViewChange(THREAD_VIEW_MODE.THREAD),
-                  href: `${linkToThread.href}?thread`
+                  href: `${linkToThread}`
                 },
               },
               {
@@ -76,7 +88,7 @@ const ThreadSidebar: React.FC<ThreadSidebarProps> = (props) => {
                 label: "Gallery",
                 link: {
                   onClick: () => props.onViewChange(THREAD_VIEW_MODE.MASONRY),
-                  href: `${linkToThread.href}?all&gallery`
+                  href: `${linkToGallery}`
                 },
               },
               {
@@ -84,7 +96,7 @@ const ThreadSidebar: React.FC<ThreadSidebarProps> = (props) => {
                 label: "Timeline",
                 link: {
                   onClick: () => props.onViewChange(THREAD_VIEW_MODE.TIMELINE),
-                  href: `${linkToThread.href}?all&timeline`
+                  href: `${linkToTimeline}`
                 },
               },
             ]}