refactor: remove url param hook from ProjectListItem

taskany-inc · Sep 9, 2024 · 1cda4d3 · 1cda4d3
1 parent 42af6bb
commit 1cda4d3
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 68 deletions.
diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
@@ -21,6 +21,7 @@ import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
 import { Kanban, buildKanban } from '../Kanban/Kanban';
 import { NoGoalsText } from '../NoGoalsText/NoGoalsText';
 import { safeUserData } from '../../utils/getUserName';
+import { routes } from '../../hooks/router';
 
 import { tr } from './DashboardPage.i18n';
 
@@ -151,6 +152,7 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
 
                     return (
                         <ProjectListItemCollapsable
+                            href={routes.project(project.id, view ? `view=${view}` : undefined)}
                             key={project.id}
                             interactive
                             visible

diff --git a/src/components/ExploreProjectsPage/ExploreProjectsPage.tsx b/src/components/ExploreProjectsPage/ExploreProjectsPage.tsx
@@ -1,6 +1,5 @@
 import { nullable } from '@taskany/bricks';
-import { Table, Link } from '@taskany/bricks/harmony';
-import NextLink from 'next/link';
+import { Table } from '@taskany/bricks/harmony';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';
 import { routes } from '../../hooks/router';
@@ -22,24 +21,21 @@ export const ExploreProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
             <Table>
                 {data.projects.map((project) =>
                     nullable(project, (p) => (
-                        <NextLink key={p.id} href={routes.project(p.id)} passHref legacyBehavior>
-                            <Link>
-                                <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
-                                    <ProjectListItem
-                                        id={p.id}
-                                        title={p.title}
-                                        flowId={p.flowId}
-                                        stargizers={p._count.stargizers}
-                                        owner={p.activity}
-                                        starred={p._isStarred}
-                                        watching={p._isWatching}
-                                        participants={p.participants}
-                                        averageScore={p.averageScore}
-                                        actionButtonView="icons"
-                                    />
-                                </TableRowItem>
-                            </Link>
-                        </NextLink>
+                        <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
+                            <ProjectListItem
+                                href={routes.project(p.id)}
+                                id={p.id}
+                                title={p.title}
+                                flowId={p.flowId}
+                                stargizers={p._count.stargizers}
+                                owner={p.activity}
+                                starred={p._isStarred}
+                                watching={p._isWatching}
+                                participants={p.participants}
+                                averageScore={p.averageScore}
+                                actionButtonView="icons"
+                            />
+                        </TableRowItem>
                     )),
                 )}
             </Table>

diff --git a/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.tsx b/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.tsx
@@ -26,26 +26,21 @@ export const ExploreProjectsStarredPage = ({ user, ssrTime }: ExternalPageProps)
                         <Table>
                             {projects.map((project) =>
                                 nullable(project, (p) => (
-                                    <NextLink key={p.id} href={routes.project(p.id)} passHref legacyBehavior>
-                                        <Link>
-                                            <TableRowItem
-                                                title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}
-                                            >
-                                                <ProjectListItem
-                                                    title={p.title}
-                                                    flowId={p.flowId}
-                                                    id={p.id}
-                                                    stargizers={p._count.stargizers}
-                                                    owner={p.activity}
-                                                    starred={!!p._isStarred}
-                                                    watching={!!p._isWatching}
-                                                    participants={p.participants as ActivityByIdReturnType[]}
-                                                    averageScore={p.averageScore}
-                                                    actionButtonView="icons"
-                                                />
-                                            </TableRowItem>
-                                        </Link>
-                                    </NextLink>
+                                    <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
+                                        <ProjectListItem
+                                            href={routes.project(p.id)}
+                                            title={p.title}
+                                            flowId={p.flowId}
+                                            id={p.id}
+                                            stargizers={p._count.stargizers}
+                                            owner={p.activity}
+                                            starred={!!p._isStarred}
+                                            watching={!!p._isWatching}
+                                            participants={p.participants as ActivityByIdReturnType[]}
+                                            averageScore={p.averageScore}
+                                            actionButtonView="icons"
+                                        />
+                                    </TableRowItem>
                                 )),
                             )}
                         </Table>

diff --git a/src/components/ExploreTopProjectsPage/ExploreTopProjectsPage.tsx b/src/components/ExploreTopProjectsPage/ExploreTopProjectsPage.tsx
@@ -1,6 +1,5 @@
 import { nullable } from '@taskany/bricks';
-import { Table, Link } from '@taskany/bricks/harmony';
-import NextLink from 'next/link';
+import { Table } from '@taskany/bricks/harmony';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';
 import { routes } from '../../hooks/router';
@@ -22,24 +21,21 @@ export const ExploreProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
             <Table>
                 {projects.data.map((project) =>
                     nullable(project, (p) => (
-                        <NextLink key={p.id} href={routes.project(p.id)} passHref legacyBehavior>
-                            <Link>
-                                <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
-                                    <ProjectListItem
-                                        title={p.title}
-                                        flowId={p.flowId}
-                                        id={p.id}
-                                        stargizers={p._count.stargizers}
-                                        owner={p.activity}
-                                        starred={p._isStarred}
-                                        watching={p._isWatching}
-                                        participants={p.participants}
-                                        averageScore={p.averageScore}
-                                        actionButtonView="icons"
-                                    />
-                                </TableRowItem>
-                            </Link>
-                        </NextLink>
+                        <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
+                            <ProjectListItem
+                                href={routes.project(p.id)}
+                                title={p.title}
+                                flowId={p.flowId}
+                                id={p.id}
+                                stargizers={p._count.stargizers}
+                                owner={p.activity}
+                                starred={p._isStarred}
+                                watching={p._isWatching}
+                                participants={p.participants}
+                                averageScore={p.averageScore}
+                                actionButtonView="icons"
+                            />
+                        </TableRowItem>
                     )),
                 )}
             </Table>

