@monimesl/dot-cli 0.1.0-alpha.9 → 1.0.0-beta.1

package/dist/templates/showcase/pages/{network → dash/network}/controller.ts

@@ -1,3 +1,5 @@
+import { debounce, errorMessage, latest, unlessCancelled } from '@monimesl/dot-runtime';
+
 import type { Release } from './state';
 import state from './state';
 
@@ -14,6 +16,10 @@ interface CatalogAnswer {
   }[];
 }
 
+interface ArtistAnswer {
+  results: { artistId: number; artistName: string; primaryGenreName?: string }[];
+}
+
 interface Echo {
   json: unknown;
   files: Record<string, string>;
@@ -23,27 +29,76 @@ interface Echo {
 const PAGE = 10;
 const MOST = 50;
 
-function searchUrl(artist: string, limit = PAGE): string {
-  const term = encodeURIComponent(artist);
-  return `https://itunes.apple.com/search?entity=song&limit=${limit}&term=${term}`;
+// Songs or artists whose names match `term`, at most `limit` of them.
+function catalogUrl(entity: 'song' | 'musicArtist', term: string, limit: number): string {
+  return `https://itunes.apple.com/search?entity=${entity}&limit=${limit}&term=${encodeURIComponent(term)}`;
 }
 
+// For searching as the person types: a pause in typing, and only the newest search's answer.
+const typingPause = debounce(400);
+const artistSearch = latest();
+
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Network' } },
   mutations: {
-    setArtist: (_state, event: DotEvent<{ value: string }>) => ({ artist: event.detail.value }),
+    setArtist: (_state, event: ValueEvent) => ({ artist: event.detail.value }),
   },
   actions: {
+    async suggest(_state, event: ValueEvent) {
+      const typed = event.detail.value;
+      this.setState({ typed });
+      if (!typed.trim()) {
+        this.setState({ suggestions: [] });
+        return;
+      }
+      // False while the person is still typing: a later keystroke runs this again.
+      if (!(await typingPause(this.dash))) {
+        return;
+      }
+      try {
+        const answer = await unlessCancelled(
+          artistSearch(
+            this.dash.network.http.request<ArtistAnswer>({
+              url: catalogUrl('musicArtist', typed, 5),
+              as: 'json',
+            }),
+          ),
+        );
+        // Undefined when a newer search took its place.
+        if (answer) {
+          this.setState({
+            suggestions: answer.body.results.map((artist) => ({
+              id: artist.artistId,
+              name: artist.artistName,
+              genre: artist.primaryGenreName ?? '',
+            })),
+          });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async checkStatus() {
+      try {
+        const { online, type } = await this.dash.network.status();
+        this.setState({ connection: online ? `Online, by ${type}` : 'Offline' });
+      } catch (error) {
+        this.setState({ connection: errorMessage(error) });
+      }
+    },
     async searchAsText(state) {
       try {
-        const response = await this.dash.network.http.request({ url: searchUrl(state.artist) });
+        const response = await this.dash.network.http.request({
+          url: catalogUrl('song', state.artist, PAGE),
+        });
         this.setState({
           raw: response.ok
             ? `${response.body.trim().slice(0, 90)}…`
             : `Apple answered ${response.status}`,
         });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async search() {
@@ -62,7 +117,7 @@ export default definePage({
       this.setState({ searching: true, note: '' });
       try {
         const { body } = await this.dash.network.http.request<CatalogAnswer>(
-          { url: searchUrl(state.artist, state.limit), as: 'json' },
+          { url: catalogUrl('song', state.artist, state.limit), as: 'json' },
           { timeout: 10_000 },
         );
         const releases: Release[] = body.results.map((result) => ({
@@ -74,9 +129,10 @@ export default definePage({
         }));
         this.setState({ releases });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
+      } finally {
+        this.setState({ searching: false });
       }
-      this.setState({ searching: false });
     },
     async sendJson(state) {
       try {
@@ -88,7 +144,7 @@ export default definePage({
         });
         this.setState({ echo: JSON.stringify(body.json) });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async download(state) {
@@ -103,48 +159,56 @@ export default definePage({
           name: 'artwork.jpg',
         });
         if (response.ok) {
-          const { id, url, size } = response.file;
-          this.setState({ picture: { id, url, size }, kept: false });
+          this.setState({ picture: response.file, kept: false });
         } else {
           this.setState({ note: `Apple answered ${response.status}` });
         }
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async upload(state) {
+      if (!state.picture) {
+        return;
+      }
       try {
         const { body } = await this.dash.network.http.upload<Echo>({
           url: 'https://httpbin.org/post',
           fields: { artist: state.artist },
-          files: [{ field: 'artwork', file: state.picture.id }],
+          files: [{ field: 'artwork', file: state.picture }],
           as: 'json',
         });
         this.setState({ uploaded: Object.keys(body.files).join(', ') });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async sharePicture(state) {
+      if (!state.picture) {
+        return;
+      }
       try {
-        await this.dash.system.share({ file: state.picture.id });
+        await this.dash.system.share({ file: state.picture });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async keep(state) {
+      if (!state.picture) {
+        return;
+      }
       try {
-        await this.dash.storage.file.save(state.picture.id, PICTURE, { overwrite: true });
+        await this.dash.storage.file.save(state.picture, PICTURE, { overwrite: true });
         this.setState({ kept: true });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async tryUnlistedHost() {
       try {
         await this.dash.network.http.request({ url: 'https://example.com' });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
   },

package/dist/templates/showcase/pages/{network → dash/network}/state.ts

@@ -1,3 +1,11 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export interface Suggestion {
+  id: number;
+  name: string;
+  genre: string;
+}
+
 export interface Release {
   id: number;
   title: string;
@@ -7,6 +15,10 @@ export interface Release {
 }
 
 export default {
+  connection: 'Not checked yet',
+  // What the person typed to search as they type, and the artists found.
+  typed: '',
+  suggestions: [] as Suggestion[],
   artist: 'Drizilik',
   // The start of Apple's answer, as the text it came as.
   raw: '',
@@ -15,7 +27,8 @@ export default {
   limit: 10,
   searching: false,
   echo: '',
-  picture: { id: '', url: '', size: 0 },
+  // The downloaded artwork, in a temporary file until the dot closes.
+  picture: null as DotFile | null,
   uploaded: '',
   kept: false,
   note: '',

package/dist/templates/showcase/pages/dash/network/view.dml

@@ -0,0 +1,108 @@
+<View>
+  <Text variant="title">dash.network</Text>
+  <Text>Whether the phone is online, and the dot's requests, which Dash sends only to the hosts listed in dot.json. This page searches Apple's music catalog.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">status</Text>
+    <Text variant="caption" tone="muted">Whether the phone is online now, and how: wifi, cellular, other or none. Online doesn't promise a server answers.</Text>
+    <View variant="card" direction="row" align="center" gap="medium">
+      <View grow>
+        <Text>{{ connection }}</Text>
+      </View>
+      <Button variant="secondary" onClick="checkStatus">Check</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">http.request</Text>
+    <Text variant="caption" tone="muted">The answer comes as text, or as JSON with as: 'json'. timeout gives up after a while.</Text>
+    <View variant="card" gap="small">
+      <Input label="Artist" placeholder="Drizilik" value="{{ artist }}" maxLength="40" onChange="setArtist" onSubmit="search" />
+      <View direction="row" wrap gap="small">
+        <Button onClick="search" loading="{{ searching }}" disabled="{{ !artist }}">Search</Button>
+        <Button variant="secondary" onClick="searchAsText" disabled="{{ !artist }}">Read as text</Button>
+      </View>
+      <If condition="{{ raw }}">
+        <Text variant="caption" tone="muted">The answer as text starts with: {{ raw }}</Text>
+      </If>
+    </View>
+
+    <Text variant="caption" tone="muted">The same answer read as JSON, with artwork. Near the end, the list loads 10 more, up to 50. {{ releases.length }} so far.</Text>
+    <If condition="{{ releases.length > 0 }}">
+      <List onEndReached="loadMore">
+        <For each="{{ releases }}" item="release" key="id">
+          <ListItem image="{{ release.artwork }}" title="{{ release.title }}" subtitle="{{ release.album }} · {{ release.year }}" />
+        </For>
+      </List>
+    </If>
+    <Else>
+      <View variant="card">
+        <EmptyState icon="search" title="No songs yet" text="Search for an artist, such as Drizilik, Kao Denero or Emmerson." />
+      </View>
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Searching as you type: debounce and latest</Text>
+    <Text variant="caption" tone="muted">debounce waits for a pause in typing before searching, and latest cancels a search still running when a newer one starts, so an older answer can't replace a newer one.</Text>
+    <View variant="card" gap="small">
+      <Input type="search" placeholder="Type an artist, such as Emmerson" clearable value="{{ typed }}" onChange="suggest" />
+      <For each="{{ suggestions }}" item="artist" key="id">
+        <View direction="row" align="center" gap="medium">
+          <Avatar name="{{ artist.name }}" size="small" />
+          <View gap="none">
+            <Text>{{ artist.name }}</Text>
+            <Text variant="caption" tone="muted">{{ artist.genre }}</Text>
+          </View>
+        </View>
+      </For>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Sending JSON</Text>
+    <Text variant="caption" tone="muted">method: 'POST' with a body. httpbin sends back what it got.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="sendJson">Send the first song as JSON</Button>
+      <If condition="{{ echo }}">
+        <Text>httpbin got {{ echo }}</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">http.download and http.upload</Text>
+    <Text variant="caption" tone="muted">download saves the answer as a file. upload sends files with form fields. Then share the file, or keep it in the dot's folder.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="download" disabled="{{ releases.length === 0 }}">Download</Button>
+        <Button variant="secondary" onClick="upload" disabled="{{ !picture }}">Upload</Button>
+        <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture }}">Share</Button>
+        <Button variant="secondary" onClick="keep" disabled="{{ !picture || kept }}">Keep</Button>
+      </View>
+      <If condition="{{ picture }}">
+        <View direction="row" align="center" gap="medium">
+          <Image src="{{ picture.url }}" alt="Artwork" width="64" height="64" />
+          <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
+        </View>
+      </If>
+      <If condition="{{ uploaded }}">
+        <Text>httpbin got the file field "{{ uploaded }}"</Text>
+      </If>
+      <If condition="{{ kept }}">
+        <Text>Saved in the dot's folder. See the dash.storage.file page.</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Hosts dot.json doesn't list</Text>
+    <Text variant="caption" tone="muted">Dash turns the request down.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
+      <If condition="{{ note }}">
+        <Text variant="caption" tone="muted">{{ note }}</Text>
+      </If>
+    </View>
+  </View>
+</View>