Use page specific footer on shot and My Shots

server/src/footer-view.js

@@ -1,44 +1,37 @@
 const React = require("react");
 const { Localized } = require("fluent-react/compat");
 const PropTypes = require("prop-types");
-const sendEvent = require("./browser-send-event.js");
 
 exports.Footer = class Footer extends React.Component {
-  onReportShot() {
-    sendEvent("start-flag", "navbar", {useBeacon: true});
+  constructor(props) {
+    super(props);
+    this.links = [
+      <li key="terms"><Localized id="footerLinkTerms">
+        <a href="https://www.mozilla.org/about/legal/terms/services/" target="_blank" rel="noopener noreferrer">Terms</a>
+      </Localized></li>,
+      <li key="privacy"><Localized id="footerLinkPrivacy">
+        <a href="https://www.mozilla.org/privacy/firefox/" target="_blank" rel="noopener noreferrer">Privacy Notice</a>
+      </Localized></li>,
+      <li key="faqs"><Localized id="footerLinkFaqs">
+        <a href="https://support.mozilla.org/kb/firefox-screenshots" target="_blank" rel="noopener noreferrer">FAQs</a>
+      </Localized></li>,
+      <li key="dmca"><Localized id="footerLinkDMCA">
+        <a href="https://www.mozilla.org/about/legal/report-infringement/" target="_blank" rel="noopener noreferrer">Report IP Infringement</a>
+      </Localized></li>,
+      <li key="discourse"><Localized id="footerLinkDiscourse">
+        <a href="https://discourse.mozilla-community.org/c/test-pilot/page-shot" target="_blank" rel="noopener noreferrer">Give Feedback</a>
+      </Localized></li>,
+      <li key="github"><a href="https://github.com/mozilla-services/screenshots" target="_blank" rel="noopener noreferrer">GitHub</a></li>,
+    ];
+    this.updateLinks && this.updateLinks();
   }
 
   render() {
     return (
       <footer className="footer">
         <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer" className="mozilla-logo" title="Mozilla"/>
         <ul className="footer-links">
-          <li><Localized id="footerLinkTerms">
-            <a href="https://www.mozilla.org/about/legal/terms/services/" target="_blank" rel="noopener noreferrer">Terms</a>
-          </Localized></li>
-          <li><Localized id="footerLinkPrivacy">
-            <a href="https://www.mozilla.org/privacy/firefox/" target="_blank" rel="noopener noreferrer">Privacy Notice</a>
-          </Localized></li>
-          <li><Localized id="footerLinkFaqs">
-            <a href="https://support.mozilla.org/kb/firefox-screenshots" target="_blank" rel="noopener noreferrer">FAQs</a>
-          </Localized></li>
-          {
-            this.props.isOwner ? null
-            : <li><Localized id="footerReportShot">
-                <a href={`https://qsurvey.mozilla.com/s3/screenshots-flagged-shots?ref=${this.props.id}`}
-                  title="Report this shot for abuse, spam, or other problems"
-                  target="_blank" rel="noopener noreferrer"
-                  onClick={this.onReportShot.bind(this)}>Report Shot</a>
-              </Localized></li>
-          }
-          <li><Localized id="footerLinkDMCA">
-            <a href="https://www.mozilla.org/about/legal/report-infringement/" target="_blank" rel="noopener noreferrer">Report IP Infringement</a>
-          </Localized></li>
-          <li><Localized id="footerLinkDiscourse">
-            <a href="https://discourse.mozilla-community.org/c/test-pilot/page-shot" target="_blank" rel="noopener noreferrer">Give Feedback</a>
-          </Localized></li>
-          <li><a href="https://github.com/mozilla-services/screenshots" target="_blank" rel="noopener noreferrer">GitHub</a></li>
-          {this.props.isOwner ? <li><Localized id="footerLinkRemoveAllData"><a href="/leave-screenshots">Remove All Data</a></Localized></li> : null}
+          {this.links}
         </ul>
       </footer>
     );

server/src/pages/not-found/view.js

@@ -43,7 +43,7 @@ class Body extends React.Component {
               </Localized>
             </div>
           </div>
-          <Footer forUrl="shots" {...this.props} />
+          <Footer {...this.props} />
         </div>
       </reactruntime.BodyTemplate>
     );

server/src/pages/shot/footer.js

@@ -0,0 +1,29 @@
+const React = require("react");
+const { Localized } = require("fluent-react/compat");
+const { Footer } = require("../../footer-view.js");
+const sendEvent = require("../../browser-send-event.js");
+
+exports.ShotFooter = class ShotFooter extends Footer {
+  updateLinks() {
+    if (this.props.isOwner) {
+      this.links.push(<li key="removedata">
+        <Localized id="footerLinkRemoveAllData"><a href="/leave-screenshots">Remove All Data</a></Localized>
+      </li>);
+    } else {
+      const dmcaIdx = this.links.findIndex(link => link.key === "dmca");
+      if (dmcaIdx !== -1) {
+        this.links.splice(dmcaIdx, 0,
+          <li key="reportshot"><Localized id="footerReportShot">
+            <a href={`https://qsurvey.mozilla.com/s3/screenshots-flagged-shots?ref=${this.props.id}`}
+              title="Report this shot for abuse, spam, or other problems"
+              target="_blank" rel="noopener noreferrer"
+              onClick={this.onReportShot.bind(this)}>Report Shot</a>
+          </Localized></li>);
+      }
+    }
+  }
+
+  onReportShot() {
+    sendEvent("start-flag", "navbar", {useBeacon: true});
+  }
+};

server/src/pages/shot/view.js

@@ -2,7 +2,7 @@
 const React = require("react");
 const PropTypes = require("prop-types");
 const { Localized } = require("fluent-react/compat");
-const { Footer } = require("../../footer-view");
+const { ShotFooter } = require("./footer");
 const sendEvent = require("../../browser-send-event.js");
 const { PromoDialog } = require("./promo-dialog");
 const { DeleteShotButton } = require("../../delete-shot-button");
@@ -414,7 +414,7 @@ class Body extends React.Component {
           { errorMessages }
           { clips }
         </section>
-        <Footer {...this.props} />
+        <ShotFooter {...this.props} />
       </div>
     </reactruntime.BodyTemplate>);
   }

server/src/pages/shotindex/footer.js

@@ -0,0 +1,11 @@
+const React = require("react");
+const { Localized } = require("fluent-react/compat");
+const { Footer } = require("../../footer-view.js");
+
+exports.MyShotsFooter = class MyShotsFooter extends Footer {
+  updateLinks() {
+    this.links.push(<li key="removedata">
+      <Localized id="footerLinkRemoveAllData"><a href="/leave-screenshots">Remove All Data</a></Localized>
+    </li>);
+  }
+};

server/src/pages/shotindex/view.js

@@ -1,7 +1,7 @@
 /* globals controller */
 const sendEvent = require("../../browser-send-event.js");
 const reactruntime = require("../../reactruntime");
-const { Footer } = require("../../footer-view.js");
+const { MyShotsFooter } = require("./footer");
 const React = require("react");
 const PropTypes = require("prop-types");
 const { ShareButton } = require("../../share-buttons");
@@ -47,7 +47,7 @@ class Body extends React.Component {
           </div>
           { this.renderPageNavigation() }
           { this.renderErrorMessages() }
-          <Footer forUrl="shots" {...this.props} />
+          <MyShotsFooter {...this.props} />
         </div>
       </reactruntime.BodyTemplate>
     );