ship command refactor and prototype go command showing the qr code

Author: madebydavid

src/api/index.ts

@@ -140,6 +140,25 @@ export async function getJob(jobId: string, projectId: string): Promise<Job> {
   return castJobDates(data)
 }
 
+const MAX_RETRIES = 3
+const RETRY_DELAY_MS = 5000
+
+// Returns the builds for a job, retrying if none are found
+// The retry is because of possible race condition when a job completes
+export async function getJobBuildsRetry(jobId: string, projectId: string, retries = MAX_RETRIES): Promise<Build[]> {
+  let job: Job | null = null
+
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    job = await getJob(jobId, projectId)
+    if (job.builds && job.builds.length > 0) break
+    if (attempt < MAX_RETRIES) await new Promise((res) => setTimeout(res, RETRY_DELAY_MS))
+  }
+
+  if (!job?.builds || job.builds.length === 0) throw new Error('No builds found for this job after multiple attempts')
+
+  return job.builds
+}
+
 // Returns a url with an OTP - when visited it authenticates the user
 export async function getSingleUseUrl(destination: string) {
   // Call the API to generate an OTP

src/commands/game/go.tsx

@@ -0,0 +1,33 @@
+import {BaseGameCommand} from '@cli/baseCommands/index.js'
+import {Go} from '@cli/components/Go.js'
+import {CommandGame} from '@cli/components/index.js'
+
+import {render} from 'ink'
+
+export default class GameGo extends BaseGameCommand<typeof GameGo> {
+  static override args = {}
+  static override description = 'Preview your game in the ShipThis Go app.'
+  static override examples = ['<%= config.bin %> <%= command.id %>']
+  static override flags = {
+    ...BaseGameCommand.flags,
+  }
+
+  public async run(): Promise<void> {
+    await this.ensureWeAreInAProjectDir()
+    const gameId = this.getGameId()
+    if (!gameId) {
+      this.error('No game ID found')
+    }
+
+    const handleComplete = () => process.exit(0)
+    const handleError = (error: any) => {
+      this.error(`Error generating go build: ${error}`)
+    }
+
+    render(
+      <CommandGame command={this}>
+        <Go onComplete={handleComplete} onError={handleError} />
+      </CommandGame>,
+    )
+  }
+}

src/commands/game/ship.tsx

@@ -1,7 +1,7 @@
 import {Flags} from '@oclif/core'
 import {render} from 'ink'
 
-import {downloadBuildById, getJob} from '@cli/api/index.js'
+import {downloadBuildById, getJobBuildsRetry} from '@cli/api/index.js'
 import {BaseGameCommand} from '@cli/baseCommands/baseGameCommand.js'
 import {CommandGame, Ship} from '@cli/components/index.js'
 import {Job} from '@cli/types/api.js'
@@ -62,26 +62,13 @@ export default class GameShip extends BaseGameCommand<typeof GameShip> {
       this.error('No game ID found')
     }
 
-    const MAX_RETRIES = 3
-    const RETRY_DELAY_MS = 5000
-
-    const handleComplete = async ([originalJob]: Job[]) => {
+    const handleComplete = async ([job]: Job[]) => {
       if (!this.flags.download && !this.flags.downloadAPK) return process.exit(0)
-
-      let job: Job | null = null
-
-      for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
-        job = await getJob(originalJob.id, gameId)
-        if (job.builds && job.builds.length > 0) break
-        if (attempt < MAX_RETRIES) await new Promise((res) => setTimeout(res, RETRY_DELAY_MS))
-      }
-
-      if (!job?.builds || job.builds.length === 0) this.error('No builds found for this job after multiple attempts')
-
+      // Use a retry mechanism to get the builds, as they may not be immediately available
+      const builds = await getJobBuildsRetry(job.id, gameId)
       const {platform} = this.flags
       const type = platform === 'android' ? (this.flags.downloadAPK ? 'APK' : 'AAB') : 'IPA'
-
-      const build = job.builds.find((b) => b.buildType === type)
+      const build = builds.find((b) => b.buildType === type)
       if (!build) this.error(`No build found for type ${type}`)
 
       const filename = this.flags.download || this.flags.downloadAPK

src/components/Go.tsx

@@ -0,0 +1,59 @@
+import {useContext, useState} from 'react'
+
+import {getShortUUID, useProjectJobListener, useStartShipOnMount} from '@cli/utils/index.js'
+import {getJobBuildsRetry} from '@cli/api/index.js'
+
+import {CommandContext, GameContext, JobProgress, QRCodeTerminal} from './index.js'
+
+interface Props {
+  onComplete: () => void
+  onError: (error: any) => void
+}
+
+export const Go = ({onComplete, onError}: Props): JSX.Element| null => {
+  const {command} = useContext(CommandContext)
+  const {gameId} = useContext(GameContext)
+  if (!command || !gameId) return null
+  return <GoCommand command={command} gameId={gameId} onComplete={onComplete} onError={onError} />
+}
+
+interface GoCommandProps extends Props {
+  command: any
+  gameId: string
+}
+
+const GoCommand = ({command, gameId, onComplete, onError}: GoCommandProps): JSX.Element | null=> {
+  const flags = {follow: false, platform: 'go'}
+
+  const {jobs: startedJobs} = useStartShipOnMount(command, flags, onError)
+
+  const handleJobCompleted = async (job: any) => {
+    const [goBuild] = await getJobBuildsRetry(job.id, command.getGameId())
+    setQRCodeData(getShortUUID(goBuild.id))
+    const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+    await sleep(500)
+    onComplete()
+  }
+
+  const handleJobFailed = (job: any) => {
+    onError(new Error(`Go job failed: ${job.id}`))
+  }
+
+  const {jobsById} = useProjectJobListener({
+    projectId: gameId,
+    onJobCompleted: handleJobCompleted,
+    onJobFailed: handleJobFailed,
+  })
+
+  const [qrCodeData, setQRCodeData] = useState<string | null>(null)
+
+  if (qrCodeData) {
+    return <QRCodeTerminal data={qrCodeData} />
+  }
+
+  if (startedJobs && startedJobs?.length > 0) {
+    return <JobProgress job={startedJobs[0]} />
+  }
+
+  return null
+}

src/components/Ship.tsx

@@ -0,0 +1,40 @@
+import {Dispatch, SetStateAction} from 'react'
+import {Text} from 'ink'
+import open from 'open'
+
+import {getShortAuthRequiredUrl} from '@cli/api/index.js'
+import {Job} from '@cli/types/api.js'
+import {useSafeInput} from '@cli/utils/index.js'
+
+interface KeyboardShortcutsProps {
+  onToggleJobLogs: Dispatch<SetStateAction<boolean>>
+  gameId?: string
+  jobs?: Job[] | null
+}
+
+export const KeyboardShortcuts = ({onToggleJobLogs, gameId, jobs}: KeyboardShortcutsProps) => {
+  useSafeInput(async (input) => {
+    if (!gameId) return
+    const i = input.toLowerCase()
+    switch (i) {
+      case 'l': {
+        onToggleJobLogs((prev) => !prev)
+        break
+      }
+
+      case 'b': {
+        const dashUrl = jobs?.length === 1 ? `/games/${gameId}/job/${jobs[0].id}` : `/games/${gameId}`
+        const url = await getShortAuthRequiredUrl(dashUrl)
+        await open(url)
+        break
+      }
+    }
+  })
+
+  return (
+    <>
+      <Text>Press L to show and hide the job logs.</Text>
+      <Text>Press B to open the ShipThis dashboard in your browser.</Text>
+    </>
+  )
+}