feat(web): download all artifacts as tarball (#108)

* feat9web): download all artifacts as tarball

* fix: reset file if on all checkbox toggle

Handle reset effects in useHook instead of components' input handlers

* refactor: desctructure event.target.value

More in line with react conventions

* fix: filter `latest` version out of select version options

* feat: sort version in descending semantic order

* chore: bump `@zk-kit/artifacts` to 1.9.0

where `projects` array const is sorted

* refactor: reset ticked download all on version change

* refactor: make `reset*` state functions internal to useStore hook

apps/web/package.json

@@ -10,13 +10,15 @@
   },
   "dependencies": {
     "@octokit/rest": "^21.0.0",
-    "@zk-kit/artifacts": "1.6.0",
+    "@zk-kit/artifacts": "1.9.0",
     "jotai": "^2.8.3",
     "preact": "^10.22.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "semver": "^7.6.2"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.2",
+    "@types/semver": "^7.5.8",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   }

apps/web/src/constants.ts

@@ -2,3 +2,4 @@ export const artifacts = ['wasm', 'zkey']
 export const owner = 'privacy-scaling-explorations'
 export const repo = 'snark-artifacts'
 export const cdnUrl = 'https://snark-artifacts.pse.dev'
+export const npmRegistryUrl = 'https://registry.npmjs.org'

apps/web/src/containers/DownloadButton.tsx

@@ -1,13 +1,17 @@
-import { cdnUrl } from '../constants'
-import { useStore } from '../hooks'
+import { useDownloadUrl, useStore } from '../hooks'
 
 export function DownloadButton() {
-  const { selectedFile, selectedProject, selectedVersion } = useStore()
+  const { selectedFile, tickedDownloadAll } = useStore()
+  const disabled = !(selectedFile || tickedDownloadAll)
+  const downloadUrl = useDownloadUrl()
 
   const onClick = () => {
-    const url = `${cdnUrl}/${selectedProject}/${selectedVersion}/${selectedFile}`
-    window.location.href = url
+    window.location.href = downloadUrl
   }
 
-  return <button type='button' onClick={onClick} className='btn btn-primary' disabled={!selectedFile}>Download</button>
+  return (
+    <button type='button' onClick={onClick} className='btn btn-primary' disabled={disabled}>
+      Download
+    </button>
+  )
 }

apps/web/src/containers/FileSelect.tsx

@@ -3,11 +3,11 @@ import { Options } from '../components'
 import { useFiles, useStore } from '../hooks'
 
 export function FileSelect() {
-  const { selectedFile, setSelectedFile } = useStore()
+  const { selectedFile, setSelectedFile, tickedDownloadAll, toggleTickedDownloadAll } = useStore()
   const { data: files, isLoading, isFetched, isSuccess, isError, error } = useFiles()
-  const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const file = e.target as HTMLSelectElement
-    setSelectedFile(file.value)
+  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const { value } = e.target as HTMLSelectElement
+    setSelectedFile(value)
   }
 
   if (isLoading) return <div>Loading...</div>
@@ -17,13 +17,18 @@ export function FileSelect() {
     return (
       <div>
         <label htmlFor='file'>File</label>
-        <select id='file' onChange={onChange} value={selectedFile}>
+        <select id='file' onChange={onSelectChange} value={selectedFile} disabled={tickedDownloadAll}>
           <Options items={files} />
         </select>
-        {
-          /* <label htmlFor='all-files' style={{ marginLeft: '1rem'}}>Download all</label>
-            <input id='all-files' type='checkbox' /> */
-        }
+
+        <label htmlFor='all-files' style={{ marginLeft: '1rem' }}>All</label>
+        <input
+          id='all-files'
+          type='checkbox'
+          onChange={toggleTickedDownloadAll}
+          checked={tickedDownloadAll}
+          title='Download all artifacts as .tgz tarball'
+        />
       </div>
     )
   }

apps/web/src/containers/ProjectSelect.tsx

@@ -4,11 +4,9 @@ import { Options } from '../components'
 import { useStore } from '../hooks'
 
 export function ProjectSelect() {
-  const { selectedProject, setSelectedProject, resetSelectedFile, resetSelectedVersion } = useStore()
+  const { selectedProject, setSelectedProject } = useStore()
 
   const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    resetSelectedFile()
-    resetSelectedVersion()
     const target = e.target as HTMLSelectElement
     setSelectedProject(target.value)
   }

