Show error message if moving of followers fails

This commit is contained in:
silverpill 2023-01-09 23:21:16 +00:00
parent 2be8e2baa0
commit 6852c69498
4 changed files with 32 additions and 9 deletions

View file

@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Added
- Added "Experiments" section to Settings page (includes "Move Followers" feature).
- Show error message if moving of followers fails.
### Changed

View file

@ -126,8 +126,13 @@
}
@mixin content-form {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: $block-outer-padding;
.input-group {
margin-bottom: $block-outer-padding;
width: 100%;
label {
display: block;
@ -148,4 +153,8 @@
width: 100%;
}
}
.error-message {
color: $error-color;
}
}

View file

@ -7,7 +7,7 @@
<input
type="text"
id="from-actor-id"
placeholder="From actor ID"
placeholder="From (actor ID)"
v-model="fromActorId"
>
</div>
@ -22,11 +22,12 @@
<button
type="submit"
class="btn"
:disabled="!canMove()"
:disabled="!canMove() || isLoading"
@click.prevent="move()"
>
Move
</button>
<div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
</form>
</template>
</sidebar-layout>
@ -45,6 +46,8 @@ const { currentUser, ensureAuthToken, setCurrentUser } = $(useCurrentUser())
const fromActorId = $ref("")
const followersCsv = $ref("")
let isLoading = $ref(false)
let errorMessage = $ref<string | null>(null)
function canMove(): boolean {
return fromActorId.length > 0 && followersCsv.length > 0
@ -54,11 +57,21 @@ async function move() {
if (currentUser === null) {
return
}
const user = await moveFollowers(
ensureAuthToken(),
fromActorId,
followersCsv,
)
let user
isLoading = true
try {
user = await moveFollowers(
ensureAuthToken(),
fromActorId,
followersCsv,
)
} catch (error: any) {
isLoading = false
errorMessage = error.message
return
}
isLoading = false
errorMessage = null
setCurrentUser(user)
router.push({ name: "profile", params: { profileId: currentUser.id } })
}

View file

@ -224,7 +224,7 @@ async function save() {
display: grid;
gap: $input-padding;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
margin-bottom: $block-outer-padding;
width: 100%;
.input-group:last-child {
margin-bottom: 0;