web: Extract useRemotePath (#323)

chivay · web-flow · commit aab6da6d22ad · 2021-03-23T17:03:55.000+01:00
diff --git a/mwdb/web/src/commons/remotes/index.js b/mwdb/web/src/commons/remotes/index.js
@@ -5,3 +5,8 @@ export function useRemote() {
     const match = useRouteMatch("/remote/:remote");
     return match && match.params.remote;
 }
+
+export function useRemotePath() {
+    const remote = useRemote();
+    return remote ? `/remote/${remote}` : "";
+}
diff --git a/mwdb/web/src/commons/ui/ObjectLink.js b/mwdb/web/src/commons/ui/ObjectLink.js
@@ -1,16 +1,16 @@
 import React, { useContext } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { AuthContext } from "../auth";
 import { mapObjectType } from "../helpers";
+import { useRemotePath } from "../remotes";
 
 import Hash from "./Hash";
 
 export default function ObjectLink(props) {
     const auth = useContext(AuthContext);
     const objectType = mapObjectType(props.type);
-    const { remote } = useParams();
-    const remotePath = remote ? `/remote/${remote}` : "";
+    const remotePath = useRemotePath();
 
     let linkElement = (
         <Link
diff --git a/mwdb/web/src/commons/ui/RefString.js b/mwdb/web/src/commons/ui/RefString.js
@@ -1,12 +1,11 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 import ObjectLink from "./ObjectLink";
 import { makeSearchLink } from "../helpers";
 
 export default function RefString(props) {
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}/` : "";
+    const remotePath = useRemotePath();
     const reasonText =
         props.reason_type.charAt(0).toUpperCase() +
         props.reason_type.slice(1).toLowerCase();
diff --git a/mwdb/web/src/components/ConfigStats.js b/mwdb/web/src/components/ConfigStats.js
@@ -4,11 +4,10 @@ import { Link } from "react-router-dom";
 import api from "@mwdb-web/commons/api";
 import { DateString, SortedList, View } from "@mwdb-web/commons/ui";
 import { makeSearchLink } from "@mwdb-web/commons/helpers";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 function ConfigStatsItem(props) {
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}` : "";
+    const remotePath = useRemotePath();
     return (
         <tr>
             <td>
@@ -17,7 +16,7 @@ function ConfigStatsItem(props) {
                         "family",
                         props.family,
                         false,
-                        `${remotePath}/configs`
+                        `${remotePath}configs`
                     )}
                 >
                     {props.family}
diff --git a/mwdb/web/src/components/ConfigTable.js b/mwdb/web/src/components/ConfigTable.js
@@ -12,7 +12,7 @@ import {
     DateString,
     ObjectLink,
 } from "@mwdb-web/commons/ui";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 export function ConfigRow(props) {
     const key = props.configKey;
@@ -28,8 +28,7 @@ export function ConfigRow(props) {
         Object.keys(value)[0] === "in-blob";
     const isRegularObject = isObject && !isEmbeddedBlob;
 
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}/` : "";
+    const remotePath = useRemotePath();
 
     useEffect(() => {
         // Automatically expand all nested objects if parent has been expanded
@@ -153,8 +152,7 @@ export function ConfigRows(props) {
 
 export default function ConfigTable(props) {
     const object = props.object;
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}/` : "";
+    const remotePath = useRemotePath();
 
     return (
         <DataTable>
diff --git a/mwdb/web/src/components/DagreD3Plot.js b/mwdb/web/src/components/DagreD3Plot.js
@@ -3,11 +3,10 @@ import ReactDOM from "react-dom";
 
 import * as dagreD3 from "dagre-d3";
 import * as d3 from "d3";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 function DagreD3Plot(props) {
-    const remote = useRemote();
-    const remotePath = remote ? `/remote/${remote}` : "";
+    const remotePath = useRemotePath();
 
     const graph = new dagreD3.graphlib.Graph().setGraph({ compound: true });
     const renderer = new dagreD3.render();
diff --git a/mwdb/web/src/components/Navigation.js b/mwdb/web/src/components/Navigation.js
@@ -15,7 +15,7 @@ import { AuthContext } from "@mwdb-web/commons/auth";
 import { ConfigContext } from "@mwdb-web/commons/config";
 import { fromPlugin, Extendable } from "@mwdb-web/commons/extensions";
 import { NavDropdown } from "@mwdb-web/commons/ui";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemote, useRemotePath } from "@mwdb-web/commons/remotes";
 
 import logo from "../assets/logo.png";
 
@@ -116,7 +116,7 @@ export default function Navigation() {
     const auth = useContext(AuthContext);
     const config = useContext(ConfigContext);
     const remote = useRemote();
-    const remotePath = remote ? `/remote/${remote}` : "";
+    const remotePath = useRemotePath();
     const navItems = config.config ? (
         <Extendable ident="navbar">
             {!auth.isAuthenticated &&
@@ -242,7 +242,7 @@ export default function Navigation() {
                         </Link>
                     </li>
                     <li className="nav-item">
-                        <Link className="nav-link" to={`${remotePath}/configs`}>
+                        <Link className="nav-link" to={`${remotePath}configs`}>
                             <FontAwesomeIcon
                                 className="navbar-icon"
                                 icon={faTable}
@@ -251,7 +251,7 @@ export default function Navigation() {
                         </Link>
                     </li>
                     <li className="nav-item">
-                        <Link className="nav-link" to={`${remotePath}/blobs`}>
+                        <Link className="nav-link" to={`${remotePath}blobs`}>
                             <FontAwesomeIcon
                                 className="navbar-icon"
                                 icon={faScroll}
@@ -260,7 +260,7 @@ export default function Navigation() {
                         </Link>
                     </li>
                     <li className="nav-item">
-                        <Link className="nav-link" to={`${remotePath}/search`}>
+                        <Link className="nav-link" to={`${remotePath}search`}>
                             Search
                         </Link>
                     </li>
diff --git a/mwdb/web/src/components/RecentBlobs.js b/mwdb/web/src/components/RecentBlobs.js
@@ -7,12 +7,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { RecentView, RecentRow, RecentInnerRow } from "./RecentView";
 import { TagList } from "@mwdb-web/commons/ui";
 import { DateString, ObjectLink, Hash } from "@mwdb-web/commons/ui";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 export function RecentBlobRow(props) {
     let location = useLocation();
-    const remote = useRemote();
-    const remotePath = remote ? `/remote/${remote}` : "";
+    const remotePath = useRemotePath();
     const diffWith = queryString.parse(location.search)["diff"];
     const blobType = (
         <a
@@ -29,7 +28,7 @@ export function RecentBlobRow(props) {
         props.id === diffWith ? (
             <Hash hash={props.id} />
         ) : (
-            <Link to={`${remotePath}/diff/${props.id}/${diffWith}`}>
+            <Link to={`${remotePath}diff/${props.id}/${diffWith}`}>
                 <Hash hash={props.id} />
             </Link>
         )
diff --git a/mwdb/web/src/components/ShowObject/Views/LatestConfigTab.js b/mwdb/web/src/components/ShowObject/Views/LatestConfigTab.js
@@ -4,12 +4,11 @@ import ConfigTable from "../../ConfigTable";
 
 import { ObjectContext } from "@mwdb-web/commons/context";
 import { ObjectAction, ObjectTab } from "@mwdb-web/commons/ui";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 export default function LatestConfigTab(props) {
     const context = useContext(ObjectContext);
-    const remote = useRemote();
-    const remotePath = remote ? `/remote/${remote}` : "";
+    const remotePath = useRemotePath();
 
     // Don't show tab if object doesn't have latest config
     if (!context.object.latest_config) return [];
diff --git a/mwdb/web/src/components/ShowObject/Views/SharesBox.js b/mwdb/web/src/components/ShowObject/Views/SharesBox.js
@@ -6,12 +6,11 @@ import { APIContext } from "@mwdb-web/commons/api/context";
 import { ObjectContext } from "@mwdb-web/commons/context";
 import { RefString, DateString, ConfirmationModal } from "@mwdb-web/commons/ui";
 import { makeSearchLink } from "@mwdb-web/commons/helpers";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 function ShareItem(props) {
     const context = useContext(ObjectContext);
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}/` : "";
+    const remotePath = useRemotePath();
     let fieldStyle = {
         wordBreak: "break-all",
     };
diff --git a/mwdb/web/src/components/ShowSample.js b/mwdb/web/src/components/ShowSample.js
@@ -37,12 +37,11 @@ import {
     Hash,
     HexView,
 } from "@mwdb-web/commons/ui";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 function SampleDetails() {
     const context = useContext(ObjectContext);
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}` : "";
+    const remotePath = useRemotePath();
     return (
         <DataTable>
             <Extendable ident="showSampleDetails">
diff --git a/mwdb/web/src/components/ShowTextBlob.js b/mwdb/web/src/components/ShowTextBlob.js
@@ -30,12 +30,11 @@ import {
 } from "@mwdb-web/commons/helpers";
 import { DataTable, DateString, HexView } from "@mwdb-web/commons/ui";
 import { Extendable } from "@mwdb-web/commons/extensions";
-import { useRemote } from "@mwdb-web/commons/remotes";
+import { useRemotePath } from "@mwdb-web/commons/remotes";
 
 function TextBlobDetails() {
     const context = useContext(ObjectContext);
-    const remote = useRemote();
-    const remotePath = remote ? `remote/${remote}/` : "";
+    const remotePath = useRemotePath();
     return (
         <DataTable>
             <Extendable ident="showTextBlobDetails">
@@ -47,7 +46,7 @@ function TextBlobDetails() {
                                 "name",
                                 context.object.blob_name,
                                 false,
-                                `${remotePath}/blobs`
+                                `${remotePath}blobs`
                             )}
                         >
                             {context.object.blob_name}
@@ -136,13 +135,12 @@ function TextBlobPreview() {
 
 function BlobDiffAction() {
     const context = useContext(ObjectContext);
-    const remote = useRemote();
-    const remotePath = remote ? `/remote/${remote}` : "";
+    const remotePath = useRemotePath();
     return (
         <ObjectAction
             label="Diff with"
             icon={faRandom}
-            link={`${remotePath}/blobs?diff=${context.object.id}`}
+            link={`${remotePath}blobs?diff=${context.object.id}`}
         />
     );
 }

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,8 @@ export function useRemote() {`
`5`	`5`	`const match = useRouteMatch("/remote/:remote");`
`6`	`6`	`return match && match.params.remote;`
`7`	`7`	`}`
	`8`	`+`
	`9`	`+export function useRemotePath() {`
	`10`	`+ const remote = useRemote();`
	`11`	+ return remote ? `/remote/${remote}` : "";
	`12`	`+}`