feat(ui): display run date instead of random title

packages/peeky-client/src/features/TimeAgo.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { computed, onUnmounted, PropType, ref, watchEffect } from 'vue'
+
+const props = defineProps({
+  date: {
+    type: [Object, String, Number] as PropType<Date | string | number>,
+    required: true,
+  },
+})
+
+const parsedDate = computed(() => new Date(props.date))
+
+const display = ref('')
+const interval = ref(1)
+
+const rtf = new Intl.RelativeTimeFormat(undefined, {
+  style: 'narrow',
+  numeric: 'auto',
+})
+
+const units: ([number, Intl.RelativeTimeFormatUnit])[] = [[60, 'minute'], [60, 'hour']]
+
+function update () {
+  let diff = (parsedDate.value.getTime() - Date.now()) / 1000
+  let unit: Intl.RelativeTimeFormatUnit = 'second'
+  let newInterval = 1000
+  for (let index = 0; index < units.length - 1; index++) {
+    const newDiff = diff / units[index][0]
+    if (Math.abs(newDiff) < 1) {
+      index--
+      break
+    }
+    diff = newDiff
+    unit = units[index][1]
+    newInterval *= units[index][0]
+  }
+
+  display.value = rtf.format(Math.round(diff), unit)
+  interval.value = newInterval
+}
+
+update()
+
+let timer: ReturnType<typeof setInterval>
+
+watchEffect(() => {
+  clearInterval(timer)
+  timer = setInterval(() => {
+    update()
+  }, interval.value)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  {{ display }}
+</template>

packages/peeky-client/src/features/run/RunItem.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+import { defineProps, PropType } from 'vue'
+import type { NexusGenFieldTypes } from '@peeky/server'
 import StatusIcon from '../StatusIcon.vue'
 import Duration from '../Duration.vue'
-import { defineProps } from 'vue'
+import TimeAgo from '../TimeAgo.vue'
 
 const props = defineProps({
   run: {
-    type: Object,
+    type: Object as PropType<Pick<NexusGenFieldTypes['Run'], 'status' | 'date' | 'emoji' | 'duration'>>,
     required: true,
   },
 })
@@ -18,7 +20,9 @@ const props = defineProps({
       class="w-4 h-4 mr-1"
     />
     <span class="flex-1 truncate py-1 space-x-1">
-      <span>{{ run.title }}</span>
+      <span>
+        <TimeAgo :date="run.date" />
+      </span>
       <span>{{ run.emoji }}</span>
     </span>
     <Duration

packages/peeky-client/src/features/run/RunManager.vue

@@ -12,27 +12,32 @@ import {
   SunIcon,
   MoonIcon,
 } from '@zhuowenli/vue-feather-icons'
-import { useQuery, useResult } from '@vue/apollo-composable'
+import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { useRoute } from 'vue-router'
 import { ref, computed } from 'vue'
 import { useSettings } from '../settings'
+import { NexusGenFieldTypes } from '@peeky/server/src/generated/nexus-typegen'
 
 // Current run
 
 const runDetailsFragment = gql`
 fragment runDetails on Run {
   id
-  title
+  date
   emoji
   status
   progress
   duration
 }
 `
 
+type Run = Pick<NexusGenFieldTypes['Run'], 'id' | 'date' | 'emoji' | 'status' | 'progress' | 'duration'>
+
 const route = useRoute()
-const { result, subscribeToMore } = useQuery(() => route.params.runId !== 'last-run' ? gql`
+const { result, subscribeToMore } = useQuery<{
+  run: Run
+}>(() => route.params.runId !== 'last-run' ? gql`
   query run ($id: ID!) {
     run (id: $id) {
       ...runDetails
@@ -41,15 +46,15 @@ const { result, subscribeToMore } = useQuery(() => route.params.runId !== 'last-
   ${runDetailsFragment}
 ` : gql`
   query lastRun {
-    lastRun {
+    run: lastRun {
       ...runDetails
     }
   }
   ${runDetailsFragment}
 `, () => route.params.runId !== 'last-run' ? {
   id: route.params.runId,
 } : {})
-const currentRun = useResult(result)
+const currentRun = computed(() => result.value?.run)
 
 const isSelectorOpen = ref(false)
 const isSubMenuOpen = ref(false)
@@ -71,7 +76,9 @@ subscribeToMore({
 })
 
 // Added
-subscribeToMore({
+subscribeToMore<undefined, {
+  runAdded: Run
+}>({
   document: gql`
   subscription runAdded {
     runAdded {
@@ -85,7 +92,7 @@ subscribeToMore({
       return previousResult
     } else {
       return {
-        lastRun: data.runAdded,
+        run: data.runAdded,
       }
     }
   },

packages/peeky-client/src/features/run/RunSelector.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import RunItem from './RunItem.vue'
 import { RotateCcwIcon } from '@zhuowenli/vue-feather-icons'
-import { useQuery, useResult } from '@vue/apollo-composable'
+import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { defineEmits, watch } from 'vue'
+import { computed, defineEmits, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { NexusGenFieldTypes } from '@peeky/server/src/generated/nexus-typegen'
 
 const emit = defineEmits(['close'])
 
@@ -13,14 +14,18 @@ const MAX_RUNS = 10
 const runListFragment = gql`
 fragment runList on Run {
   id
-  title
+  date
   emoji
   status
   duration
 }
 `
 
-const { result, subscribeToMore } = useQuery(gql`
+type Run = Pick<NexusGenFieldTypes['Run'], 'id' | 'date' | 'emoji' | 'status' | 'duration'>
+
+const { result, subscribeToMore } = useQuery<{
+  runs: Run[]
+}>(gql`
   query runs {
     runs {
       ...runList
@@ -31,7 +36,7 @@ const { result, subscribeToMore } = useQuery(gql`
   fetchPolicy: 'cache-and-network',
 })
 
-const runs = useResult(result, [], data => data.runs.slice().reverse())
+const runs = computed(() => result.value?.runs.slice().reverse() ?? [])
 
 // Subs
 
@@ -49,7 +54,9 @@ subscribeToMore({
 })
 
 // Added
-subscribeToMore({
+subscribeToMore<undefined, {
+  runAdded: Run
+}>({
   document: gql`
   subscription runAddedForRunSelector {
     runAdded {
@@ -76,7 +83,11 @@ subscribeToMore({
 })
 
 // Removed
-subscribeToMore({
+subscribeToMore<undefined, {
+  runRemoved: {
+    id: string
+  }
+}>({
   document: gql`
   subscription runRemoved {
     runRemoved {

packages/peeky-client/src/features/settings.ts

@@ -1,7 +1,7 @@
-import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
-import type { NexusGenInputs, NexusGenObjects } from '@peeky/server/src/generated/nexus-typegen'
+import { useMutation, useQuery } from '@vue/apollo-composable'
+import type { NexusGenInputs, NexusGenFieldTypes } from '@peeky/server'
 import gql from 'graphql-tag'
-import { ComputedRef } from 'vue'
+import { computed } from 'vue'
 
 export const settingsFragment = gql`
 fragment settings on Settings {
@@ -11,16 +11,20 @@ fragment settings on Settings {
 }
 `
 
+type Settings = Pick<NexusGenFieldTypes['Settings'], 'id' | 'watch' | 'darkMode'>
+
 export function useSettings () {
-  const { result, loading } = useQuery(gql`
+  const { result, loading } = useQuery<{
+    settings: Settings
+  }>(gql`
     query settings {
       settings {
         ...settings
       }
     }
     ${settingsFragment}
   `)
-  const settings = useResult(result) as ComputedRef<NexusGenObjects['Settings']>
+  const settings = computed(() => result.value?.settings)
 
   const { mutate } = useMutation(gql`
     mutation updateSettings ($input: UpdateSettingsInput!) {
@@ -31,7 +35,7 @@ export function useSettings () {
     ${settingsFragment}
   `)
 
-  async function updateSettings (input: NexusGenInputs['UpdateSettingsInput']) {
+  async function updateSettings (input: Partial<NexusGenInputs['UpdateSettingsInput']>) {
     return mutate({
       input: {
         ...settings.value,

packages/peeky-server/package.json

@@ -46,7 +46,6 @@
     "nexus": "^1.0.0",
     "object-inspect": "^1.11.0",
     "pathe": "^0.2.0",
-    "project-name-generator": "^2.1.9",
     "random-emoji": "^1.0.2",
     "reactive-fs": "^0.4.1",
     "shortid": "^2.2.16",

packages/peeky-server/src/generated/nexus-typegen.ts

@@ -131,6 +131,7 @@ export interface NexusGenFieldTypes {
     testFiles: NexusGenRootTypes['TestFile'][]; // [TestFile!]!
   }
   Run: { // field return type
+    date: string; // String!
     duration: number | null; // Float
     emoji: string; // String!
     failedSnapshots: NexusGenRootTypes['Snapshot'][]; // [Snapshot!]!
@@ -145,7 +146,6 @@ export interface NexusGenFieldTypes {
     testSuiteById: NexusGenRootTypes['TestSuite'] | null; // TestSuite
     testSuiteBySlug: NexusGenRootTypes['TestSuite'] | null; // TestSuite
     testSuites: NexusGenRootTypes['TestSuite'][]; // [TestSuite!]!
-    title: string; // String!
   }
   RunTestFile: { // field return type
     duration: number | null; // Float
@@ -253,6 +253,7 @@ export interface NexusGenFieldTypeNames {
     testFiles: 'TestFile'
   }
   Run: { // field return type name
+    date: 'String'
     duration: 'Float'
     emoji: 'String'
     failedSnapshots: 'Snapshot'
@@ -267,7 +268,6 @@ export interface NexusGenFieldTypeNames {
     testSuiteById: 'TestSuite'
     testSuiteBySlug: 'TestSuite'
     testSuites: 'TestSuite'
-    title: 'String'
   }
   RunTestFile: { // field return type name
     duration: 'Float'

packages/peeky-server/src/generated/schema.graphql

@@ -26,6 +26,7 @@ type Query {
 }
 
 type Run {
+  date: String!
   duration: Float
   emoji: String!
   failedSnapshots: [Snapshot!]!
@@ -40,7 +41,6 @@ type Run {
   testSuiteById(id: ID!): TestSuite
   testSuiteBySlug(slug: String!): TestSuite
   testSuites: [TestSuite!]!
-  title: String!
 }
 
 type RunTestFile {

packages/peeky-server/src/index.ts

@@ -1 +1,2 @@
 export * from './server.js'
+export * from './generated/nexus-typegen.js'

packages/peeky-server/src/schema/Run.ts

@@ -4,7 +4,6 @@ import { performance } from 'perf_hooks'
 import { arg, extendType, idArg, inputObjectType, nonNull, objectType } from 'nexus'
 import shortid from 'shortid'
 import { setupRunner, getStats, Runner } from '@peeky/runner'
-import nameGenerator from 'project-name-generator'
 import randomEmoji from 'random-emoji'
 import objectInspect from 'object-inspect'
 import type { Context } from '../context'
@@ -32,7 +31,7 @@ export const Run = objectType({
   },
   definition (t) {
     t.nonNull.id('id')
-    t.nonNull.string('title')
+    t.nonNull.string('date')
     t.nonNull.string('emoji')
     t.nonNull.float('progress')
     t.nonNull.field('status', {
@@ -159,7 +158,7 @@ export const RunSubscription = extendType({
 
 export interface RunData {
   id: string
-  title: string
+  date: string
   emoji: string
   progress: number
   status: StatusEnum
@@ -202,7 +201,7 @@ export async function createRun (ctx: Context, options: CreateRunOptions) {
 
   const run: RunData = {
     id: runId,
-    title: nameGenerator().dashed,
+    date: new Date().toISOString(),
     emoji: randomEmoji.random({ count: 1 })[0].character,
     progress: 0,
     status: 'in_progress',