From 1338987914f39131b18ba7dabf42ec8cd4c43df3 Mon Sep 17 00:00:00 2001 From: Laura Perry <10005215+lperry25@users.noreply.github.com> Date: Fri, 22 Nov 2024 13:28:13 +0100 Subject: [PATCH 1/2] convert the namespaces in search to tabs and add an all option --- src/App/libs/provider/namespaces.js | 1 + src/App/libs/provider/reducer.js | 8 ++++ src/App/libs/provider/url-params.js | 10 ++++- src/App/pages/search/search-sources.js | 61 ++++++++++++++++++-------- src/App/styles/icons/fa-icons.js | 1 + 5 files changed, 60 insertions(+), 21 deletions(-) diff --git a/src/App/libs/provider/namespaces.js b/src/App/libs/provider/namespaces.js index 989d9d6..c629dac 100644 --- a/src/App/libs/provider/namespaces.js +++ b/src/App/libs/provider/namespaces.js @@ -1,4 +1,5 @@ export const ALL_NAMESPACES = Object.freeze([ + { id: 'all', name: 'All', icon: 'check' }, { id: 'open-p', name: 'Documentation', icon: 'book' }, { id: 'cloud-p', name: 'Cloud Documentation', icon: 'cloud' }, { id: 'vespaapps-p', name: 'Sample Apps', icon: 'vial' }, diff --git a/src/App/libs/provider/reducer.js b/src/App/libs/provider/reducer.js index d8044a7..8ef9f45 100644 --- a/src/App/libs/provider/reducer.js +++ b/src/App/libs/provider/reducer.js @@ -51,7 +51,15 @@ function setNamespaces(state, namespaces) { } function toggleNamespace(state, namespace) { + if (namespace === 'all') { + return setNamespaces( + state, + ALL_NAMESPACES.map(({ id }) => id), + ); + } + return setNamespaces(state, [namespace]); let namespaces = toggleOption(ALL_NAMESPACES, state.namespaces, namespace); + console.log({ namespaces }); if (namespaces.length === 0) namespaces = ALL_NAMESPACES.map(({ id }) => id).filter( (id) => id !== namespace, diff --git a/src/App/libs/provider/url-params.js b/src/App/libs/provider/url-params.js index 2bba4a5..c7f57ca 100644 --- a/src/App/libs/provider/url-params.js +++ b/src/App/libs/provider/url-params.js @@ -1,7 +1,9 @@ import { isEqual } from 'lodash'; import { NAMESPACES_BY_ID } from 'App/libs/provider/namespaces'; -const DEFAULT_NAMESPACES = Object.freeze(Object.keys(NAMESPACES_BY_ID)); +const DEFAULT_NAMESPACES = Object.freeze(Object.keys(NAMESPACES_BY_ID)).filter( + (id) => id !== 'all', +); const qpQuery = 'query'; const qpNamespace = 'namespace'; @@ -18,7 +20,11 @@ export function createUrlParams({ query, namespaces }) { const queryParts = []; if (query.length > 0) queryParts.push(`${qpQuery}=${encodeURIComponent(query)}`); - if (namespaces.length > 0 && !isEqual(namespaces, DEFAULT_NAMESPACES)) + if (namespaces.length > 0 && !isEqual(namespaces, DEFAULT_NAMESPACES)) { + if (namespaces.includes('all')) { + namespaces = namespaces.filter((id) => id !== 'all'); + } queryParts.push(`${qpNamespace}=` + namespaces.join(',')); + } return queryParts.length > 0 ? '?' + queryParts.join('&') : ''; } diff --git a/src/App/pages/search/search-sources.js b/src/App/pages/search/search-sources.js index 6dbd0ae..da45add 100644 --- a/src/App/pages/search/search-sources.js +++ b/src/App/pages/search/search-sources.js @@ -1,34 +1,57 @@ -import React from 'react'; -import { Button, Group } from '@mantine/core'; +import React, { useEffect, useRef } from 'react'; +import { ScrollArea, Tabs } from '@mantine/core'; +import { useLocation } from 'react-router-dom'; import { ALL_NAMESPACES, useSearchContext } from 'App/libs/provider'; import { Icon } from 'App/components'; -import { useMobile } from 'App/hooks'; +import { parseUrlParams } from 'App/libs/provider/url-params'; -function Source({ id, icon, name }) { +function Source({ id, icon, name, selectedTab }) { const toggleNamespace = useSearchContext((ctx) => ctx.toggleNamespace); - const selected = useSearchContext((ctx) => ctx.namespaces.includes(id)); - const isMobile = useMobile(); + const tabRef = useRef(null); + + useEffect(() => { + console.log({ selectedTab, id }); + if (selectedTab === id) { + console.log('scroll'); + tabRef?.current?.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }); + } + }, [id, selectedTab]); + return ( - + ); } export function SearchSources() { - const isMobile = useMobile(); + const location = useLocation(); + const { namespaces } = parseUrlParams(location.search); + console.log({ namespaces }); + const defaultValue = namespaces?.length === 1 ? namespaces[0] : 'all'; return ( - - {ALL_NAMESPACES.map(({ id, name, icon }) => ( - - ))} - + + + + {ALL_NAMESPACES.map(({ id, name, icon }) => ( + + ))} + + + ); } diff --git a/src/App/styles/icons/fa-icons.js b/src/App/styles/icons/fa-icons.js index 137afe7..4ee7c56 100644 --- a/src/App/styles/icons/fa-icons.js +++ b/src/App/styles/icons/fa-icons.js @@ -22,6 +22,7 @@ export { faExternalLink, faExternalLinkSquare, faCode, + faCheck, } from '@fortawesome/free-solid-svg-icons'; export { faClipboard, From 8fabb14037afcf8518121316ca2e164a65fe8765 Mon Sep 17 00:00:00 2001 From: Laura Perry <10005215+lperry25@users.noreply.github.com> Date: Fri, 22 Nov 2024 14:16:16 +0100 Subject: [PATCH 2/2] remove console logs and unused code --- src/App/libs/provider/reducer.js | 13 ------------- src/App/pages/search/search-sources.js | 3 --- 2 files changed, 16 deletions(-) diff --git a/src/App/libs/provider/reducer.js b/src/App/libs/provider/reducer.js index 8ef9f45..6e9c29b 100644 --- a/src/App/libs/provider/reducer.js +++ b/src/App/libs/provider/reducer.js @@ -22,12 +22,6 @@ export function createStore(set) { }; } -function toggleOption(allOptions, current, item) { - return allOptions - .map(({ id }) => id) - .filter((id) => (id === item) !== current.includes(id)); -} - function setFilters(state, filters) { return Object.entries(filters).reduce((result, [key, value]) => { switch (key) { @@ -58,13 +52,6 @@ function toggleNamespace(state, namespace) { ); } return setNamespaces(state, [namespace]); - let namespaces = toggleOption(ALL_NAMESPACES, state.namespaces, namespace); - console.log({ namespaces }); - if (namespaces.length === 0) - namespaces = ALL_NAMESPACES.map(({ id }) => id).filter( - (id) => id !== namespace, - ); - return setNamespaces(state, namespaces); } function summaryAppend(state, summary) { diff --git a/src/App/pages/search/search-sources.js b/src/App/pages/search/search-sources.js index da45add..65024dc 100644 --- a/src/App/pages/search/search-sources.js +++ b/src/App/pages/search/search-sources.js @@ -10,9 +10,7 @@ function Source({ id, icon, name, selectedTab }) { const tabRef = useRef(null); useEffect(() => { - console.log({ selectedTab, id }); if (selectedTab === id) { - console.log('scroll'); tabRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center', @@ -35,7 +33,6 @@ function Source({ id, icon, name, selectedTab }) { export function SearchSources() { const location = useLocation(); const { namespaces } = parseUrlParams(location.search); - console.log({ namespaces }); const defaultValue = namespaces?.length === 1 ? namespaces[0] : 'all'; return (