[view file via shared dir] rewrote it with react (#3235)

frontend/src/shared-file-view-image.js

@@ -2,10 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
+import { gettext } from './utils/constants';
 
 import './css/image-file-view.css';
 
-const { fileName, rawPath, err } = window.shared.pageOptions;
+const { fileName, rawPath, err, prevImgPath, nextImgPath } = window.shared.pageOptions;
+
+const prevImgURL = `?p=${encodeURIComponent(prevImgPath)}`;
+const nextImgURL = `?p=${encodeURIComponent(nextImgPath)}`;
 
 class SharedFileViewImage extends React.Component {
   render() {
@@ -14,6 +18,18 @@ class SharedFileViewImage extends React.Component {
 }
 
 class FileContent extends React.Component {
+
+  componentDidMount() {
+    document.addEventListener('keydown', (e) => {
+      if (prevImgPath && e.keyCode == 37) { // press '<-'
+        location.href = prevImgURL;
+      }
+      if (nextImgPath && e.keyCode == 39) { // press '->'
+        location.href = nextImgURL;
+      }
+    });
+  }
+
   render() {
     if (err) {
       return <SharedFileViewTip />;
@@ -22,6 +38,12 @@ class FileContent extends React.Component {
     return (
       <div className="shared-file-view-body d-flex text-center">
         <div className="image-file-view flex-1">
+          {prevImgPath && (
+            <a href={prevImgURL} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
+          )}
+          {nextImgPath && (
+            <a href={nextImgURL} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
+          )}
           <img src={rawPath} alt={fileName} id="image-view" />
         </div>
       </div>