From 2a231978d846b3420e56f7b662102b5c45021670 Mon Sep 17 00:00:00 2001 From: Raed Date: Tue, 31 Oct 2023 06:36:49 +0100 Subject: [PATCH] fix: allow hot linking to a specific product --- examples/demo/package.json | 2 +- examples/demo/src/routes/ProductPage.tsx | 22 ++++++++++++++--- yarn.lock | 30 ++++++++++++------------ 3 files changed, 35 insertions(+), 19 deletions(-) diff --git a/examples/demo/package.json b/examples/demo/package.json index aae1018e..1fec3a76 100644 --- a/examples/demo/package.json +++ b/examples/demo/package.json @@ -19,7 +19,7 @@ "algoliasearch": "4.17.0", "react": "17.0.2", "react-dom": "17.0.2", - "react-router-dom": "^6.10.0", + "react-router-dom": "^6.17.0", "search-insights": "2.4.0" }, "devDependencies": { diff --git a/examples/demo/src/routes/ProductPage.tsx b/examples/demo/src/routes/ProductPage.tsx index 582d28fa..63a4a589 100644 --- a/examples/demo/src/routes/ProductPage.tsx +++ b/examples/demo/src/routes/ProductPage.tsx @@ -6,8 +6,9 @@ import { LookingSimilar, } from '@algolia/recommend-react'; import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react'; -import React from 'react'; -import { Navigate } from 'react-router-dom'; +import algoliasearch from 'algoliasearch'; +import React, { useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; import { Hit, @@ -21,15 +22,30 @@ import { ProductHit } from '../types'; import { useApplicationContext } from './Root'; +const searchClient = algoliasearch(appId, apiKey); +const index = searchClient.initIndex(indexName); const recommendClient = algoliarecommend(appId, apiKey); export const ProductPage: React.FC = () => { + const navigate = useNavigate(); + const { id } = useParams(); + const [ { insights, selectedProduct, setSelectedProduct, selectedFacetValue }, ] = useApplicationContext(); + useEffect(() => { + if (!selectedProduct && id !== undefined) { + index.getObject(id).then((product) => { + setSelectedProduct(product); + }); + } else if (!selectedProduct && id === undefined) { + navigate('/'); + } + }, [id, navigate, selectedProduct, setSelectedProduct]); + if (!selectedProduct) { - return ; + return
Loading
; } return ( diff --git a/yarn.lock b/yarn.lock index 3a9ad8eb..63f8dd26 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3099,10 +3099,10 @@ dependencies: esquery "^1.0.1" -"@remix-run/router@1.5.0": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc" - integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg== +"@remix-run/router@1.10.0": + version "1.10.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.10.0.tgz#e2170dc2049b06e65bbe883adad0e8ddf8291278" + integrity sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw== "@rollup/plugin-babel@6.0.3": version "6.0.3" @@ -9613,20 +9613,20 @@ react-refresh@^0.9.0: resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz" integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ== -react-router-dom@^6.10.0: - version "6.10.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f" - integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg== +react-router-dom@^6.17.0: + version "6.17.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.17.0.tgz#ea73f89186546c1cf72b10fcb7356d874321b2ad" + integrity sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ== dependencies: - "@remix-run/router" "1.5.0" - react-router "6.10.0" + "@remix-run/router" "1.10.0" + react-router "6.17.0" -react-router@6.10.0: - version "6.10.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971" - integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ== +react-router@6.17.0: + version "6.17.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.17.0.tgz#7b680c4cefbc425b57537eb9c73bedecbdc67c1e" + integrity sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA== dependencies: - "@remix-run/router" "1.5.0" + "@remix-run/router" "1.10.0" react@17.0.2: version "17.0.2"