Merge pull request #30 from vtex/fix/search-page-structure

Fix/search page structure
vtexdocs · May 2, 2022 · c2f2754 · c2f2754
2 parents 7ed22e3 + 81dd140
commit c2f2754
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 135 deletions.
diff --git a/src/components/search-card/index.tsx b/src/components/search-card/index.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Text, IconCaret } from '@vtex/brand-ui'
 import { IconComponent } from 'utils/typings/types'
-import type { SearchDataItemProps } from 'pages/search'
+import type { SearchDataItemProps } from 'components/search-results'
 
 import { methodStyle } from './functions'
 import styles from './styles'

diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx
@@ -0,0 +1,68 @@
+import { useRouter } from 'next/router'
+import { Box, Text } from '@vtex/brand-ui'
+
+import { MethodType } from 'utils/typings/unionTypes'
+
+import { getIcon } from 'utils/constants'
+import SearchCard from 'components/search-card'
+
+import { ActionType } from 'components/last-updates-card/functions'
+import styles from './styles'
+
+export interface SearchDataItemProps {
+  doc: string
+  title: string
+  description: string
+  filters?: string[]
+  http?: MethodType
+  actionType?: ActionType
+}
+
+const SearchResults = () => {
+  const router = useRouter()
+
+  const searchData: SearchDataItemProps[] = [
+    {
+      doc: 'API Guides',
+      title: 'SKU Selector',
+      description:
+        'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
+      filters: ['label', 'label', 'label'],
+    },
+    {
+      doc: 'API Reference',
+      title: 'GET SKU seller',
+      http: 'POST',
+      description:
+        'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
+      filters: ['label', 'label', 'label'],
+    },
+    {
+      doc: 'Release Notes',
+      title: 'SKU Selector',
+      description:
+        'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
+      actionType: 'removed',
+    },
+  ]
+  return (
+    <Box sx={styles.resultContainer}>
+      <Text sx={styles.resultText}>
+        Showing {searchData.length} results for "{router.query.keyword}" in all
+        results
+      </Text>
+      <hr />
+      <Box>
+        {searchData.map((result, index) => (
+          <SearchCard
+            key={`${result.doc}${result.title}${index}`}
+            Icon={getIcon(result.doc)!}
+            {...result}
+          />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export default SearchResults
diff --git a/src/components/search-results/styles.ts b/src/components/search-results/styles.ts
@@ -0,0 +1,23 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const resultContainer: SxStyleProp = {
+  width: '720px',
+  paddingTop: '64px',
+  hr: {
+    marginTop: '16px',
+    marginBottom: '32px',
+    borderTop: 'none',
+    borderColor: '#DDDDDD',
+  },
+}
+
+const resultText: SxStyleProp = {
+  mb: '16px',
+  fontSize: '16px',
+  lineHeight: '22px',
+}
+
+export default {
+  resultContainer,
+  resultText,
+}
diff --git a/src/components/search-section/index.tsx b/src/components/search-section/index.tsx
@@ -4,12 +4,21 @@ import type { DocDataElement, UpdatesDataElement } from 'utils/typings/types'
 import styles from './styles'
 
 interface SearchSectionProps {
-  dataElement: DocDataElement | UpdatesDataElement
-  index: number
+  dataElement: DocDataElement | UpdatesDataElement | null
+  index?: number
 }
 
 const SearchSection = ({ dataElement, index }: SearchSectionProps) => {
-  return (
+  return !dataElement ? (
+    <Flex sx={styles.sectionContainer}>
+      <Text className="search-section-title" sx={styles.allResultsText}>
+        All results
+      </Text>
+      <Box className="search-section-count" sx={styles.sectionCount}>
+        25
+      </Box>
+    </Flex>
+  ) : (
     <Flex
       sx={styles.sectionContainer}
       key={`search-section-${dataElement.title}${index}`}

diff --git a/src/components/search-section/styles.ts b/src/components/search-section/styles.ts
@@ -44,10 +44,18 @@ const sectionCount: SxStyleProp = {
   lineHeight: '16px',
 }
 
+const allResultsText: SxStyleProp = {
+  ...sectionTitle,
+  ml: '24px',
+  fontWeight: 'bold',
+  color: '#0C1522',
+}
+
 export default {
   sectionContainer,
   sectionIconTitleBox,
   sectionIcon,
   sectionTitle,
   sectionCount,
+  allResultsText,
 }
diff --git a/src/components/search-sections/index.tsx b/src/components/search-sections/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@vtex/brand-ui'
+import { Box } from '@vtex/brand-ui'
 
 import { documentationData, updatesData } from 'utils/constants'
 import SearchSection from 'components/search-section'
@@ -8,14 +8,7 @@ const SearchSections = () => {
   return (
     <Box sx={styles.container}>
       <Box sx={styles.docsSection}>
-        <Flex sx={styles.allResultsContainer}>
-          <Text className="search-section-title" sx={styles.allResultsText}>
-            All results
-          </Text>
-          <Box className="search-section-count" sx={styles.sectionCount}>
-            25
-          </Box>
-        </Flex>
+        <SearchSection dataElement={null} />
         {documentationData.map((docsIcon, index) => (
           <SearchSection dataElement={docsIcon} index={index} />
         ))}

diff --git a/src/components/search-sections/styles.ts b/src/components/search-sections/styles.ts
@@ -19,45 +19,8 @@ const docsSection: SxStyleProp = {
   borderBottom: '1px solid #E7E9EE',
 }
 
-const allResultsContainer: SxStyleProp = {
-  justifyContent: 'space-between',
-  padding: '8px',
-  mb: '8px',
-  cursor: 'pointer',
-  ':active, :hover': {
-    backgroundColor: '#F8F7FC',
-    '.search-section-title': {
-      color: '#000711',
-    },
-    '.search-section-count': {
-      background: '#E7E9EE',
-    },
-  },
-}
-
-const allResultsText: SxStyleProp = {
-  fontSize: '12px',
-  lineHeight: '16px',
-  ml: '24px',
-  fontWeight: 'bold',
-  color: '#0C1522',
-}
-
-const sectionCount: SxStyleProp = {
-  background: '#F8F7FC',
-  borderRadius: '24px',
-  width: 'auto',
-  textAlign: 'center',
-  px: '8px',
-  fontSize: '12px',
-  lineHeight: '16px',
-}
-
 export default {
   container,
   notesSection,
   docsSection,
-  allResultsText,
-  allResultsContainer,
-  sectionCount,
 }
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
@@ -1,71 +1,19 @@
-import { useRouter } from 'next/router'
-import { Flex, Box, Text } from '@vtex/brand-ui'
+import { Flex } from '@vtex/brand-ui'
 import styles from 'styles/search-page'
-
-import { getIcon } from 'utils/constants'
-import { MethodType } from 'utils/typings/unionTypes'
-import { ActionType } from 'components/last-updates-card/functions'
-
-import SideBar from 'components/sidebar'
-import SearchCard from 'components/search-card'
 import SearchSections from 'components/search-sections'
-
-export interface SearchDataItemProps {
-  doc: string
-  title: string
-  description: string
-  filters?: string[]
-  http?: MethodType
-  actionType?: ActionType
-}
+import Sidebar from 'components/sidebar'
+import SearchContextProvider from 'utils/contexts/searchContext'
+import SearchResults from 'components/search-results'
 
 const SearchPage = () => {
-  const router = useRouter()
-  const searchData: SearchDataItemProps[] = [
-    {
-      doc: 'API Guides',
-      title: 'SKU Selector',
-      description:
-        'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
-      filters: ['label', 'label', 'label'],
-    },
-    {
-      doc: 'API Reference',
-      title: 'GET SKU seller',
-      http: 'POST',
-      description:
-        'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
-      filters: ['label', 'label', 'label'],
-    },
-    {
-      doc: 'Release Notes',
-      title: 'SKU Selector',
-      description:
-        'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
-      actionType: 'removed',
-    },
-  ]
   return (
-    <Flex sx={styles.body}>
-      <SideBar sectionSelected={''} />
-      <SearchSections />
-      <Box sx={styles.resultContainer}>
-        <Text sx={styles.resultText}>
-          Showing {searchData.length} results for "{router.query.keyword}" in
-          all results
-        </Text>
-        <hr />
-        <Box>
-          {searchData.map((result, index) => (
-            <SearchCard
-              key={`${result.doc}${result.title}${index}`}
-              Icon={getIcon(result.doc)!}
-              {...result}
-            />
-          ))}
-        </Box>
-      </Box>
-    </Flex>
+    <SearchContextProvider>
+      <Flex sx={styles.body}>
+        <Sidebar sectionSelected={''} />
+        <SearchSections />
+        <SearchResults />
+      </Flex>
+    </SearchContextProvider>
   )
 }
 

diff --git a/src/styles/search-page.ts b/src/styles/search-page.ts
@@ -5,25 +5,6 @@ const body: SxStyleProp = {
   background: '#FFFFFF',
 }
 
-const resultContainer: SxStyleProp = {
-  width: '720px',
-  paddingTop: '64px',
-  hr: {
-    marginTop: '16px',
-    marginBottom: '32px',
-    borderTop: 'none',
-    borderColor: '#DDDDDD',
-  },
-}
-
-const resultText: SxStyleProp = {
-  mb: '16px',
-  fontSize: '16px',
-  lineHeight: '22px',
-}
-
 export default {
   body,
-  resultContainer,
-  resultText,
 }
diff --git a/src/utils/contexts/searchContext.tsx b/src/utils/contexts/searchContext.tsx
@@ -0,0 +1,32 @@
+import { createContext, Dispatch, SetStateAction, useState } from 'react'
+import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
+
+type FilterType = DocumentationTitle | UpdatesTitle | ''
+
+type SearchContextType = {
+  filterSelectedSection: FilterType
+  changeFilterSelectedSection: Dispatch<SetStateAction<FilterType>>
+}
+
+export const SearchContext = createContext<SearchContextType>({
+  filterSelectedSection: '',
+  changeFilterSelectedSection: () => undefined,
+})
+
+const SearchContextProvider: React.FC = ({ children }) => {
+  const [filterSelectedSection, changeFilterSelectedSection] =
+    useState<FilterType>('')
+
+  return (
+    <SearchContext.Provider
+      value={{
+        filterSelectedSection,
+        changeFilterSelectedSection,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+export default SearchContextProvider
diff --git a/yarn.lock b/yarn.lock
@@ -414,9 +414,14 @@
   dependencies:
     "glob" "7.1.7"
 
-"@next/[email protected]":
-  "integrity" "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg=="
-  "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz"
+"@next/[email protected]":
+  "integrity" "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A=="
+  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz"
+  "version" "12.1.0"
+
+"@next/[email protected]":
+  "integrity" "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw=="
+  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz"
   "version" "12.1.0"
 
 "@nodelib/[email protected]":