Loading notifications async.

This commit is contained in:
DebaucheryLibrarian 2024-05-28 03:48:50 +02:00
parent 652c389840
commit 70882e0baf
5 changed files with 274 additions and 231 deletions

View File

@ -105,73 +105,10 @@
</button> </button>
<template #popper> <template #popper>
<div class="menu"> <Notifications
<div class="notifs-header"> @unseen="(count) => unseen = count"
<h4 class="notifs-heading">Notifications</h4> @add-alert="showAlertDialog = true"
<div
class="notifs-actions"
>
<Icon
icon="stack-check"
@click="markAllSeen"
/> />
<Icon
v-close-popper
icon="plus3"
@click="showAlertDialog = true"
/>
</div>
</div>
<ul class="notifs nolist">
<li
v-for="notif in notifications"
:key="notif.id"
class="notif"
:class="{ unseen: !notif.isSeen }"
@click="markSeen(notif)"
>
<a
:href="`/scene/${notif.scene.id}/${notif.scene.slug}`"
target="_blank"
class="notif-body notif-link nolink"
>
<span class="notif-details">
New
<span
v-if="notif.matchedTags.length > 0"
class="notif-tags"
>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</span>
scene
<span
v-if="notif.matchedActors.length > 0"
class="notif-actors"
>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</span>
<span
v-if="notif.matchedEntity"
class="notif-entities"
>for {{ notif.matchedEntity.name }}&nbsp;</span>
<span
v-if="notif.matchedExpressions.length > 0"
class="notif-entities"
>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</span>
</span>
<span class="notif-scene">
<span class="notif-date">{{ formatDate(notif.scene.effectiveDate, 'MMM d') }}</span>
<span class="notif-title ellipsis">{{ notif.scene.title }}</span>
</span>
</a>
</li>
</ul>
</div>
</template> </template>
</VDropdown> </VDropdown>
@ -269,10 +206,10 @@ import {
} from 'vue'; } from 'vue';
import navigate from '#/src/navigate.js'; import navigate from '#/src/navigate.js';
import { get, patch, del } from '#/src/api.js'; import { del } from '#/src/api.js';
import { formatDate } from '#/utils/format.js';
// import getPath from '#/src/get-path.js'; // import getPath from '#/src/get-path.js';
import Notifications from '#/components/header/notifications.vue';
import Settings from '#/components/settings/settings.vue'; import Settings from '#/components/settings/settings.vue';
import AlertDialog from '#/components/alerts/create.vue'; import AlertDialog from '#/components/alerts/create.vue';
@ -281,9 +218,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
const pageContext = inject('pageContext'); const pageContext = inject('pageContext');
const user = pageContext.user; const user = pageContext.user;
const notifications = ref(pageContext.notifications.notifications); const unseen = ref(pageContext.meta.unseenNotifications);
const unseen = ref(pageContext.notifications.unseen);
const done = ref(true);
const query = ref(pageContext.urlParsed.search.q || ''); const query = ref(pageContext.urlParsed.search.q || '');
const allowLogin = pageContext.env.allowLogin; const allowLogin = pageContext.env.allowLogin;
const searchFocused = ref(false); const searchFocused = ref(false);
@ -297,41 +232,6 @@ function search() {
navigate('/search', { q: query.value }, { redirect: true }); navigate('/search', { q: query.value }, { redirect: true });
} }
async function fetchNotifications() {
const res = await get(`/users/${user?.id}/notifications`);
notifications.value = res.notifications;
unseen.value = res.unseen;
}
async function markSeen(notif) {
if (notif.isSeen || !done.value) {
return;
}
done.value = false;
await patch(`/users/${user?.id}/notifications/${notif.id}`, {
seen: true,
});
await fetchNotifications();
done.value = true;
}
async function markAllSeen() {
done.value = false;
await patch(`/users/${user?.id}/notifications`, {
seen: true,
});
await fetchNotifications();
done.value = true;
}
async function logout() { async function logout() {
await del('/session'); await del('/session');
navigate('/login', null, { redirect: true }); navigate('/login', null, { redirect: true });
@ -514,119 +414,6 @@ function blurSearch(event) {
fill: var(--shadow); fill: var(--shadow);
} }
.notifs {
width: 30rem;
height: 20rem;
max-width: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.notifs-header {
display: flex;
justify-content: space-between;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--shadow-strong-10);
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
}
.notifs-heading {
font-size: 1rem;
padding: .75rem 1rem;
margin: 0;
font-weight: normal;
}
.notifs-actions {
align-items: stretch;
.icon {
height: 100%;
padding: 0 .75rem;
&:last-child {
padding-right: 1rem;
}
}
}
.notif {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-40);
}
&:before {
width: 2.5rem;
flex-shrink: 0;
content: '•';
color: var(--shadow-weak-20);
text-align: center;
}
&.unseen:before {
color: var(--primary);
}
&.unseen:hover:before {
content: '✓';
}
}
.notif-body {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
box-sizing: border-box;
font-size: .9rem;
}
.notif-details {
padding: .5rem 0 .15rem 0;
box-sizing: border-box;
color: var(--shadow-strong);
font-weight: bold;
}
.notif-link {
overflow: hidden;
}
.notif-scene {
display: flex;
padding: .15rem 0 .5rem 0;
}
.notif-date {
flex-shrink: 0;
color: var(--shadow-strong-10);
&:after {
content: '•';
padding: 0 .5rem;
color: var(--shadow-weak-20);
}
}
.notif-thumb {
width: 5rem;
height: 3rem;
object-fit: cover;
}
.login { .login {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -0,0 +1,245 @@
<template>
<div class="menu">
<div class="notifs-header">
<h4 class="notifs-heading">Notifications</h4>
<div
class="notifs-actions"
>
<Icon
icon="stack-check"
@click="markAllSeen"
/>
<Icon
v-close-popper
icon="plus3"
@click="emit('addAlert')"
/>
</div>
</div>
<ul class="notifs nolist">
<li
v-for="notif in notifications"
:key="notif.id"
class="notif"
:class="{ unseen: !notif.isSeen }"
@click="markSeen(notif)"
>
<a
:href="`/scene/${notif.scene.id}/${notif.scene.slug}`"
target="_blank"
class="notif-body notif-link nolink"
>
<span class="notif-details">
New
<span
v-if="notif.matchedTags.length > 0"
class="notif-tags"
>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</span>
scene
<span
v-if="notif.matchedActors.length > 0"
class="notif-actors"
>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</span>
<span
v-if="notif.matchedEntity"
class="notif-entities"
>for {{ notif.matchedEntity.name }}&nbsp;</span>
<span
v-if="notif.matchedExpressions.length > 0"
class="notif-entities"
>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</span>
</span>
<span class="notif-scene">
<span class="notif-date">{{ formatDate(notif.scene.effectiveDate, 'MMM d') }}</span>
<span class="notif-title ellipsis">{{ notif.scene.title }}</span>
</span>
</a>
</li>
</ul>
</div>
</template>
<script setup>
import {
ref,
defineEmits,
onMounted,
inject,
} from 'vue';
import { get, patch } from '#/src/api.js';
import { formatDate } from '#/utils/format.js';
const pageContext = inject('pageContext');
const user = pageContext.user;
const notifications = ref([]);
const done = ref(true);
const emit = defineEmits(['unseen', 'addAlert']);
async function fetchNotifications() {
const res = await get(`/users/${user?.id}/notifications`);
notifications.value = res.notifications;
emit('unseen', res.unseen);
}
async function markSeen(notif) {
if (notif.isSeen || !done.value) {
return;
}
done.value = false;
await patch(`/users/${user?.id}/notifications/${notif.id}`, {
seen: true,
});
await fetchNotifications();
done.value = true;
}
async function markAllSeen() {
done.value = false;
await patch(`/users/${user?.id}/notifications`, {
seen: true,
});
await fetchNotifications();
done.value = true;
}
onMounted(async () => {
await fetchNotifications();
});
</script>
<style scoped>
.notifs {
width: 30rem;
height: 20rem;
max-width: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.notifs-header {
display: flex;
justify-content: space-between;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--shadow-strong-10);
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
}
.notifs-heading {
font-size: 1rem;
padding: .75rem 1rem;
margin: 0;
font-weight: normal;
}
.notifs-actions {
align-items: stretch;
.icon {
height: 100%;
padding: 0 .75rem;
&:last-child {
padding-right: 1rem;
}
}
}
.notif {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-40);
}
&:before {
width: 2.5rem;
flex-shrink: 0;
content: '•';
color: var(--shadow-weak-20);
text-align: center;
}
&.unseen:before {
color: var(--primary);
}
&.unseen:hover:before {
content: '✓';
}
}
.notif-body {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
box-sizing: border-box;
font-size: .9rem;
}
.notif-details {
padding: .5rem 0 .15rem 0;
box-sizing: border-box;
color: var(--shadow-strong);
font-weight: bold;
}
.notif-link {
overflow: hidden;
}
.notif-scene {
display: flex;
padding: .15rem 0 .5rem 0;
}
.notif-date {
flex-shrink: 0;
color: var(--shadow-strong-10);
&:after {
content: '•';
padding: 0 .5rem;
color: var(--shadow-weak-20);
}
}
.notif-thumb {
width: 5rem;
height: 3rem;
object-fit: cover;
}
</style>

