Merge branch 'main' into switch-to-dyndata

hassnian · Aug 8, 2024 · 7d3a989 · 7d3a989
2 parents 69fe015 + e6075e2
commit 7d3a989
Show file tree

Hide file tree

Showing 19 changed files with 993 additions and 342 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/components/codeChecker/CodeChecker.vue b/components/codeChecker/CodeChecker.vue
@@ -99,14 +99,6 @@
         v-if="selectedFile && !errorMessage"
         class="border-t border-k-shade pt-5 flex flex-col gap-5"
       >
-        <CodeCheckerTestItem
-          :passed="fileValidity.resizerUsed"
-          :description="$t('codeChecker.automaticResize')"
-        >
-          <template #modalContent>
-            <CodeCheckerIssueHintAutomaticResize />
-          </template>
-        </CodeCheckerTestItem>
         <CodeCheckerTestItem
           :passed="fileValidity.validTitle"
           :description="$t('codeChecker.correctHTMLName')"
@@ -147,40 +139,41 @@
             <CodeCheckerIssueHintUsingParamHash />
           </template>
         </CodeCheckerTestItem>
+
         <CodeCheckerTestItem
-          :passed="!fileValidity.webGlUsed"
-          :description="$t('codeChecker.notUsingWebGl')"
+          :passed="fileValidity.validKodaRenderPayload"
+          :description="$t('codeChecker.validImage')"
         >
           <template #modalContent>
-            <CodeCheckerIssueHintNoWebGl />
+            <CodeCheckerIssueHintValidImage />
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="fileValidity.renderDurationValid"
-          :description="
-            $t('codeChecker.variationLoadingTime', [
-              (config.maxAllowedLoadTime / 1000).toFixed(0),
-            ])
-          "
+          :passed="fileValidity.consistent"
+          :description="$t('codeChecker.consistentArt')"
         >
           <template #modalContent>
-            <CodeCheckerIssueHintVariationLoadingTime />
+            <CodeCheckerIssueHintConsistentArt />
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="fileValidity.validKodaRenderPayload"
-          :description="$t('codeChecker.validImage')"
+          :passed="fileValidity.resizerUsed"
+          :description="$t('codeChecker.automaticResize')"
+          optional
         >
           <template #modalContent>
-            <CodeCheckerIssueHintValidImage />
+            <CodeCheckerIssueHintAutomaticResize />
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="fileValidity.consistent"
-          :description="$t('codeChecker.consistentArt')"
+          :passed="fileValidity.renderDurationValid"
+          :description="
+            $t('codeChecker.variationLoadingTime')
+          "
+          optional
         >
           <template #modalContent>
-            <CodeCheckerIssueHintConsistentArt />
+            <CodeCheckerIssueHintVariationLoadingTime />
           </template>
         </CodeCheckerTestItem>
       </div>
@@ -233,7 +226,7 @@
 
 <script lang="ts" setup>
 import { NeoIcon } from '@kodadot1/brick'
-import { validate, webGlUsed } from './validate'
+import { validate } from './validate'
 import { createSandboxAssets, extractAssetsFromZip } from './utils'
 import config from './codechecker.config'
 import type { AssetMessage, Validity } from './types'
