From 2a36703ea52a71cc06400303cac6e8f3607804db Mon Sep 17 00:00:00 2001
From: Dennis Thompson <djtthompson@gmail.com>
Date: Sun, 28 Nov 2021 18:16:37 -0800
Subject: [PATCH] fix: #139

- Pass new counter on context
---
 src/components/Shuttle/Shuttle.tsx            |  7 +++++-
 src/components/Shuttle/ShuttleContainer.tsx   |  6 ++---
 src/components/Shuttle/ShuttleContext.tsx     |  1 +
 .../__tests__/ShuttleContainer.test.tsx       | 22 +++++++------------
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/Shuttle/Shuttle.tsx b/src/components/Shuttle/Shuttle.tsx
index 284d2bf..e521730 100644
--- a/src/components/Shuttle/Shuttle.tsx
+++ b/src/components/Shuttle/Shuttle.tsx
@@ -56,10 +56,15 @@ export const Shuttle: React.FC<ShuttleProps> & Statics = ({
   children,
   ...rest
 }: ShuttleProps) => {
+  const counter = React.useRef(0);
   const { onClick: defaultClickHandler } = useShuttleItemClick({ setShuttleState, shuttleState });
 
   return (
-    <ShuttleContext.Provider value={{ shuttleState, setShuttleState }}>
+    <ShuttleContext.Provider
+      value={React.useMemo(
+        () => ({ shuttleState, setShuttleState, counter }),
+        [shuttleState, setShuttleState, counter]
+      )}>
       <div
         className={classNames(
           'shuttle',
diff --git a/src/components/Shuttle/ShuttleContainer.tsx b/src/components/Shuttle/ShuttleContainer.tsx
index 72a56f0..94f12a9 100644
--- a/src/components/Shuttle/ShuttleContainer.tsx
+++ b/src/components/Shuttle/ShuttleContainer.tsx
@@ -5,8 +5,6 @@ import { ShuttleContext } from './ShuttleContext';
 import { NUMBER_OF_CONTAINERS, SHUTTLE_CONTAINERS_ARRAY } from './globals';
 import { ShuttleState } from './hooks/useShuttleState';
 
-let id_int = 0;
-
 export type ShuttleContainerProps = {
   /**
    * Child render function of the Shuttle Container.
@@ -34,11 +32,11 @@ export const ShuttleContainer: React.FC<ShuttleContainerProps> = React.memo(
   // eslint-disable-next-line react/display-name
   React.forwardRef<HTMLDivElement, ShuttleContainerProps>(
     ({ children, className, ...rest }, ref) => {
-      const { shuttleState } = React.useContext(ShuttleContext);
+      const { shuttleState, counter } = React.useContext(ShuttleContext);
 
       // mod needed for HMR updates
       const id = React.useRef(
-        SHUTTLE_CONTAINERS_ARRAY[Math.floor(id_int++ % NUMBER_OF_CONTAINERS)]
+        SHUTTLE_CONTAINERS_ARRAY[Math.floor(counter.current++ % NUMBER_OF_CONTAINERS)]
       );
 
       /**
diff --git a/src/components/Shuttle/ShuttleContext.tsx b/src/components/Shuttle/ShuttleContext.tsx
index 2afb5e8..cf38bd5 100644
--- a/src/components/Shuttle/ShuttleContext.tsx
+++ b/src/components/Shuttle/ShuttleContext.tsx
@@ -4,6 +4,7 @@ import { ShuttleState } from './hooks/useShuttleState';
 type ShuttleContextType = {
   shuttleState: ShuttleState;
   setShuttleState: React.Dispatch<Record<string, any>>;
+  counter: React.MutableRefObject<number>;
 };
 
 // @ts-ignore
diff --git a/src/components/Shuttle/__tests__/ShuttleContainer.test.tsx b/src/components/Shuttle/__tests__/ShuttleContainer.test.tsx
index 0a5bac6..bd98cb9 100644
--- a/src/components/Shuttle/__tests__/ShuttleContainer.test.tsx
+++ b/src/components/Shuttle/__tests__/ShuttleContainer.test.tsx
@@ -1,26 +1,20 @@
-import * as React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
+import React from 'react';
+import { render, cleanup, screen } from '@testing-library/react';
 import { ShuttleContainer } from '../ShuttleContainer';
 
 afterEach(cleanup);
 
 describe('ShuttleContainer tests', () => {
-  it('should render', () => {
-    expect(() => {
-      render(<ShuttleContainer>{() => <p>hello</p>}</ShuttleContainer>);
-    }).not.toThrow();
-  });
-
   it('should contain data-name and other essential attributes', () => {
-    const { container, getByTestId } = render(
+    jest.spyOn(React, 'useContext').mockReturnValue({ counter: { current: 1 } });
+
+    const { container } = render(
       <ShuttleContainer data-testid="container">{() => <p>hello</p>}</ShuttleContainer>
     );
 
-    expect(getByTestId('container')).toHaveAttribute('data-name', 'target');
-    expect(getByTestId('container')).toHaveAttribute('role', 'listbox');
-    expect(getByTestId('container')).toHaveAttribute('tabindex', '0');
+    expect(screen.getByTestId('container')).toHaveAttribute('data-name', 'target');
+    expect(screen.getByTestId('container')).toHaveAttribute('role', 'listbox');
+    expect(screen.getByTestId('container')).toHaveAttribute('tabindex', '0');
 
     expect(container).toMatchSnapshot();
   });