You've already forked AstralRinth
forked from didirus/AstralRinth
feat: start of cross platform page system (#4731)
* feat: abstract api-client DI into ui package * feat: cross platform page system * feat: tanstack as cross platform useAsyncData * feat: archon servers routes + labrinth billing routes * fix: dont use partial * feat: migrate server list page to tanstack + api-client + re-enabled broken features! * feat: migrate servers manage page to api-client before page system * feat: migrate manage page to page system * fix: type issues * fix: upgrade wrapper bugs * refactor: move state types into api-client * feat: disable financial stuff on app frontend * feat: finalize cross platform page system for now * fix: lint * fix: build issues * feat: remove papaparse * fix: lint * fix: interface error --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Calum H.
@@ -3,6 +3,7 @@ import { CheckIcon } from '@modrinth/assets'
|
||||
import {
|
||||
Admonition,
|
||||
commonProjectSettingsMessages,
|
||||
injectModrinthClient,
|
||||
injectNotificationManager,
|
||||
injectProjectPageContext,
|
||||
ProjectSettingsEnvSelector,
|
||||
@@ -11,8 +12,6 @@ import {
|
||||
} from '@modrinth/ui'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
|
||||
import { injectModrinthClient } from '~/providers/api-client.ts'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const { currentMember, projectV2, projectV3, refreshProject } = injectProjectPageContext()
|
||||
@@ -28,7 +27,7 @@ const supportsEnvironment = computed(() =>
|
||||
const needsToVerify = computed(
|
||||
() =>
|
||||
projectV3.value.side_types_migration_review_status === 'pending' &&
|
||||
projectV3.value.environment?.length > 0 &&
|
||||
(projectV3.value.environment?.length ?? 0) > 0 &&
|
||||
projectV3.value.environment?.[0] !== 'unknown' &&
|
||||
supportsEnvironment.value,
|
||||
)
|
||||
@@ -157,12 +156,12 @@ const messages = defineMessages({
|
||||
/>
|
||||
<ProjectSettingsEnvSelector
|
||||
v-model="current.environment"
|
||||
:disabled="!hasPermission || projectV3?.environment?.length > 1"
|
||||
:disabled="!hasPermission || (projectV3?.environment?.length ?? 0) > 1"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<UnsavedChangesPopup
|
||||
v-if="supportsEnvironment && hasPermission && projectV3?.environment?.length <= 1"
|
||||
v-if="supportsEnvironment && hasPermission && (projectV3?.environment?.length ?? 0) <= 1"
|
||||
:original="saved"
|
||||
:modified="current"
|
||||
:saving="saving"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
IconSelect,
|
||||
injectModrinthClient,
|
||||
injectNotificationManager,
|
||||
injectProjectPageContext,
|
||||
SettingsLabel,
|
||||
@@ -9,8 +10,6 @@ import {
|
||||
} from '@modrinth/ui'
|
||||
import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
|
||||
|
||||
import { injectModrinthClient } from '~/providers/api-client.ts'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const { projectV2: project, refreshProject } = injectProjectPageContext()
|
||||
|
||||
@@ -377,6 +377,8 @@ import {
|
||||
ButtonStyled,
|
||||
ErrorInformationCard,
|
||||
injectNotificationManager,
|
||||
ServerIcon,
|
||||
ServerInfoLabels,
|
||||
ServerNotice,
|
||||
} from '@modrinth/ui'
|
||||
import type {
|
||||
@@ -398,8 +400,6 @@ import InstallingTicker from '~/components/ui/servers/InstallingTicker.vue'
|
||||
import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
|
||||
import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
|
||||
import PanelSpinner from '~/components/ui/servers/PanelSpinner.vue'
|
||||
import ServerIcon from '~/components/ui/servers/ServerIcon.vue'
|
||||
import ServerInfoLabels from '~/components/ui/servers/ServerInfoLabels.vue'
|
||||
import ServerInstallation from '~/components/ui/servers/ServerInstallation.vue'
|
||||
import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
|
||||
import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
|
||||
|
||||
@@ -112,12 +112,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { EditIcon, TransferIcon } from '@modrinth/assets'
|
||||
import { EditIcon, ServerIcon, TransferIcon } from '@modrinth/assets'
|
||||
import { injectNotificationManager } from '@modrinth/ui'
|
||||
import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
|
||||
|
||||
import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
|
||||
import ServerIcon from '~/components/ui/servers/ServerIcon.vue'
|
||||
import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
|
||||
|
||||
const { addNotification } = injectNotificationManager()
|
||||
|
||||
@@ -1,133 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
data-pyro-server-list-root
|
||||
class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
|
||||
>
|
||||
<ServersUpgradeModalWrapper ref="upgradeModal" />
|
||||
<div
|
||||
v-if="hasError || fetchError"
|
||||
class="mx-auto flex h-full min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4 text-left"
|
||||
>
|
||||
<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="grid place-content-center rounded-full bg-bg-blue p-4">
|
||||
<HammerIcon class="size-12 text-blue" />
|
||||
</div>
|
||||
<h1 class="m-0 w-fit text-3xl font-bold">Servers could not be loaded</h1>
|
||||
</div>
|
||||
<p class="text-lg text-secondary">We may have temporary issues with our servers.</p>
|
||||
<ul class="m-0 list-disc space-y-4 p-0 pl-4 text-left text-sm leading-[170%]">
|
||||
<li>
|
||||
Our systems automatically alert our team when there's an issue. We are already working
|
||||
on getting them back online.
|
||||
</li>
|
||||
<li>
|
||||
If you recently purchased your Modrinth Server, it is currently in a queue and will
|
||||
appear here as soon as it's ready. <br />
|
||||
<span class="font-medium text-contrast"
|
||||
>Do not attempt to purchase a new server.</span
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
If you require personalized support regarding the status of your server, please
|
||||
contact Modrinth Support.
|
||||
</li>
|
||||
|
||||
<li v-if="fetchError" class="text-red">
|
||||
<p>Error details:</p>
|
||||
<CopyCode
|
||||
:text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
|
||||
:copyable="false"
|
||||
:selectable="false"
|
||||
:language="'json'"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ButtonStyled size="large" type="standard" color="brand">
|
||||
<a class="mt-6 !w-full" href="https://support.modrinth.com">Contact Modrinth Support</a>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled size="large" @click="() => reloadNuxtApp()">
|
||||
<button class="mt-3 !w-full">Reload</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ServerManageEmptyState
|
||||
v-else-if="serverList.length === 0 && !isPollingForNewServers && !hasError"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<div class="relative flex h-fit w-full flex-col items-center justify-between md:flex-row">
|
||||
<h1 class="w-full text-4xl font-bold text-contrast">Servers</h1>
|
||||
<div class="mb-4 flex w-full flex-row items-center justify-end gap-2 md:mb-0 md:gap-4">
|
||||
<div class="relative w-full text-sm md:w-72">
|
||||
<label class="sr-only" for="search">Search</label>
|
||||
<SearchIcon
|
||||
class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchInput"
|
||||
class="w-full border-[1px] border-solid border-button-border pl-9"
|
||||
type="search"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
placeholder="Search servers..."
|
||||
/>
|
||||
</div>
|
||||
<ButtonStyled type="standard">
|
||||
<NuxtLink
|
||||
class="!h-10 whitespace-pre !border-[1px] !border-solid !border-button-border text-sm !font-medium"
|
||||
:to="{ path: '/servers', hash: '#plan' }"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
New server
|
||||
</NuxtLink>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="filteredData.length > 0 || isPollingForNewServers"
|
||||
class="m-0 flex flex-col gap-4 p-0"
|
||||
>
|
||||
<MedalServerListing
|
||||
v-for="server in filteredData.filter((s) => s.is_medal)"
|
||||
:key="server.server_id"
|
||||
v-bind="server"
|
||||
@upgrade="openUpgradeModal(server.server_id)"
|
||||
/>
|
||||
<ServerListing
|
||||
v-for="server in filteredData.filter((s) => !s.is_medal)"
|
||||
:key="server.server_id"
|
||||
v-bind="server"
|
||||
/>
|
||||
</ul>
|
||||
<div v-else class="flex h-full items-center justify-center">
|
||||
<p class="text-contrast">No servers found.</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { HammerIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
|
||||
import { ButtonStyled, CopyCode } from '@modrinth/ui'
|
||||
import type { ModrinthServersFetchError, Server } from '@modrinth/utils'
|
||||
import dayjs from 'dayjs'
|
||||
import Fuse from 'fuse.js'
|
||||
import type { ComponentPublicInstance } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { ServersManagePageIndex } from '@modrinth/ui'
|
||||
|
||||
import { reloadNuxtApp } from '#app'
|
||||
import MedalServerListing from '~/components/ui/servers/marketing/MedalServerListing.vue'
|
||||
import ServerListing from '~/components/ui/servers/ServerListing.vue'
|
||||
import ServerManageEmptyState from '~/components/ui/servers/ServerManageEmptyState.vue'
|
||||
import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
|
||||
import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
|
||||
import { useGeneratedState } from '~/composables/generated'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
@@ -137,121 +11,14 @@ useHead({
|
||||
title: 'Servers - Modrinth',
|
||||
})
|
||||
|
||||
interface ServerResponse {
|
||||
servers: Server[]
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const hasError = ref(false)
|
||||
const isPollingForNewServers = ref(false)
|
||||
|
||||
const {
|
||||
data: serverResponse,
|
||||
error: fetchError,
|
||||
refresh,
|
||||
} = await useAsyncData<ServerResponse>('ServerList', async () => {
|
||||
const serverResponse = await useServersFetch<ServerResponse>('servers')
|
||||
|
||||
let subscriptions: any[] | undefined
|
||||
|
||||
for (const server of serverResponse.servers) {
|
||||
if (server.is_medal) {
|
||||
// Inject end date into server object.
|
||||
const serverID = server.server_id
|
||||
|
||||
if (!subscriptions) {
|
||||
subscriptions = (await useBaseFetch(`billing/subscriptions`, {
|
||||
internal: true,
|
||||
})) as any[]
|
||||
}
|
||||
|
||||
for (const subscription of subscriptions) {
|
||||
if (subscription.metadata?.id === serverID) {
|
||||
server.medal_expires = dayjs(subscription.created as string)
|
||||
.add(5, 'days')
|
||||
.toISOString()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return serverResponse
|
||||
})
|
||||
|
||||
watch([fetchError, serverResponse], ([error, response]) => {
|
||||
hasError.value = !!error || !response
|
||||
})
|
||||
|
||||
const serverList = computed<Server[]>(() => {
|
||||
if (!serverResponse.value) return []
|
||||
return serverResponse.value.servers
|
||||
})
|
||||
|
||||
const searchInput = ref('')
|
||||
|
||||
const fuse = computed(() => {
|
||||
if (serverList.value.length === 0) return null
|
||||
return new Fuse(serverList.value, {
|
||||
keys: ['name', 'loader', 'mc_version', 'game', 'state'],
|
||||
includeScore: true,
|
||||
threshold: 0.4,
|
||||
})
|
||||
})
|
||||
|
||||
function introToTop(array: Server[]): Server[] {
|
||||
return array.slice().sort((a, b) => {
|
||||
return Number(b.flows?.intro) - Number(a.flows?.intro)
|
||||
})
|
||||
}
|
||||
|
||||
const filteredData = computed<Server[]>(() => {
|
||||
if (!searchInput.value.trim()) {
|
||||
return introToTop(serverList.value)
|
||||
}
|
||||
return fuse.value
|
||||
? introToTop(fuse.value.search(searchInput.value).map((result) => result.item))
|
||||
: []
|
||||
})
|
||||
|
||||
const previousServerList = ref<Server[]>([])
|
||||
const refreshCount = ref(0)
|
||||
|
||||
const checkForNewServers = async () => {
|
||||
await refresh()
|
||||
refreshCount.value += 1
|
||||
if (JSON.stringify(previousServerList.value) !== JSON.stringify(serverList.value)) {
|
||||
isPollingForNewServers.value = false
|
||||
clearInterval(intervalId)
|
||||
router.replace({ query: {} })
|
||||
} else if (refreshCount.value >= 5) {
|
||||
isPollingForNewServers.value = false
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
}
|
||||
|
||||
let intervalId: ReturnType<typeof setInterval> | undefined
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.redirect_status === 'succeeded') {
|
||||
isPollingForNewServers.value = true
|
||||
previousServerList.value = [...serverList.value]
|
||||
intervalId = setInterval(checkForNewServers, 5000)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (intervalId) {
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
})
|
||||
|
||||
type ServersUpgradeModalWrapperRef = ComponentPublicInstance<{
|
||||
open: (id: string) => void | Promise<void>
|
||||
}>
|
||||
|
||||
const upgradeModal = ref<ServersUpgradeModalWrapperRef | null>(null)
|
||||
function openUpgradeModal(serverId: string) {
|
||||
upgradeModal.value?.open(serverId)
|
||||
}
|
||||
const config = useRuntimeConfig()
|
||||
const generatedState = useGeneratedState()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ServersManagePageIndex
|
||||
:stripe-publishable-key="config.public.stripePublishableKey"
|
||||
:site-url="config.public.siteUrl"
|
||||
:products="generatedState.products || []"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -625,13 +625,13 @@ import {
|
||||
injectNotificationManager,
|
||||
OverflowMenu,
|
||||
PurchaseModal,
|
||||
ServerListing,
|
||||
} from '@modrinth/ui'
|
||||
import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { useBaseFetch } from '@/composables/fetch.js'
|
||||
import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
|
||||
import ServerListing from '~/components/ui/servers/ServerListing.vue'
|
||||
import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
|
||||
import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
|
||||
import { products } from '~/generated/state.json'
|
||||
|
||||
Reference in New Issue
Block a user