Better display of the errors when adding an instance

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-05-06 13:09:38 +02:00
parent cd3d0c5fc4
commit 6eb2b6d31a
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

@ -21,6 +21,11 @@
<b-button type="is-primary" native-type="submit">{{ <b-button type="is-primary" native-type="submit">{{
$t("Add an instance") $t("Add an instance")
}}</b-button> }}</b-button>
<b-loading
:is-full-page="true"
v-model="followInstanceLoading"
:can-cancel="false"
/>
</p> </p>
</b-field> </b-field>
</b-field> </b-field>
@ -171,7 +176,6 @@ import {
InstanceFilterFollowStatus, InstanceFilterFollowStatus,
InstanceFollowStatus, InstanceFollowStatus,
} from "@/types/enums"; } from "@/types/enums";
import { SnackbarProgrammatic as Snackbar } from "buefy";
const { isNavigationFailure, NavigationFailureType } = VueRouter; const { isNavigationFailure, NavigationFailureType } = VueRouter;
const INSTANCES_PAGE_LIMIT = 10; const INSTANCES_PAGE_LIMIT = 10;
@ -203,6 +207,8 @@ const INSTANCES_PAGE_LIMIT = 10;
export default class Follows extends Vue { export default class Follows extends Vue {
RouteName = RouteName; RouteName = RouteName;
followInstanceLoading = false;
newRelayAddress = ""; newRelayAddress = "";
instances!: Paginate<IInstance>; instances!: Paginate<IInstance>;
@ -257,6 +263,7 @@ export default class Follows extends Vue {
async followInstance(e: Event): Promise<void> { async followInstance(e: Event): Promise<void> {
e.preventDefault(); e.preventDefault();
this.followInstanceLoading = true;
const domain = this.newRelayAddress.trim(); // trim to fix copy and paste domain name spaces and tabs const domain = this.newRelayAddress.trim(); // trim to fix copy and paste domain name spaces and tabs
try { try {
await this.$apollo.mutate<{ relayFollowings: Paginate<IFollower> }>({ await this.$apollo.mutate<{ relayFollowings: Paginate<IFollower> }>({
@ -266,18 +273,18 @@ export default class Follows extends Vue {
}, },
}); });
this.newRelayAddress = ""; this.newRelayAddress = "";
this.followInstanceLoading = false;
this.$router.push({ this.$router.push({
name: RouteName.INSTANCE, name: RouteName.INSTANCE,
params: { domain }, params: { domain },
}); });
} catch (err: any) { } catch (error: any) {
if (err.message) { if (error.message) {
Snackbar.open({ if (error.graphQLErrors && error.graphQLErrors.length > 0) {
message: err.message, this.$notifier.error(error.graphQLErrors[0].message);
type: "is-danger", }
position: "is-bottom",
});
} }
this.followInstanceLoading = false;
} }
} }