[client] adding links to explore page in item pages

Adding an anchor system for the "result" part of the page.

Part of #65

Author: sim51

code/client/src/components/Collapsable.tsx

@@ -3,7 +3,7 @@ import { isNil } from 'lodash';
 import { ReactNode, useState, type FC, type HTMLAttributes, type PropsWithChildren } from 'react';
 import { RiArrowDownSLine, RiArrowRightSLine } from 'react-icons/ri';
 
-type CollapsableProps = HTMLAttributes<HTMLElement> & {
+type CollapsableProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
   title: ReactNode;
   defaultOpen?: boolean;
 };
@@ -17,14 +17,14 @@ export const Collapsable: FC<PropsWithChildren<CollapsableProps>> = ({
   return (
     <section {...htmlAttributs}>
       <button
-        className="btn ps-0 with-icon fw-medium mb-1"
+        className="btn ps-0 with-icon fw-medium mb-1 d-flex align-items-center"
         type="button"
         onClick={(e) => {
           e.stopPropagation();
           setShow(!show);
         }}
       >
-        {show ? <RiArrowDownSLine /> : <RiArrowRightSLine />} {title}
+        {show ? <RiArrowDownSLine size={'2em'} /> : <RiArrowRightSLine size={'2em'} />} {title}
       </button>
 
       <div className={cx('collapse', show && 'show')}>{children}</div>

code/client/src/components/ItemsList.tsx

@@ -198,16 +198,14 @@ export const ItemsList: FC<{ itemType: ItemType }> = ({ itemType }) => {
   );
 
   return (
-    <section>
-      <ListComponent
-        element={ItemComponent}
-        elementProps={{ itemType }}
-        getDataId={(data) => data.id}
-        loadData={loadData}
-        bottom={Bottom}
-        list={List}
-        top={Top}
-      />
-    </section>
+    <ListComponent
+      element={ItemComponent}
+      elementProps={{ itemType }}
+      getDataId={(data) => data.id}
+      loadData={loadData}
+      bottom={Bottom}
+      list={List}
+      top={Top}
+    />
   );
 };

code/client/src/components/ScrollToAnchor.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function ScrollToAnchor() {
+  const location = useLocation();
+  const lastHash = useRef('');
+
+  // listen to location change using useEffect with location as dependency
+  // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
+  useEffect(() => {
+    if (location.hash) {
+      lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
+    }
+
+    if (lastHash.current && document.getElementById(lastHash.current)) {
+      setTimeout(() => {
+        document
+          .getElementById(lastHash.current)
+          ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        lastHash.current = '';
+      }, 100);
+    }
+  }, [location]);
+
+  return null;
+}
+
+export default ScrollToAnchor;

code/client/src/styles/_explore.scss

@@ -22,6 +22,10 @@ main {
   height: 150px;
 }
 
+#result {
+  min-height: 100vh;
+}
+
 @media (max-width: 1370px) {
   .explore-header {
     .explore-date {

code/client/src/views/Explore.tsx

@@ -27,7 +27,7 @@ import { filtersStateToSearchFilters } from '../utils/filters';
 
 export const Explore: FC = () => {
   const { type: inputType } = useParams();
-  const { search } = useLocation();
+  const { search, hash } = useLocation();
   const navigate = useNavigate();
   const client = useApolloClient();
 
@@ -89,8 +89,10 @@ export const Explore: FC = () => {
   useEffect(() => {
     const newSearch = stateToSearch(state).toString();
     if (newSearch !== search)
-      navigate(`/explore/${selectedType}${newSearch ? '?' + newSearch : ''}`, { replace: true });
-  }, [navigate, search, selectedType, state]);
+      navigate(`/explore/${selectedType}${newSearch ? '?' + newSearch : ''}${hash}`, {
+        replace: true,
+      });
+  }, [navigate, search, selectedType, state, hash]);
 
   return (
     <FacetsRoot
@@ -153,7 +155,9 @@ export const Explore: FC = () => {
         </section>
 
         {/* CORE ITEMS LIST */}
-        <ItemsList key={fingerprint} itemType={selectedType} />
+        <section id="result">
+          <ItemsList key={fingerprint} itemType={selectedType} />
+        </section>
       </main>
     </FacetsRoot>
   );

code/client/src/views/ItemView.tsx

@@ -1,8 +1,8 @@
 import { LoaderFill } from '@ouestware/loaders';
 import cx from 'classnames';
 import { ReactNode, useMemo, type FC } from 'react';
-import { RiAddCircleLine, RiFile3Line, RiPriceTag3Line } from 'react-icons/ri';
-import { useParams } from 'react-router-dom';
+import { RiFile3Line, RiPriceTag3Line } from 'react-icons/ri';
+import { Link, useParams } from 'react-router-dom';
 
 import { Collapsable } from '../components/Collapsable';
 import { InCartButton } from '../components/edition/InCartButton.tsx';
@@ -31,7 +31,7 @@ import { useItemCounts } from '../hooks/useItemCounts.ts';
 import { getMessageName } from '../utils/data.ts';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type RelatedDefinition<T = any> = ListWithLoadMoreProps<T> & { title: ReactNode };
+type RelatedDefinition<T = any> = ListWithLoadMoreProps<T> & { title: ReactNode; type: ItemType };
 
 export const ItemView: FC = () => {
   const { enabled } = useEditionContext();
@@ -63,6 +63,7 @@ export const ItemView: FC = () => {
 
             return [
               {
+                type,
                 title: (
                   <span className="fs-2">
                     <ItemIcon type={type} /> {ITEM_TYPE_LABELS_PLURAL[type]} {total && `(${total})`}
@@ -124,13 +125,19 @@ export const ItemView: FC = () => {
 
           {relatedItems.map((related, index) => (
             <Collapsable key={index} title={related.title} className="mb-2" defaultOpen>
-              {editionEnabled && (
-                <div className="mb-3">
+              <div className="mb-3 d-flex gap-1">
+                <Link
+                  to={`/explore/${related.type}?${inputType}|values=${id}#result`}
+                  className="btn btn-dark"
+                >
+                  View in explore page
+                </Link>
+                {/* {editionEnabled && (
                   <button className="btn btn-purple-300 with-icon">
                     <RiAddCircleLine /> Add item
                   </button>
-                </div>
-              )}
+                )} */}
+              </div>
               <ListWithLoadMore className="row" {...related} />
             </Collapsable>
           ))}

code/client/src/views/Root.tsx

@@ -9,6 +9,7 @@ import { FaCheckCircle, FaExclamationTriangle, FaInfoCircle } from 'react-icons/
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import { Error } from '../components/error';
+import ScrollToAnchor from '../components/ScrollToAnchor.tsx';
 import { DEFAULT_EDITION_DATA, EditionContext, EditionItem } from '../core/edition.ts';
 import { ApolloProvider } from '../core/graphql';
 import { deserializeEditionState, EDITION_STATE_KEY } from '../utils/edition.ts';
@@ -80,6 +81,7 @@ export const Root: FC = () => {
                   <Route path="/" element={<Navigate to="/explore/company" replace />} />
                 </Routes>
               </ModalProvider>
+              <ScrollToAnchor />
             </BrowserRouter>
           </EditionContext.Provider>
         </NotificationProvider>