Merge pull request #233 from olinlibrary/osteele/wiki-urls

Refactor help URLs, and open in new tab
olin-build · May 14, 2018 · 241caa7 · 241caa7
2 parents bb46d69 + 1bde1aa
commit 241caa7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/src/__test__/recurrence-selector.test.jsx b/src/__test__/recurrence-selector.test.jsx
@@ -36,7 +36,10 @@ describe('RecurrenceSelector', () => {
       frequency: 'MONTHLY',
       interval: 1,
     };
-    const component = renderer.create(<RecurrenceSelector recurs={recurrence} start={moment('2018-05-12')} onChange={() => {}} />);
+    const jsx = (
+      <RecurrenceSelector recurs={recurrence} start={moment('2018-05-12')} onChange={() => {}} />
+    );
+    const component = renderer.create(jsx);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });

diff --git a/src/docs.js b/src/docs.js
@@ -0,0 +1,9 @@
+const integrateCalendarPageUrl =
+  'https://github.com/olinlibrary/abe-web/wiki/Integrate-with-Your-Calendar';
+
+const urls = {
+  integrateCalendarUrl: `${integrateCalendarPageUrl}#wiki-wrapper`,
+  googleCalendarUrl: `${integrateCalendarPageUrl}#step-2-b-google-calendar`,
+};
+
+export default urls;
diff --git a/src/pages/subscription/subscription.jsx b/src/pages/subscription/subscription.jsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import TagPane from '../../components/label-pane';
 import MenuIconButton from '../../components/menu-icon-button';
 import SidebarModes from '../../data/sidebar-modes';
+import docs from '../../docs';
 
 export default class SubscriptionEditorPage extends React.Component {
   constructor(props) {
@@ -75,12 +76,13 @@ export default class SubscriptionEditorPage extends React.Component {
       <div className="row expanded page-container">
         <div className="row content-container">
           <h1 className="page-title">
-            <MenuIconButton onClick={this.props.toggleSidebarCollapsed} tooltip="Show/Hide Sidebar" />
+            <MenuIconButton
+              onClick={this.props.toggleSidebarCollapsed}
+              tooltip="Show/Hide Sidebar"
+            />
             Edit Subscription: {this.state.data.id}
           </h1>
-          {/* <input required="required" type="url" placeholder=".../example_calendar.ics"
-           className="wide-text-box single-line-text-box medium-text-box" onChange={this.urlChanged}/> */}
-          <h2>Tags: </h2>
+          <h2>Tags:</h2>
           <TagPane
             contentClass="import-filters"
             possibleLabels={this.props.labels}
@@ -89,7 +91,12 @@ export default class SubscriptionEditorPage extends React.Component {
             {...this.props}
           />
           <br />
-          <input type="submit" className="button submit" value="Submit" onClick={this.submitSubscription} />
+          <input
+            type="submit"
+            className="button submit"
+            value="Submit"
+            onClick={this.submitSubscription}
+          />
           <br />
           <a
             href={`webcal:${window.abe_url.split(':')[1]}${this.state.data.ics_url}`}
@@ -99,8 +106,9 @@ export default class SubscriptionEditorPage extends React.Component {
           </a>
 
           <a
-            href="https://github.com/olinlibrary/abe-web/wiki/Integrate-with-Your-Calendar#step-2-b-google-calendar"
+            href={docs.googleCalendarUrl}
             className="ics-copy-to-clipboard"
+            target="_blank"
             onClick={() => {
               this.copyToClipboard(this.state.data.ics_url);
             }}

diff --git a/src/sidebar/generate-ics-pane.jsx b/src/sidebar/generate-ics-pane.jsx
@@ -5,6 +5,7 @@ import axios from 'axios';
 import copy from 'copy-to-clipboard';
 import React from 'react';
 import { OutboundLink } from 'react-ga';
+import docs from '../docs';
 
 export default class GenerateICSPane extends React.Component {
   constructor(props) {
@@ -54,7 +55,7 @@ export default class GenerateICSPane extends React.Component {
           Use an ICS feed to add events with the selected tags to your own calendar (
           <OutboundLink
             eventLabel="GitHub Wiki: Integrate with Your Calendar"
-            to="https://github.com/olinlibrary/abe-web/wiki/Integrate-with-Your-Calendar"
+            to={docs.integrateCalendarUrl}
             alt="Instructions for adding an ICS feed"
             title="Instructions for adding an ICS feed"
             target="_blank"
@@ -92,8 +93,9 @@ export default class GenerateICSPane extends React.Component {
             </a>
 
             <a
-              href="https://github.com/olinlibrary/abe-web/wiki/Integrate-with-Your-Calendar#step-2-b-google-calendar"
+              href={docs.googleCalendarUrl}
               className="ics-copy-to-clipboard"
+              target="_blank"
               onClick={() => {
                 this.copyToClipboard(this.state.data.ics_url);
               }}