chore: Remove hooks folder (#377)

* remove hooks folder

* remove hooks folder

* apply requested changes

* remove css

CHANGELOG.md

@@ -44,7 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - useWindowDimensions hook
 
 ### Removed
-
+- Removing hooks folder and migrating these hooks to sdk ou inline them on components
 - gatsby-plugin-offline due to CLS on recurrent users
 - useWindowDimensions hook
 - Removes unused `<FacetedFilter/>` component

src/components/common/Navbar/Navbar.tsx

@@ -1,21 +1,21 @@
-import type { SearchInputRef } from '@faststore/ui'
+import './navbar.scss'
+
 import { List as UIList } from '@faststore/ui'
-import { Link as LinkGatsby } from 'gatsby'
+import { graphql, Link as LinkGatsby, useStaticQuery } from 'gatsby'
 import React, { useRef, useState } from 'react'
-import type { AnchorHTMLAttributes } from 'react'
 import CartToggle from 'src/components/cart/CartToggle'
+import IconSVG from 'src/components/common/IconSVG'
+import PostalCodeInput from 'src/components/common/PostalCode'
+import SearchInput from 'src/components/common/SearchInput'
 import IconButton from 'src/components/ui/IconButton'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import SignInLink from 'src/components/ui/SignInLink'
 import SlideOver from 'src/components/ui/SlideOver'
-import { useStoreCollection } from 'src/hooks/useAllCollections'
 import { mark } from 'src/sdk/tests/mark'
-import PostalCodeInput from 'src/components/common/PostalCode'
-import IconSVG from 'src/components/common/IconSVG'
-import SearchInput from 'src/components/common/SearchInput'
-
-import './navbar.scss'
+import type { AnchorHTMLAttributes } from 'react'
+import type { SearchInputRef } from '@faststore/ui'
+import type { StoreCollectionQuery } from '@generated/graphql'
 
 type Callback = () => unknown
 
@@ -24,7 +24,22 @@ interface NavLinksProps {
 }
 
 function NavLinks({ onClickLink }: NavLinksProps) {
-  const links = useStoreCollection()
+  const {
+    allStoreCollection: { edges: links },
+  } = useStaticQuery<StoreCollectionQuery>(graphql`
+    query StoreCollection {
+      allStoreCollection(filter: { type: { eq: Department } }) {
+        edges {
+          node {
+            slug
+            seo {
+              title
+            }
+          }
+        }
+      }
+    }
+  `)
 
   return (
     <nav className="navlinks__list">

src/components/common/PostalCode/PostalCodeInput.tsx

@@ -1,21 +1,25 @@
-import React, { useState } from 'react'
+import { useStorage } from '@faststore/sdk'
 import { Input as UIInput, Label as UILabel } from '@faststore/ui'
-import type { ChangeEvent, KeyboardEvent } from 'react'
-import usePostalCode from 'src/hooks/usePostalCode'
+import React, { useRef } from 'react'
+import type { KeyboardEvent } from 'react'
+
 import './postal-code-input.scss'
 
+const POSTAL_CODE_STORAGE_KEY = 'main::store::postalCode'
 const POSTAL_CODE_INPUT_ID = 'postal-code-input'
 
 export default function PostalCodeInput() {
-  const [localPostalCode, setLocalPostalCode] = useState<string>('')
-  const [, setPostalCode] = usePostalCode()
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setLocalPostalCode(event.target.value)
-  }
+  const ref = useRef<HTMLInputElement>(null)
+  const [postalCode, setPostalCode] = useStorage<string>(
+    POSTAL_CODE_STORAGE_KEY,
+    ''
+  )
 
   const handleSubmit = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && Boolean(localPostalCode)) {
-      setPostalCode(localPostalCode)
+    const value = ref.current?.value
+
+    if (event.key === 'Enter' && typeof value === 'string') {
+      setPostalCode(value)
     }
   }
 
@@ -24,8 +28,9 @@ export default function PostalCodeInput() {
       <UILabel htmlFor={POSTAL_CODE_INPUT_ID}>Postal Code: </UILabel>
       <UIInput
         id={POSTAL_CODE_INPUT_ID}
-        onChange={handleChange}
+        ref={ref}
         onKeyDown={handleSubmit}
+        defaultValue={postalCode}
       />
     </div>
   )

src/pages/{StoreCollection.slug}.tsx

@@ -1,18 +1,51 @@
-import { SearchProvider, useSession } from '@faststore/sdk'
+import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
 import { BreadcrumbJsonLd, GatsbySeo } from 'gatsby-plugin-next-seo'
-import React from 'react'
+import React, { useMemo } from 'react'
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import Hero from 'src/components/sections/Hero'
 import ProductGallery from 'src/components/sections/ProductGallery'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'
-import { useSearchParams } from 'src/hooks/useSearchParams'
 import { applySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
-import type { Props } from 'src/hooks/useSearchParams'
 import IconSVG from 'src/components/common/IconSVG'
+import type {
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables,
+} from '@generated/graphql'
+import type { PageProps } from 'gatsby'
+import type { SearchState } from '@faststore/sdk'
+
+type Props = PageProps<
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables
+> & { slug: string }
+
+const useSearchParams = (props: Props): SearchState => {
+  const {
+    location: { href, pathname },
+    data,
+  } = props
+
+  const selectedFacets = data?.collection?.meta.selectedFacets
+
+  return useMemo(() => {
+    const maybeState = href ? parseSearchState(new URL(href)) : null
+
+    return {
+      page: maybeState?.page ?? 0,
+      base: maybeState?.base ?? pathname,
+      selectedFacets:
+        maybeState && maybeState.selectedFacets.length > 0
+          ? maybeState.selectedFacets
+          : selectedFacets ?? [],
+      term: maybeState?.term ?? null,
+      sort: maybeState?.sort ?? 'score_desc',
+    }
+  }, [href, pathname, selectedFacets])
+}
 
 function Page(props: Props) {
   const {