diff --git a/src/components/ProjectListItem/ProjectListItem.tsx b/src/components/ProjectListItem/ProjectListItem.tsx
@@ -7,12 +7,11 @@ import { ActivityByIdReturnType } from '../../../trpc/inferredTypes';
 import { ProjectSubscriptionButtons } from '../ProjectSubscriptionButtons/ProjectSubscriptionButtons';
 import { safeUserData } from '../../utils/getUserName';
 import { participants as participantsDO } from '../../utils/domObjects';
-import { routes } from '../../hooks/router';
-import { useUrlFilterParams } from '../../hooks/useUrlFilterParams';
 
 import s from './ProjectListItem.module.css';
 
 interface ProjectListItemProps {
+    href?: string;
     id: string;
     stargizers: number;
     flowId: string;
@@ -37,9 +36,9 @@ export const ProjectListItem: React.FC<ProjectListItemProps & ComponentProps<typ
     averageScore,
     className,
     actionButtonView,
+    href,
     ...attrs
 }) => {
-    const { view } = useUrlFilterParams({});
     const ownerUserGroup = useMemo(() => [owner].map(safeUserData).filter(Boolean), [owner]);
     const participantUserGroup = useMemo(() => participants?.map(safeUserData).filter(Boolean), [participants]);
 
@@ -69,7 +68,7 @@ export const ProjectListItem: React.FC<ProjectListItemProps & ComponentProps<typ
                     view={actionButtonView}
                     watching={watching}
                     stargizersCounter={stargizers}
-                    href={routes.project(id, view ? `view=${view}` : undefined)}
+                    href={href}
                 />
             </TableCell>
         </TableRow>

diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -11,6 +11,7 @@ import { TableRowItem, TableRowItemTitle } from '../TableRowItem/TableRowItem';
 import s from './ProjectListItemCollapsable.module.css';
 
 interface ProjectListItemCollapsableProps extends Omit<ComponentProps<typeof TreeViewNode>, 'title'> {
+    href?: string;
     project: NonNullable<Omit<DashboardProjectV2, 'children' | 'goals'>>;
     parent?: NonNullable<Omit<DashboardProjectV2, 'children' | 'goals'>>;
     goals?: ReactNode;
@@ -25,6 +26,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     parent,
     children,
     goals,
+    href,
     className,
     titleSize = 'l',
     interactive = true,
@@ -55,6 +57,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
         >
             <ProjectListItem
                 id={project.id}
+                href={href}
                 flowId={project.flowId}
                 title={project.title}
                 stargizers={project._count.stargizers}

diff --git a/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx
@@ -6,6 +6,7 @@ import { FilterById, GoalByIdReturnType } from '../../../trpc/inferredTypes';
 import { trpc } from '../../utils/trpcClient';
 import { useUrlFilterParams } from '../../hooks/useUrlFilterParams';
 import { refreshInterval } from '../../utils/config';
+import { routes } from '../../hooks/router';
 import { GoalTableList, mapToRenderProps } from '../GoalTableList/GoalTableList';
 import { ProjectListItemCollapsable } from '../ProjectListItemCollapsable/ProjectListItemCollapsable';
 import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
@@ -139,6 +140,7 @@ export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
     return (
         <>
             <ProjectListItemCollapsable
+                href={routes.project(project.id, view ? `view=${view}` : undefined)}
                 onClick={onProjectClickHandler}
                 project={project}
                 parent={isKanbanView ? parent : undefined}

diff --git a/src/components/ProjectSubscriptionButtons/ProjectSubscriptionButtons.module.css b/src/components/ProjectSubscriptionButtons/ProjectSubscriptionButtons.module.css
@@ -0,0 +1,3 @@
+.NewTabButton {
+  height: 100%;
+}
diff --git a/src/components/ProjectSubscriptionButtons/ProjectSubscriptionButtons.tsx b/src/components/ProjectSubscriptionButtons/ProjectSubscriptionButtons.tsx
@@ -11,6 +11,7 @@ import { createGoalInlineControl } from '../../utils/domObjects';
 import { NextLink } from '../NextLink';
 
 import { tr } from './ProjectSubscriptionButtons.i18n';
+import s from './ProjectSubscriptionButtons.module.css';
 
 interface ProjectSubscriptionButtonsProps {
     project: {
@@ -21,7 +22,7 @@ interface ProjectSubscriptionButtonsProps {
     starred?: boolean;
     watching?: boolean;
     stargizersCounter: number;
-    href: string;
+    href?: string;
     view?: 'default' | 'icons';
 }
 
@@ -65,9 +66,9 @@ export const ProjectSubscriptionButtons: FC<ProjectSubscriptionButtonsProps> = (
                     onClick={onAddClick}
                 />,
             )}
-            {nullable(view === 'icons', () => (
-                <NextLink href={href} target="_blank" onClick={onNewTabClick}>
-                    <Button view="clear" iconLeft={<IconTopRightOutline size="s" />} />
+            {nullable(view === 'icons' && href, (h) => (
+                <NextLink href={h} target="_blank" onClick={onNewTabClick}>
+                    <Button className={s.NewTabButton} view="clear" iconLeft={<IconTopRightOutline size="s" />} />
                 </NextLink>
             ))}
         </>