{"action":"created","comment":{"url":"https://api.github.com/repos/edx/journals-frontend/pulls/comments/211591364","pull_request_review_id":148041794,"id":211591364,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIxMTU5MTM2NA==","diff_hunk":"@@ -1,32 +1,147 @@\n import React from 'react';\n import PropTypes from 'prop-types';\n import { Link } from 'react-router-dom';\n+import { Button, Icon } from '@edx/paragon';\n+import classNames from 'classnames';\n+\n \n import './TOCViewer.scss';\n \n \n-const TreeViewer = props => (\n+class TreeViewer extends React.Component {\n+  constructor(props) {\n+    super(props);\n+    this.setExpanded = this.setExpanded.bind(this);\n+\n+    this.state = {\n+      expanded: this.props.node.id === this.props.currentPageId,\n+    };\n+  }\n+  componentDidUpdate(prevProps) {\n+    const isBeingViewed = this.props.node.id === this.props.currentPageId;\n+    const pageHasChanged = this.props.currentPageId !== prevProps.currentPageId;\n+\n+    if (isBeingViewed && pageHasChanged && this.props.expandParent) {\n+      this.props.expandParent();\n+    }\n+  }\n+\n+  setExpanded(event) {\n+    this.setState({\n+      expanded: event ? !this.state.expanded : true,\n+    });\n+    if (event === undefined && this.props.expandParent) {\n+      this.props.expandParent();\n+    }\n+  }\n+\n+  render() {\n+    return (\n+      <li\n+        key={this.props.node.id}\n+        className={\n+          classNames({\n+            collapsed: this.props.node.children && !this.state.expanded,\n+          })\n+        }\n+      >\n+        <span\n+          className={\n+            classNames({\n+              highlight: this.props.node.id === this.props.currentPageId,\n+            })\n+          }\n+        >\n+          {\n+            this.props.node.children ?\n+              <Button\n+                aria-expanded={this.state.expanded}\n+                label={\n+                  <Icon\n+                    className={\n+                      classNames({\n+                        fa: true,\n+                        'fa-chevron-down': this.state.expanded,\n+                        'fa-chevron-right': !this.state.expanded,\n+                      }).split(' ')\n+                    }\n+                  />\n+                }\n+                onClick={this.setExpanded}\n+              /> :\n+              <span className=\"bullet\">&bull;</span>\n+          }\n+          <Link to={`/${this.props.journalId}/pages/${this.props.node.id}`}>{this.props.node.title}</Link>\n+        </span>\n+        {\n+          this.props.node.children &&\n+          <ul>\n+            <TreeList\n+              structure={this.props.node.children}\n+              journalId={this.props.journalId}\n+              currentPageId={this.props.currentPageId}\n+              expandParent={this.setExpanded}\n+            />\n+          </ul>\n+        }\n+      </li>\n+    );\n+  }\n+}\n+\n+const TreeList = props => (\n   props.structure.map(node => (\n-    <li>\n-      <Link to={`/${props.journalId}/pages/${node.id}`}>{node.title}</Link>\n-      <ul>\n-        {node.children && <TreeViewer structure={node.children} journalId={props.journalId} />}\n-      </ul>\n-    </li>\n+    <TreeViewer\n+      key={node.id}\n+      node={node}\n+      journalId={props.journalId}\n+      currentPageId={props.currentPageId}\n+      expandParent={props.expandParent}\n+    />\n   ))\n );\n \n const TOCViewer = props => (\n   // If the title is an empty string do not display one\n-  <div className=\"toc-border\">\n-    {props.journal.title.trim() && <div className=\"journal-title\">{props.journal.title}</div>}\n+  <div className=\"toc\">\n+    <div className=\"toc-title\">TABLE OF CONTENTS</div>","path":"src/components/TOCViewer/index.jsx","position":116,"original_position":116,"commit_id":"81ddc2b93036f4ce19608ec733a864f9f2b44d56","original_commit_id":"81ddc2b93036f4ce19608ec733a864f9f2b44d56","user":{"login":"bill-filler","id":27503539,"node_id":"MDQ6VXNlcjI3NTAzNTM5","avatar_url":"https://avatars3.githubusercontent.com/u/27503539?v=4","gravatar_id":"","url":"https://api.github.com/users/bill-filler","html_url":"https://github.com/bill-filler","followers_url":"https://api.github.com/users/bill-filler/followers","following_url":"https://api.github.com/users/bill-filler/following{/other_user}","gists_url":"https://api.github.com/users/bill-filler/gists{/gist_id}","starred_url":"https://api.github.com/users/bill-filler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bill-filler/subscriptions","organizations_url":"https://api.github.com/users/bill-filler/orgs","repos_url":"https://api.github.com/users/bill-filler/repos","events_url":"https://api.github.com/users/bill-filler/events{/privacy}","received_events_url":"https://api.github.com/users/bill-filler/received_events","type":"User","site_admin":false},"body":"general question here about labels: what is our strategy for i18n of strings? In django templates we have the _() get text method, guessing we need equivalent for React. ","created_at":"2018-08-21T12:48:36Z","updated_at":"2018-08-21T12:48:36Z","html_url":"https://github.com/edx/journals-frontend/pull/33#discussion_r211591364","pull_request_url":"https://api.github.com/repos/edx/journals-frontend/pulls/33","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/edx/journals-frontend/pulls/comments/211591364"},"html":{"href":"https://github.com/edx/journals-frontend/pull/33#discussion_r211591364"},"pull_request":{"href":"https://api.github.com/repos/edx/journals-frontend/pulls/33"}}},"pull_request":{"url":"https://api.github.com/repos/edx/journals-frontend/pulls/33","id":209579034,"node_id":"MDExOlB1bGxSZXF1ZXN0MjA5NTc5MDM0","html_url":"https://github.com/edx/journals-frontend/pull/33","diff_url":"https://github.com/edx/journals-frontend/pull/33.diff","patch_url":"https://github.com/edx/journals-frontend/pull/33.patch","issue_url":"https://api.github.com/repos/edx/journals-frontend/issues/33","number":33,"state":"open","locked":false,"title":"Implement TOC","user":{"login":"tuchfarber","id":6179874,"node_id":"MDQ6VXNlcjYxNzk4NzQ=","avatar_url":"https://avatars3.githubusercontent.com/u/6179874?v=4","gravatar_id":"","url":"https://api.github.com/users/tuchfarber","html_url":"https://github.com/tuchfarber","followers_url":"https://api.github.com/users/tuchfarber/followers","following_url":"https://api.github.com/users/tuchfarber/following{/other_user}","gists_url":"https://api.github.com/users/tuchfarber/gists{/gist_id}","starred_url":"https://api.github.com/users/tuchfarber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tuchfarber/subscriptions","organizations_url":"https://api.github.com/users/tuchfarber/orgs","repos_url":"https://api.github.com/users/tuchfarber/repos","events_url":"https://api.github.com/users/tuchfarber/events{/privacy}","received_events_url":"https://api.github.com/users/tuchfarber/received_events","type":"User","site_admin":false},"body":"Features:\r\n - expand/collapse\r\n - link to page\r\n - highlight current page\r\n - auto expand to current page","created_at":"2018-08-20T16:39:30Z","updated_at":"2018-08-21T12:48:36Z","closed_at":null,"merged_at":null,"merge_commit_sha":"9f56cde64d1781d24217b6d8bda76590dee852dc","assignee":null,"assignees":[],"requested_reviewers":[{"login":"BessieSteinberg","id":5060285,"node_id":"MDQ6VXNlcjUwNjAyODU=","avatar_url":"https://avatars3.githubusercontent.com/u/5060285?v=4","gravatar_id":"","url":"https://api.github.com/users/BessieSteinberg","html_url":"https://github.com/BessieSteinberg","followers_url":"https://api.github.com/users/BessieSteinberg/followers","following_url":"https://api.github.com/users/BessieSteinberg/following{/other_user}","gists_url":"https://api.github.com/users/BessieSteinberg/gists{/gist_id}","starred_url":"https://api.github.com/users/BessieSteinberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BessieSteinberg/subscriptions","organizations_url":"https://api.github.com/users/BessieSteinberg/orgs","repos_url":"https://api.github.com/users/BessieSteinberg/repos","events_url":"https://api.github.com/users/BessieSteinberg/events{/privacy}","received_events_url":"https://api.github.com/users/BessieSteinberg/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/edx/journals-frontend/pulls/33/commits","review_comments_url":"https://api.github.com/repos/edx/journals-frontend/pulls/33/comments","review_comment_url":"https://api.github.com/repos/edx/journals-frontend/pulls/comments{/number}","comments_url":"https://api.github.com/repos/edx/journals-frontend/issues/33/comments","statuses_url":"https://api.github.com/repos/edx/journals-frontend/statuses/81ddc2b93036f4ce19608ec733a864f9f2b44d56","head":{"label":"edx:tuchfarber/toc_v1","ref":"tuchfarber/toc_v1","sha":"81ddc2b93036f4ce19608ec733a864f9f2b44d56","user":{"login":"edx","id":3179841,"node_id":"MDEyOk9yZ2FuaXphdGlvbjMxNzk4NDE=","avatar_url":"https://avatars3.githubusercontent.com/u/3179841?v=4","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":139473328,"node_id":"MDEwOlJlcG9zaXRvcnkxMzk0NzMzMjg=","name":"journals-frontend","full_name":"edx/journals-frontend","owner":{"login":"edx","id":3179841,"node_id":"MDEyOk9yZ2FuaXphdGlvbjMxNzk4NDE=","avatar_url":"https://avatars3.githubusercontent.com/u/3179841?v=4","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/journals-frontend","description":"Front-end application to interact with edX Journals","fork":false,"url":"https://api.github.com/repos/edx/journals-frontend","forks_url":"https://api.github.com/repos/edx/journals-frontend/forks","keys_url":"https://api.github.com/repos/edx/journals-frontend/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/journals-frontend/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/journals-frontend/teams","hooks_url":"https://api.github.com/repos/edx/journals-frontend/hooks","issue_events_url":"https://api.github.com/repos/edx/journals-frontend/issues/events{/number}","events_url":"https://api.github.com/repos/edx/journals-frontend/events","assignees_url":"https://api.github.com/repos/edx/journals-frontend/assignees{/user}","branches_url":"https://api.github.com/repos/edx/journals-frontend/branches{/branch}","tags_url":"https://api.github.com/repos/edx/journals-frontend/tags","blobs_url":"https://api.github.com/repos/edx/journals-frontend/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/journals-frontend/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/journals-frontend/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/journals-frontend/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/journals-frontend/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/journals-frontend/languages","stargazers_url":"https://api.github.com/repos/edx/journals-frontend/stargazers","contributors_url":"https://api.github.com/repos/edx/journals-frontend/contributors","subscribers_url":"https://api.github.com/repos/edx/journals-frontend/subscribers","subscription_url":"https://api.github.com/repos/edx/journals-frontend/subscription","commits_url":"https://api.github.com/repos/edx/journals-frontend/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/journals-frontend/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/journals-frontend/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/journals-frontend/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/journals-frontend/contents/{+path}","compare_url":"https://api.github.com/repos/edx/journals-frontend/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/journals-frontend/merges","archive_url":"https://api.github.com/repos/edx/journals-frontend/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/journals-frontend/downloads","issues_url":"https://api.github.com/repos/edx/journals-frontend/issues{/number}","pulls_url":"https://api.github.com/repos/edx/journals-frontend/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/journals-frontend/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/journals-frontend/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/journals-frontend/labels{/name}","releases_url":"https://api.github.com/repos/edx/journals-frontend/releases{/id}","deployments_url":"https://api.github.com/repos/edx/journals-frontend/deployments","created_at":"2018-07-02T17:26:07Z","updated_at":"2018-08-20T20:16:07Z","pushed_at":"2018-08-20T21:09:06Z","git_url":"git://github.com/edx/journals-frontend.git","ssh_url":"git@github.com:edx/journals-frontend.git","clone_url":"https://github.com/edx/journals-frontend.git","svn_url":"https://github.com/edx/journals-frontend","homepage":null,"size":327,"stargazers_count":2,"watchers_count":2,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":7,"license":{"key":"agpl-3.0","name":"GNU Affero General Public License v3.0","spdx_id":"AGPL-3.0","url":"https://api.github.com/licenses/agpl-3.0","node_id":"MDc6TGljZW5zZTE="},"forks":0,"open_issues":7,"watchers":2,"default_branch":"master"}},"base":{"label":"edx:master","ref":"master","sha":"43badbdeb4ae00d15ad2dc3c104716d331d78c8f","user":{"login":"edx","id":3179841,"node_id":"MDEyOk9yZ2FuaXphdGlvbjMxNzk4NDE=","avatar_url":"https://avatars3.githubusercontent.com/u/3179841?v=4","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":139473328,"node_id":"MDEwOlJlcG9zaXRvcnkxMzk0NzMzMjg=","name":"journals-frontend","full_name":"edx/journals-frontend","owner":{"login":"edx","id":3179841,"node_id":"MDEyOk9yZ2FuaXphdGlvbjMxNzk4NDE=","avatar_url":"https://avatars3.githubusercontent.com/u/3179841?v=4","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/journals-frontend","description":"Front-end application to interact with edX Journals","fork":false,"url":"https://api.github.com/repos/edx/journals-frontend","forks_url":"https://api.github.com/repos/edx/journals-frontend/forks","keys_url":"https://api.github.com/repos/edx/journals-frontend/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/journals-frontend/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/journals-frontend/teams","hooks_url":"https://api.github.com/repos/edx/journals-frontend/hooks","issue_events_url":"https://api.github.com/repos/edx/journals-frontend/issues/events{/number}","events_url":"https://api.github.com/repos/edx/journals-frontend/events","assignees_url":"https://api.github.com/repos/edx/journals-frontend/assignees{/user}","branches_url":"https://api.github.com/repos/edx/journals-frontend/branches{/branch}","tags_url":"https://api.github.com/repos/edx/journals-frontend/tags","blobs_url":"https://api.github.com/repos/edx/journals-frontend/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/journals-frontend/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/journals-frontend/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/journals-frontend/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/journals-frontend/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/journals-frontend/languages","stargazers_url":"https://api.github.com/repos/edx/journals-frontend/stargazers","contributors_url":"https://api.github.com/repos/edx/journals-frontend/contributors","subscribers_url":"https://api.github.com/repos/edx/journals-frontend/subscribers","subscription_url":"https://api.github.com/repos/edx/journals-frontend/subscription","commits_url":"https://api.github.com/repos/edx/journals-frontend/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/journals-frontend/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/journals-frontend/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/journals-frontend/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/journals-frontend/contents/{+path}","compare_url":"https://api.github.com/repos/edx/journals-frontend/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/journals-frontend/merges","archive_url":"https://api.github.com/repos/edx/journals-frontend/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/journals-frontend/downloads","issues_url":"https://api.github.com/repos/edx/journals-frontend/issues{/number}","pulls_url":"https://api.github.com/repos/edx/journals-frontend/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/journals-frontend/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/journals-frontend/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/journals-frontend/labels{/name}","releases_url":"https://api.github.com/repos/edx/journals-frontend/releases{/id}","deployments_url":"https://api.github.com/repos/edx/journals-frontend/deployments","created_at":"2018-07-02T17:26:07Z","updated_at":"2018-08-20T20:16:07Z","pushed_at":"2018-08-20T21:09:06Z","git_url":"git://github.com/edx/journals-frontend.git","ssh_url":"git@github.com:edx/journals-frontend.git","clone_url":"https://github.com/edx/journals-frontend.git","svn_url":"https://github.com/edx/journals-frontend","homepage":null,"size":327,"stargazers_count":2,"watchers_count":2,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":7,"license":{"key":"agpl-3.0","name":"GNU Affero General Public License v3.0","spdx_id":"AGPL-3.0","url":"https://api.github.com/licenses/agpl-3.0","node_id":"MDc6TGljZW5zZTE="},"forks":0,"open_issues":7,"watchers":2,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/edx/journals-frontend/pulls/33"},"html":{"href":"https://github.com/edx/journals-frontend/pull/33"},"issue":{"href":"https://api.github.com/repos/edx/journals-frontend/issues/33"},"comments":{"href":"https://api.github.com/repos/edx/journals-frontend/issues/33/comments"},"review_comments":{"href":"https://api.github.com/repos/edx/journals-frontend/pulls/33/comments"},"review_comment":{"href":"https://api.github.com/repos/edx/journals-frontend/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/edx/journals-frontend/pulls/33/commits"},"statuses":{"href":"https://api.github.com/repos/edx/journals-frontend/statuses/81ddc2b93036f4ce19608ec733a864f9f2b44d56"}},"author_association":"MEMBER"}}
{"actor":{"display_login":"bill-filler"}}