From 1948d7a84c753cd2e69523fcce2415d45eba11fe Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Fri, 20 Sep 2024 11:12:38 +0200 Subject: [PATCH 1/6] Replace "Profile" with first section of user name Related to #42 We risk issues when name is long or if the user has multiple first names ("Per Ole Hansen" will be shown as "Per" and not "Per Ole") --- app/components/Login/LoginButton.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/components/Login/LoginButton.js b/app/components/Login/LoginButton.js index 83bb730..8574ea3 100644 --- a/app/components/Login/LoginButton.js +++ b/app/components/Login/LoginButton.js @@ -52,7 +52,12 @@ export default function LoginButton(props) { bgcolor: cybTheme.palette.primary.main, }; - + const buttonText = () => { + if (session.data != undefined) { + return session.data.user.name.split(" ")[0] + } + return "Login" + } return ( <> @@ -84,7 +89,7 @@ export default function LoginButton(props) { }} primary={ - {session.data != undefined ? "Profile" : "Login"} + {buttonText()} } /> @@ -109,7 +114,7 @@ export default function LoginButton(props) { // color={cybTheme.palette.text.secondary} sx={{ display: { xs: "none", md: "flex" } }} > - {session.data != undefined ? "Profile" : "Login"} + {buttonText()} {session.status == "authenticated" ? ( @@ -122,7 +127,7 @@ export default function LoginButton(props) { ) : ( Date: Fri, 20 Sep 2024 15:50:19 +0200 Subject: [PATCH 2/6] Allow width of LoginButton to be automatic Remove hard width limit for the LoginButton text, allow the Grid containing LoginButton to shrink to the appropriate size for the length of the text inside LoginButton --- app/components/Login/LoginButton.js | 1 - app/components/layout/AppBar.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/Login/LoginButton.js b/app/components/Login/LoginButton.js index 8574ea3..1b184b6 100644 --- a/app/components/Login/LoginButton.js +++ b/app/components/Login/LoginButton.js @@ -110,7 +110,6 @@ export default function LoginButton(props) { > diff --git a/app/components/layout/AppBar.js b/app/components/layout/AppBar.js index 7c69662..ae41fea 100644 --- a/app/components/layout/AppBar.js +++ b/app/components/layout/AppBar.js @@ -83,7 +83,7 @@ export class NavBar extends Component { - + From 3ac806f408144634b40461affe7df408f3c4af4f Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Mon, 23 Sep 2024 08:46:27 +0200 Subject: [PATCH 3/6] Enable shortening of first name in profile button --- app/components/Login/LoginButton.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/Login/LoginButton.js b/app/components/Login/LoginButton.js index 1b184b6..4dc7f7a 100644 --- a/app/components/Login/LoginButton.js +++ b/app/components/Login/LoginButton.js @@ -54,7 +54,12 @@ export default function LoginButton(props) { const buttonText = () => { if (session.data != undefined) { - return session.data.user.name.split(" ")[0] + let firstName = session.data.user.name.split(" ")[0] + // Shorten the first name if it is longer than 25 characters + if (firstName.length > 25) { + firstName = firstName.slice(0, 22) + "..." + } + return firstName } return "Login" } From 4e18084267d4eb2b47c4609a75549ab4e242e977 Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Tue, 24 Sep 2024 12:46:12 +0200 Subject: [PATCH 4/6] Reduce max first name length in profile button to 15 --- app/components/Login/LoginButton.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/Login/LoginButton.js b/app/components/Login/LoginButton.js index 4dc7f7a..57e0b7e 100644 --- a/app/components/Login/LoginButton.js +++ b/app/components/Login/LoginButton.js @@ -55,9 +55,9 @@ export default function LoginButton(props) { const buttonText = () => { if (session.data != undefined) { let firstName = session.data.user.name.split(" ")[0] - // Shorten the first name if it is longer than 25 characters - if (firstName.length > 25) { - firstName = firstName.slice(0, 22) + "..." + // Shorten the first name if it is longer than 15 characters + if (firstName.length > 15) { + firstName = firstName.slice(0, 12) + "..." } return firstName } From 216dbd2f9e01c47877bc3c24a947cf64b10b4776 Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Tue, 24 Sep 2024 12:49:50 +0200 Subject: [PATCH 5/6] Reload page when user info is updated Awaits prismaRequest, then reloads the entire page. This 1) confirms to the user that something happened, and 2) updates AppBar to ensure the first name is always correct. I could not get router.refresh() to work, so window.location.reload() is the best replacement I could find. --- app/pages/main/profile/page.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/pages/main/profile/page.js b/app/pages/main/profile/page.js index 70e2831..e91c13f 100644 --- a/app/pages/main/profile/page.js +++ b/app/pages/main/profile/page.js @@ -112,9 +112,8 @@ function ProfilePage() { } }, [session]) - const handleUpdateData = () => { - - prismaRequest({ + const handleUpdateData = async () => { + await prismaRequest({ model: "user", method: "update", request: { @@ -126,8 +125,8 @@ function ProfilePage() { lastName: lastName, } } - }) - + }); + window.location.reload(); } const handleConfirmSelection = async () => { From 0b9a317512c1f7f28b3f6b7fec8b41d290123a26 Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Tue, 24 Sep 2024 13:25:28 +0200 Subject: [PATCH 6/6] Replace hyphens in first name with non-breaking hyphen --- app/components/Login/LoginButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Login/LoginButton.js b/app/components/Login/LoginButton.js index 57e0b7e..ba93239 100644 --- a/app/components/Login/LoginButton.js +++ b/app/components/Login/LoginButton.js @@ -54,7 +54,7 @@ export default function LoginButton(props) { const buttonText = () => { if (session.data != undefined) { - let firstName = session.data.user.name.split(" ")[0] + let firstName = session.data.user.name.split(" ")[0].replace('-', '‑') // Shorten the first name if it is longer than 15 characters if (firstName.length > 15) { firstName = firstName.slice(0, 12) + "..."