cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): automatically update user info (#5647)

Browse Source 
* use svelte store

* fix: websocket error when not authenticated

* more routes
This commit is contained in:
martin
2023-12-12 17:35:28 +01:00
committed by GitHub
parent cbca69841a
commit c602eaea4a
54 changed files with 114 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/albums/+page.svelte
+2 -6
View File
@@ -245,7 +245,7 @@
</FullScreenModal>
{/if}
<UserPageLayout user={data.user} title={data.meta.title}>
<UserPageLayout title={data.meta.title}>
<div class="flex place-items-center gap-2" slot="buttons">
<LinkButton on:click={handleCreateAlbum}>
<div class="flex place-items-center gap-2 text-sm">
@@ -291,11 +291,7 @@
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
{#each $albums as album (album.id)}
<a data-sveltekit-preload-data="hover" href="{AppRoute.ALBUMS}/{album.id}" animate:flip={{ duration: 200 }}>
<AlbumCard
{album}
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
user={data.user}
/>
<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} />
</a>
{/each}
</div>
web/src/routes/(user)/albums/+page.ts
+1 -2
View File
@@ -3,11 +3,10 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
const { data: albums } = await api.albumApi.getAllAlbums();
return {
user,
albums,
meta: {
title: 'Albums',
web/src/routes/(user)/albums/[albumId]/+page.svelte
+3 -3
View File
@@ -109,8 +109,8 @@
const timelineInteractionStore = createAssetInteractionStore();
const { selectedAssets: timelineSelected } = timelineInteractionStore;
$: isOwned = data.user.id == album.ownerId;
$: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === data.user.id);
$: isOwned = $user.id == album.ownerId;
$: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === $user.id);
$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
$: {
if (isShowActivity) {
@@ -343,7 +343,7 @@
};
const handleRemoveUser = async (userId: string) => {
if (userId == 'me' || userId === data.user.id) {
if (userId == 'me' || userId === $user.id) {
goto(backUrl);
return;
}
web/src/routes/(user)/albums/[albumId]/+page.ts
+1 -2
View File
@@ -3,12 +3,11 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async ({ params }) => {
const user = await authenticate();
await authenticate();
const { data: album } = await api.albumApi.getAlbumInfo({ id: params.albumId, withoutAssets: true });
return {
album,
user,
meta: {
title: album.albumName,
},
web/src/routes/(user)/archive/+page.svelte
+1 -1
View File
@@ -44,7 +44,7 @@
</AssetSelectControlBar>
{/if}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
<EmptyPlaceholder
text="Archive photos and videos to hide them from your Photos view"
web/src/routes/(user)/archive/+page.ts
+1 -2
View File
@@ -2,10 +2,9 @@ import { authenticate } from '$lib/utils/auth';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
return {
user,
meta: {
title: 'Archive',
},
web/src/routes/(user)/explore/+page.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
<svelte:window bind:innerWidth={screenSize} />
<UserPageLayout user={data.user} title={data.meta.title}>
<UserPageLayout title={data.meta.title}>
{#if hasPeople}
<div class="mb-6 mt-2">
<div class="flex justify-between">
web/src/routes/(user)/explore/+page.ts
+1 -2
View File
@@ -3,11 +3,10 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
const { data: items } = await api.searchApi.getExploreData();
const { data: response } = await api.personApi.getAllPeople({ withHidden: false });
return {
user,
items,
response,
meta: {
web/src/routes/(user)/favorites/+page.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
</AssetSelectControlBar>
{/if}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
<EmptyPlaceholder
text="Add favorites to quickly find your best pictures and videos"
web/src/routes/(user)/favorites/+page.ts
+1 -2
View File
@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
return {
user,
meta: {
title: 'Favorites',
},
web/src/routes/(user)/map/+page.svelte
+1 -1
View File
@@ -101,7 +101,7 @@
</script>
{#if $featureFlags.loaded && $featureFlags.map}
<UserPageLayout user={data.user} title={data.meta.title}>
<UserPageLayout title={data.meta.title}>
<div class="isolate h-full w-full">
<Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
</div></UserPageLayout
web/src/routes/(user)/map/+page.ts
+1 -2
View File
@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
return {
user,
meta: {
title: 'Map',
},
web/src/routes/(user)/partners/[userId]/+page.ts
+1 -2
View File
@@ -3,12 +3,11 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async ({ params }) => {
const user = await authenticate();
await authenticate();
const { data: partner } = await api.userApi.getUserById({ id: params.userId });
return {
user,
partner,
meta: {
title: 'Partner',
web/src/routes/(user)/people/+page.svelte
+1 -1
View File
@@ -357,7 +357,7 @@
</FullScreenModal>
{/if}
<UserPageLayout user={data.user} title="People">
<UserPageLayout title="People">
<svelte:fragment slot="buttons">
{#if countTotalPeople > 0}
<IconButton on:click={() => (selectHidden = !selectHidden)}>
web/src/routes/(user)/people/+page.ts
+1 -2
View File
@@ -3,11 +3,10 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
const { data: people } = await api.personApi.getAllPeople({ withHidden: true });
return {
user,
people,
meta: {
title: 'People',
web/src/routes/(user)/people/[personId]/+page.ts
+1 -2
View File
@@ -3,13 +3,12 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async ({ params }) => {
const user = await authenticate();
await authenticate();
const { data: person } = await api.personApi.getPerson({ id: params.personId });
const { data: statistics } = await api.personApi.getPersonStatistics({ id: params.personId });
return {
user,
person,
statistics,
meta: {
web/src/routes/(user)/photos/+page.svelte
+4 -6
View File
@@ -20,12 +20,10 @@
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import type { PageData } from './$types';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { mdiDotsVertical, mdiPlus } from '@mdi/js';
import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
export let data: PageData;
import { user } from '$lib/stores/user.store';
let { isViewing: showAssetViewer } = assetViewingStore;
let handleEscapeKey = false;
@@ -52,7 +50,7 @@
{#if $isMultiSelectState}
<AssetSelectControlBar
ownerId={data.user.id}
ownerId={$user.id}
assets={$selectedAssets}
clearSelect={() => assetInteractionStore.clearMultiselect()}
>
@@ -80,7 +78,7 @@
</AssetSelectControlBar>
{/if}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
<UserPageLayout hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
<AssetGrid
{assetStore}
{assetInteractionStore}
@@ -88,7 +86,7 @@
on:escape={handleEscape}
withStacked
>
{#if data.user.memoriesEnabled}
{#if $user.memoriesEnabled}
<MemoryLane />
{/if}
<EmptyPlaceholder
web/src/routes/(user)/photos/+page.ts
+1 -2
View File
@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
return {
user,
meta: {
title: 'Photos',
},
web/src/routes/(user)/search/+page.svelte
+1 -1
View File
@@ -142,7 +142,7 @@
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
{#each albums as album (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
<AlbumCard {album} user={data.user} isSharingView={false} showItemCount={false} showContextMenu={false} />
<AlbumCard {album} isSharingView={false} showItemCount={false} showContextMenu={false} />
</a>
{/each}
</div>
web/src/routes/(user)/search/+page.ts
+1 -2
View File
@@ -3,13 +3,12 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async (data) => {
const user = await authenticate();
await authenticate();
const url = new URL(data.url.href);
const term = url.searchParams.get('q') || url.searchParams.get('query') || undefined;
const { data: results } = await api.searchApi.search({}, { params: url.searchParams });
return {
user,
term,
results,
meta: {
web/src/routes/(user)/share/[key]/+page.svelte
+3 -3
View File
@@ -8,12 +8,12 @@
import { api, SharedLinkType } from '@api';
import type { PageData } from './$types';
import { handleError } from '$lib/utils/handle-error';
import { user } from '$lib/stores/user.store';
export let data: PageData;
let { sharedLink, passwordRequired, sharedLinkKey: key } = data;
let { title, description } = data.meta;
let isOwned = data.user ? data.user.id === sharedLink?.userId : false;
let isOwned = $user ? $user.id === sharedLink?.userId : false;
let password = '';
const handlePasswordSubmit = async () => {
@@ -21,7 +21,7 @@
const result = await api.sharedLinkApi.getMySharedLink({ password, key });
passwordRequired = false;
sharedLink = result.data;
isOwned = data.user ? data.user.id === sharedLink.userId : false;
isOwned = $user ? $user.id === sharedLink.userId : false;
title = (sharedLink.album ? sharedLink.album.albumName : 'Public Share') + ' - Immich';
description = sharedLink.description || `${sharedLink.assets.length} shared photos & videos.`;
} catch (error) {
web/src/routes/(user)/share/[key]/+page.ts
+1 -2
View File
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
export const load = (async ({ params }) => {
const { key } = params;
const user = await getAuthUser();
await getAuthUser();
try {
const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
@@ -15,7 +15,6 @@ export const load = (async ({ params }) => {
const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
return {
user,
sharedLink,
meta: {
title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
web/src/routes/(user)/sharing/+page.svelte
+2 -2
View File
@@ -39,7 +39,7 @@
};
</script>
<UserPageLayout user={data.user} title={data.meta.title}>
<UserPageLayout title={data.meta.title}>
<div class="flex" slot="buttons">
<LinkButton on:click={createSharedAlbum}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
@@ -96,7 +96,7 @@
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
{#each data.sharedAlbums as album (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
<AlbumCard {album} user={data.user} isSharingView showContextMenu={false} />
<AlbumCard {album} isSharingView showContextMenu={false} />
</a>
{/each}
</div>
web/src/routes/(user)/sharing/+page.ts
+1 -2
View File
@@ -3,12 +3,11 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
const { data: sharedAlbums } = await api.albumApi.getAllAlbums({ shared: true });
const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-with' });
return {
user,
sharedAlbums,
partners,
meta: {
web/src/routes/(user)/sharing/sharedlinks/+page.ts
+1 -2
View File
@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
return {
user,
meta: {
title: 'Shared Links',
},
web/src/routes/(user)/trash/+page.svelte
+1 -1
View File
@@ -71,7 +71,7 @@
{/if}
{#if $featureFlags.loaded && $featureFlags.trash}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<div class="flex place-items-center gap-2" slot="buttons">
<LinkButton on:click={handleRestoreTrash}>
<div class="flex place-items-center gap-2 text-sm">
web/src/routes/(user)/trash/+page.ts
+1 -2
View File
@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
return {
user,
meta: {
title: 'Trash',
},
web/src/routes/(user)/user-settings/+page.svelte
+2 -2
View File
@@ -6,10 +6,10 @@
export let data: PageData;
</script>
<UserPageLayout user={data.user} title={data.meta.title}>
<UserPageLayout title={data.meta.title}>
<section class="mx-4 flex place-content-center">
<div class="w-full max-w-3xl">
<UserSettingsList user={data.user} keys={data.keys} devices={data.devices} />
<UserSettingsList keys={data.keys} devices={data.devices} />
</div>
</section>
</UserPageLayout>
web/src/routes/(user)/user-settings/+page.ts
+1 -2
View File
@@ -3,13 +3,12 @@ import { api } from '@api';
import type { PageLoad } from './$types';
export const load = (async () => {
const user = await authenticate();
await authenticate();
const { data: keys } = await api.keyApi.getApiKeys();
const { data: devices } = await api.authenticationApi.getAuthDevices();
return {
user,
keys,
devices,
meta: {