apps/web/src/containers/VersionSelect.tsx

@@ -3,13 +3,12 @@ import { Options } from '../components'
 import { useStore, useVersions } from '../hooks'
 
 export function VersionSelect() {
-  const { selectedVersion, setSelectedVersion, resetSelectedFile } = useStore()
+  const { selectedVersion, setSelectedVersion } = useStore()
   const { data: versions, isSuccess, isFetched, isLoading, isError, error } = useVersions()
 
   const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    resetSelectedFile()
-    const target = e.target as HTMLSelectElement
-    setSelectedVersion(target.value)
+    const { value } = e.target as HTMLSelectElement
+    setSelectedVersion(value)
   }
 
   if (isLoading) return <div>Loading...</div>

apps/web/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useDownloadUrl'
 export * from './useFiles'
 export * from './useStore'
 export * from './useVersions'

apps/web/src/hooks/useDownloadUrl.ts

@@ -0,0 +1,9 @@
+import { cdnUrl, npmRegistryUrl } from '../constants'
+import { useStore } from './useStore'
+
+export const useDownloadUrl = () => {
+  const { selectedFile, selectedProject, selectedVersion, tickedDownloadAll } = useStore()
+  return tickedDownloadAll
+    ? `${npmRegistryUrl}/@zk-kit/${selectedProject}-artifacts/-/${selectedProject}-artifacts-${selectedVersion}.tgz`
+    : `${cdnUrl}/${selectedProject}/${selectedVersion}/${selectedFile}`
+}

apps/web/src/hooks/useStore.ts

@@ -3,20 +3,38 @@ import { atom, useAtom } from 'jotai'
 const selectedFileAtom = atom('')
 const selectedProjectAtom = atom('')
 const selectedVersionAtom = atom('')
+const tickedDownloadAllAtom = atom(false)
 
 export const useStore = () => {
   const [selectedFile, setSelectedFile] = useAtom(selectedFileAtom)
-  const [selectedProject, setSelectedProject] = useAtom(selectedProjectAtom)
-  const [selectedVersion, setSelectedVersion] = useAtom(selectedVersionAtom)
+  const _resetSelectedFile = () => setSelectedFile('')
+
+  const [tickedDownloadAll, _setTickedDownloadAll] = useAtom(tickedDownloadAllAtom)
+  const _resetTickedDownloadAll = () => _setTickedDownloadAll(false)
+  const toggleTickedDownloadAll = () => _setTickedDownloadAll(prev => !prev)
+
+  const [selectedVersion, _setSelectedVersion] = useAtom(selectedVersionAtom)
+  const setSelectedVersion = (...args: Parameters<typeof _setSelectedVersion>) => {
+    _resetSelectedFile()
+    _resetTickedDownloadAll()
+    _setSelectedVersion(...args)
+  }
+  const _resetSelectedVersion = () => setSelectedVersion('')
+
+  const [selectedProject, _setSelectedProject] = useAtom(selectedProjectAtom)
+  const setSelectedProject = (...args: Parameters<typeof _setSelectedProject>) => {
+    _resetSelectedVersion()
+    _setSelectedProject(...args)
+  }
 
   return {
     selectedFile,
-    resetSelectedFile: () => setSelectedFile(''),
     setSelectedFile,
     selectedProject,
     setSelectedProject,
     selectedVersion,
-    resetSelectedVersion: () => setSelectedVersion(''),
     setSelectedVersion,
+    tickedDownloadAll,
+    toggleTickedDownloadAll,
   }
 }

apps/web/src/hooks/useVersions.ts

@@ -1,4 +1,5 @@
 import { useQuery } from 'react-query'
+import rcompare from 'semver/functions/rcompare'
 import { owner, repo } from '../constants'
 import { gh } from '../gh'
 import { useStore } from './useStore'
@@ -16,6 +17,10 @@ export function useVersions() {
     queryKey: ['versions', selectedProject],
     queryFn,
     select: (data) =>
-      data.filter(tag => tag.includes(`@zk-kit/${selectedProject}-artifacts@`)).map(tag => tag.split('@')[2]),
+      data
+        .filter(tag => tag.includes(`@zk-kit/${selectedProject}-artifacts@`))
+        .map(tag => tag.split('@')[2])
+        .filter(version => version !== 'latest')
+        .sort(rcompare),
   })
 }