Add useWebId hook.

src/components/LoggedIn.jsx

@@ -1,6 +1,7 @@
-import withWebId from './withWebId';
+import useWebId from '../hooks/useWebId';
 
 /** Pane that only shows its contents when the user is logged in. */
-export default withWebId(function LoggedIn({ webId, children }) {
+export default function LoggedIn({ children }) {
+  const webId = useWebId();
   return webId && children || null;
-});
+}

src/components/LoggedOut.jsx

@@ -1,6 +1,7 @@
-import withWebId from './withWebId';
+import useWebId from '../hooks/useWebId';
 
 /** Pane that only shows its contents when the user is logged out. */
-export default withWebId(function LoggedOut({ webId, children }) {
+export default function LoggedOut({ children }) {
+  const webId = useWebId();
   return !webId && children || null;
-});
+}

src/components/withWebId.jsx

@@ -1,38 +1,10 @@
 import React from 'react';
-import auth from 'solid-auth-client';
-import { getDisplayName } from '../util';
-
-// Track all instances to inform them of WebID changes
-const instances = new Set();
-let authState = { webId: undefined };
+import useWebId from '../hooks/useWebId';
+import { higherOrderComponent } from '../util';
 
 /**
  * Higher-order component that passes the WebID of the logged-in user
  * to the webId property of the wrapped component.
  */
-export default function withWebId(Component) {
-  return class WithWebID extends React.Component {
-    static displayName = `WithWebId(${getDisplayName(Component)})`;
-
-    state = authState;
-
-    componentDidMount() {
-      instances.add(this);
-    }
-
-    componentWillUnmount() {
-      instances.delete(this);
-    }
-
-    render() {
-      return <Component webId={this.state.webId} {...this.props} />;
-    }
-  };
-}
-
-// Inform all instances when the WebID changes
-auth.trackSession(session => {
-  authState = { webId: session && session.webId };
-  for (const instance of instances)
-    instance.setState(authState);
-});
+export default higherOrderComponent('WithWebId', Component =>
+  props => <Component {...props} webId={useWebId()} />);

src/hooks/useWebId.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import auth from 'solid-auth-client';
+
+// Keep track of the WebID and the state setters following it
+let webId;
+const setters = new Set();
+
+/**
+ * Returns the WebID (string) of the active user,
+ * `null` if there is no user,
+ * or `undefined` if the user state is pending.
+ */
+export default function useWebId() {
+  const [, setWebId] = useState(webId);
+
+  useEffect(() => {
+    setters.add(setWebId);
+    return () => setters.delete(setWebId);
+  }, []);
+
+  return webId;
+}
+
+// Inform all setters when the WebID changes
+auth.trackSession(session => {
+  webId = session && session.webId;
+  for (const setter of setters)
+    setter(webId);
+});

src/index.js

@@ -1,3 +1,5 @@
+import useWebId from './hooks/useWebId';
+
 import withWebId from './components/withWebId';
 import evaluateExpressions from './components/evaluateExpressions';
 import evaluateList from './components/evaluateList';
