diff --git a/package-lock.json b/package-lock.json index 58fca33b..d4eea9f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1228,20 +1228,20 @@ } }, "node_modules/@tanstack/query-core": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.33.0.tgz", - "integrity": "sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==", + "version": "4.35.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.0.tgz", + "integrity": "sha512-4GMcKQuLZQi6RFBiBZNsLhl+hQGYScRZ5ZoVq8QAzfqz9M7vcGin/2YdSESwl7WaV+Qzsb5CZOAbMBes4lNTnA==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/query-persist-client-core": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.33.0.tgz", - "integrity": "sha512-3P16+2JjcUU5CHi10jJuwd0ZQYvQtSuzLvCUCjVuAnj3GZjfSso1v8t6WAObAr9RPuIC6vDXeOQ3mr07EF/NxQ==", + "version": "4.35.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.35.0.tgz", + "integrity": "sha512-un1zoD6D80lrJ1x1jtPzhm1xrdPbhG9unf4y0Tl58/eCZz1VIjw+rR4hG+kn/hfzxX/kY4AMvtwMPxtt3HiAdg==", "dependencies": { - "@tanstack/query-core": "4.33.0" + "@tanstack/query-core": "4.35.0" }, "funding": { "type": "github", @@ -1249,11 +1249,11 @@ } }, "node_modules/@tanstack/query-sync-storage-persister": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.33.0.tgz", - "integrity": "sha512-V6igMcdEOXPRpvmNFQ6I/iJaw9NhxWy7x8PWamm2cgSsLi8bHaDvUVuWkZm+ikI47QjoCUk7qll/82JYLaH+pw==", + "version": "4.35.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.35.0.tgz", + "integrity": "sha512-idNCZ7GF401X/NUHS0G0VQNhB36h1VTPobWBJYAEGkz6uvS8CpVuruGyvmVPuR61SE2k94g/Qc4jWQMcDeFM+g==", "dependencies": { - "@tanstack/query-persist-client-core": "4.33.0" + "@tanstack/query-persist-client-core": "4.35.0" }, "funding": { "type": "github", @@ -1261,12 +1261,12 @@ } }, "node_modules/@tanstack/vue-query": { - "version": "4.34.0", - "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-4.34.0.tgz", - "integrity": "sha512-jXqvP5z+9mAuUVELH4A9j+KYhu84IpBFDGo60Z+9GV/td+CeDBLRoijBEixBg87SEilCCpJugc0yx2MOCwlwew==", + "version": "4.35.2", + "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-4.35.2.tgz", + "integrity": "sha512-zaEbtALVuYd+8phh7toDaXMCjS5AH13uPoU46CdiszX5QVRQYOhWMnAkW4jxLGbmLSNvdvYXvZsQG5TrwCM7zg==", "dependencies": { "@tanstack/match-sorter-utils": "^8.1.1", - "@tanstack/query-core": "4.33.0", + "@tanstack/query-core": "4.35.2", "@vue/devtools-api": "^6.4.2", "vue-demi": "^0.13.11" }, @@ -1284,6 +1284,15 @@ } } }, + "node_modules/@tanstack/vue-query/node_modules/@tanstack/query-core": { + "version": "4.35.2", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.2.tgz", + "integrity": "sha512-IJYT+VVx0SGe3QWqL6XUgzEY1re3szCdGMSGD1VRdEej6Uq3O+qELR2Ypw1/a4bUYKXiDUpK4BAcBynWb6nbkQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@tanstack/vue-query/node_modules/vue-demi": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", @@ -7429,9 +7438,9 @@ "@holochain-open-dev/profiles": "^0.16.1", "@holochain/client": "^0.15.0", "@shoelace-style/shoelace": "^2.4.0", - "@tanstack/query-persist-client-core": "^4.33.0", - "@tanstack/query-sync-storage-persister": "^4.33.0", - "@tanstack/vue-query": "^4.34.0", + "@tanstack/query-persist-client-core": "^4.35.0", + "@tanstack/query-sync-storage-persister": "^4.35.0", + "@tanstack/vue-query": "^4.35.2", "@tauri-apps/api": "^1.4.0", "async-retry": "^1.3.3", "dayjs": "^1.11.7", diff --git a/ui/components.d.ts b/ui/components.d.ts index ae4c9bc4..90d43296 100644 --- a/ui/components.d.ts +++ b/ui/components.d.ts @@ -48,6 +48,7 @@ declare module 'vue' { Dialogs: typeof import('./src/components/Dialogs.vue')['default'] EditAgentProfileDialog: typeof import('./src/components/EditAgentProfileDialog.vue')['default'] FollowersListDialog: typeof import('./src/components/FollowersListDialog.vue')['default'] + RandomMewWithTagList: typeof import('./src/components/RandomMewWithTagList.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SearchEverythingDialog: typeof import('./src/components/SearchEverythingDialog.vue')['default'] diff --git a/ui/package.json b/ui/package.json index ff19cd55..a4509017 100644 --- a/ui/package.json +++ b/ui/package.json @@ -20,9 +20,9 @@ "@holochain-open-dev/profiles": "^0.16.1", "@holochain/client": "^0.15.0", "@shoelace-style/shoelace": "^2.4.0", - "@tanstack/query-persist-client-core": "^4.33.0", - "@tanstack/query-sync-storage-persister": "^4.33.0", - "@tanstack/vue-query": "^4.34.0", + "@tanstack/query-persist-client-core": "^4.35.0", + "@tanstack/query-sync-storage-persister": "^4.35.0", + "@tanstack/vue-query": "^4.35.2", "@tauri-apps/api": "^1.4.0", "async-retry": "^1.3.3", "dayjs": "^1.11.7", diff --git a/ui/src/components/AgentProfileDetail.vue b/ui/src/components/AgentProfileDetail.vue index 620a84d6..4623c5cb 100644 --- a/ui/src/components/AgentProfileDetail.vue +++ b/ui/src/components/AgentProfileDetail.vue @@ -1,21 +1,20 @@ diff --git a/ui/src/components/BaseAgentProfile.vue b/ui/src/components/BaseAgentProfile.vue index 81b90a2e..82bcade3 100644 --- a/ui/src/components/BaseAgentProfile.vue +++ b/ui/src/components/BaseAgentProfile.vue @@ -1,7 +1,6 @@ diff --git a/ui/src/components/BaseAgentProfileNameLarge.vue b/ui/src/components/BaseAgentProfileNameLarge.vue index 94e69c1a..1151360f 100644 --- a/ui/src/components/BaseAgentProfileNameLarge.vue +++ b/ui/src/components/BaseAgentProfileNameLarge.vue @@ -10,7 +10,7 @@
@{{ profile.nickname }}
- {{ encodeHashToBase64(agentPubKey).slice(0, 8) }} + {{ encodeHashToBase64(agentPubKey) }}
diff --git a/ui/src/components/BaseNotification.vue b/ui/src/components/BaseNotification.vue index c2b29147..8718fdb1 100644 --- a/ui/src/components/BaseNotification.vue +++ b/ui/src/components/BaseNotification.vue @@ -24,7 +24,7 @@ " class="flex justify-between items-center py-2 w-full space-x-2" > -
+
; const { showMessage, showError } = useToasts(); const showCreateProfileDialog = ref(false); +const agentPubKeyB64 = computed(() => encodeHashToBase64(client.myPubKey)); const fetchMyFollowing = async (): Promise => client.callZome({ @@ -72,12 +73,12 @@ const { queryKey: [ "follows", "get_creators_for_follower", - encodeHashToBase64(client.myPubKey), + agentPubKeyB64, "isFollowing", ], queryFn: fetchMyFollowing, }); -watch(errorMyFollowing, showError); +watch(errorMyFollowing, console.error); watch(props, () => { refetchMyFollowing(); }); @@ -90,37 +91,45 @@ const toggleFollow = async () => { showCreateProfileDialog.value = false; try { - const [profile] = await Promise.all([ - profilesStore.client.getAgentProfile(props.agentPubKey), - isFollowing.value - ? await client.callZome({ - role_name: "mewsfeed", - zome_name: "follows", - fn_name: "unfollow", - payload: props.agentPubKey, - }) - : await client.callZome({ - role_name: "mewsfeed", - zome_name: "follows", - fn_name: "follow", - payload: props.agentPubKey, - }), - ]); + isFollowing.value + ? await client.callZome({ + role_name: "mewsfeed", + zome_name: "follows", + fn_name: "unfollow", + payload: props.agentPubKey, + }) + : await client.callZome({ + role_name: "mewsfeed", + zome_name: "follows", + fn_name: "follow", + payload: props.agentPubKey, + }); await refetchMyFollowing(); if (isFollowing.value) { setHomeRedirect(false); } + emit("toggle-follow", isFollowing.value); + showSuccessMessage(); + } catch (error) { + showError(error); + } +}; - const name = `${profile?.fields[PROFILE_FIELDS.DISPLAY_NAME]} (@${ +const showSuccessMessage = async () => { + let name; + try { + const profile = await profilesStore.client.getAgentProfile( + props.agentPubKey + ); + name = `${profile?.fields[PROFILE_FIELDS.DISPLAY_NAME]} (@${ profile?.nickname })`; - const message = isFollowing.value - ? `Followed ${name}` - : `Unfollowed ${name}`; - showMessage(message); - emit("toggle-follow", isFollowing.value); } catch (error) { - showError(error); + console.error(error); + name = encodeHashToBase64(props.agentPubKey); } + + const message = isFollowing.value ? `Followed ${name}` : `Unfollowed ${name}`; + showMessage(message); }; diff --git a/ui/src/components/CreateProfileIfNotFoundDialog.vue b/ui/src/components/CreateProfileIfNotFoundDialog.vue index 63d1ec81..240dc05a 100644 --- a/ui/src/components/CreateProfileIfNotFoundDialog.vue +++ b/ui/src/components/CreateProfileIfNotFoundDialog.vue @@ -38,7 +38,6 @@ defineProps<{ const baseEditAgentProfileFormRef = ref(); const createProfile = async (profile: Profile) => { - console.log("createPRofile", profile); await profilesStore.client.createProfile(profile); await profilesStore.myProfile.reload(); diff --git a/ui/src/components/CreatorsListDialog.vue b/ui/src/components/CreatorsListDialog.vue index 439902f7..cf97f390 100644 --- a/ui/src/components/CreatorsListDialog.vue +++ b/ui/src/components/CreatorsListDialog.vue @@ -38,7 +38,7 @@ diff --git a/ui/src/components/FollowersListDialog.vue b/ui/src/components/FollowersListDialog.vue index b6ff5593..294d136c 100644 --- a/ui/src/components/FollowersListDialog.vue +++ b/ui/src/components/FollowersListDialog.vue @@ -38,7 +38,7 @@ diff --git a/ui/src/components/RandomMewWithTagList.vue b/ui/src/components/RandomMewWithTagList.vue new file mode 100644 index 00000000..e239d74e --- /dev/null +++ b/ui/src/components/RandomMewWithTagList.vue @@ -0,0 +1,108 @@ + + + diff --git a/ui/src/layouts/MainLayout.vue b/ui/src/layouts/MainLayout.vue index a7a14708..eb335f54 100644 --- a/ui/src/layouts/MainLayout.vue +++ b/ui/src/layouts/MainLayout.vue @@ -119,7 +119,7 @@ import SearchEverythingDialog from "@/components/SearchEverythingDialog.vue"; import { ROUTES } from "@/router"; import { FeedMew, MewTypeName } from "@/types/types"; import { AppAgentClient, encodeHashToBase64 } from "@holochain/client"; -import { ComputedRef, inject, ref, watch } from "vue"; +import { ComputedRef, computed, inject, ref, watch } from "vue"; import { useRouter, useRoute } from "vue-router"; import { makeUseNotificationsReadStore } from "@/stores/notificationsRead"; import { setHomeRedirect } from "@/utils/homeRedirect"; @@ -163,6 +163,7 @@ const { closeLightbox } = useLightboxStore(); const showSearchDialog = ref(false); const forceReloadRouterViewKey = ref(0); +const myPubKeyB64 = computed(() => encodeHashToBase64(client.myPubKey)); const onCreateMew = () => { closeCreateMewDialog(); @@ -196,7 +197,7 @@ const { data: mostRecentMew } = useQuery({ queryKey: [ "mews", "get_followed_creators_mews_with_context", - encodeHashToBase64(client.myPubKey), + myPubKeyB64, { page: { limit: 1 } }, ], queryFn: fetchMostRecentMew, @@ -220,7 +221,7 @@ const fetchNotifications = async () => { }; useInfiniteQuery({ - queryKey: ["mews", "count_notifications_for_agent", client.myPubKey], + queryKey: ["mews", "count_notifications_for_agent", myPubKeyB64], queryFn: fetchNotifications, refetchInterval: 1000 * 30, // 30 seconds refetchIntervalInBackground: true, diff --git a/ui/src/main.ts b/ui/src/main.ts index bcf063dc..9756a6a5 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -15,7 +15,6 @@ import App from "./App.vue"; import { router } from "./router"; import piniaPluginPersistedState from "pinia-plugin-persistedstate"; import { - QueryClient, VueQueryPlugin, type VueQueryPluginOptions, } from "@tanstack/vue-query"; @@ -47,7 +46,7 @@ const vueQueryOptions: VueQueryPluginOptions = { defaultOptions: { queries: { cacheTime: 1000 * 60 * 15, // 15 minutes - staleTime: 0, + staleTime: 100, refetchOnMount: "always", refetchOnWindowFocus: "always", refetchOnReconnect: "always", @@ -55,8 +54,10 @@ const vueQueryOptions: VueQueryPluginOptions = { }, }, }, - clientPersister: (queryClient: QueryClient) => { + clientPersister: (queryClient) => { return persistQueryClient({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore queryClient, persister: createSyncStoragePersister({ storage: localStorage, diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue index 6c5fa74e..114be5e3 100644 --- a/ui/src/pages/AgentProfile.vue +++ b/ui/src/pages/AgentProfile.vue @@ -2,8 +2,8 @@
diff --git a/ui/src/pages/MewYarn.vue b/ui/src/pages/MewYarn.vue index dc14faea..3847c959 100644 --- a/ui/src/pages/MewYarn.vue +++ b/ui/src/pages/MewYarn.vue @@ -80,6 +80,7 @@ const pageLimit = 10; const actionHash = computed(() => decodeHashFromBase64(route.params.actionHash as string) ); +const actionHashB64 = computed(() => route.params.actionHash); const hasActionHash = computed(() => actionHash.value !== undefined); const fetchMew = () => @@ -96,7 +97,7 @@ const { isInitialLoading: isInitialLoadingMew, refetch: refetchMew, } = useQuery({ - queryKey: ["mews", "get_mew_with_context", route.params.actionHash as string], + queryKey: ["mews", "get_mew_with_context", actionHashB64], queryFn: fetchMew, enabled: hasActionHash, refetchInterval: 1000 * 60 * 2, // 2 minutes @@ -128,11 +129,7 @@ const { isInitialLoading: isInitialLoadingReplies, refetch: refetchReplies, } = useInfiniteQuery({ - queryKey: [ - "mews", - "get_responses_for_mew_with_context", - route.params.actionHash as string, - ], + queryKey: ["mews", "get_responses_for_mew_with_context", actionHashB64], queryFn: fetchReplies, enabled: hasMew, getNextPageParam: (lastPage) => { diff --git a/ui/src/pages/MewsFeed.vue b/ui/src/pages/MewsFeed.vue index 2a7de210..c04a93d3 100644 --- a/ui/src/pages/MewsFeed.vue +++ b/ui/src/pages/MewsFeed.vue @@ -55,7 +55,7 @@