Added property count to Map to make length of provided array available (#138)

* Added property count to Map, to make length of provided array available

* Remove unused code

* Revert unwanted changes to count returns length of provided array

* Rename count to length

* Change "count" to "length" in test as well

---------

Co-authored-by: Paulo <[email protected]>

Author: 2 people

packages/@react-facet/core/src/components/Map.spec.tsx

@@ -149,3 +149,21 @@ it('updates only items that have changed', () => {
   expect(mock).toHaveBeenCalledTimes(1)
   expect(mock).toHaveBeenCalledWith({ a: '6' })
 })
+
+it('provides the length of the array', () => {
+  const data = createFacet({
+    initialValue: [{ a: '1' }, { a: '2' }, { a: '3' }],
+  })
+
+  const ExampleContent = ({ index, length }: { index: number; length: number }) => {
+    return <>{length === index + 1 && <div data-testid={'length'}>{length}</div>}</>
+  }
+
+  const Example = () => {
+    return <Map array={data}>{(_, index, length) => <ExampleContent index={index} length={length} />}</Map>
+  }
+
+  const { getByTestId } = render(<Example />)
+
+  expect(getByTestId('length')).toHaveTextContent('3')
+})

packages/@react-facet/core/src/components/Map.tsx

@@ -6,13 +6,13 @@ import { EqualityCheck, Facet, NO_VALUE } from '../types'
 
 export type MapProps<T> = {
   array: Facet<T[]>
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
   equalityCheck?: EqualityCheck<T>
 }
 
 export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
-  // When mounting lists, we always want to defer
-  const countValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
+  const lengthValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
+  const lengthNumber = lengthValue !== NO_VALUE ? lengthValue : 0
 
   return (
     <>
@@ -23,13 +23,14 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
               key={index}
               arrayFacet={array}
               index={index}
+              length={lengthNumber}
               equalityCheck={equalityCheck}
               children={children}
             />
           ) : (
-            <MapChild<T> key={index} arrayFacet={array} index={index} children={children} />
+            <MapChild<T> key={index} arrayFacet={array} index={index} length={lengthNumber} children={children} />
           ),
-        countValue !== NO_VALUE ? countValue : 0,
+        lengthNumber,
       )}
     </>
   )
@@ -38,11 +39,12 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
 type MapChildMemoProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  length: number
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
   equalityCheck: EqualityCheck<T>
 }
 
-const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChildMemoProps<T>) => {
+const MapChildMemo = <T,>({ arrayFacet, index, length, children, equalityCheck }: MapChildMemoProps<T>) => {
   const childFacet = useFacetMemo(
     (array) => {
       if (index < array.length) return array[index]
@@ -52,16 +54,17 @@ const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChi
     [arrayFacet],
     equalityCheck,
   )
-  return children(childFacet, index)
+  return children(childFacet, index, length)
 }
 
 type MapChildProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  length: number
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
 }
 
-const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
+const MapChild = <T,>({ arrayFacet, index, length, children }: MapChildProps<T>) => {
   const childFacet = useFacetMap(
     (array) => {
       if (index < array.length) return array[index]
@@ -71,7 +74,7 @@ const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
     [arrayFacet],
   )
 
-  return children(childFacet, index)
+  return children(childFacet, index, length)
 }
 
 interface TimesFn<T> {