From 39023cb3c1eb63efa00b94a7c7f8b04c443f9158 Mon Sep 17 00:00:00 2001 From: Elouan Date: Wed, 31 Jan 2024 11:34:57 -0500 Subject: [PATCH 01/17] implemented default Tab. Works but need css styling and to convert Tab to class --- src/App.tsx | 18 ++++++++-- src/Components/Facet.tsx | 1 + src/Components/Tab.tsx | 78 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 src/Components/Tab.tsx diff --git a/src/App.tsx b/src/App.tsx index a736cb4..b7b2f44 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,11 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; - +import { + Tab, + intelTab as IntelTabController, + AMD_Tab as AMD_TabController, +} from "./Components/Tab"; export default class App extends React.Component { componentDidMount() { const { logInterfaceLoad } = loadSearchAnalyticsActions(headlessEngine); @@ -33,7 +37,17 @@ export default class App extends React.Component { Coveo Headless + Material UI - +
+ ici? + + {/* barefoot */} + Intel + + + {/* apparel */} + AMD + +
diff --git a/src/Components/Facet.tsx b/src/Components/Facet.tsx index 7ff4d61..80b6b68 100644 --- a/src/Components/Facet.tsx +++ b/src/Components/Facet.tsx @@ -31,6 +31,7 @@ export default class Facet extends React.Component { constructor(props: any) { super(props); + console.log("field: ", this.props.field); this.headlessFacet = buildFacet(headlessEngine, { options: { diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx new file mode 100644 index 0000000..4592854 --- /dev/null +++ b/src/Components/Tab.tsx @@ -0,0 +1,78 @@ +import headlessEngine from "../Engine"; +import { + buildQueryExpression, + buildTab, + TabOptions, + TabProps, + Tab as HeadlessTab, +} from "@coveo/headless"; + +import { useState, useEffect, PropsWithChildren } from "react"; +import React from "react"; + +interface CustomProps extends PropsWithChildren { + controller: HeadlessTab; +} + +export const Tab: React.FC = (props) => { + const { controller } = props; + const [state, setState] = useState(controller.state); + + useEffect( + () => + controller.subscribe(() => { + setState(controller.state); + }), + [controller] + ); + + return ( + + ); +}; + +const filterIntelProcessor = buildQueryExpression() + .addStringField({ + field: "eng_processor", + operator: "contains", + values: ["Intel"], + }) + .toQuerySyntax(); + +const filterAMDProcessor = buildQueryExpression() + .addStringField({ + field: "eng_processor", + operator: "contains", + values: ["AMD"], + }) + .toQuerySyntax(); + +const intelOptions: TabOptions = { + id: "intel", + expression: filterIntelProcessor, +}; + +const AMD_Options: TabOptions = { + id: "AMD", + expression: filterAMDProcessor, +}; + +const intelProps: TabProps = { + initialState: { isActive: false }, + options: intelOptions, +}; + +const AMD_Props: TabProps = { + initialState: { isActive: false }, + options: AMD_Options, +}; + +export const intelTab: HeadlessTab = buildTab(headlessEngine, intelProps); +export const AMD_Tab: HeadlessTab = buildTab(headlessEngine, AMD_Props); From a96e3ae7124da67adefcbdca38aaf8f1438912cd Mon Sep 17 00:00:00 2001 From: Elouan Date: Wed, 31 Jan 2024 14:13:06 -0500 Subject: [PATCH 02/17] Added Intel processor tab. Need Css anc cleaning the code --- src/App.tsx | 20 ++++--------- src/Components/Tab.tsx | 65 ++++++++++++++++++++++++------------------ 2 files changed, 43 insertions(+), 42 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b7b2f44..e850183 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,11 +10,8 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; -import { - Tab, - intelTab as IntelTabController, - AMD_Tab as AMD_TabController, -} from "./Components/Tab"; +import Tab from "./Components/Tab"; +import { intelProps } from "./Components/Tab"; export default class App extends React.Component { componentDidMount() { const { logInterfaceLoad } = loadSearchAnalyticsActions(headlessEngine); @@ -38,15 +35,10 @@ export default class App extends React.Component {
- ici? - - {/* barefoot */} - Intel - - - {/* apparel */} - AMD - +
diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx index 4592854..fd063b9 100644 --- a/src/Components/Tab.tsx +++ b/src/Components/Tab.tsx @@ -5,38 +5,47 @@ import { TabOptions, TabProps, Tab as HeadlessTab, + TabInitialState, } from "@coveo/headless"; - -import { useState, useEffect, PropsWithChildren } from "react"; +import { PropsWithChildren } from "react"; import React from "react"; -interface CustomProps extends PropsWithChildren { - controller: HeadlessTab; +export interface ITabProps { + initialState: TabInitialState; + options: TabOptions; } +export default class Tab extends React.Component { + // PropsWithChildren<{}> + private headlessTab: HeadlessTab; + constructor(props: any) { + super(props); + this.headlessTab = buildTab(headlessEngine, props); + this.state = this.headlessTab.state; + } -export const Tab: React.FC = (props) => { - const { controller } = props; - const [state, setState] = useState(controller.state); + componentDidMount() { + this.headlessTab.subscribe(() => this.updateState()); + // this.setState({isActive: true}) + } - useEffect( - () => - controller.subscribe(() => { - setState(controller.state); - }), - [controller] - ); + updateState() { + this.setState(this.headlessTab.state); + } - return ( - - ); -}; + render() { + return ( + + ); + } +} const filterIntelProcessor = buildQueryExpression() .addStringField({ @@ -64,7 +73,7 @@ const AMD_Options: TabOptions = { expression: filterAMDProcessor, }; -const intelProps: TabProps = { +export const intelProps: TabProps = { initialState: { isActive: false }, options: intelOptions, }; @@ -74,5 +83,5 @@ const AMD_Props: TabProps = { options: AMD_Options, }; -export const intelTab: HeadlessTab = buildTab(headlessEngine, intelProps); -export const AMD_Tab: HeadlessTab = buildTab(headlessEngine, AMD_Props); +// buildTab(headlessEngine, intelProps); +// export const AMD_Tab: HeadlessTab = buildTab(headlessEngine, AMD_Props); From 5bddec2b13171948f3724010cfd6149b718b81ba Mon Sep 17 00:00:00 2001 From: Elouan Date: Wed, 31 Jan 2024 14:22:38 -0500 Subject: [PATCH 03/17] Removed commented code and Added AMD Tab --- src/App.tsx | 6 +++++- src/Components/Facet.tsx | 1 - src/Components/Tab.tsx | 13 +++---------- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e850183..eb972af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; -import Tab from "./Components/Tab"; +import Tab, { AMD_Props } from "./Components/Tab"; import { intelProps } from "./Components/Tab"; export default class App extends React.Component { componentDidMount() { @@ -39,6 +39,10 @@ export default class App extends React.Component { initialState={intelProps.initialState!} options={intelProps.options!} /> + diff --git a/src/Components/Facet.tsx b/src/Components/Facet.tsx index 80b6b68..7ff4d61 100644 --- a/src/Components/Facet.tsx +++ b/src/Components/Facet.tsx @@ -31,7 +31,6 @@ export default class Facet extends React.Component { constructor(props: any) { super(props); - console.log("field: ", this.props.field); this.headlessFacet = buildFacet(headlessEngine, { options: { diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx index fd063b9..d1ced58 100644 --- a/src/Components/Tab.tsx +++ b/src/Components/Tab.tsx @@ -7,7 +7,6 @@ import { Tab as HeadlessTab, TabInitialState, } from "@coveo/headless"; -import { PropsWithChildren } from "react"; import React from "react"; export interface ITabProps { @@ -15,7 +14,6 @@ export interface ITabProps { options: TabOptions; } export default class Tab extends React.Component { - // PropsWithChildren<{}> private headlessTab: HeadlessTab; constructor(props: any) { super(props); @@ -25,7 +23,6 @@ export default class Tab extends React.Component { componentDidMount() { this.headlessTab.subscribe(() => this.updateState()); - // this.setState({isActive: true}) } updateState() { @@ -35,13 +32,12 @@ export default class Tab extends React.Component { render() { return ( ); } @@ -64,7 +60,7 @@ const filterAMDProcessor = buildQueryExpression() .toQuerySyntax(); const intelOptions: TabOptions = { - id: "intel", + id: "Intel", expression: filterIntelProcessor, }; @@ -78,10 +74,7 @@ export const intelProps: TabProps = { options: intelOptions, }; -const AMD_Props: TabProps = { +export const AMD_Props: TabProps = { initialState: { isActive: false }, options: AMD_Options, }; - -// buildTab(headlessEngine, intelProps); -// export const AMD_Tab: HeadlessTab = buildTab(headlessEngine, AMD_Props); From b7129c1b47ba59315c3fcd97bc6b9b5f0252d9d8 Mon Sep 17 00:00:00 2001 From: Elouan Date: Wed, 31 Jan 2024 14:35:34 -0500 Subject: [PATCH 04/17] Cleaned code and refactored a bit --- src/App.tsx | 4 ++-- src/Components/Tab.tsx | 51 ++---------------------------------------- src/TabProps.tsx | 37 ++++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 51 deletions(-) create mode 100644 src/TabProps.tsx diff --git a/src/App.tsx b/src/App.tsx index eb972af..9dc533d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,8 +10,8 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; -import Tab, { AMD_Props } from "./Components/Tab"; -import { intelProps } from "./Components/Tab"; +import Tab from "./Components/Tab"; +import { intelProps, AMD_Props } from "./TabProps"; export default class App extends React.Component { componentDidMount() { const { logInterfaceLoad } = loadSearchAnalyticsActions(headlessEngine); diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx index d1ced58..7d2a47c 100644 --- a/src/Components/Tab.tsx +++ b/src/Components/Tab.tsx @@ -1,19 +1,8 @@ import headlessEngine from "../Engine"; -import { - buildQueryExpression, - buildTab, - TabOptions, - TabProps, - Tab as HeadlessTab, - TabInitialState, -} from "@coveo/headless"; +import { buildTab, TabProps, Tab as HeadlessTab } from "@coveo/headless"; import React from "react"; -export interface ITabProps { - initialState: TabInitialState; - options: TabOptions; -} -export default class Tab extends React.Component { +export default class Tab extends React.Component { private headlessTab: HeadlessTab; constructor(props: any) { super(props); @@ -42,39 +31,3 @@ export default class Tab extends React.Component { ); } } - -const filterIntelProcessor = buildQueryExpression() - .addStringField({ - field: "eng_processor", - operator: "contains", - values: ["Intel"], - }) - .toQuerySyntax(); - -const filterAMDProcessor = buildQueryExpression() - .addStringField({ - field: "eng_processor", - operator: "contains", - values: ["AMD"], - }) - .toQuerySyntax(); - -const intelOptions: TabOptions = { - id: "Intel", - expression: filterIntelProcessor, -}; - -const AMD_Options: TabOptions = { - id: "AMD", - expression: filterAMDProcessor, -}; - -export const intelProps: TabProps = { - initialState: { isActive: false }, - options: intelOptions, -}; - -export const AMD_Props: TabProps = { - initialState: { isActive: false }, - options: AMD_Options, -}; diff --git a/src/TabProps.tsx b/src/TabProps.tsx new file mode 100644 index 0000000..48578b9 --- /dev/null +++ b/src/TabProps.tsx @@ -0,0 +1,37 @@ +import { buildQueryExpression, TabOptions, TabProps } from "@coveo/headless"; + +const filterIntelProcessor = buildQueryExpression() + .addStringField({ + field: "eng_processor", + operator: "contains", + values: ["Intel"], + }) + .toQuerySyntax(); + +const filterAMDProcessor = buildQueryExpression() + .addStringField({ + field: "eng_processor", + operator: "contains", + values: ["AMD"], + }) + .toQuerySyntax(); + +const intelOptions: TabOptions = { + id: "Intel", + expression: filterIntelProcessor, +}; + +const AMD_Options: TabOptions = { + id: "AMD", + expression: filterAMDProcessor, +}; + +export const intelProps: TabProps = { + initialState: { isActive: false }, + options: intelOptions, +}; + +export const AMD_Props: TabProps = { + initialState: { isActive: false }, + options: AMD_Options, +}; From 4aa990e08c74063c5f2504aa6de7c0e6858c9b7c Mon Sep 17 00:00:00 2001 From: Elouan Date: Thu, 1 Feb 2024 14:35:54 -0500 Subject: [PATCH 05/17] added some styling andd all tab bar. All not displaying in same order as page loading --- src/App.css | 4 ++++ src/App.tsx | 12 +++++++++--- src/Components/Tab.tsx | 3 ++- src/Tab.css | 15 +++++++++++++++ src/TabProps.tsx | 18 ++++++++++++++++++ 5 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 src/App.css create mode 100644 src/Tab.css diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..9449657 --- /dev/null +++ b/src/App.css @@ -0,0 +1,4 @@ +.tabbar-container { + display: flex; +} + diff --git a/src/App.tsx b/src/App.tsx index 9dc533d..4bf525f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,9 @@ import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; import Tab from "./Components/Tab"; -import { intelProps, AMD_Props } from "./TabProps"; +import { intelProps, AMD_Props, allProps } from "./TabProps"; +import "./App.css"; + export default class App extends React.Component { componentDidMount() { const { logInterfaceLoad } = loadSearchAnalyticsActions(headlessEngine); @@ -23,7 +25,7 @@ export default class App extends React.Component { render() { return ( - + -
+
+
diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx index 7d2a47c..b58106e 100644 --- a/src/Components/Tab.tsx +++ b/src/Components/Tab.tsx @@ -1,7 +1,7 @@ import headlessEngine from "../Engine"; import { buildTab, TabProps, Tab as HeadlessTab } from "@coveo/headless"; import React from "react"; - +import "../Tab.css"; export default class Tab extends React.Component { private headlessTab: HeadlessTab; constructor(props: any) { @@ -21,6 +21,7 @@ export default class Tab extends React.Component { render() { return ( + label={this.props.options.id} + /> ); } } diff --git a/src/Test.tsx b/src/Test.tsx new file mode 100644 index 0000000..33ef91f --- /dev/null +++ b/src/Test.tsx @@ -0,0 +1,23 @@ +// import { Tabs, Tab } from "@mui/material"; +// import React, { useState } from "react"; + +// const test = () => { +// const [currentTabIndex, setCurrentTabIndex] = useState(0); + +// const handleTabChange = (e: any, tabIndex: number) => { +// console.log(tabIndex); +// setCurrentTabIndex(tabIndex); +// }; +// return ( +// +// +// +// +// +// +// +// +// ); +// }; + +// export default test; From f2f5ddcb181ccf4a6801b17969a239f27ea88813 Mon Sep 17 00:00:00 2001 From: Elouan Date: Fri, 2 Feb 2024 16:52:14 -0500 Subject: [PATCH 13/17] clean code --- src/App.tsx | 36 +++----------------------------- src/Components/{Tab => }/Tab.tsx | 3 +-- src/Components/Tab/Tab.css | 16 -------------- src/Test.tsx | 23 -------------------- 4 files changed, 4 insertions(+), 74 deletions(-) rename src/Components/{Tab => }/Tab.tsx (96%) delete mode 100644 src/Components/Tab/Tab.css delete mode 100644 src/Test.tsx diff --git a/src/App.tsx b/src/App.tsx index 7b26dd9..7ff20e0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,27 +10,16 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; -import TabBar, { intelProps, Amd_Props, anyProps } from "./Components/Tab/Tab"; +import TabBar, { intelProps, Amd_Props, anyProps } from "./Components/Tab"; import Tabs from "@mui/material/Tabs"; -// import Tab from "@mui/material/Tab"; -// import test from "./Test"; -// import Test from "./Test"; -import Tab from "@mui/material/Tab"; export default class App extends React.Component< any, { currentTabIndex: number } > { - // currentTabIndex = 0; - constructor(props: any) { super(props); - // this.setState({ - // currentTabIndex: 0, - // }); - this.state = { currentTabIndex: 1 }; - console.log(this.state.currentTabIndex); - console.log(3418952304956234); + this.state = { currentTabIndex: 0 }; } componentDidMount() { @@ -41,11 +30,9 @@ export default class App extends React.Component< } handleTabChange = (e: any, tabIndex: number) => { - // this.currentTabIndex = tabIndex; this.setState({ currentTabIndex: tabIndex, }); - console.log("index: ", this.state.currentTabIndex); }; render() { @@ -62,24 +49,7 @@ export default class App extends React.Component< Coveo Headless + Material UI - - - - - - - - - - - - + { private headlessTab: HeadlessTab; diff --git a/src/Components/Tab/Tab.css b/src/Components/Tab/Tab.css deleted file mode 100644 index c43a388..0000000 --- a/src/Components/Tab/Tab.css +++ /dev/null @@ -1,16 +0,0 @@ - /* .tabBar { - height: 40px; - width: 100px; - background-color: white; - font-size: large; - margin: 0 10px 10px 0; - border-radius: 8px; -} - -.tabBar:hover { - cursor: pointer; -} - -.tabBar:disabled { - cursor: default; -} */ diff --git a/src/Test.tsx b/src/Test.tsx deleted file mode 100644 index 33ef91f..0000000 --- a/src/Test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// import { Tabs, Tab } from "@mui/material"; -// import React, { useState } from "react"; - -// const test = () => { -// const [currentTabIndex, setCurrentTabIndex] = useState(0); - -// const handleTabChange = (e: any, tabIndex: number) => { -// console.log(tabIndex); -// setCurrentTabIndex(tabIndex); -// }; -// return ( -// -// -// -// -// -// -// -// -// ); -// }; - -// export default test; From 232edc7ddc709b90f00cc5315b5b77c5b232794a Mon Sep 17 00:00:00 2001 From: Elouan Date: Fri, 2 Feb 2024 16:53:16 -0500 Subject: [PATCH 14/17] removedstate specification --- src/App.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 7ff20e0..8ff047c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,10 +13,7 @@ import { Box, Container, Grid, Typography } from "@mui/material"; import TabBar, { intelProps, Amd_Props, anyProps } from "./Components/Tab"; import Tabs from "@mui/material/Tabs"; -export default class App extends React.Component< - any, - { currentTabIndex: number } -> { +export default class App extends React.Component { constructor(props: any) { super(props); this.state = { currentTabIndex: 0 }; From 240d7b0dbc4055f64401acfadbf392b771c2e846 Mon Sep 17 00:00:00 2001 From: Elouan Date: Mon, 5 Feb 2024 09:26:47 -0500 Subject: [PATCH 15/17] changed class name to tab --- src/App.tsx | 8 ++++---- src/Components/Tab.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8ff047c..93385ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; -import TabBar, { intelProps, Amd_Props, anyProps } from "./Components/Tab"; +import Tab, { intelProps, Amd_Props, anyProps } from "./Components/Tab"; import Tabs from "@mui/material/Tabs"; export default class App extends React.Component { @@ -47,15 +47,15 @@ export default class App extends React.Component { - - - diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx index 85a2d09..5f98079 100644 --- a/src/Components/Tab.tsx +++ b/src/Components/Tab.tsx @@ -7,8 +7,8 @@ import { TabOptions, } from "@coveo/headless"; import React from "react"; -import Tab from "@mui/material/Tab"; -export default class TabBar extends React.Component { +import { Tab as MaterialTab } from "@mui/material"; +export default class Tab extends React.Component { private headlessTab: HeadlessTab; constructor(props: any) { super(props); @@ -26,7 +26,7 @@ export default class TabBar extends React.Component { render() { return ( - { From 7ba8513278ef3b3dfcd72998591dbfd0506ee52e Mon Sep 17 00:00:00 2001 From: Elouan Date: Mon, 5 Feb 2024 09:42:37 -0500 Subject: [PATCH 16/17] MOved Tab options in App --- src/App.tsx | 64 ++++++++++++++++++++++++++++++++++++++++-- src/Components/Tab.tsx | 62 +--------------------------------------- 2 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 93385ed..5f4a15b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,11 +6,17 @@ import Pager from "./Components/Pager"; import Facet from "./Components/Facet"; import ResultsPerPage from "./Components/ResultsPerPage"; import FacetBreadcrumbs from "./Components/FacetBreadcrumbs"; -import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless"; +import { + loadSearchAnalyticsActions, + loadSearchActions, + buildQueryExpression, + TabOptions, + TabProps, +} from "@coveo/headless"; import headlessEngine from "./Engine"; import Sort from "./Components/Sort"; import { Box, Container, Grid, Typography } from "@mui/material"; -import Tab, { intelProps, Amd_Props, anyProps } from "./Components/Tab"; +import Tab from "./Components/Tab"; import Tabs from "@mui/material/Tabs"; export default class App extends React.Component { @@ -96,3 +102,57 @@ export default class App extends React.Component { ); } } + +const filterIntelProcessor = buildQueryExpression() + .addStringField({ + field: "eng_processor", + operator: "contains", + values: ["Intel"], + }) + .toQuerySyntax(); + +const filterAmdProcessor = buildQueryExpression() + .addStringField({ + field: "eng_processor", + operator: "contains", + values: ["AMD"], + }) + .toQuerySyntax(); + +const noFilter = buildQueryExpression() + .addStringField({ + field: "store_name", + operator: "contains", + values: ["Barca"], + }) + .toQuerySyntax(); + +const intelOptions: TabOptions = { + id: "Intel", + expression: filterIntelProcessor, +}; + +const Amd_Options: TabOptions = { + id: "AMD", + expression: filterAmdProcessor, +}; + +const anyOptions: TabOptions = { + id: "Any", + expression: noFilter, +}; + +const intelProps: TabProps = { + initialState: { isActive: false }, + options: intelOptions, +}; + +const Amd_Props: TabProps = { + initialState: { isActive: false }, + options: Amd_Options, +}; + +const anyProps: TabProps = { + initialState: { isActive: true }, + options: anyOptions, +}; diff --git a/src/Components/Tab.tsx b/src/Components/Tab.tsx index 5f98079..ef00d42 100644 --- a/src/Components/Tab.tsx +++ b/src/Components/Tab.tsx @@ -1,11 +1,5 @@ import headlessEngine from "../Engine"; -import { - buildTab, - TabProps, - Tab as HeadlessTab, - buildQueryExpression, - TabOptions, -} from "@coveo/headless"; +import { buildTab, TabProps, Tab as HeadlessTab } from "@coveo/headless"; import React from "react"; import { Tab as MaterialTab } from "@mui/material"; export default class Tab extends React.Component { @@ -37,57 +31,3 @@ export default class Tab extends React.Component { ); } } - -const filterIntelProcessor = buildQueryExpression() - .addStringField({ - field: "eng_processor", - operator: "contains", - values: ["Intel"], - }) - .toQuerySyntax(); - -const filterAmdProcessor = buildQueryExpression() - .addStringField({ - field: "eng_processor", - operator: "contains", - values: ["AMD"], - }) - .toQuerySyntax(); - -const noFilter = buildQueryExpression() - .addStringField({ - field: "store_name", - operator: "contains", - values: ["Barca"], - }) - .toQuerySyntax(); - -const intelOptions: TabOptions = { - id: "Intel", - expression: filterIntelProcessor, -}; - -const Amd_Options: TabOptions = { - id: "AMD", - expression: filterAmdProcessor, -}; - -const anyOptions: TabOptions = { - id: "Any", - expression: noFilter, -}; - -export const intelProps: TabProps = { - initialState: { isActive: false }, - options: intelOptions, -}; - -export const Amd_Props: TabProps = { - initialState: { isActive: false }, - options: Amd_Options, -}; - -export const anyProps: TabProps = { - initialState: { isActive: true }, - options: anyOptions, -}; From 8c202255ca13c5547ed38be3ac8c5b9919fcfcd7 Mon Sep 17 00:00:00 2001 From: Elouan Date: Mon, 5 Feb 2024 10:30:21 -0500 Subject: [PATCH 17/17] removed snake_case --- src/App.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5f4a15b..25ac0b7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -62,8 +62,8 @@ export default class App extends React.Component { options={intelProps.options!} /> @@ -132,7 +132,7 @@ const intelOptions: TabOptions = { expression: filterIntelProcessor, }; -const Amd_Options: TabOptions = { +const amdOptions: TabOptions = { id: "AMD", expression: filterAmdProcessor, }; @@ -147,9 +147,9 @@ const intelProps: TabProps = { options: intelOptions, }; -const Amd_Props: TabProps = { +const amdProps: TabProps = { initialState: { isActive: false }, - options: Amd_Options, + options: amdOptions, }; const anyProps: TabProps = {