View File

@ -6,6 +6,6 @@ export default {
'urlParsed', 'urlParsed',
'env', 'env',
'user', 'user',
'notifications', 'meta',
], ],
}; };

View File

@ -145,12 +145,26 @@ export async function removeAlert(alertId, reqUser) {
.delete(); .delete();
} }
export async function fetchUnseenNotificationsCount(reqUser) {
if (!reqUser) {
return null;
}
const rawUnseen = await knex('notifications')
.select(knex.raw('count(id)'))
.where('user_id', reqUser.id)
.where('seen', false)
.first();
return Number(rawUnseen.count);
}
export async function fetchNotifications(reqUser, options = {}) { export async function fetchNotifications(reqUser, options = {}) {
if (!reqUser) { if (!reqUser) {
return []; return [];
} }
const [notifications, rawUnseen] = await Promise.all([ const [notifications, unseen] = await Promise.all([
knex('notifications') knex('notifications')
.select( .select(
'notifications.*', 'notifications.*',
@ -169,15 +183,10 @@ export async function fetchNotifications(reqUser, options = {}) {
.limit(options.limit) .limit(options.limit)
.groupBy('notifications.id', 'alerts.id') .groupBy('notifications.id', 'alerts.id')
.orderBy('created_at', 'desc'), .orderBy('created_at', 'desc'),
knex('notifications') fetchUnseenNotificationsCount(reqUser),
.select(knex.raw('count(id)'))
.where('user_id', reqUser.id)
.where('seen', false)
.first(),
]); ]);
const scenes = await fetchScenesById(notifications.map((notification) => notification.scene_id)); const scenes = await fetchScenesById(notifications.map((notification) => notification.scene_id));
const unseen = Number(rawUnseen.count);
const curatedNotifications = notifications.map((notification) => { const curatedNotifications = notifications.map((notification) => {
const scene = scenes.find((sceneX) => sceneX.id === notification.scene_id); const scene = scenes.find((sceneX) => sceneX.id === notification.scene_id);

View File

@ -52,7 +52,7 @@ import {
updateNotificationsApi, updateNotificationsApi,
} from './alerts.js'; } from './alerts.js';
import { fetchNotifications } from '../alerts.js'; import { fetchUnseenNotificationsCount } from '../alerts.js';
import initLogger from '../logger.js'; import initLogger from '../logger.js';
@ -168,7 +168,7 @@ export default async function initServer() {
router.get('/api/tags', fetchTagsApi); router.get('/api/tags', fetchTagsApi);
router.get('*', async (req, res, next) => { router.get('*', async (req, res, next) => {
const notifications = await fetchNotifications(req.user, { limit: 20 }); const unseenNotifications = await fetchUnseenNotificationsCount(req.user);
const pageContextInit = { const pageContextInit = {
urlOriginal: req.originalUrl, urlOriginal: req.originalUrl,
@ -191,7 +191,9 @@ export default async function initServer() {
maxAggregateSize: config.database.manticore.maxAggregateSize, maxAggregateSize: config.database.manticore.maxAggregateSize,
media: config.media, media: config.media,
}, },
notifications, meta: {
unseenNotifications,
},
}; };
const pageContext = await renderPage(pageContextInit); const pageContext = await renderPage(pageContextInit);