Refactor Onboardings (#2475)

2019-05-15 23:51:19 +02:00 · 2019-05-15 23:51:19 +02:00 · 2837e5430a
commit 2837e5430a
parent 89d1be167a
6 changed files with 117 additions and 108 deletions
--- a/app/javascript/src/tests/snapshots/Onboarding.test.jsx.snap
+++ b/app/javascript/src/tests/snapshots/Onboarding.test.jsx.snap
@ -247,7 +247,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:"
                onClick={[Function bound onClick]}
              >
@ -255,7 +255,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-discuss"
                style="color:"
                onClick={[Function bound onClick]}
@ -270,7 +270,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:#000000"
                onClick={[Function bound onClick]}
              >
@ -278,7 +278,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-javascript"
                style="color:#000000"
                onClick={[Function bound onClick]}
@ -293,7 +293,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:"
                onClick={[Function bound onClick]}
              >
@ -301,7 +301,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-career"
                style="color:"
                onClick={[Function bound onClick]}
@ -883,7 +883,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:"
                onClick={[Function bound onClick]}
              >
@ -891,7 +891,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-discuss"
                style="color:"
                onClick={[Function bound onClick]}
@ -906,7 +906,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:#000000"
                onClick={[Function bound onClick]}
              >
@ -914,7 +914,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-javascript"
                style="color:#000000"
                onClick={[Function bound onClick]}
@ -929,7 +929,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:"
                onClick={[Function bound onClick]}
              >
@ -937,7 +937,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-career"
                style="color:"
                onClick={[Function bound onClick]}
@ -1144,7 +1144,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:"
                onClick={[Function bound onClick]}
              >
@ -1152,7 +1152,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-discuss"
                style="color:"
                onClick={[Function bound onClick]}
@ -1167,7 +1167,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:#000000"
                onClick={[Function bound onClick]}
              >
@ -1175,7 +1175,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-javascript"
                style="color:#000000"
                onClick={[Function bound onClick]}
@ -1190,7 +1190,7 @@ preact-render-spy (1 nodes)
            >
              <a
                class="onboarding-tag-link"
-                href="#"
+                href="#0"
                style="color:"
                onClick={[Function bound onClick]}
              >
@ -1198,7 +1198,7 @@ preact-render-spy (1 nodes)
              </a>
              <a
                class="onboarding-tag-link-follow"
-                href="#"
+                href="#0"
                id="onboarding-tag-link-follow-career"
                style="color:"
                onClick={[Function bound onClick]}
--- a/app/javascript/src/components/OnboardingSingleTag.jsx
+++ b/app/javascript/src/components/OnboardingSingleTag.jsx
@ -2,56 +2,53 @@ import { h, Component } from 'preact';
 import PropTypes from 'prop-types';

 class OnboardingSingleTag extends Component {
+  propTypes = {
+    onTagClick: PropTypes.func.isRequired,
+    tag: PropTypes.objectOf().isRequired,
+  };
+
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
-    this.props.onTagClick(this.props.tag);
+    const { onTagClick, tag } = this.props;
+    onTagClick(tag);
  }

  render() {
-    const backgroundColor = this.props.tag.following
-      ? this.props.tag.bg_color_hex
-      : '';
-    const textroundColor = this.props.tag.following
-      ? this.props.tag.text_color_hex
-      : '';
+    const { tag } = this.props;
+    const backgroundColor = tag.following ? tag.bg_color_hex : '';
+    const textroundColor = tag.following ? tag.text_color_hex : '';
    return (
      <div
        className={`onboarding-tag-container${
-          this.props.tag.following ? ' followed-tag' : ''
+          tag.following ? ' followed-tag' : ''
        }`}
-        id={`onboarding-tag-container-${this.props.tag.name}`}
+        id={`onboarding-tag-container-${tag.name}`}
        style={`background: ${backgroundColor}`}
      >
        <a
          className="onboarding-tag-link"
-          href="#"
+          href="#0"
          style={`color:${textroundColor}`}
          onClick={this.onClick}
        >
-          #
-          {this.props.tag.name}
+          #{tag.name}
        </a>
        <a
          className="onboarding-tag-link-follow"
-          href="#"
-          id={`onboarding-tag-link-follow-${this.props.tag.name}`}
+          href="#0"
+          id={`onboarding-tag-link-follow-${tag.name}`}
          style={`color:${textroundColor}`}
          onClick={this.onClick}
        >
-          {this.props.tag.following ? '✓' : '+'}
+          {tag.following ? '✓' : '+'}
        </a>
      </div>
    );
  }
 }

-OnboardingSingleTag.propTypes = {
-  onTagClick: PropTypes.func.isRequired,
-  tag: PropTypes.object.isRequired,
-};
-
 export default OnboardingSingleTag;
--- a/app/javascript/src/components/OnboardingTags.jsx
+++ b/app/javascript/src/components/OnboardingTags.jsx
@ -1,30 +1,30 @@
-import { h, render, Component } from 'preact';
+import { h } from 'preact';
+import PropTypes from 'prop-types';
 import OnboardingSingleTag from './OnboardingSingleTag';

 // page 2
