From 2178d337de116f34140aec51f73c758873638587 Mon Sep 17 00:00:00 2001
From: William Volin <me@williamvolin.com>
Date: Mon, 4 Nov 2024 20:22:54 -0700
Subject: [PATCH] feat: add new leaderboard view scaffold

- shows game name as header
- shows toggle-able info dropdown showing Leaderboard.Info
- if api returns a 404, renders the nuxt 404 page - This must be
  implemented globally and is out of scope of this PR
---
 .../LeaderboardInfo/Desktop/Desktop.test.ts   |  33 ----
 .../LeaderboardInfo/Desktop/Desktop.vue       | 141 ------------------
 .../LeaderboardInfo/LeaderboardInfo.test.ts   |  47 ------
 .../LeaderboardInfo/LeaderboardInfo.vue       |  57 ++-----
 .../LeaderboardInfoAccordion.vue              |  30 ++++
 .../LeaderboardInfo/Mobile/Mobile.test.ts     |  33 ----
 .../blocks/LeaderboardInfo/Mobile/Mobile.vue  |  84 -----------
 .../PlatformTags/PlatformTags.test.ts         |  23 ---
 .../PlatformTags/PlatformTags.vue             |  22 ---
 i18n/en/index.ts                              |   1 +
 i18n/language.ts                              |   1 +
 pages/game/[slug].vue                         |  18 ++-
 12 files changed, 54 insertions(+), 436 deletions(-)
 delete mode 100644 components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
 delete mode 100644 components/blocks/LeaderboardInfo/Desktop/Desktop.vue
 delete mode 100644 components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
 create mode 100644 components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue
 delete mode 100644 components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
 delete mode 100644 components/blocks/LeaderboardInfo/Mobile/Mobile.vue
 delete mode 100644 components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
 delete mode 100644 components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts b/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