@@ -255,7 +248,6 @@ const RESOURCES_LIST = [
 
 const validtyDefault: Validity = {
   canvasSize: '',
-  webGlUsed: false,
   localP5jsUsed: false,
   kodaRendererUsed: 'unknown',
   kodaRendererCalledOnce: 'unknown',
@@ -287,7 +279,7 @@ const onFileSelected = async (file: File) => {
   clear()
   startClock()
   selectedFile.value = file
-  const { indexFile, sketchFile, entries, jsFiles }
+  const { indexFile, sketchFile, entries }
     = await extractAssetsFromZip(file)
 
   if (!sketchFile) {
@@ -301,9 +293,6 @@ const onFileSelected = async (file: File) => {
   else {
     Object.assign(fileValidity, valid.value)
   }
-  fileValidity.webGlUsed = jsFiles.some(file =>
-    webGlUsed(file.content, file.path),
-  )
 
   if (!fileValidity.kodaRendererUsed) {
     fileValidity.renderDurationValid = 'unknown'
@@ -354,7 +343,6 @@ useEventListener(window, 'message', async (res) => {
     renderEndTime.value = performance.now()
     const duration = renderEndTime.value - renderStartTime.value
     fileValidity.renderDurationValid = duration < config.maxAllowedLoadTime
-
     fileValidity.validKodaRenderPayload
       = Boolean(payload?.image) && hasImage(payload.image)
     if (fileValidity.validKodaRenderPayload) {

diff --git a/components/codeChecker/TestItem.vue b/components/codeChecker/TestItem.vue
@@ -42,6 +42,7 @@ import type { Passed } from './types'
 const props = defineProps<{
   passed: Passed
   description: string
+  optional?: boolean
 }>()
 
 const showResolveIssuesModal = ref(false)
@@ -54,7 +55,7 @@ const icon = computed(() => {
       spin: true,
     }
   }
-  if (props.passed === 'unknown') {
+  if (props.passed === 'unknown' || (props.optional && !props.passed)) {
     return {
       name: 'question',
       class: 'text-k-grey',

diff --git a/components/codeChecker/issueHint/NoWebGl.vue b/components/codeChecker/issueHint/NoWebGl.vue
diff --git a/components/codeChecker/issueHint/VariationLoadingTime.vue b/components/codeChecker/issueHint/VariationLoadingTime.vue
@@ -7,17 +7,4 @@
     <li>{{ $t('codeChecker.variationLoadingTimeMeans2') }}</li>
     <li>{{ $t('codeChecker.variationLoadingTimeMeans3') }}</li>
   </ul>
-
-  <CodeCheckerIssueHintCodeBlock
-    class="mt-5"
-    :code="code"
-    lang="javascript"
-  />
 </template>
-
-<script setup lang="ts">
-const code = `
-function windowResized() {  canvasSize = min(windowWidth, windowHeight)
-  resizeCanvas(canvasSize, canvasSize)
-}`
-</script>
diff --git a/components/codeChecker/types.ts b/components/codeChecker/types.ts
@@ -15,7 +15,6 @@ export type Result<T> = Success<T> | Failure
 export type Validity = {
   canvasSize: string
   title: string
-  webGlUsed: boolean
   localP5jsUsed: boolean
   kodaRendererUsed: Passed
   kodaRendererCalledOnce: Passed

diff --git a/components/codeChecker/validate.ts b/components/codeChecker/validate.ts
@@ -24,7 +24,6 @@ type InnerValidity = Pick<
 
 const constants = {
   canvasRegex: /createCanvas\(([^,]+?),\s*([^\s,]+?)(,\s*WEBGL)?\)/g,
-  graphicsRegex: /createGraphics\(([^,]+?),\s*([^\s,]+?)(,\s*WEBGL)?\)/g,
   getUrlParamsRegex: /\b(const|let|var)\s+(\w+)\s*=\s*getURLParams\(\)\s*/,
   urlSearchParamsRegex:
     /\b(const|let|var)\s+(\w+)\s*=\s*new URLSearchParams\(window.location.search\)\s*/,
@@ -45,24 +44,6 @@ const validateCanvasCreation = (
   return { isSuccess: true, value: canvasMatch }
 }
 
-export const webGlUsed = (content, path) => {
-  const canvasMatches = content.match(constants.canvasRegex)
-  const graphicsMatches = content.match(constants.graphicsRegex)
-
-  const canvasWebGLUsed = canvasMatches
-    ? canvasMatches.some(match => match.includes('WEBGL'))
-    : false
-  const graphicsWebGLUsed = graphicsMatches
-    ? graphicsMatches.some(match => match.includes('WEBGL'))
-    : false
-
-  if (canvasWebGLUsed || graphicsWebGLUsed) {
-    console.warn(`WebGL usage found in file: ${path}`)
-  }
-
-  return canvasWebGLUsed || graphicsWebGLUsed
-}
-
 const validateGetURLParamsUsage = (
   sketchFileContent: string,
 ): Result<RegExpExecArray> => {

diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
@@ -20,7 +20,7 @@
               />
             </div>
             <h1
-              class="collection-banner-name font-bold text-2xl md:text-[31px]"
+              class="collection-banner-name font-bold text-2xl md:text-[31px] w-max max-w-sm"
               data-testid="collection-banner-name"
             >
               {{ collectionName }}

diff --git a/components/drops/Drops.vue b/components/drops/Drops.vue
@@ -36,6 +36,7 @@
       :drops="currentDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
+      :async-skeleton-count="Math.round((count/2) - currentDrops.length)"
       skeleton-key="current-drops-skeleton"
     />
 
@@ -55,6 +56,7 @@
       :drops="pastDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
+      :async-skeleton-count="Math.round((count/2) - pastDrops.length)"
       skeleton-key="skeleton"
     />
 
@@ -78,11 +80,11 @@ const CURRENT_DROP_STATUS = Object.values(DropStatus).filter(
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
-const { drops, loaded } = useDrops({
+const { drops, loaded, count } = useDrops({
   active: [true],
   chain: !isProduction ? [urlPrefix.value] : [],
-  limit: 100, // set limit to enable sort from backend
-})
+  limit: 100,
+}, { async: true })
 
 const isCreateEventModalActive = ref(false)
 

diff --git a/components/drops/DropsGrid.vue b/components/drops/DropsGrid.vue
@@ -4,26 +4,29 @@
     :default-width="GRID_DEFAULT_WIDTH"
     persist
   >
+    <template
+      v-if="asyncSkeletonCount ? true : loaded"
+    >
+      <div
+        v-for="(drop, index) in drops"
+        :key="`${isDrop(drop) ? drop.collection?.id : drop.id}=${index}`"
+        class="w-full h-full"
+        :data-testid="index"
+      >
+        <slot
+          name="card"
+          :item="drop as InternalDropCalendar"
+        >
+          <DropCard :drop="drop as Drop" />
+        </slot>
+      </div>
+    </template>
     <template v-if="!loaded">
       <DropsDropCardSkeleton
-        v-for="x in defaultSkeletonCount"
+        v-for="x in asyncSkeletonCount || defaultSkeletonCount"
         :key="`${skeletonKey}-${x}`"
       />
     </template>
-    <div
-      v-for="(drop, index) in drops"
-      v-else
-      :key="`${isDrop(drop) ? drop.collection?.id : drop.id}=${index}`"
-      class="w-full h-full"
-      :data-testid="index"
-    >
-      <slot
-        name="card"
-        :item="drop as InternalDropCalendar"
-      >
-        <DropCard :drop="drop as Drop" />
-      </slot>
-    </div>
   </DynamicGrid>
 </template>
 
@@ -42,6 +45,7 @@ defineProps<{
   drops: Drop[] | InternalDropCalendar[]
   loaded: boolean
   defaultSkeletonCount: number
+  asyncSkeletonCount?: number
   skeletonKey: string
   clickable?: boolean
 }>()

diff --git a/components/drops/useDrops.ts b/components/drops/useDrops.ts
@@ -49,22 +49,40 @@ const DROP_LIST_ORDER = [
 
 const ONE_DAYH_IN_MS = 24 * 60 * 60 * 1000
 
-export function useDrops(query?: GetDropsQuery) {
+export function useDrops(query?: GetDropsQuery, { async = false }: { async?: boolean } = { }) {
   const drops = ref<Drop[]>([])
   const dropsList = ref<DropItem[]>([])
   const count = computed(() => dropsList.value.length)
   const loaded = ref(false)
 
+  const getDropsAsync = () => {
+    dropsList.value.forEach((drop) => {
+      getFormattedDropItem(drop, drop).then((drop: Drop) => {
+        drops.value = orderBy(
+          [...drops.value, drop],
+          [drop => dropsList.value.map(d => d.alias).indexOf(drop.alias)],
+        )
+      })
+    })
+
+    watch(() => drops.value.length === dropsList.value.length, () => {
+      loaded.value = true
+    }, { once: true })
+  }
+
   onBeforeMount(async () => {
     dropsList.value = await getDrops(query)
 
-    const formattedDrops = await Promise.all(
-      dropsList.value.map(async drop => getFormattedDropItem(drop, drop)),
-    )
-
-    drops.value = formattedDrops
+    if (async) {
+      getDropsAsync()
+    }
+    else {
+      drops.value = await Promise.all(
+        dropsList.value.map(async drop => getFormattedDropItem(drop, drop)),
+      )
 
-    loaded.value = true
+      loaded.value = true
+    }
   })
 
   const sortDrops = computed(() =>