From e2dfc8a36fb9dbedde052d8bf2d8c7cbad81ebbd Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Wed, 2 Feb 2022 19:05:30 +0100
Subject: [PATCH] return url factory function for useAccountsUrl

---
 packages/website/src/components/Navigation/Navigation.js | 6 +++---
 packages/website/src/components/Uploader/Uploader.js     | 8 ++++----
 packages/website/src/services/useAccountsUrl.js          | 3 ++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js
index 2134a288..0361245d 100644
--- a/packages/website/src/components/Navigation/Navigation.js
+++ b/packages/website/src/components/Navigation/Navigation.js
@@ -26,7 +26,7 @@ const Navigation = ({ mode, uri }) => {
   const windowSize = useWindowSize();
   const isWindowTop = useWindowTop();
   const { data: accounts } = useAccounts();
-  const accountsUrl = useAccountsUrl();
+  const createAccountsUrl = useAccountsUrl();
 
   React.useEffect(() => {
     setOpen(false);
@@ -90,11 +90,11 @@ const Navigation = ({ mode, uri }) => {
 
             {showLoginNavigation && (
               <>
-                <Link href={`${accountsUrl}auth/login`} className="button-link-primary">
+                <Link href={createAccountsUrl("/auth/login")} className="button-link-primary">
                   Log in
                 </Link>
 
-                <Link href={`${accountsUrl}auth/registration`} className="button-primary">
+                <Link href={createAccountsUrl("/auth/registration")} className="button-primary">
                   Sign up
                 </Link>
               </>
diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js
index a4fc48f2..5772bca9 100644
--- a/packages/website/src/components/Uploader/Uploader.js
+++ b/packages/website/src/components/Uploader/Uploader.js
@@ -22,11 +22,11 @@ const getRootDirectory = (file) => {
 };
 
 const RegistrationLink = () => {
-  const accountsUrl = useAccountsUrl();
+  const createAccountsUrl = useAccountsUrl();
 
   return (
     <Link
-      href={`${accountsUrl}auth/registration`}
+      href={createAccountsUrl("auth/registration")}
       className="uppercase underline-primary hover:text-primary transition-colors duration-200"
     >
       Sign up
@@ -35,11 +35,11 @@ const RegistrationLink = () => {
 };
 
 const LogInLink = () => {
-  const accountsUrl = useAccountsUrl();
+  const createAccountsUrl = useAccountsUrl();
 
   return (
     <Link
-      href={`${accountsUrl}auth/login`}
+      href={createAccountsUrl("auth/login")}
       className="uppercase underline-primary hover:text-primary transition-colors duration-200"
     >
       Log in
diff --git a/packages/website/src/services/useAccountsUrl.js b/packages/website/src/services/useAccountsUrl.js
index 3f8832f6..ac537688 100644
--- a/packages/website/src/services/useAccountsUrl.js
+++ b/packages/website/src/services/useAccountsUrl.js
@@ -3,6 +3,7 @@ import skynetClient from "./skynetClient";
 
 export default function useAccountsUrl() {
   const [url, setUrl] = React.useState("");
+  const createAccountsUrl = React.useCallback((path = "") => new URL(path, url).toString(), [url]);
 
   React.useEffect(() => {
     (async function resolve() {
@@ -14,5 +15,5 @@ export default function useAccountsUrl() {
     })();
   }, [setUrl]);
 
-  return url;
+  return createAccountsUrl;
 }