fix(events): Separate the events context

Author: fhlavac

packages/module/patternfly-docs/content/extensions/data-view/examples/Context/Context.md

@@ -13,17 +13,17 @@ source: react
 sortValue: 3
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Events/Events.md
 ---
-import { useState, useEffect, useContext, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
-import DataViewContext, { DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewContext';
+import { useDataViewEventsContext, DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 
 The **data view** context provides a way to share data across the entire data view tree without having to pass props manually at every level. It also provides a way of listening to the data view events from the outside of the component.
 
 
 ### Events sharing example
-The following example demonstrates how to use the `DataViewContext` to manage shared state and handle events. The `DataViewProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
+The following example demonstrates how to use the `DataViewEventsContext` to manage shared state and handle events. The `DataViewEventsProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
 
 
 ```js file="./EventsExample.tsx"

packages/module/patternfly-docs/content/extensions/data-view/examples/Context/EventsExample.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Text } from '@patternfly/react-core';
 import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
-import DataViewContext, { DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewContext';
+import { DataViewEventsProvider, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
 
 interface Repository {
   name: string;
@@ -37,7 +37,7 @@ interface RepositoryDetailProps {
 }
 
 const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
-  const context = useContext(DataViewContext);
+  const context = useDataViewEventsContext();
 
   useEffect(() => {
     const unsubscribe = context.subscribe(EventTypes.rowClick, (repo: Repository) => {
@@ -71,7 +71,7 @@ interface RepositoriesTableProps {
 }
 
 const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
-  const { trigger } = useContext(DataViewContext);
+  const { trigger } = useDataViewEventsContext();
 
   const handleRowClick = (repo: Repository | undefined) => {
     trigger(EventTypes.rowClick, repo);
@@ -116,7 +116,7 @@ export const BasicExample: React.FunctionComponent = () => {
   const drawerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <DataViewProvider>
+    <DataViewEventsProvider>
       <Drawer isExpanded={Boolean(selectedRepo)} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id="detail-drawer" >
         <DrawerContent
           panelContent={<RepositoryDetail selectedRepo={selectedRepo} setSelectedRepo={setSelectedRepo} />}
@@ -126,6 +126,6 @@ export const BasicExample: React.FunctionComponent = () => {
           </DrawerContentBody>
         </DrawerContent>
       </Drawer>
-    </DataViewProvider>
+    </DataViewEventsProvider>
   );
 };

packages/module/src/DataViewContext/index.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { DataViewContext, DataViewProvider, EventTypes } from './DataViewContext';
+import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
 
 let id = 0;
 
@@ -12,12 +12,12 @@ beforeAll(() => {
   });
 });
 
-describe('DataViewContext', () => {
+describe('DataViewEventsContext', () => {
   test('should provide context value and allow subscriptions', () => {
     const callback = jest.fn();
 
     const TestComponent = () => {
-      const { subscribe, trigger } = React.useContext(DataViewContext);
+      const { subscribe, trigger } = useDataViewEventsContext();
 
       React.useEffect(() => {
         const unsubscribe = subscribe(EventTypes.rowClick, callback);
@@ -31,9 +31,9 @@ describe('DataViewContext', () => {
     };
 
     const { getByText } = render(
-      <DataViewProvider>
+      <DataViewEventsProvider>
         <TestComponent />
-      </DataViewProvider>
+      </DataViewEventsProvider>
     );
 
     fireEvent.click(getByText('Trigger'));
@@ -44,7 +44,7 @@ describe('DataViewContext', () => {
     const callback = jest.fn();
 
     const TestComponent = () => {
-      const { subscribe, trigger } = React.useContext(DataViewContext);
+      const { subscribe, trigger } = useDataViewEventsContext();
 
       React.useEffect(() => {
         const unsubscribe = subscribe(EventTypes.rowClick, callback);
@@ -58,9 +58,9 @@ describe('DataViewContext', () => {
     };
 
     const { getByText } = render(
-      <DataViewProvider>
+      <DataViewEventsProvider>
         <TestComponent />
-      </DataViewProvider>
+      </DataViewEventsProvider>
     );
 
     fireEvent.click(getByText('Trigger'));
@@ -73,7 +73,7 @@ describe('DataViewContext', () => {
     const callback2 = jest.fn();
 
     const TestComponent = () => {
-      const { subscribe, trigger } = React.useContext(DataViewContext);
+      const { subscribe, trigger } = useDataViewEventsContext();
 
       React.useEffect(() => {
         const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
@@ -92,9 +92,9 @@ describe('DataViewContext', () => {
     };
 
     const { getByText } = render(
-      <DataViewProvider>
+      <DataViewEventsProvider>
         <TestComponent />
-      </DataViewProvider>
+      </DataViewEventsProvider>
     );
 
     fireEvent.click(getByText('Trigger'));

…DataViewContext/DataViewContext.test.tsx …tsContext/DataViewEventsContext.test.tsxpackages/module/src/DataViewContext/DataViewContext.test.tsx renamed to packages/module/src/DataViewEventsContext/DataViewEventsContext.test.tsx packages/module/src/DataViewContext/DataViewContext.test.tsx renamed to packages/module/src/DataViewEventsContext/DataViewEventsContext.test.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren,
   createContext,
   useCallback,
+  useContext,
   useState
 } from "react";
 
@@ -17,7 +18,7 @@ interface Subscriptions { [id: string]: Callback }
 type ContextType = { [event in DataViewEvent]: Subscriptions };
 type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
 
-export const DataViewContext = createContext<{
+export const DataViewEventsContext = createContext<{
   subscribe: Subscribe;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   trigger: (event: DataViewEvent, ...payload: any[]) => void;
@@ -26,7 +27,7 @@ export const DataViewContext = createContext<{
       trigger: () => null
     });
 
-export const DataViewProvider = ({ children }: PropsWithChildren) => {
+export const DataViewEventsProvider = ({ children }: PropsWithChildren) => {
   const [ subscriptions, setSubscriptions ] = useState<ContextType>({
     [EventTypes.rowClick]: {}
   });
@@ -60,10 +61,12 @@ export const DataViewProvider = ({ children }: PropsWithChildren) => {
   );
 
   return (
-    <DataViewContext.Provider value={{ subscribe, trigger }}>
+    <DataViewEventsContext.Provider value={{ subscribe, trigger }}>
       {children}
-    </DataViewContext.Provider>
+    </DataViewEventsContext.Provider>
   );
 };
 
-export default DataViewContext;
+export const useDataViewEventsContext = () => useContext(DataViewEventsContext);
+
+export default DataViewEventsContext;

…/src/DataViewContext/DataViewContext.tsx …wEventsContext/DataViewEventsContext.tsxpackages/module/src/DataViewContext/DataViewContext.tsx renamed to packages/module/src/DataViewEventsContext/DataViewEventsContext.tsx packages/module/src/DataViewContext/DataViewContext.tsx renamed to packages/module/src/DataViewEventsContext/DataViewEventsContext.tsx

@@ -0,0 +1,2 @@
+export { default } from './DataViewEventsContext';
+export * from './DataViewEventsContext';

packages/module/src/DataViewEventsContext/index.ts

@@ -4,8 +4,11 @@ export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 
-export { default as DataViewContext } from './DataViewContext';
-export * from './DataViewContext';
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
 
 export { default as DataView } from './DataView';
 export * from './DataView';