-class OnboardingTags extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const tags = this.props.allTags.map(tag => {
-      return (
-        <OnboardingSingleTag
-          key={tag.id}
-          tag={tag}
-          onTagClick={this.props.handleFollowTag.bind(this, tag)}
-        />
-      );
-    });
-
+function OnboardingTags({ allTags, handleFollowTag }) {
+  const tags = allTags.map(tag => {
    return (
-      <div className="tags-slide">
-        <div className="onboarding-user-cta">Personalize your home feed</div>
-        <div className="tags-col-container">{tags}</div>
-      </div>
+      <OnboardingSingleTag
+        key={tag.id}
+        tag={tag}
+        onTagClick={handleFollowTag.bind(this, tag)} // eslint-disable-line react/jsx-no-bind
+      />
    );
-  }
+  });
+
+  return (
+    <div className="tags-slide">
+      <div className="onboarding-user-cta">Personalize your home feed</div>
+      <div className="tags-col-container">{tags}</div>
+    </div>
+  );
 }

+OnboardingTags.propTypes = {
+  handleFollowTag: PropTypes.func.isRequired,
+  allTags: PropTypes.objectOf().isRequired,
+};
+
 export default OnboardingTags;
--- a/app/javascript/src/components/tests/snapshots/OnboardingFollowTags.test.jsx.snap
+++ b/app/javascript/src/components/tests/snapshots/OnboardingFollowTags.test.jsx.snap
@ -19,7 +19,7 @@ exports[`<OnboardingFollowTags /> renders properly when given a tag 1`] = `
    >
      <a
        class="onboarding-tag-link"
-        href="#"
+        href="#0"
        onClick={[Function]}
        style="color:"
      >
@ -27,7 +27,7 @@ exports[`<OnboardingFollowTags /> renders properly when given a tag 1`] = `
      </a>
      <a
        class="onboarding-tag-link-follow"
-        href="#"
+        href="#0"
        id="onboarding-tag-link-follow-discuss"
        onClick={[Function]}
        style="color:"
@ -42,7 +42,7 @@ exports[`<OnboardingFollowTags /> renders properly when given a tag 1`] = `
    >
      <a
        class="onboarding-tag-link"
-        href="#"
+        href="#0"
        onClick={[Function]}
        style="color:"
      >
@ -50,7 +50,7 @@ exports[`<OnboardingFollowTags /> renders properly when given a tag 1`] = `
      </a>
      <a
        class="onboarding-tag-link-follow"
-        href="#"
+        href="#0"
        id="onboarding-tag-link-follow-javascript"
        onClick={[Function]}
        style="color:"
@ -65,7 +65,7 @@ exports[`<OnboardingFollowTags /> renders properly when given a tag 1`] = `
    >
      <a
        class="onboarding-tag-link"
-        href="#"
+        href="#0"
        onClick={[Function]}
        style="color:"
      >
@ -73,7 +73,7 @@ exports[`<OnboardingFollowTags /> renders properly when given a tag 1`] = `
      </a>
      <a
        class="onboarding-tag-link-follow"
-        href="#"
+        href="#0"
        id="onboarding-tag-link-follow-javascript"
        onClick={[Function]}
        style="color:"
