- some minor ui fixes

- update some js deps

Makefile

@@ -44,7 +44,7 @@ run: $(ASSETS)
 	go run $(CMD) $(ARG)
 
 $(ASSETS): $(UIFILES) ui/yarn.lock
-	@cp ui/node_modules/pdfjs-dist/build/pdf.worker.js ui/public/
+	#@cp ui/node_modules/pdfjs-dist/build/pdf.worker.js ui/public/
 	$(YARN) build
 	@#remove unneeded stuff, todo: eject
 	@rm ui/build/service-worker.js ui/build/precache-manifest* ui/build/asset-manifest.json 2> /dev/null || true

ui/package.json

@@ -8,18 +8,18 @@
     "bootstrap": "^5.3.3",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.4",
-    "react": "^17.0.1",
+    "react": "^18.3.1",
     "react-arborist": "^3.4.0",
     "react-bootstrap": "^2.10.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^11.3.2",
     "react-dropzone-uploader": "^2.11.0",
     "react-icons": "^4.2.0",
-    "react-pdf": "^5.5.0",
+    "react-pdf": "^9.1.1",
     "react-router-dom": "^5.3.0",
-    "react-toastify": "^8.1.1",
+    "react-toastify": "^10.0.6",
     "react-treebeard": "^3.2.4",
-    "sass": "^1.69.5",
+    "sass": "^1.81.0",
     "typescript": "^4.4.4"
   },
   "scripts": {
@@ -53,7 +53,7 @@
     "@types/react-dom": "^17.0.10",
     "@types/react-router-dom": "^5.3.1",
     "react-scripts": "5.0.1",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^16.0.3",
     "webpack": "^5.89.0"
   },
   "proxy": "http://localhost:3000"

ui/src/App.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import {useEffect} from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { ToastContainer } from 'react-toastify';
 

ui/src/App.scss

@@ -232,4 +232,4 @@ main h2 {
     padding: 0.5em 0;
 }
 
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "node_modules/bootstrap/scss/bootstrap";

ui/src/components/Navigation.js

@@ -30,10 +30,14 @@ const NavigationBar = () => {
                     Documents
                   </Nav.Link>
                 </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link as={NavLink} to="/connect">
+                    Connect
+                  </Nav.Link>
+                </Nav.Item>
               </Nav>
               <Nav className="ms-auto">
                 <NavDropdown id="userMenu" title={user.UserID} align="end">
-                  <NavDropdown.Item as={NavLink} to="/connect">Connect Device</NavDropdown.Item>
                   <NavDropdown.Item as={NavLink} to="/admin">Admin</NavDropdown.Item>
                   <NavDropdown.Divider />
                   <NavDropdown.Item as={Button} onClick={handleLogout}>Log out</NavDropdown.Item>

ui/src/index.js

@@ -1,14 +1,14 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 import ErrorBoundary from "./components/ErrorBoundary";
 import "./index.css";
 
-ReactDOM.render(
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
   <React.StrictMode>
     <ErrorBoundary>
       <App />
     </ErrorBoundary>
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+  </React.StrictMode>);

ui/src/pages/Documents/File.js

@@ -1,23 +1,30 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
-import { Document, Page } from "react-pdf";
 import Navbar from 'react-bootstrap/Navbar';
 import { FaChevronRight, FaChevronLeft, } from "react-icons/fa6";
 import { AiOutlineDownload } from "react-icons/ai";
 import constants from "../../common/constants";
 
 import apiservice from "../../services/api.service"
-
 import NameTag from "../../components/NameTag"
 
+import { pdfjs,Document, Page } from "react-pdf";
+// import 'react-pdf/dist/Page/AnnotationLayer.css';
+// import 'react-pdf/dist/Page/TextLayer.css';
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url,
+).toString();
+
 export default function FileViewer({ file, onSelect }) {
   const { data } = file;
 
   const downloadUrl = `${constants.ROOT_URL}/documents/${file.id}`;
 
   const [page, setPage] = useState(1);
   const [pages, setPages] = useState(1);
-
+  // const [width, setWidth] = useState(100);
+  const [height, setHeight] = useState(100);
   const onLoadSuccess = (pdf) => {
     setPage(1);
     setPages(pdf.numPages);
@@ -32,6 +39,17 @@ export default function FileViewer({ file, onSelect }) {
       return Math.min(p + 1, pages);
     });
   };
+const parent = useRef(null);
+	useEffect(() => {
+        const resizeObserver = new ResizeObserver((event) => {
+            // Depending on the layout, you may need to swap inlineSize with blockSize
+            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize
+            // setWidth(event[0].contentBoxSize[0].inlineSize);
+            setHeight(event[0].contentBoxSize[0].blockSize);
+        });
+
+        resizeObserver.observe(parent.current);
+    });
 
   // TODO: add loading and error handling
   const onDownloadClick = () => {
@@ -79,9 +97,14 @@ export default function FileViewer({ file, onSelect }) {
       </Navbar>
 
       {file && (
-        <div>
+        <div ref={parent} style={{height: "95%"}}>
           <Document file={downloadUrl} onLoadSuccess={onLoadSuccess}>
-            <Page pageNumber={page} />
+            <Page pageNumber={page} 
+				// width={ width } 
+				height={ height} 
+				renderAnnotationLayer={false} 
+				renderTextLayer={false}
+			/>
           </Document>
         </div>
       )}

ui/src/pages/Documents/Folder.js

@@ -14,7 +14,7 @@ import FileList from "./FileList";
 import NameTag from "../../components/NameTag"
 
 export default function Folder({ selection, onSelect, onUpdate }) {
-  const [listStyle, setListStyle] = useState("grid");
+  const [listStyle, setListStyle] = useState("list");
   const [folderName, setFolderName] = useState("");
   const [showCreateFileModal, setShowCreateFolder] = useState(false);
 

ui/src/pages/Documents/Upload.js

@@ -6,10 +6,6 @@ import apiservice from "../../services/api.service";
 
 import styles from "./Documents.module.scss";
 
-function delay(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
 export default function StyledDropzone(props) {
   const [uploading, setUploading] = useState(false);
   const [lasterror, setLastError] = useState();

ui/src/pages/Documents/index.jsx

@@ -89,7 +89,7 @@ export default function DocumentList() {
 
   useEffect(() => {
     loadDocs()
-  }, [])
+  })
 
   return (
     <Container fluid>