Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add specification filter #11

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

add specification filter #11

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f7a4a1f
add specification filter
IncognitaDev Oct 25, 2021
fa8f9eb
add documentation
IncognitaDev Oct 25, 2021
e733320
Update react/ProductSpecification.tsx
IncognitaDev Oct 25, 2021
0ac390c
Update react/ProductSpecification.tsx
IncognitaDev Oct 25, 2021
3d771dd
WIP: fix mutability
IncognitaDev Oct 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,20 @@ You also can use other blocks to wrap the blocks provided by the Product Specifi
| Prop name | Type | Description | Default value |
| --------------------- | ---------- | --------------------- | ------------- |
| `specificationGroups` | `[string]` | Array of specification group names to be hidden or shown (according to what is defined in the `type` property) by the `product-specification-group` block. | `undefined` |
| `type` | `enum` | Whether the specification group names passed to the `specificationGroups` prop should be displayed or hidden on the UI. Possible values are: `hide` (hides specification groups declared in the `specificationGroups` prop) or `show` (only shows the specification groups declared in the `specificationGroups` prop). | `undefined` |
| `type` | `enum` | Whether the specification group names passed to the `specificationGroups` prop should be displayed or hidden on the UI. Possible values are: `hide` (hides specification groups declared in the `specificationGroups` prop) or `show` (only shows the specification groups declared in the `specificationGroups` prop). | `hide` |

### `product-specification` props

| Prop name | Type | Description | Default value |
| --------- | -------- | ----------------------------------------------------------- | ------------- |
| `filter` | `object` | Filters the specifications that should be displayed by the block. | `undefined` |

- **`filter` object:**

| Prop name | Type | Description | Default value |
| --------------------- | ---------- | --------------------- | ------------- |
| `specificationNames` | `[string]` | Array of specification group names to be hidden or shown (according to what is defined in the `type` property) by the `product-specification-group` block. | `undefined` |
| `type` | `enum` | Whether the specification group names passed to the `specificationNames` prop should be displayed or hidden on the UI. Possible values are: `hide` (hides specification groups declared in the `specificationNames` prop) or `show` (only shows the specification groups declared in the `specificationNames` prop). | `hide` |

#### `product-specification-text` props

Expand Down
23 changes: 21 additions & 2 deletions react/ProductSpecification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,35 @@ import { Specification } from 'vtex.product-context'

import { useProductSpecificationGroup } from './ProductSpecificationGroup'

const ProductSpecificationGroup: FC = ({ children }) => {
interface ProductSpecificationGroupProps {
filter?: {
type: 'hide' | 'show'
specificationNames: string[]
}
}


const ProductSpecificationGroup: FC<ProductSpecificationGroupProps> = ({ children, filter= {type: 'hide', specificationNames: []} }) => {
const group = useProductSpecificationGroup()

if (!group) {
return null
}

let specifications = group.specifications;

if (filter.specificationNames?.length > 0 && filter.type == 'show') {
IncognitaDev marked this conversation as resolved.
Show resolved Hide resolved
specifications = specifications.filter((specification) =>
filter.specificationNames.includes(specification.originalName) )
}
if (filter.specificationNames?.length > 0 && filter.type == 'hide') {
IncognitaDev marked this conversation as resolved.
Show resolved Hide resolved
specifications = specifications.filter((specification) =>
!filter.specificationNames.includes(specification.originalName) )
}
Copy link

@igorbrasileiro igorbrasileiro Oct 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a way to remove this mutability. Feel free to argue 😅

What do you think about this suggestion?

const identityNoop = <T extends any>(x) => x // type the generics better, if possible.

type specificationFilterFunction = (specificationName: string) => boolean

interface UseFilterSpecification {
  specification: Array<{ originalName: string }>
  filters: {
    show: specificationFilterFunction,
    hide: specificationFilterFunction,
  }
}

const filterSpecification = ({ specification, filters: { show, hide } }: UseFilterSpecification) => {
   return specifications.filter(({ originalName }) => show(originalName) && hide(originalName))
}
Suggested change
let specifications = group.specifications;
if (filter.specificationNames?.length > 0 && filter.type == 'show') {
specifications = specifications.filter((specification) =>
filter.specificationNames.includes(specification.originalName) )
}
if (filter.specificationNames?.length > 0 && filter.type == 'hide') {
specifications = specifications.filter((specification) =>
!filter.specificationNames.includes(specification.originalName) )
}
const specifications = filterSpecification({
specifications: group.specifications,
filters: {
hide: filter.type === 'show' ? (specification) => filter.specificationNames.includes(specification) : identityNoop,
show: filter.type === 'hide' ? !(specification) => !filter.specificationNames.includes(specification) : identityNoop
}
})

That's it 😄 , you can rename or change or even disagree. If you feel more comfortable discussing in Portuguese, we can switch to PT-BR.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This suggestion seems not to escalate if we want to handle unlimited filters, but for now, it looks good.

Copy link
Author

@IncognitaDev IncognitaDev Oct 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a way to remove this mutability. Feel free to argue 😅

What do you think about this suggestion?

const identityNoop = <T extends any>(x) => x // type the generics better, if possible.

type specificationFilterFunction = (specificationName: string) => boolean

interface UseFilterSpecification {
  specification: Array<{ originalName: string }>
  filters: {
    show: specificationFilterFunction,
    hide: specificationFilterFunction,
  }
}

const filterSpecification = ({ specification, filters: { show, hide } }: UseFilterSpecification) => {
   return specifications.filter(({ originalName }) => show(originalName) && hide(originalName))
}

That's it 😄 , you can rename or change or even disagree. If you feel more comfortable discussing in Portuguese, we can switch to PT-BR.

I make some adapts to fix errors but i'm not find the cause of this error: Argument of type 'string' is not assignable to parameter of type 'never'.

This just appear in hide function.


return (
<>
{group.specifications.map((specification, index) => (
{specifications.map((specification, index) => (
<ProductSpecificationProvider key={index} specification={specification}>
{children}
</ProductSpecificationProvider>
Expand Down