fix(poweredBy): SSR compatibility (#181)

packages/react-instantsearch/src/components/PoweredBy.js

@@ -6,7 +6,7 @@ import classNames from './classNames.js';
 const cx = classNames('PoweredBy');
 
 /* eslint-disable max-len */
-const AlgoliaLogo = () =>
+const AlgoliaLogo = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     baseProfile="basic"
@@ -36,7 +36,8 @@ const AlgoliaLogo = () =>
       d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"
       fill="#182359"
     />
-  </svg>;
+  </svg>
+);
 /* eslint-enable max-len */
 
 class PoweredBy extends Component {
@@ -47,11 +48,14 @@ class PoweredBy extends Component {
 
   render() {
     const { translate, url } = this.props;
-
     return (
       <div {...cx('root')}>
-        <span {...cx('searchBy')}>{translate('searchBy')} </span>
-        <a href={url} target="_blank" {...cx('algoliaLink')}><AlgoliaLogo /></a>
+        <span {...cx('searchBy')}>
+          {translate('searchBy')}{' '}
+        </span>
+        <a href={url} target="_blank" {...cx('algoliaLink')}>
+          <AlgoliaLogo />
+        </a>
       </div>
     );
   }

packages/react-instantsearch/src/connectors/connectPoweredBy.js

@@ -12,12 +12,11 @@ export default createConnector({
 
   propTypes: {},
 
-  getProvidedProps() {
-    const url =
-      'https://www.algolia.com/?' +
+  getProvidedProps(props) {
+    const url = 'https://www.algolia.com/?' +
       'utm_source=react-instantsearch&' +
       'utm_medium=website&' +
-      `utm_content=${location.hostname}&` +
+      `utm_content=${props.canRender ? location.hostname : ''}&` +
       'utm_campaign=poweredby';
     return { url };
   },

packages/react-instantsearch/src/connectors/connectPoweredBy.test.js

@@ -8,10 +8,9 @@ const { getProvidedProps } = connect;
 let props;
 describe('connectPoweredBy', () => {
   it('provides the correct props to the component', () => {
-    props = getProvidedProps();
+    props = getProvidedProps({ canRender: true });
     expect(props).toEqual({
-      url:
-        'https://www.algolia.com/?utm_source=react-instantsearch&utm_medium=website&utm_content=&utm_campaign=poweredby',
+      url: 'https://www.algolia.com/?utm_source=react-instantsearch&utm_medium=website&utm_content=&utm_campaign=poweredby',
     });
   });
 });

packages/react-instantsearch/src/core/createConnector.js

@@ -45,9 +45,7 @@ export default function createConnector(connectorDesc) {
 
   return Composed =>
     class Connector extends Component {
-      static displayName = `${connectorDesc.displayName}(${getDisplayName(
-        Composed
-      )})`;
+      static displayName = `${connectorDesc.displayName}(${getDisplayName(Composed)})`;
       static defaultClassNames = Composed.defaultClassNames;
       static propTypes = connectorDesc.propTypes;
       static defaultProps = connectorDesc.defaultProps;
@@ -62,15 +60,19 @@ export default function createConnector(connectorDesc) {
         super(props, context);
 
         const { ais: { store, widgetsManager }, multiIndexContext } = context;
+        const canRender = false;
         this.state = {
-          props: this.getProvidedProps(props),
-          canRender: false, //use to know if a component is rendered (browser), or not (server).
+          props: this.getProvidedProps({ ...props, canRender }),
+          canRender, //use to know if a component is rendered (browser), or not (server).
         };
 
         this.unsubscribe = store.subscribe(() => {
           if (this.state.canRender) {
             this.setState({
-              props: this.getProvidedProps(this.props),
+              props: this.getProvidedProps({
+                ...this.props,
+                canRender: this.state.canRender,
+              }),
             });
           }
         });

packages/react-instantsearch/src/core/createConnector.test.js

@@ -31,6 +31,7 @@ describe('createConnector', () => {
       const state = createState();
       const props = {
         hello: 'there',
+        canRender: false,
       };
       const wrapper = mount(<Connected {...props} />, {
         context: {
@@ -114,6 +115,7 @@ describe('createConnector', () => {
       };
       const props = {
         hello: 'there',
+        canRender: true,
       };
       let listener;
       const wrapper = mount(<Connected {...props} />, {
@@ -199,7 +201,7 @@ describe('createConnector', () => {
       };
 
       // also update props
-      props = { hello: 'you' };
+      props = { hello: 'you', canRender: true };
       wrapper.setProps(props);
 
       listener();