3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-05-04 20:56:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

Change user update indicator (#450)

Browse source
This commit is contained in:
Luke Vella 2023-01-30 18:47:26 +00:00 • committed by GitHub
parent 0628ce5971
commit e21574b032
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/standard-layout.tsx
View file

@ -21,6 +21,7 @@ import Login from "./icons/login.svg";
import Logout from "./icons/logout.svg"; import Logout from "./icons/logout.svg";
import Pencil from "./icons/pencil.svg"; import Pencil from "./icons/pencil.svg";
import Question from "./icons/question-mark-circle.svg"; import Question from "./icons/question-mark-circle.svg";
import Spinner from "./icons/spinner.svg";
import Support from "./icons/support.svg"; import Support from "./icons/support.svg";
import Twitter from "./icons/twitter.svg"; import Twitter from "./icons/twitter.svg";
import ModalProvider, { useModalContext } from "./modal/modal-provider"; import ModalProvider, { useModalContext } from "./modal/modal-provider";
@ -37,7 +38,7 @@ const HomeLink = () => {
}; };
const MobileNavigation: React.VoidFunctionComponent = () => { const MobileNavigation: React.VoidFunctionComponent = () => {
const { user } = useUser(); const { user, isUpdating } = useUser();
const { t } = useTranslation(["common", "app"]); const { t } = useTranslation(["common", "app"]);
return ( return (
<div <div
@ -70,7 +71,11 @@ const MobileNavigation: React.VoidFunctionComponent = () => {
className="group inline-flex w-full items-center space-x-2 rounded-lg px-2 py-1 text-left transition-colors hover:bg-slate-500/10 active:bg-slate-500/20" className="group inline-flex w-full items-center space-x-2 rounded-lg px-2 py-1 text-left transition-colors hover:bg-slate-500/10 active:bg-slate-500/20"
> >
<div className="relative shrink-0"> <div className="relative shrink-0">
<UserCircle className="w-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" /> {isUpdating ? (
<Spinner className="h-5 animate-spin" />
) : (
<UserCircle className="w-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" />
)}
</div> </div>
<div className="hidden max-w-[120px] truncate font-medium xs:block"> <div className="hidden max-w-[120px] truncate font-medium xs:block">
{user.shortName} {user.shortName}
@ -237,7 +242,7 @@ const UserDropdown: React.VoidFunctionComponent<DropdownProps> = ({
const StandardLayout: React.VoidFunctionComponent<{ const StandardLayout: React.VoidFunctionComponent<{
children?: React.ReactNode; children?: React.ReactNode;
}> = ({ children, ...rest }) => { }> = ({ children, ...rest }) => {
const { user } = useUser(); const { user, isUpdating } = useUser();
const { t } = useTranslation(["common", "app"]); const { t } = useTranslation(["common", "app"]);
return ( return (
@ -309,7 +314,11 @@ const StandardLayout: React.VoidFunctionComponent<{
> >
<div className="flex w-full items-center space-x-3"> <div className="flex w-full items-center space-x-3">
<div className="relative"> <div className="relative">
<UserCircle className="h-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" /> {isUpdating ? (
<Spinner className="h-5 animate-spin" />
) : (
<UserCircle className="h-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" />
)}
</div> </div>
<div className="grow overflow-hidden"> <div className="grow overflow-hidden">
<div className="truncate font-medium leading-snug text-slate-600"> <div className="truncate font-medium leading-snug text-slate-600">

6
src/components/user-provider.tsx
View file

@ -12,6 +12,7 @@ export const UserContext =
React.createContext<{ React.createContext<{
user: UserSession & { shortName: string }; user: UserSession & { shortName: string };
refresh: () => void; refresh: () => void;
isUpdating: boolean;
logout: () => void; logout: () => void;
ownsObject: (obj: { userId: string | null }) => boolean; ownsObject: (obj: { userId: string | null }) => boolean;
} | null>(null); } | null>(null);
@ -82,9 +83,7 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
}); });
}); });
const shortName = isFetching const shortName = user
? t("loading")
: user
? user.isGuest === false ? user.isGuest === false
? user.name ? user.name
: user.id.substring(0, 10) : user.id.substring(0, 10)
@ -97,6 +96,7 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
return ( return (
<UserContext.Provider <UserContext.Provider
value={{ value={{
isUpdating: isFetching,
user: { ...user, shortName }, user: { ...user, shortName },
refresh: () => { refresh: () => {
return queryClient.whoami.invalidate(); return queryClient.whoami.invalidate();