feat(examples): use <Link /> component from @refinedev/core on ex…

…amples (#6331)
refinedev · Sep 19, 2024 · ac31926 · ac31926
1 parent 5a81b35
commit ac31926
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 36 deletions.
diff --git a/examples/app-crm/src/components/layout/algolia-search/index.tsx b/examples/app-crm/src/components/layout/algolia-search/index.tsx
@@ -1,8 +1,7 @@
 import { type FC, useState } from "react";
 import { useHits, useSearchBox } from "react-instantsearch";
-import { Link } from "react-router-dom";
 
-import { useNavigation, useResource } from "@refinedev/core";
+import { useNavigation, useResource, Link } from "@refinedev/core";
 
 import { SearchOutlined } from "@ant-design/icons";
 import { Input, List, Popover, Tag, Typography } from "antd";
@@ -124,16 +123,16 @@ export const AlgoliaSearchResult: FC<SearchResultProps> = ({ onHitClick }) => {
     return label;
   };
 
-  const getResourceLink = (item: Hit) => {
+  const getLinkAction = (item: Hit) => {
     if (["contacts", "quotes", "events", "user"].includes(item.resource)) {
-      return showUrl(item.resource, item.id);
+      return "show";
     }
 
     if (["tasks", "deals", "companies"].includes(item.resource)) {
-      return editUrl(item.resource, item.id);
+      return "edit";
     }
 
-    return "";
+    return "show";
   };
 
   return (
@@ -146,7 +145,15 @@ export const AlgoliaSearchResult: FC<SearchResultProps> = ({ onHitClick }) => {
       dataSource={hits}
       renderItem={(item) => {
         return (
-          <Link to={getResourceLink(item)}>
+          <Link
+            go={{
+              to: {
+                resource: item.resource,
+                id: item.id,
+                action: getLinkAction(item),
+              },
+            }}
+          >
             <List.Item className={styles.listItem} onClick={onHitClick}>
               <List.Item.Meta
                 avatar={

diff --git a/examples/app-crm/src/routes/companies/components/deals-table.tsx b/examples/app-crm/src/routes/companies/components/deals-table.tsx
@@ -1,8 +1,8 @@
 import { type FC, useMemo } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import { EditButton, FilterDropdown, useTable } from "@refinedev/antd";
-import { useNavigation, useOne } from "@refinedev/core";
+import { Link, useOne } from "@refinedev/core";
 import type { GetFields, GetFieldsFromList } from "@refinedev/nestjs-query";
 
 import {
@@ -34,7 +34,6 @@ type Props = {
 type Deal = GetFieldsFromList<CompanyDealsTableQuery>;
 
 export const CompanyDealsTable: FC<Props> = ({ style }) => {
-  const { listUrl } = useNavigation();
   const params = useParams();
 
   const { tableProps, filters, setFilters } = useTable<Deal>({
@@ -150,7 +149,14 @@ export const CompanyDealsTable: FC<Props> = ({ style }) => {
           }}
         >
           <Text>No deals yet</Text>
-          <Link to={listUrl("deals")}>
+          <Link
+            go={{
+              to: {
+                resource: "deals",
+                action: "list",
+              },
+            }}
+          >
             {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <PlusCircleOutlined
               style={{

diff --git a/examples/app-crm/src/routes/companies/components/quotes-table.tsx b/examples/app-crm/src/routes/companies/components/quotes-table.tsx
@@ -1,8 +1,8 @@
 import { type FC, useMemo } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import { FilterDropdown, ShowButton, useTable } from "@refinedev/antd";
-import { useNavigation } from "@refinedev/core";
+import { Link } from "@refinedev/core";
 import type { GetFieldsFromList } from "@refinedev/nestjs-query";
 
 import {
@@ -28,7 +28,6 @@ type Props = {
 type Quote = GetFieldsFromList<CompanyQuotesTableQuery>;
 
 export const CompanyQuotesTable: FC<Props> = ({ style }) => {
-  const { listUrl } = useNavigation();
   const params = useParams();
 
   const { tableProps, filters, setFilters } = useTable<Quote>({
@@ -117,7 +116,14 @@ export const CompanyQuotesTable: FC<Props> = ({ style }) => {
           }}
         >
           <Text>No quotes yet</Text>
-          <Link to={listUrl("quotes")}>
+          <Link
+            go={{
+              to: {
+                resource: "quotes",
+                action: "list",
+              },
+            }}
+          >
             {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <PlusCircleOutlined
               style={{

diff --git a/examples/app-crm/src/routes/quotes/show/index.tsx b/examples/app-crm/src/routes/quotes/show/index.tsx
@@ -1,7 +1,7 @@
 import { lazy, Suspense } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
-import { useModal, useOne } from "@refinedev/core";
+import { useModal, useOne, Link } from "@refinedev/core";
 
 import { EditOutlined, LeftOutlined } from "@ant-design/icons";
 import { Button, Space } from "antd";
@@ -43,7 +43,14 @@ export const QuotesShowPage = () => {
   return (
     <>
       <div className={styles.container}>
-        <Link to="/quotes">
+        <Link
+          go={{
+            to: {
+              resource: "quotes",
+              action: "list",
+            },
+          }}
+        >
           {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <Button icon={<LeftOutlined />}>Quotes</Button>
         </Link>

diff --git a/examples/finefoods-client/src/components/categories/nav-links/index.tsx b/examples/finefoods-client/src/components/categories/nav-links/index.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { type GetListResponse, useNavigation } from "@refinedev/core";
-import Link from "next/link";
+import { type GetListResponse, Link } from "@refinedev/core";
 import type { Category } from "@/types";
 import cn from "classnames";
 
@@ -14,14 +13,22 @@ export const CategoriesNavLinks = ({
   categories,
   selectedCategoryId,
 }: Props) => {
-  const { showUrl } = useNavigation();
-
   return (
     <div className="bg-white rounded-t-[36px] rounded-b-[20px]">
       <div className="flex flex-wrap items-center justify-center gap-2 p-4 border-b border-[#DEDEDE]">
         {categories.data.map((category) => {
           return (
-            <Link href={showUrl("categories", category.id)} key={category.id}>
+            <Link
+              to="/categories"
+              go={{
+                to: {
+                  resource: "categories",
+                  action: "show",
+                  id: category.id,
+                },
+              }}
+              key={category.id}
+            >
               <div
                 className={cn(
                   "px-4 py-2 text-sm font-bold rounded-full transition-colors ease-in-out duration-100 whitespace-nowrap",

diff --git a/examples/invoicer/src/components/header/index.tsx b/examples/invoicer/src/components/header/index.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
-import { useNavigation } from "@refinedev/core";
+import { useNavigation, Link } from "@refinedev/core";
 import { Layout as AntdLayout, Button, theme, Flex, Tabs } from "antd";
 import {
   BankOutlined,
   ShopOutlined,
   ContainerOutlined,
 } from "@ant-design/icons";
-import { Link } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import { useConfigProvider } from "@/providers/config-provider";
 import { Search } from "@/components/header/search";
@@ -17,7 +16,7 @@ import { Logo } from "@/components/logo";
 import { useStyles } from "./styled";
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
-  const { list, listUrl } = useNavigation();
+  const { list } = useNavigation();
 
   const location = useLocation();
 
@@ -47,7 +46,14 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
         }}
       >
         <Flex align="center" wrap="wrap">
-          <Link to={listUrl("accounts")}>
+          <Link
+            go={{
+              to: {
+                resource: "accounts",
+                action: "list",
+              },
+            }}
+          >
             <Logo
               style={{
                 width: "200px",

diff --git a/examples/pixels/src/components/canvas/tile.tsx b/examples/pixels/src/components/canvas/tile.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "@refinedev/core";
 import { Skeleton } from "antd";
-
 import { CanvasItem, DisplayCanvas } from "./index";
 import { Contributors } from "../../components/avatar";
 import type { Canvas } from "../../types";
@@ -18,7 +17,13 @@ export const CanvasTile: React.FC<CanvasTileProps> = ({ canvas }) => {
           <Link
             key={canvas.id}
             className="canvas-item"
-            to={`/canvases/show/${canvas.id}`}
+            go={{
+              to: {
+                resource: "canvases",
+                action: "show",
+                id: canvas.id,
+              },
+            }}
           >
             <CanvasItem
               canvas={canvas}

diff --git a/examples/win95/src/routes/video-club/members/list.tsx b/examples/win95/src/routes/video-club/members/list.tsx
@@ -1,5 +1,10 @@
-import { getDefaultFilter, useSubscription, useTable } from "@refinedev/core";
-import { Link, useNavigate } from "react-router-dom";
+import {
+  getDefaultFilter,
+  useSubscription,
+  useTable,
+  Link,
+} from "@refinedev/core";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { Button } from "react95";
 import {
@@ -168,7 +173,17 @@ export const VideoClubMemberPageList = () => {
                       $385,00
                     </TableDataCell>
                     <TableDataCell $width={64} style={{ textAlign: "right" }}>
-                      <Link to={`/video-club/members/${member.id}`}>View</Link>
+                      <Link
+                        go={{
+                          to: {
+                            resource: "members",
+                            action: "show",
+                            id: member.id,
+                          },
+                        }}
+                      >
+                        View
+                      </Link>
                     </TableDataCell>
                   </TableRow>
                 );

diff --git a/examples/win95/src/routes/video-club/titles/list.tsx b/examples/win95/src/routes/video-club/titles/list.tsx
@@ -1,5 +1,10 @@
 import { useNavigate } from "react-router-dom";
-import { getDefaultFilter, useSubscription, useTable } from "@refinedev/core";
+import {
+  getDefaultFilter,
+  useSubscription,
+  useTable,
+  Link,
+} from "@refinedev/core";
 import {
   Hourglass,
   Select,
@@ -12,7 +17,6 @@ import {
   TextInput,
 } from "react95";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
 import { VideoClubLayoutSubPage } from "@/components/layout";
 import { Pagination } from "@/components/pagination";
 import { DangerIcon } from "@/components/icons";
@@ -171,7 +175,17 @@ export const VideoClubPageBrowseTitles = () => {
                       {title.rentals.length}
                     </TableDataCell>
                     <TableDataCell $width={48} style={{ textAlign: "right" }}>
-                      <Link to={`/video-club/titles/${title.id}`}>View</Link>
+                      <Link
+                        go={{
+                          to: {
+                            resource: "titles",
+                            action: "show",
+                            id: title.id,
+                          },
+                        }}
+                      >
+                        View
+                      </Link>
                     </TableDataCell>
                   </TableRow>
                 );