deleted file mode 100644
index 5c841c62..00000000
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId } from 'root/testUtils'
-import Desktop from './Desktop.vue'
-
-describe('<Desktop />', () => {
-  async function getDesktopWrapper() {
-    return await mountSuspended(Desktop, {
-      props: {
-        leaderboard: {
-          categories: [{ id: 1, name: 'Any%', slug: 'any' }],
-          id: 1,
-          name: 'Stuck in the Train Simulator 2',
-          slug: 'stuck-in-the-train-sim-2',
-        },
-        todoPlatforms: ['XBox', 'PC'],
-      },
-    })
-  }
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('should render without crashing', async () => {
-    const wrapper = await getDesktopWrapper()
-    expect(wrapper.isVisible()).toBe(true)
-
-    expect(getByTestId(wrapper, 'title').text()).toBe(
-      'Stuck in the Train Simulator 2',
-    )
-    expect(getByTestId(wrapper, 'tag').text()).toBe('Any%')
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
deleted file mode 100644
index dae18f2d..00000000
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import Dropdown from 'elements/buttons/Dropdown/Dropdown.vue'
-import DropdownItem from 'elements/buttons/Dropdown/DropdownItem.vue'
-import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
-import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
-import Tag from 'elements/tags/Tag/Tag.vue'
-import PlatformTags from '../PlatformTags/PlatformTags.vue'
-import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
-
-interface Props extends LeaderboardInfoProps {
-  todoPlatforms: string[]
-}
-
-const emit = defineEmits<{
-  (event: 'follow'): void
-}>()
-
-// TODO: Get actual links tied to the leaderboard
-const socials: Socials[] = [
-  {
-    icon: 'twitch',
-    name: 'Twitch',
-    url: 'https://twitch.tv',
-  },
-  {
-    icon: 'globe',
-    name: 'Site',
-    url: '#',
-  },
-  {
-    icon: 'discord',
-    name: 'Discord',
-    url: 'https://discord.gg',
-  },
-  {
-    icon: 'message',
-    name: 'Message',
-    url: '#',
-  },
-]
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div class="leaderboard-info">
-    <!-- TODO: Do not provide defaults and instead return nothing if on production -->
-    <div class="title" data-testid="title">
-      {{ leaderboard.name || 'Game Name' }}
-    </div>
-    <div class="body">
-      <img
-        src="https://via.placeholder.com/220x220"
-        alt="game-art"
-        class="body__game-art"
-      />
-      <Tag data-testid="tag">{{
-        leaderboard.categories[0]?.name ?? 'TODO'
-      }}</Tag>
-      <span class="body__published-year">YEAR</span>
-      <PlatformTags :tags="todoPlatforms" />
-      <FollowButton
-        class="body__follow"
-        data-testid="body__follow"
-        @follow="emit('follow')"
-      />
-      <div class="body__divider" />
-      <div class="body__internal-link-buttons">
-        <ButtonLink class="body__internal-link-buttons__button" to="#">
-          <i-svg-book />
-          <span>Guides</span>
-        </ButtonLink>
-        <ButtonLink class="body__internal-link-buttons__button" to="#">
-          <i-svg-link />
-          <div>Resources</div>
-        </ButtonLink>
-        <Dropdown class-name="body__internal-link-buttons__button">
-          <DropdownItem>First</DropdownItem>
-          <DropdownItem>Second</DropdownItem>
-          <DropdownItem>Third</DropdownItem>
-        </Dropdown>
-      </div>
-      <SocialButtons :socials="socials" />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.icon {
-  @apply w-2;
-}
-
-.leaderboard-info {
-  @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
-  @apply flex flex-col items-center;
-  @apply border-gray-300 border rounded;
-
-  & .title {
-    @apply w-full text-center;
-    @apply font-bold text-lg p-3;
-    @apply border-b-gray-200 border-b-2;
-  }
-
-  & .body {
-    @apply m-4;
-    @apply flex flex-col items-center gap-1;
-
-    & .body__game-art {
-      @apply my-1 px-8;
-    }
-
-    & .body__published-year {
-      @apply text-sm;
-    }
-
-    & .body__follow {
-      @apply mt-3;
-    }
-
-    & .body__divider {
-      @apply border-b border-gray-300 w-full my-3;
-    }
-
-    & .body__internal-link-buttons {
-      @apply w-full flex flex-col mb-4 gap-2;
-
-      & .body__internal-link-buttons__button {
-        @apply w-full flex justify-center items-center gap-2 bg-white hover:bg-gray-100;
-        @apply border-gray-200 border-2 rounded;
-      }
-
-      & :deep(.body__internal-link-buttons__button) {
-        @apply w-full bg-white hover:bg-gray-100;
-        @apply border-gray-200 border-2 rounded;
-      }
-    }
-  }
-}
-</style>
-elements/buttons/Dropdown/Dropdown.vueelements/buttons/Dropdown/DropdownItem.vue
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
deleted file mode 100644
index 897899e1..00000000
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId } from 'root/testUtils'
-import LeaderboardInfo from './LeaderboardInfo.vue'
-
-describe('<LeaderboardInfo />', () => {
-  async function getLeaderboardInfoWrapper() {
-    return await mountSuspended(LeaderboardInfo, {
-      props: {
-        leaderboard: {
-          categories: [],
-          id: 1,
-          name: 'Stuck in the Train Simulator 2',
-          slug: 'stuck-in-the-train-sim-2',
-        },
-      },
-    })
-  }
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.unstubAllGlobals()
-  })
-
-  it('should render without crashing', async () => {
-    const wrapper = await getLeaderboardInfoWrapper()
-    expect(wrapper.isVisible()).toBe(true)
-  })
-
-  it('should render <Desktop /> if device width is large', async () => {
-    vi.stubGlobal('innerWidth', 1980)
-    const wrapper = await getLeaderboardInfoWrapper()
-    expect(wrapper.html()).toContain('Guides')
-  })
-
-  it('should render <Mobile /> if device width is small', async () => {
-    vi.stubGlobal('innerWidth', 600)
-    const wrapper = await getLeaderboardInfoWrapper()
-    expect(wrapper.html()).toContain('Submit Run')
-  })
-
-  // TODO: The follow event doesn't trigger in the test, somehow
-  it.skip('should emit event when the Follow Button is triggered', async () => {
-    const wrapper = await getLeaderboardInfoWrapper()
-    await getByTestId(wrapper, 'child').trigger('follow')
-    expect(wrapper.emitted().follow).toBeTruthy()
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index c9395469..fcee55a5 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -1,55 +1,18 @@
-<script setup lang="ts">
-import { useThrottleFn } from '@vueuse/core'
-import resolveConfig from 'tailwindcss/resolveConfig'
-import { ref } from 'vue'
-import tailwindConfig from 'root/tailwind.config'
-import Desktop from './Desktop/Desktop.vue'
-import Mobile from './Mobile/Mobile.vue'
-import type { LeaderboardViewModel } from 'lib/api/data-contracts'
-
-export interface LeaderboardInfoProps {
+<script lang="ts" setup>
+import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
+import LeaderboardInfoAccordion from './LeaderboardInfoAccordion.vue'
+interface LeaderboardInfoProps {
   leaderboard: LeaderboardViewModel
 }
 
-// TODO: Remove this. Get from model instead.
-const todoPlatforms = ['PS4', 'PC', 'XboxSeriesX']
-
-// TODO: Implement listeners
-const emit = defineEmits<{
-  (event: 'follow', leaderboardId: number): void
-}>()
-
-const mobileWidth = parseInt(
-  resolveConfig(tailwindConfig).theme.screens.sm.replace('px', ''),
-  10,
-)
-
-const isMobile = ref(window.innerWidth <= mobileWidth)
-
-function checkIsMobile() {
-  isMobile.value = window.innerWidth <= mobileWidth
-}
-
-window.addEventListener('resize', useThrottleFn(checkIsMobile, 20))
-
 defineProps<LeaderboardInfoProps>()
 </script>
 
 <template>
-  <Mobile
-    v-if="isMobile.valueOf()"
-    data-testid="child"
-    :leaderboard="leaderboard"
-    :todo-platforms="todoPlatforms"
-    @follow="emit('follow', leaderboard.id)"
-  />
-  <Desktop
-    v-else
-    data-testid="child"
-    :leaderboard="leaderboard"
-    :todo-platforms="todoPlatforms"
-    @follow="emit('follow', leaderboard.id)"
-  />
+  <div class="flex w-full flex-col rounded border border-gray-300 p-5">
+    <div id="leaderboard-show-header" class="mb-4 bg-gray-200 p-4">
+      <h1 class="mb-4 text-xl font-bold">{{ leaderboard.name }}</h1>
+      <LeaderboardInfoAccordion :info="leaderboard.info" />
+    </div>
+  </div>
 </template>
-
-<style lang="postcss" scoped></style>
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue
new file mode 100644
index 00000000..de5fa052
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+interface LeaderboardInfoAccordionProps {
+  info: string
+}
+const enabled = ref(false)
+const toggle = () => {
+  enabled.value = !enabled.value
+}
+
+defineProps<LeaderboardInfoAccordionProps>()
+</script>
+
+<template>
+  <switch
+    id="leaderboard-info"
+    class="hover:cursor-pointer"
+    @click="toggle"
+    @keypress="toggle"
+  >
+    <span v-if="enabled" class="mr-2">▼</span>
+    <span v-else class="mr-2">▶</span>
+    <span class="text-blue-500 underline">
+      {{ $t('info') }}
+    </span>
+  </switch>
+  <p v-if="enabled" class="mt-2 bg-white p-4">
+    {{ info }}
+  </p>
+</template>
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts b/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
deleted file mode 100644
index fce62d74..00000000
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId } from 'root/testUtils'
-import Mobile from './Mobile.vue'
-
-describe('<Mobile />', () => {
-  async function getMobileWrapper() {
-    return await mountSuspended(Mobile, {
-      props: {
-        leaderboard: {
-          categories: [{ id: 1, name: 'Any%', slug: 'any' }],
-          id: 1,
-          name: 'Stuck in the Train Simulator 2',
-          slug: 'stuck-in-the-train-sim-2',
-        },
-        todoPlatforms: ['XBox', 'PC'],
-      },
-    })
-  }
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('should render without crashing', async () => {
-    const wrapper = await getMobileWrapper()
-    expect(wrapper.isVisible()).toBe(true)
-
-    expect(getByTestId(wrapper, 'title').text()).toBe(
-      'Stuck in the Train Simulator 2',
-    )
-    expect(getByTestId(wrapper, 'tag').text()).toBe('Any%')
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
deleted file mode 100644
index 99c16642..00000000
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
-import Tag from 'elements/tags/Tag/Tag.vue'
-import PlatformTags from '../PlatformTags/PlatformTags.vue'
-import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
-
-interface Props extends LeaderboardInfoProps {
-  todoPlatforms: string[]
-}
-
-const emit = defineEmits<{
-  (event: 'follow'): void
-}>()
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div class="leaderboard-info">
-    <!-- TODO: Do not provide defaults and instead return nothing if on production -->
-    <div class="top">
-      <div class="top__title" data-testid="title">
-        {{ leaderboard.name || 'Game Name' }}
-      </div>
-      <div class="top__button-container">
-        <FollowButton
-          class="top__button top__button__follow"
-          data-testid="top__button__follow"
-          @follow="emit('follow')"
-        />
-        <ButtonLink
-          class="top__button top__button__submit"
-          data-testid="top__button__submit"
-          to="#"
-        >
-          <span>Submit Run</span>
-        </ButtonLink>
-      </div>
-    </div>
-    <div class="bottom">
-      <div class="bottom__category-year">
-        <Tag data-testid="tag">{{
-          leaderboard.categories[0]?.name ?? 'TODO'
-        }}</Tag>
-        <span class="bottom__published-year">YEAR</span>
-      </div>
-      <PlatformTags :tags="todoPlatforms" />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.leaderboard-info {
-  @apply h-[fit-content] w-full relative;
-  @apply flex flex-col gap-2;
-  @apply border-gray-200 border-2 rounded;
-  @apply p-4;
-
-  & .top {
-    @apply flex justify-between items-start;
-  }
-
-  & .top__title {
-    @apply font-bold text-lg;
-  }
-
-  & .top__button-container {
-    @apply flex gap-1;
-  }
-
-  & .top__button__submit {
-    @apply bg-gray-100;
-  }
-
-  & .bottom {
-    @apply flex justify-between items-center;
-  }
-
-  & .bottom__category-year {
-    @apply flex gap-2 items-center text-sm;
-  }
-}
-</style>
diff --git a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
deleted file mode 100644
index 1331bded..00000000
--- a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import PlatformTags from './PlatformTags.vue'
-
-describe('<PlatformTags />', () => {
-  const tags = ['XBox', 'PS4', 'Amiga DS']
-
-  it('should render without crashing', async () => {
-    const wrapper = await mountSuspended(PlatformTags, {
-      props: {
-        tags,
-      },
-    })
-
-    expect(wrapper.isVisible()).toBe(true)
-
-    wrapper
-      .getComponent('div.platform-tags')
-      .findAllComponents('div')
-      .forEach((c, i) => {
-        expect(c.text()).toBe(tags[i])
-      })
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
deleted file mode 100644
index ae069c42..00000000
--- a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Tag from 'elements/tags/Tag/Tag.vue'
-interface PlatformTagsProps {
-  tags: string[]
-}
-
-defineProps<PlatformTagsProps>()
-</script>
-
-<template>
-  <div class="platform-tags">
-    <Tag v-for="tag in tags" :key="tag">
-      {{ tag }}
-    </Tag>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.platform-tags {
-  @apply flex flex-row place-content-center gap-1;
-}
-</style>
diff --git a/i18n/en/index.ts b/i18n/en/index.ts
index ee03553b..4e78d8b8 100644
--- a/i18n/en/index.ts
+++ b/i18n/en/index.ts
@@ -12,4 +12,5 @@ export const English = {
     'Something went wrong. Reach out to support if the problem persists.',
   signup: 'Sign Up',
   welcome: 'Welcome',
+  info: 'Info',
 } satisfies LanguageIndexFile
diff --git a/i18n/language.ts b/i18n/language.ts
index bcabde6d..8aef93e2 100644
--- a/i18n/language.ts
+++ b/i18n/language.ts
@@ -8,4 +8,5 @@ export interface LanguageIndexFile {
   confirmationReceived?: string
   confirmationReceivedText?: string
   signup?: string
+  info?: string
 }
diff --git a/pages/game/[slug].vue b/pages/game/[slug].vue
index 588a1d58..a0b7012d 100644
--- a/pages/game/[slug].vue
+++ b/pages/game/[slug].vue
@@ -1,21 +1,27 @@
 <script setup lang="ts">
-import { useRoute } from '#imports'
-import LeaderboardInfo from 'blocks/LeaderboardInfo/LeaderboardInfo.vue'
+import { useRoute, createError } from '#imports'
+// import LeaderboardInfo from 'blocks/LeaderboardInfo/LeaderboardInfo.vue'
 import Loader from 'blocks/Loader/Loader.vue'
 import { useGetLeaderboardBySlug } from '~/composables/api'
-
+import LeaderboardInfo from '~/components/blocks/LeaderboardInfo/LeaderboardInfo.vue'
 const route = useRoute()
 const leaderboardSlug = route.params.slug as string
 const leaderboardDetail = await useGetLeaderboardBySlug(leaderboardSlug)
+
+if (leaderboardDetail?.error?.status == 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true,
+  })
+}
 </script>
 
 <template>
   <div>
     <Loader v-if="leaderboardDetail.loading"></Loader>
     <LeaderboardInfo
-      v-if="!leaderboardDetail.loading && leaderboardDetail.data != null"
-      :leaderboard="leaderboardDetail.data!"
-      @follow="(id) => console.log(id)"
+      :leaderboard="!leaderboardDetail.loading && leaderboardDetail.data"
     />
   </div>
 </template>