artifacthub
/
hub
mirror of https://github.com/artifacthub/hub.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve subscription icon loading spinner (#368) 

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
This commit is contained in:
Cynthia S. Garcia 2020-05-08 10:50:38 +02:00 committed by GitHub
parent 108a16beea
commit 795bc2d35d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/layout/package/SubscriptionsButton.test.tsx
View File

@ -62,7 +62,7 @@ describe('SubscriptionsButton', () => {
mocked(API).getPackageSubscriptions.mockResolvedValue([{ notificationKind: 0 }]);
mocked(API).deleteSubscription.mockResolvedValue('');
const { getByText, getByTestId } = render(
const { getByText, getByTestId, queryByRole } = render(
<AppCtx.Provider value={{ ctx: mockCtx, dispatch: jest.fn() }}>
<SubscriptionsButton {...defaultProps} />
</AppCtx.Provider>
@ -73,7 +73,9 @@ describe('SubscriptionsButton', () => {
expect(API.getPackageSubscriptions).toHaveBeenCalledWith(defaultProps.packageId);
});
await waitFor(() => {});
await waitFor(() => {
expect(queryByRole('status')).toBeNull();
});
expect(getByText('New releases')).toBeInTheDocument();
expect(getByText('Receive a notification when a new version of this package is released.')).toBeInTheDocument();

22
web/src/layout/package/SubscriptionsButton.tsx
View File

@ -59,16 +59,22 @@ const SubscriptionsButton = (props: Props) => {
return isActive;
};
async function getSubscriptions() {
async function getSubscriptions(visibleLoading: boolean = false) {
if (isNull(ctx.user)) {
setActiveSubscriptions(undefined);
} else {
try {
setIsLoading(true);
if (visibleLoading) {
setIsLoading(true);
}
setActiveSubscriptions(await API.getPackageSubscriptions(props.packageId));
setIsLoading(false);
if (visibleLoading) {
setIsLoading(false);
}
} catch (err) {
setIsLoading(false);
if (visibleLoading) {
setIsLoading(false);
}
setActiveSubscriptions(null);
if (err.statusText !== 'ErrLoginRedirect') {
alertDispatcher.postAlert({
@ -98,7 +104,7 @@ const SubscriptionsButton = (props: Props) => {
} else {
await API.addSubscription(props.packageId, kind);
}
getSubscriptions();
getSubscriptions(true);
} catch (err) {
if (err.statusText !== 'ErrLoginRedirect') {
alertDispatcher.postAlert({
@ -107,12 +113,14 @@ const SubscriptionsButton = (props: Props) => {
kind
)} notification, please try again later`,
});
getSubscriptions(); // Get subscriptions if changeSubscription fails
getSubscriptions(true); // Get subscriptions if changeSubscription fails
}
}
}
if (isUndefined(ctx.user) || isNull(ctx.user) || isNull(activeSubscriptions)) return null;
if (isUndefined(ctx.user) || isNull(ctx.user) || isNull(activeSubscriptions) || isUndefined(activeSubscriptions)) {
return null;
}
return (
<div className="position-relative ml-3">

133
web/src/layout/package/__snapshots__/SubscriptionsButton.test.tsx.snap generated
View File

@ -1,137 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SubscriptionsButton creates snapshot 1`] = `
<DocumentFragment>
<div
class="position-relative ml-3"
>
<button
class="btn p-0 position-relative"
data-testid="subscriptionsBtn"
type="button"
>
<div
class="d-flex flex-row align-items-center justify-content-center"
>
<div
class="rounded-circle d-flex align-items-center justify-content-center text-primary iconWrapper"
>
<div
class="loading"
>
<div
class="spinner-border text-primary spinner"
role="status"
>
<span
class="sr-only"
>
Loading...
</span>
</div>
</div>
<svg
class="rounded-circle text-muted"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 18.69L7.84 6.14 5.27 3.49 4 4.76l2.8 2.8v.01c-.52.99-.8 2.16-.8 3.42v5l-2 2v1h13.73l2 2L21 19.72l-1-1.03zM12 22c1.11 0 2-.89 2-2h-4c0 1.11.89 2 2 2zm6-7.32V11c0-3.08-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.15.03-.29.08-.42.12-.1.03-.2.07-.3.11h-.01c-.01 0-.01 0-.02.01-.23.09-.46.2-.68.31 0 0-.01 0-.01.01L18 14.68z"
/>
</svg>
</div>
<small
class="ml-1 text-primary"
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 320 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
</small>
</div>
</button>
<div
class="dropdown-menu dropdown-menu-right p-0 dropdown"
>
<div
class="arrow arrow"
/>
<button
class="dropdownItem btn p-3 rounded-0 w-100"
data-testid="newReleaseBtn"
>
<div
class="d-flex flex-row align-items-center w-100 justify-content-between"
>
<div
class="mr-3"
>
<svg
data-testid="uncheckedSubsBtn"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"
/>
</svg>
</div>
<div
class="d-flex flex-column flex-grow-1"
>
<div
class="h6 mb-0 mb-sm-2 d-flex flex-row align-items-center"
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z"
/>
</svg>
<span
class="ml-2"
>
New releases
</span>
</div>
<small
class="d-none d-sm-inline text-muted text-left"
>
Receive a notification when a new version of this package is released.
</small>
</div>
</div>
</button>
</div>
</div>
</DocumentFragment>
`;
exports[`SubscriptionsButton creates snapshot 1`] = `<DocumentFragment />`;
exports[`SubscriptionsButton creates snapshot 2`] = `
<DocumentFragment>