Fixed heart icon in other user's stashes. Syncing stashes to session on creation and removal.

This commit is contained in:
DebaucheryLibrarian 2024-04-02 02:50:24 +02:00
parent eb423b4886
commit 5f2b696b23
4 changed files with 61 additions and 19 deletions

View File

@ -28,19 +28,37 @@
</template> </template>
</VDropdown> </VDropdown>
<template v-if="pageStash?.user.id === user.id">
<Icon <Icon
v-if="itemStashes.some((itemStash) => itemStash.id === currentStash.id)" v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
:icon="currentStash.isPrimary ? 'heart7' : 'folder-heart'" :icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
class="heart favorited noselect" class="heart favorited noselect"
@click.native.stop="unstashItem(currentStash)" @click.native.stop="unstashItem(pageStash)"
/> />
<Icon <Icon
v-else v-else
:icon="currentStash.isPrimary ? 'heart8' : 'folder-heart'" :icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
class="heart noselect" class="heart noselect"
@click.native.stop="stashItem(currentStash)" @click.native.stop="stashItem(pageStash)"
/> />
</template>
<template v-else>
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
icon="heart7"
class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)"
/>
<Icon
v-else
icon="heart8"
class="heart noselect"
@click.native.stop="stashItem(user.primaryStash)"
/>
</template>
</div> </div>
</template> </template>
@ -71,7 +89,7 @@ const props = defineProps({
const emit = defineEmits(['stashed', 'unstashed']); const emit = defineEmits(['stashed', 'unstashed']);
const { user, pageProps } = inject('pageContext'); const { user, pageProps } = inject('pageContext');
const currentStash = pageProps.stash || user?.primaryStash; const pageStash = pageProps.stash;
const itemStashes = ref(props.item.stashes); const itemStashes = ref(props.item.stashes);

View File

@ -76,7 +76,7 @@
> >
<img <img
v-if="scene.channel.hasLogo" v-if="scene.channel.hasLogo"
:src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/network.png` : `/logos/${scene.network.slug}/${scene.channel.slug}.png`" :src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/thumbs/network.png` : `/logos/${scene.network.slug}/thumbs/${scene.channel.slug}.png`"
class="channel-logo entity-logo" class="channel-logo entity-logo"
> >
</Link> </Link>
@ -87,12 +87,12 @@
> >
by by
<Link <Link
:href="`/${scene.network.type}/${scene.network.slug}`" :href="`/${scene.network.type}/thumbs/${scene.network.slug}`"
class="network-link entity-link" class="network-link entity-link"
> >
<img <img
v-if="scene.network.hasLogo" v-if="scene.network.hasLogo"
:src="`/logos/${scene.network.slug}/network.png`" :src="`/logos/${scene.network.slug}/thumbs/network.png`"
class="network-logo entity-logo" class="network-logo entity-logo"
> >
</Link> </Link>
@ -371,11 +371,13 @@ const poster = computed(() => {
.meta { .meta {
display: flex; display: flex;
height: 3.25rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: stretch;
background: var(--grey-dark-40); background: var(--grey-dark-40);
border-radius: 0 0 .5rem .5rem; border-radius: 0 0 .5rem .5rem;
color: var(--text-light); color: var(--text-light);
overflow: hidden;
} }
.entity { .entity {
@ -386,18 +388,23 @@ const poster = computed(() => {
} }
.entity-link { .entity-link {
display: flex;
align-items: center;
box-sizing: border-box;
padding: .5rem 1rem; padding: .5rem 1rem;
height: 100%;
} }
.entity-logo { .entity-logo {
width: 10rem; max-width: 15rem;
max-height: 100%; max-height: 100%;
object-fit: contain;
} }
.network-container { .network-container {
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden;
} }
.date { .date {

View File

@ -2,6 +2,7 @@
import IPCIDR from 'ip-cidr'; import IPCIDR from 'ip-cidr';
import { login, signup } from '../auth.js'; import { login, signup } from '../auth.js';
import { fetchUser } from '../users.js';
function getIp(req) { function getIp(req) {
const ip = req.headers['x-forwarded-for']?.split(',')[0] || req.connection.remoteAddress; // See src/ws const ip = req.headers['x-forwarded-for']?.split(',')[0] || req.connection.remoteAddress; // See src/ws
@ -35,6 +36,15 @@ export async function setUserApi(req, res, next) {
next(); next();
} }
export async function updateSessionUser(req) {
const user = await fetchUser(req.session.user.id, {}, req.session.user);
req.session.user = user;
req.user = user;
req.user.ip = req.userIp;
}
export async function loginApi(req, res) { export async function loginApi(req, res) {
const user = await login(req.body, req.userIp); const user = await login(req.body, req.userIp);

View File

@ -10,20 +10,27 @@ import {
updateStash, updateStash,
} from '../stashes.js'; } from '../stashes.js';
import { updateSessionUser } from './auth.js';
export async function createStashApi(req, res) { export async function createStashApi(req, res) {
const stash = await createStash(req.body, req.session.user); const stash = await createStash(req.body, req.session.user);
await updateSessionUser(req);
res.send(stash); res.send(stash);
} }
export async function updateStashApi(req, res) { export async function updateStashApi(req, res) {
const stash = await updateStash(Number(req.params.stashId), req.body, req.session.user); const stash = await updateStash(Number(req.params.stashId), req.body, req.session.user);
await updateSessionUser(req);
res.send(stash); res.send(stash);
} }
export async function removeStashApi(req, res) { export async function removeStashApi(req, res) {
await removeStash(Number(req.params.stashId), req.session.user); await removeStash(Number(req.params.stashId), req.session.user);
await updateSessionUser(req);
res.status(204).send(); res.status(204).send();
} }