From 11f713e15920ba5d86064360baf322f08462cd5c Mon Sep 17 00:00:00 2001 From: Collin Henderson Date: Wed, 26 Jun 2024 16:48:49 -0400 Subject: [PATCH] defers star loading --- app/Data/DashboardData.php | 13 +++++++++---- app/Http/Controllers/UserSettingsController.php | 2 +- .../UpdateUserSettingsRequest.php | 2 +- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- .../dialogs/SettingsDialog/SettingsDialog.vue | 5 +++-- resources/components/sidebar/Sidebar.vue | 9 ++------- resources/components/stars/StarredRepo.vue | 2 -- resources/views/dashboard.vue | 6 +----- 9 files changed, 22 insertions(+), 27 deletions(-) rename app/{Data => Requests}/UpdateUserSettingsRequest.php (94%) diff --git a/app/Data/DashboardData.php b/app/Data/DashboardData.php index 14ddd052..d0d4dff2 100644 --- a/app/Data/DashboardData.php +++ b/app/Data/DashboardData.php @@ -5,10 +5,14 @@ namespace App\Data; use App\Models\User; +use Hybridly\Support\Deferred; use Illuminate\Support\Collection; use Spatie\LaravelData\Attributes\MapOutputName; use Spatie\LaravelData\Data; use Spatie\LaravelData\Mappers\CamelCaseMapper; +use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType; + +use function Hybridly\deferred; #[MapOutputName(CamelCaseMapper::class)] class DashboardData extends Data @@ -16,8 +20,9 @@ class DashboardData extends Data public function __construct( /** @var Collection */ public Collection $tags, + #[LiteralTypeScriptType('Array')] /** @var Collection */ - public Collection $stars, + public Deferred $stars, /** @var Collection */ public Collection $smart_filters, ) { @@ -26,9 +31,9 @@ public function __construct( public static function fromModel(User $user): self { return new self( - TagData::collect($user->tags()->withStarCount()->get()), - StarData::collect($user->stars()->with('tags')->get()), - SmartFilterData::collect($user->smartFilters), + tags: TagData::collect($user->tags()->withStarCount()->get()), + stars: deferred(fn () => StarData::collect($user->stars()->with('tags')->get())), + smart_filters: SmartFilterData::collect($user->smartFilters), ); } } diff --git a/app/Http/Controllers/UserSettingsController.php b/app/Http/Controllers/UserSettingsController.php index ad1bf6e5..e354acc8 100644 --- a/app/Http/Controllers/UserSettingsController.php +++ b/app/Http/Controllers/UserSettingsController.php @@ -4,7 +4,7 @@ namespace App\Http\Controllers; -use App\Data\UpdateUserSettingsRequest; +use App\Requests\UpdateUserSettingsRequest; class UserSettingsController extends Controller { diff --git a/app/Data/UpdateUserSettingsRequest.php b/app/Requests/UpdateUserSettingsRequest.php similarity index 94% rename from app/Data/UpdateUserSettingsRequest.php rename to app/Requests/UpdateUserSettingsRequest.php index 59ced011..d2dfe4e3 100644 --- a/app/Data/UpdateUserSettingsRequest.php +++ b/app/Requests/UpdateUserSettingsRequest.php @@ -2,7 +2,7 @@ declare(strict_types=1); -namespace App\Data; +namespace App\Requests; use App\Models\User; use Spatie\LaravelData\Attributes\Validation\In; diff --git a/package.json b/package.json index c6abd5dd..5361f04b 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "nanoid": "^3.1.30", "pinia": "^2.0.29", "sortablejs": "^1.15.0", - "sortablejs-vue3": "^1.2.2", + "sortablejs-vue3": "^1.2.11", "tiptap-markdown": "^0.8.9", "vue": "^3.3.4", "vue-confetti-explosion": "^1.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eae46ee6..a550819e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,8 +78,8 @@ dependencies: specifier: ^1.15.0 version: 1.15.0 sortablejs-vue3: - specifier: ^1.2.2 - version: 1.2.9(sortablejs@1.15.0)(vue@3.3.4) + specifier: ^1.2.11 + version: 1.2.11(sortablejs@1.15.0)(vue@3.3.4) tiptap-markdown: specifier: ^0.8.9 version: 0.8.9(@tiptap/core@2.2.4) @@ -3459,8 +3459,8 @@ packages: engines: {node: '>=8'} dev: true - /sortablejs-vue3@1.2.9(sortablejs@1.15.0)(vue@3.3.4): - resolution: {integrity: sha512-l0IIBdu+nRIwC2+KOkiavXw5vRfsn6MIPVSVSf7ItBevcuRZ4mVzC7dgnr/Hs/VPH2Q+nF2PYP3FsrnrG+7qCw==} + /sortablejs-vue3@1.2.11(sortablejs@1.15.0)(vue@3.3.4): + resolution: {integrity: sha512-oKOA6N7yu2ktmqYXPHlPTQWbe9G4v16mn5ewogb+Ybc9Bk1Y+MIURrpbgedEv7f9TS5Bptvh81HGjazh5FEyJw==} peerDependencies: sortablejs: ^1.15.0 vue: ^3.2.25 diff --git a/resources/components/shared/dialogs/SettingsDialog/SettingsDialog.vue b/resources/components/shared/dialogs/SettingsDialog/SettingsDialog.vue index 69e02c0d..75c4ebc0 100644 --- a/resources/components/shared/dialogs/SettingsDialog/SettingsDialog.vue +++ b/resources/components/shared/dialogs/SettingsDialog/SettingsDialog.vue @@ -9,7 +9,7 @@ import { useSettingsDialog } from '@/composables/useSettingsDialog' import { useUserStore } from '@/store/useUserStore' import { SettingsTab } from '@/types' import { DialogTitle } from '@headlessui/vue' -import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid' +import { CheckCircleIcon } from '@heroicons/vue/24/solid' import { router } from 'hybridly' import { computed, nextTick, ref } from 'vue' import ConfettiExplosion from 'vue-confetti-explosion' @@ -63,7 +63,8 @@ const deleteUser = async () => { } } -const isSponsor = ref(false) +const isSponsor = ref(user.value?.isSponsor ?? false) + const checkSponsorshipStatus = () => { isSponsor.value = true } diff --git a/resources/components/sidebar/Sidebar.vue b/resources/components/sidebar/Sidebar.vue index e881067b..65962f35 100644 --- a/resources/components/sidebar/Sidebar.vue +++ b/resources/components/sidebar/Sidebar.vue @@ -5,18 +5,13 @@ import SidebarSmartFilter from '@/components/sidebar/SidebarSmartFilter.vue' import SidebarTag from '@/components/sidebar/SidebarTag.vue' import SortTagsMenu from '@/components/sidebar/SortTagsMenu.vue' import { useAuth } from '@/composables/use-auth' -import { ToastType, useGlobalToast } from '@/composables/useGlobalToast' import { useSmartFilterDialog } from '@/composables/useSmartFilterDialog' import { useSponsorshipDialog } from '@/composables/useSponsorshipDialog' -import { SPONSORSHIP_REQUIRED_ERROR } from '@/constants' import { useSmartFiltersStore } from '@/store/useSmartFiltersStore' import { useStarsFilterStore } from '@/store/useStarsFilterStore' import { useStarsStore } from '@/store/useStarsStore' import { useTagsStore } from '@/store/useTagsStore' -import { Ability, Errors, StarDragDataTransferData } from '@/types' -import { getNavigationResponseErrors } from '@/utils' -// import { Errors } from '@inertiajs/core' -import { ArrowPathIcon, InboxIcon, PlusCircleIcon, StarIcon } from '@heroicons/vue/24/outline' +import { Ability, StarDragDataTransferData } from '@/types' import { router } from 'hybridly' import { Sortable } from 'sortablejs-vue3' import { computed, nextTick, reactive, ref } from 'vue' @@ -98,7 +93,7 @@ const doShowSmartFilterDialog = () => { const toggleSidebarGroupCollapsedState = async (key: CollapsibleSidebarSettingsKey) => { sidebarGroupCollapsedState[key] = !sidebarGroupCollapsedState[key] - const data: App.Data.UpdateUserSettingsRequest = { + const data: App.Requests.UpdateUserSettingsRequest = { enabled: sidebarGroupCollapsedState[key], key, } diff --git a/resources/components/stars/StarredRepo.vue b/resources/components/stars/StarredRepo.vue index eb76ff3b..6f1815d7 100644 --- a/resources/components/stars/StarredRepo.vue +++ b/resources/components/stars/StarredRepo.vue @@ -4,7 +4,6 @@ import { useAuth } from '@/composables/use-auth' import { useStarsStore } from '@/store/useStarsStore' import { useTagsStore } from '@/store/useTagsStore' import { GitHubRepo, GitHubRepoNode, StarMetaInput, TagEditorTag } from '@/types' -// import { GlobeAmericasIcon as GlobeIcon, ShareIcon, StarIcon } from '@heroicons/vue/16/solid' import pick from 'lodash/pick' import { computed, ref } from 'vue' @@ -220,7 +219,6 @@ const onDragEnd = () => { /> - Visit diff --git a/resources/views/dashboard.vue b/resources/views/dashboard.vue index 62bc2419..3f1814f0 100644 --- a/resources/views/dashboard.vue +++ b/resources/views/dashboard.vue @@ -30,11 +30,7 @@ import { useStarsStore } from '@/store/useStarsStore' import { useTagsStore } from '@/store/useTagsStore' import { useUserStore } from '@/store/useUserStore' import { GitHubRepo } from '@/types' -import { - ArrowLeftCircleIcon, - XCircleIcon as CloseIcon, - Bars3CenterLeftIcon as MenuIcon, -} from '@heroicons/vue/24/outline' +import { ArrowLeftCircleIcon, Bars3CenterLeftIcon as MenuIcon } from '@heroicons/vue/24/outline' import { tryOnMounted } from '@vueuse/core' import localForage from 'localforage' import { computed, nextTick, ref, watch } from 'vue'