-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
450 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,184 +1,39 @@ | ||
| import './sass/App.scss'; | ||
| import VerticalSearchPage from './pages/VerticalSearchPage'; | ||
| import UniversalSearchPage from './pages/UniversalSearchPage'; | ||
| import PageRouter from './PageRouter'; | ||
| import Layout from './Layout'; | ||
| import { AnswersActionsProvider } from '@yext/answers-headless-react'; | ||
| import AlternativeVerticals from './components/AlternativeVerticals'; | ||
| import DecoratedAppliedFilters from './components/DecoratedAppliedFilters'; | ||
| import { StandardCard } from './components/cards/StandardCard'; | ||
| import ResultsCount from './components/ResultsCount'; | ||
| import SearchBar from './components/SearchBar'; | ||
| import StaticFilters from './components/StaticFilters'; | ||
| import VerticalResults from './components/VerticalResults'; | ||
| import SpellCheck from './components/SpellCheck'; | ||
| import LocationBias from './components/LocationBias'; | ||
| import UniversalResults from './components/UniversalResults'; | ||
| import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; | ||
| import Facets from './components/Facets'; | ||
|
|
||
| function App() { | ||
| const staticFilterOptions = [ | ||
| { | ||
| label: 'canada', | ||
| fieldId: 'c_employeeCountry', | ||
| value: 'Canada', | ||
| }, | ||
| { | ||
| label: 'remote', | ||
| fieldId: 'c_employeeCountry', | ||
| value: 'Remote' | ||
| }, | ||
| { | ||
| label: 'usa', | ||
| fieldId: 'c_employeeCountry', | ||
| value: 'United States', | ||
| }, | ||
| { | ||
| label: 'tech', | ||
| fieldId: 'c_employeeDepartment', | ||
| value: 'Technology' | ||
| }, | ||
| { | ||
| label: 'consult', | ||
| fieldId: 'c_employeeDepartment', | ||
| value: 'Consulting', | ||
| }, | ||
| { | ||
| label: 'fin', | ||
| fieldId: 'c_employeeDepartment', | ||
| value: 'Finance', | ||
| } | ||
| ] | ||
|
|
||
| const universalResultsConfig = { | ||
| people: { | ||
| label: "People", | ||
| viewMore: true, | ||
| cardConfig: { | ||
| CardComponent: StandardCard, | ||
| showOrdinal: true | ||
| } | ||
| }, | ||
| events: { | ||
| label: "events", | ||
| cardConfig: { | ||
| CardComponent: StandardCard, | ||
| showOrdinal: true | ||
| } | ||
| }, | ||
| links: { | ||
| label: "links", | ||
| viewMore: true, | ||
| cardConfig: { | ||
| CardComponent: StandardCard, | ||
| showOrdinal: true | ||
| } | ||
| }, | ||
| financial_professionals: { | ||
| label: "Financial Professionals", | ||
| }, | ||
| healthcare_professionals: { | ||
| label: "Healthcare Professionals", | ||
| import { universalResultsConfig } from './universalResultsConfig'; | ||
|
|
||
| const routes = [ | ||
| { | ||
| path: '/', | ||
| exact: true, | ||
| page: <UniversalSearchPage universalResultsConfig={universalResultsConfig} /> | ||
| }, | ||
| ...Object.keys(universalResultsConfig).map(key => { | ||
| return { | ||
| path: `/${key}`, | ||
| page: <VerticalSearchPage verticalKey={key} /> | ||
| } | ||
| } | ||
|
|
||
| const universalResultsFilterConfig = { | ||
| show: true | ||
| }; | ||
|
|
||
| const facetConfigs = { | ||
| c_employeeDepartment: { | ||
| label: 'Employee Department!' | ||
| } | ||
| } | ||
| }) | ||
| ]; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <AnswersActionsProvider | ||
| apiKey='2d8c550071a64ea23e263118a2b0680b' | ||
| experienceKey='slanswers' | ||
| locale='en' | ||
| verticalKey='people' | ||
| > | ||
| {/* | ||
| TODO: use Navigation component for routing when that's added to repo. | ||
| current setup is for testing purposes. | ||
| */} | ||
| <Router> | ||
| <Switch> | ||
| {/* universal search */} | ||
| <Route exact path='/'> | ||
| <div className='start'> | ||
| test | ||
| </div> | ||
| <div className='end'> | ||
| <SearchBar | ||
| placeholder='Search...' | ||
| isVertical={false} | ||
| /> | ||
| <div> | ||
| <UniversalResults | ||
| appliedFiltersConfig={universalResultsFilterConfig} | ||
| verticalConfigs={universalResultsConfig} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Route> | ||
|
|
||
| {/* vertical page */} | ||
| <Route path={Object.keys(universalResultsConfig).map(key => `/${key}`)}> | ||
| <div> | ||
| A VERTICAL PAGE! | ||
| </div> | ||
| </Route> | ||
|
|
||
| {/* vertical search */} | ||
| <Route exact path='/vertical'> | ||
| <div className='start'> | ||
| test | ||
| <StaticFilters | ||
| title='~Country and Employee Departments~' | ||
| options={staticFilterOptions} | ||
| /> | ||
| <Facets | ||
| searchOnChange={true} | ||
| searchable={true} | ||
| collapsible={true} | ||
| defaultExpanded={true} | ||
| facetConfigs={facetConfigs} | ||
| /> | ||
| <SpellCheck | ||
| isVertical={true} | ||
| /> | ||
| </div> | ||
| <div className='end'> | ||
| <SearchBar | ||
| placeholder='Search...' | ||
| isVertical={true} | ||
| /> | ||
| <div> | ||
| <ResultsCount /> | ||
| <DecoratedAppliedFilters | ||
| showFieldNames={true} | ||
| hiddenFields={['builtin.entityType']} | ||
| delimiter='|' | ||
| /> | ||
| <AlternativeVerticals | ||
| currentVerticalLabel='People' | ||
| verticalsConfig={[ | ||
| { label: 'Locations', verticalKey: 'KM' }, | ||
| { label: 'FAQs', verticalKey: 'faq' } | ||
| ]} | ||
| /> | ||
| <VerticalResults | ||
| CardComponent={StandardCard} | ||
| cardConfig={{ showOrdinal: true }} | ||
| displayAllResults={true} | ||
| /> | ||
| <LocationBias isVertical={false} /> | ||
| </div> | ||
| </div> | ||
| </Route> | ||
| </Switch> | ||
| </Router> | ||
| <div className='App'> | ||
| <PageRouter | ||
| Layout={Layout} | ||
| routes={routes} | ||
| /> | ||
| </div> | ||
| </AnswersActionsProvider> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import Navigation from './components/Navigation'; | ||
| import SearchBar from './components/SearchBar'; | ||
| import { useAnswersState } from '@yext/answers-headless-react'; | ||
| import { universalResultsConfig } from './universalResultsConfig'; | ||
| import { LayoutComponent } from './PageRouter'; | ||
|
|
||
| const navLinks = [ | ||
| { | ||
| to: '/', | ||
| label: 'All' | ||
| }, | ||
| ...Object.entries(universalResultsConfig).map(([verticalKey, config]) => ({ | ||
| to: verticalKey, | ||
| label: config.label || verticalKey | ||
| })) | ||
| ] | ||
|
|
||
| /** | ||
| * A LayoutComponent that renders a page with a SearchBar and Navigation tabs. | ||
| */ | ||
| const Layout: LayoutComponent = ({ page }) => { | ||
| const isVertical = useAnswersState(state => !!state.vertical.key); | ||
| return ( | ||
| <> | ||
| <SearchBar | ||
| placeholder='Search...' | ||
| isVertical={isVertical} | ||
| /> | ||
| <Navigation links={navLinks} /> | ||
| {page} | ||
| </> | ||
| ) | ||
| } | ||
| export default Layout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { ComponentType } from 'react'; | ||
| import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; | ||
|
|
||
| interface RouteData { | ||
| path: string | ||
| page: JSX.Element | ||
| exact?: boolean | ||
| } | ||
|
|
||
| export type LayoutComponent = ComponentType<{ page: JSX.Element }> | ||
|
|
||
| interface PageProps { | ||
| Layout?: LayoutComponent | ||
| routes: RouteData[] | ||
| } | ||
|
|
||
| /** | ||
| * PageRouter abstracts away logic surrounding react-router, and provides an easy way | ||
| * to specify a {@link LayoutComponent} for a page. | ||
| */ | ||
| export default function PageRouter({ Layout, routes }: PageProps) { | ||
| const pages = routes.map(routeData => { | ||
| const { path, page, exact } = routeData; | ||
| if (Layout) { | ||
| return ( | ||
| <Route key={path} path={path} exact={exact}> | ||
| <Layout page={page}/> | ||
| </Route> | ||
| ); | ||
| } | ||
| return <Route key={path} path={path} exact={exact}>{page}</Route>; | ||
| }); | ||
|
|
||
| return ( | ||
| <Router> | ||
| <Switch> | ||
| {pages} | ||
| </Switch> | ||
| </Router> | ||
| ); | ||
| } |
Oops, something went wrong.