--- a/app/javascript/src/components/tests/snapshots/OnboardingSingleTag.test.jsx.snap
+++ b/app/javascript/src/components/tests/snapshots/OnboardingSingleTag.test.jsx.snap
@ -8,7 +8,7 @@ exports[`<OnboardingSingleTag /> when given a following tag renders correctly 1`
 >
  <a
    class="onboarding-tag-link"
-    href="#"
+    href="#0"
    onClick={[Function]}
    style="color:undefined"
  >
@ -16,7 +16,7 @@ exports[`<OnboardingSingleTag /> when given a following tag renders correctly 1`
  </a>
  <a
    class="onboarding-tag-link-follow"
-    href="#"
+    href="#0"
    id="onboarding-tag-link-follow-undefined"
    onClick={[Function]}
    style="color:undefined"
@ -34,7 +34,7 @@ exports[`<OnboardingSingleTag /> when given a non-following tag renders correctl
 >
  <a
    class="onboarding-tag-link"
-    href="#"
+    href="#0"
    onClick={[Function]}
    style="color:"
  >
@ -42,7 +42,7 @@ exports[`<OnboardingSingleTag /> when given a non-following tag renders correctl
  </a>
  <a
    class="onboarding-tag-link-follow"
-    href="#"
+    href="#0"
    id="onboarding-tag-link-follow-undefined"
    onClick={[Function]}
    style="color:"
--- a/app/javascript/src/utils/getUnopenedChannels.jsx
+++ b/app/javascript/src/utils/getUnopenedChannels.jsx
@ -1,7 +1,18 @@
 import { h, render, Component } from 'preact';
+import PropTypes from 'prop-types';
 import setupPusher from './pusher';

 class UnopenedChannelNotice extends Component {
+  static defaultProps = {
+    unopenedChannels: undefined,
+    pusherKey: undefined,
+  };
+
+  propTypes = {
+    unopenedChannels: PropTypes.Object,
+    pusherKey: PropTypes.Object,
+  };
+
  constructor(props) {
    super(props);
    const { unopenedChannels } = this.props;
@ -13,12 +24,13 @@ class UnopenedChannelNotice extends Component {
  }

  componentDidMount() {
-    setupPusher(this.props.pusherKey, {
+    const { pusherKey } = this.props;
+    setupPusher(pusherKey, {
      channelId: `private-message-notifications-${window.currentUser.id}`,
      messageCreated: this.receiveNewMessage,
    });
    const component = this;
-    document.getElementById('connect-link').onclick = function() {
+    document.getElementById('connect-link').onclick = () => {
      // Hack, should probably be its own component in future
      document.getElementById('connect-number').classList.remove('showing');
      component.setState({ visible: false });
@ -26,47 +38,49 @@ class UnopenedChannelNotice extends Component {
  }

  receiveNewMessage = e => {
-    if (location.pathname.startsWith('/connect')) {
+    if (window.location.pathname.startsWith('/connect')) {
      return;
    }
-    const channels = this.state.unopenedChannels;
+    const { unopenedChannels } = this.state;
    const newObj = { adjusted_slug: e.chat_channel_adjusted_slug };
    if (
-      channels.filter(obj => obj.adjusted_slug === newObj.adjusted_slug)
+      unopenedChannels.filter(obj => obj.adjusted_slug === newObj.adjusted_slug)
        .length === 0 &&
-      newObj.adjusted_slug != `@${window.currentUser.username}`
+      newObj.adjusted_slug !== `@${window.currentUser.username}`
    ) {
-      channels.push(newObj);
+      unopenedChannels.push(newObj);
    }
    this.setState({
-      visible: channels.length > 0 && e.user_id != window.currentUser.id,
-      unopenedChannels: channels,
+      visible:
+        unopenedChannels.length > 0 && e.user_id !== window.currentUser.id,
+      unopenedChannels,
    });

    const number = document.getElementById('connect-number');
    number.classList.add('showing');
-    number.innerHTML = channels.length;
+    number.innerHTML = unopenedChannels.length;
    const component = this;
-    if (channels.length === 0) {
+    if (unopenedChannels.length === 0) {
      number.classList.remove('showing');
    } else {
      document.getElementById('connect-link').href = `/connect/${
-        channels[0].adjusted_slug
+        unopenedChannels[0].adjusted_slug
      }`;
    }
-    setTimeout(function() {
+    setTimeout(() => {
      component.setState({ visible: false });
    }, 7500);
  };

-  handleClick = e => {
+  handleClick = () => {
    document.getElementById('connect-number').classList.remove('showing');
    this.setState({ visible: false });
  };

  render() {
-    if (this.state.visible) {
-      const channels = this.state.unopenedChannels.map(channel => {
+    const { visible, unopenedChannels } = this.state;
+    if (visible) {
+      const channels = unopenedChannels.map(channel => {
        return (
          <a
            href={`/connect/${channel.adjusted_slug}`}
@ -87,7 +101,7 @@ class UnopenedChannelNotice extends Component {
      return (
        <a
          onClick={this.handleClick}
-          href={`/connect/${this.state.unopenedChannels[0].adjusted_slug}`}
+          href={`/connect/${unopenedChannels[0].adjusted_slug}`}
          style={{
            position: 'fixed',
            zIndex: '200',
@ -104,16 +118,29 @@ class UnopenedChannelNotice extends Component {
            padding: '19px 5px 14px',
          }}
        >
-          New Message from 
-          {' '}
-          {channels}
+          New Message from {channels}
        </a>
      );
    }
+
+    return '';
  }
 }

-export default function getUnopenedChannels(user, successCb) {
+function manageChannel(json) {
+  const number = document.getElementById('connect-number');
+  if (json.length > 0) {
+    number.classList.add('showing');
+    number.innerHTML = json.length;
+    document.getElementById('connect-link').href = `/connect/${
+      json[0].adjusted_slug
+    }`; // Jump the user directly to the channel where appropriate
+  } else {
+    number.classList.remove('showing');
+  }
+}
+
+export default function getUnopenedChannels() {
  render(
    <UnopenedChannelNotice
      unopenedChannels={[]}
@ -121,27 +148,12 @@ export default function getUnopenedChannels(user, successCb) {
    />,
    document.getElementById('message-notice'),
  );
-  if (location.pathname.startsWith('/connect')) {
-    return;
-  }
+  if (window.location.pathname.startsWith('/connect')) return;
  fetch('/chat_channels?state=unopened', {
-    method: 'GET',
    credentials: 'same-origin',
  })
    .then(response => response.json())
    .then(json => {
-      const number = document.getElementById('connect-number');
-      if (json.length > 0) {
-        number.classList.add('showing');
-        number.innerHTML = json.length;
-        document.getElementById('connect-link').href = `/connect/${
-          json[0].adjusted_slug
-        }`; // Jump the user directly to the channel where appropriate
-      } else {
-        number.classList.remove('showing');
-      }
-    })
-    .catch(error => {
-      console.log(error);
+      manageChannel(json);
    });
 }