Skip to content

Commit

Permalink
fix+enhance: ユーザーがいないとクエリがコケるのを修正+フロントで触れないように2
Browse files Browse the repository at this point in the history
  • Loading branch information
@lqvp
lqvp committed Dec 13, 2024
1 parent 16e5996 commit bbe197f
Show file tree
Hide file tree
Showing 4 changed files with 226 additions and 140 deletions.
10 changes: 6 additions & 4 deletions packages/backend/src/server/api/endpoints/following/history.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,10 @@ export const meta = {
fromUser: {
type: 'object',
optional: false, nullable: false,
ref: 'UserDetailedNotMe',
},
toUser: {
type: 'object',
optional: false, nullable: false,
ref: 'UserDetailedNotMe',
},
timestamp: {
type: 'string',
Expand Down Expand Up @@ -199,8 +197,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
return await Promise.all(histories.map(async history => ({
id: history.id,
type: history.type,
fromUser: await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me, { schema: 'UserDetailed' }),
toUser: await this.userEntityService.pack(history.toUser ?? history.toUserId, me, { schema: 'UserDetailed' }),
fromUser: history.fromUser
? await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me)
: { name: 'unknown user' },
toUser: history.toUser
? await this.userEntityService.pack(history.toUser ?? history.toUserId, me)
: { name: 'unknown user' },
timestamp: history.timestamp.toISOString(),
})));
});
Expand Down
10 changes: 6 additions & 4 deletions packages/backend/src/server/api/endpoints/following/requests/history.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,10 @@ export const meta = {
fromUser: {
type: 'object',
optional: false, nullable: false,
ref: 'UserDetailedNotMe',
},
toUser: {
type: 'object',
optional: false, nullable: false,
ref: 'UserDetailedNotMe',
},
timestamp: {
type: 'string',
Expand Down Expand Up @@ -200,8 +198,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
return await Promise.all(histories.map(async history => ({
id: history.id,
type: history.type,
fromUser: await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me, { schema: 'UserDetailed' }),
toUser: await this.userEntityService.pack(history.toUser ?? history.toUserId, me, { schema: 'UserDetailed' }),
fromUser: history.fromUser
? await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me)
: { name: 'unknown user' },
toUser: history.toUser
? await this.userEntityService.pack(history.toUser ?? history.toUserId, me)
: { name: 'unknown user' },
timestamp: history.timestamp.toISOString(),
})));
});
Expand Down
187 changes: 114 additions & 73 deletions packages/frontend/src/pages/follow-history.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,41 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{items}">
<div class="mk-follow-requests _gaps">
<div v-for="history in items" :key="history.id" class="history _panel" :class="getActionConfig(history.type).className">
<MkAvatar class="avatar" :user="history[getActionConfig(history.type).avatarUser]" indicator link preview/>
<MkAvatar
v-if="hasUserProps(history[getActionConfig(history.type).avatarUser])"
class="avatar"
:user="history[getActionConfig(history.type).avatarUser]"
indicator
link
preview
/>
<div v-else class="unknown-user">
<span>?</span>
</div>
<div class="body">
<div class="content">
<div class="users">
<MkA v-user-preview="history.fromUser.id" class="name" :to="userPage(history.fromUser)">
<MkUserName :user="history.fromUser"/>
<MkA
v-if="hasUserProps(history.fromUser)"
v-user-preview="history.fromUser.id"
class="name"
:to="userPage(history.fromUser)"
>
<MkUserName v-if="hasUserProps(history.fromUser)" :user="history.fromUser"/>
<span v-else>unknown user</span>
</MkA>
<span v-else>unknown user</span>
<i class="ti ti-arrow-right"></i>
<MkA v-user-preview="history.toUser.id" class="name" :to="userPage(history.toUser)">
<MkUserName :user="history.toUser"/>
<MkA
v-if="hasUserProps(history.toUser)"
v-user-preview="history.toUser.id"
class="name"
:to="userPage(history.toUser)"
>
<MkUserName v-if="hasUserProps(history.toUser)" :user="history.toUser"/>
<span v-else>unknown user</span>
</MkA>
<span v-else>unknown user</span>
</div>
<p class="action">
<i :class="getActionConfig(history.type).icon"></i>
Expand Down Expand Up @@ -69,6 +93,10 @@ import { $i } from '@/account.js';
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
import { dateString } from '@/filters/date.js';

function hasUserProps(user: any): boolean {
return !!(user && (user.id || user.username || user.avatarUrl));
}

const ACTION_CONFIG = {
follow: {
icon: 'ti ti-user-plus',
Expand Down Expand Up @@ -215,93 +243,106 @@ definePageMetadata(() => ({
}));
</script>

<style lang="scss" scoped>
.mk-follow-requests {
> .history {
display: flex;
padding: 16px;
border: 2px solid transparent;
transition: border-color 0.2s ease;
<style lang="scss" scoped>
.unknown-user {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 8px;
background: var(--panel);
color: var(--fg);
font-size: 1.2em;
opacity: 0.5;
}

&.history--follow {
border-color: var(--MI_THEME-link);
}
.mk-follow-requests {
> .history {
display: flex;
padding: 16px;
border: 2px solid transparent;
transition: border-color 0.2s ease;

&.history--unfollow {
border-color: var(--MI_THEME-error);
}
&.history--follow {
border-color: var(--MI_THEME-link);
}

&.history--wasfollow {
border-color: var(--MI_THEME-success);
}
&.history--unfollow {
border-color: var(--MI_THEME-error);
}

&.history--wasunfollow {
border-color: var(--MI_THEME-error);
}
&.history--wasfollow {
border-color: var(--MI_THEME-success);
}

&.history--blocked {
border-color: var(--MI_THEME-warn);
}
&.history--wasunfollow {
border-color: var(--MI_THEME-error);
}

&.history--unblocked {
border-color: var(--MI_THEME-renote);
}
&.history--blocked {
border-color: var(--MI_THEME-warn);
}

&.history--wasblocked {
border-color: var(--MI_THEME-warn);
}
&.history--unblocked {
border-color: var(--MI_THEME-renote);
}

&.history--wasunblocked {
border-color: var(--MI_THEME-renote);
}
&.history--wasblocked {
border-color: var(--MI_THEME-warn);
}

> .avatar {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
width: 42px;
height: 42px;
border-radius: 8px;
}
&.history--wasunblocked {
border-color: var(--MI_THEME-renote);
}

> .body {
display: flex;
flex-direction: column;
flex: 1;
gap: 4px;

> .content {
> .users {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;

> .ti {
opacity: 0.7;
}
}
> .avatar {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
width: 42px;
height: 42px;
border-radius: 8px;
}

> .action {
margin: 4px 0 0 0;
opacity: 0.7;
font-size: 14px;
> .body {
display: flex;
flex-direction: column;
flex: 1;
gap: 4px;

> .content {
> .users {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;

> .ti {
margin-right: 4px;
}
> .ti {
opacity: 0.7;
}
}

> .info {
font-size: 0.9em;
> .action {
margin: 4px 0 0 0;
opacity: 0.7;
font-size: 14px;

> .timestamp {
margin-right: 8px;
> .ti {
margin-right: 4px;
}
}
}

> .info {
font-size: 0.9em;
opacity: 0.7;

> .timestamp {
margin-right: 8px;
}
}
}
}
</style>
}
</style>
Loading

0 comments on commit bbe197f

Please sign in to comment.