@@ -20,6 +22,8 @@ import List from './components/List';
 import './prop-types';
 
 export {
+  useWebId,
+
   withWebId,
   evaluateExpressions,
   evaluateList,

src/util.js

@@ -25,6 +25,17 @@ export function getDisplayName(Component) {
   return Component.displayName || Component.name || 'Component';
 }
 
+/**
+ * Creates a higher-order component with the given name.
+ */
+export function higherOrderComponent(name, createWrapper) {
+  return Component => {
+    const Wrapper = createWrapper(Component);
+    Wrapper.displayName = `${name}(${getDisplayName(Component)})`;
+    return Wrapper;
+  };
+}
+
 /**
  * Creates a task queue that enforces a minimum time between tasks.
  * Optionally, new tasks can cause any old ones to be dropped.

test/.eslintrc

@@ -5,5 +5,6 @@
     func-style: off,
     new-cap: off,
     no-empty-function: off,
+    no-void: off,
   },
 }

test/components/LoggedIn-test.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { LoggedIn } from '../../src/';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import auth from 'solid-auth-client';
 
 describe('A LoggedIn pane', () => {
   let pane;
+  beforeEach(() => pane.update());
 
   describe('with children', () => {
     beforeAll(() => {
@@ -13,31 +15,39 @@ describe('A LoggedIn pane', () => {
     afterAll(() => pane.unmount());
 
     describe('when the user is not logged in', () => {
-      beforeAll(() => auth.mockWebId(null));
+      beforeAll(() => !act(() => {
+        auth.mockWebId(null);
+      }));
 
       it('is empty', () => {
-        expect(pane.text()).toBe(null);
+        expect(pane.debug()).toBe('<LoggedIn />');
       });
     });
 
     describe('when the user is logged in', () => {
-      beforeAll(() => auth.mockWebId('https://example.org/#me'));
+      beforeAll(() => !act(() => {
+        auth.mockWebId('https://example.org/#me');
+      }));
 
       it('renders the content', () => {
-        expect(pane.text()).toBe('Logged in');
+        expect(pane.debug()).toMatch(/Logged in/);
       });
     });
   });
 
   describe('without children', () => {
-    beforeAll(() => (pane = mount(<LoggedIn/>)));
+    beforeAll(() => !act(() => {
+      pane = mount(<LoggedIn/>);
+    }));
     afterAll(() => pane.unmount());
 
     describe('when the user is logged in', () => {
-      beforeAll(() => auth.mockWebId('https://example.org/#me'));
+      beforeAll(() => !act(() => {
+        auth.mockWebId('https://example.org/#me');
+      }));
 
       it('is empty', () => {
-        expect(pane.text()).toBe(null);
+        expect(pane.debug()).toBe('<LoggedIn />');
       });
     });
   });

test/components/LoggedOut-test.jsx

@@ -1,43 +1,53 @@
 import React from 'react';
 import { LoggedOut } from '../../src/';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import auth from 'solid-auth-client';
 
 describe('A LoggedOut pane', () => {
   let pane;
+  beforeEach(() => pane.update());
 
   describe('with children', () => {
-    beforeAll(() => {
+    beforeAll(() => !act(() => {
       pane = mount(<LoggedOut>Logged out</LoggedOut>);
-    });
+    }));
     afterAll(() => pane.unmount());
 
     describe('when the user is not logged in', () => {
-      beforeAll(() => auth.mockWebId(null));
+      beforeAll(() => !act(() => {
+        auth.mockWebId(null);
+      }));
 
       it('renders the content', () => {
-        expect(pane.text()).toBe('Logged out');
+        expect(pane.debug()).toMatch(/Logged out/);
       });
     });
 
     describe('when the user is logged in', () => {
-      beforeAll(() => auth.mockWebId('https://example.org/#me'));
+      beforeAll(() => !act(() => {
+        auth.mockWebId('https://example.org/#me');
+      }));
 
       it('is empty', () => {
-        expect(pane.text()).toBe(null);
+        expect(pane.debug()).toBe('<LoggedOut />');
       });
     });
   });
 
   describe('without children', () => {
-    beforeAll(() => (pane = mount(<LoggedOut/>)));
+    beforeAll(() => !act(() => {
+      pane = mount(<LoggedOut/>);
+    }));
     afterAll(() => pane.unmount());
 
     describe('when the user is not logged in', () => {
-      beforeAll(() => auth.mockWebId(null));
+      beforeAll(() => !act(() => {
+        auth.mockWebId(null);
+      }));
 
       it('is empty', () => {
-        expect(pane.text()).toBe(null);
+        expect(pane.debug()).toBe('<LoggedOut />');
       });
     });
   });

test/components/Value-test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Value } from '../../src/';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { mockPromise, update, setProps, timers } from '../util';
 import data from '@solid/query-ldflex';
 import auth from 'solid-auth-client';
@@ -146,7 +147,9 @@ describe('A Value', () => {
     });
 
     describe('after the user changes', () => {
-      beforeEach(() => auth.mockWebId('https://example.org/#me'));
+      beforeEach(() => !act(() => {
+        auth.mockWebId('https://example.org/#me');
+      }));
 
       it('re-evaluates the expression', () => {
         expect(data.resolve).toBeCalledTimes(2);
@@ -164,7 +167,9 @@ describe('A Value', () => {
     afterEach(() => field.unmount());
 
     describe('after the user changes', () => {
-      beforeEach(() => auth.mockWebId('https://example.org/#me'));
+      beforeEach(() => !act(() => {
+        auth.mockWebId('https://example.org/#me');
+      }));
 
       it('does not re-evaluate the expression', () => {
         expect(expression.then).toBeCalledTimes(1);

test/components/evaluateExpressions-test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { evaluateExpressions } from '../../src/';
 import { mount, render } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { mockPromise, setProps, timers } from '../util';
 import data from '@solid/query-ldflex';
 import auth from 'solid-auth-client';
@@ -333,7 +334,9 @@ describe('An evaluateExpressions wrapper', () => {
         bar = mockPromise();
         bar.resolve('second change');
         data.resolve.mockReturnValue(bar);
-        auth.mockWebId('https://example.org/#me');
+        act(() => {
+          auth.mockWebId('https://example.org/#me');
+        });
         wrapper.update();
       });
 

test/components/withWebId-test.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { withWebId } from '../../src/';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import auth from 'solid-auth-client';
 
 describe('A withWebId wrapper', () => {
   const Wrapper = withWebId(() => <span>contents</span>);
   let wrapper;
 
-  beforeAll(() => (wrapper = mount(<Wrapper foo="bar"/>)));
+  beforeAll(() => !act(() => {
+    wrapper = mount(<Wrapper foo="bar"/>);
+  }));
   beforeEach(() => wrapper.update());
   afterAll(() => wrapper.unmount());
 
@@ -26,7 +29,9 @@ describe('A withWebId wrapper', () => {
   });
 
   describe('when the user is not logged in', () => {
-    beforeAll(() => auth.mockWebId(null));
+    beforeAll(() => !act(() => {
+      auth.mockWebId(null);
+    }));
 
     it('renders the wrapped component', () => {
       expect(wrapper.html()).toBe('<span>contents</span>');
@@ -42,7 +47,9 @@ describe('A withWebId wrapper', () => {
   });
 
   describe('when the user is logged in', () => {
-    beforeAll(() => auth.mockWebId('https://example.org/#me'));
+    beforeAll(() => !act(() => {
+      auth.mockWebId('https://example.org/#me');
+    }));
 
     it('renders the wrapped component', () => {
       expect(wrapper.html()).toBe('<span>contents</span>');

test/hooks/useWebId-test.js

@@ -0,0 +1,26 @@
+import { useWebId } from '../../src/';
+import { renderHook, cleanup, act } from 'react-hooks-testing-library';
+import auth from 'solid-auth-client';
+
+describe('useWebId', () => {
+  let result, unmount;
+  beforeAll(() => {
+    ({ result, unmount } = renderHook(() => useWebId()));
+  });
+  afterAll(() => unmount());
+  afterAll(cleanup);
+
+  it('returns undefined when the login status is unknown', () => {
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns null when the user is logged out', () => {
+    act(() => void auth.mockWebId(null));
+    expect(result.current).toBeNull();
+  });
+
+  it('returns the WebID when the user is logged in', () => {
+    act(() => void auth.mockWebId('https://example.org/#me'));
+    expect(result.current).toBe('https://example.org/#me');
+  });
+});

test/index-test.js

@@ -15,6 +15,7 @@ describe('The SolidReactComponents module', () => {
     'Label',
     'Name',
     'List',
+    'useWebId',
   ];
 
   exports.forEach(name => {