update

src/scripts/Components/ExampleView.js

@@ -23,12 +23,12 @@ export default class ExampleView extends React.PureComponent {
           bgcolor={$color('clear')}
           events={{
             tapped: () => {
-              $audio.play({
-                id: 1104
-              })
               this.setState({
                 showCode: !this.state.showCode
               })
+              $audio.play({
+                id: 1104
+              })
             }
           }}
         />

src/scripts/Components/HttpExample.js → src/scripts/Examples/HttpExample.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { apiKey } from '../constants'
-import { articleToMarkdown } from './helper'
+import { articleToMarkdown } from '../helper'
 const { useState, useEffect } = React
 const { width, height } = $device.info.screen
 
@@ -42,15 +42,15 @@ export default function HttpExample() {
 
   // Error state
   if (error || data.error) {
-    return <label frame={styles.error} lines={5} font={$font(16)} text={(error || data.error).message} />
+    return <label frame={styles.message} lines={5} font={$font(16)} text={(error || data.error).message} />
   }
 
   // Fetched content state
   return <markdown frame={$('HttpExample').frame} content={articleToMarkdown(data.url, data.title, data.explanation)} />
 }
 
 const styles = {
-  error: $rect(0, width * 0.25, width, 200),
+  message: $rect(0, width * 0.25, width, 200),
   loading: $rect(0, width * 0.3, width, 50),
   spinner: $rect(width * 0.5 - 10, width * 0.5, 20, 20)
 }

src/scripts/Examples/index.js

@@ -0,0 +1,11 @@
+import ClassExample from './ClassExample'
+import ReducerExample from './ReducerExample'
+import CacheExample from './CacheExample'
+import HttpExample from './HttpExample'
+
+export default {
+  ClassExample,
+  ReducerExample,
+  CacheExample,
+  HttpExample
+}

src/scripts/index.js

@@ -2,20 +2,10 @@ import React from 'react'
 import ReactJSBox from 'react-jsbox'
 import ExampleView from './Components/ExampleView'
 import CodeView from './Components/CodeView'
-import ClassExample from './Components/ClassExample'
-import ReducerExample from './Components/ReducerExample'
-import CacheExample from './Components/CacheExample'
-import HttpExample from './Components/HttpExample'
+import ExampleComps from './Examples'
 
 const { width, height } = $device.info.screen
 
-const Comps = {
-  ClassExample,
-  ReducerExample,
-  CacheExample,
-  HttpExample
-}
-
 const createContainers = idList =>
   idList.map(id => ({
     title: id,
@@ -41,7 +31,7 @@ $ui.render({
       type: 'list',
       props: {
         rowHeight: width,
-        data: createContainers(Object.keys(Comps))
+        data: createContainers(Object.keys(ExampleComps))
       },
       layout(make, view) {
         make.edges.equalTo(view.super.safeArea)
@@ -51,9 +41,9 @@ $ui.render({
 })
 
 // Create React elements and render them:
-for (const [CompName, Comp] of Object.entries(Comps)) {
+for (const [CompName, Comp] of Object.entries(ExampleComps)) {
   ReactJSBox.render(
-    <ExampleView demo={<Comp />} code={<CodeView content={$file.read(`scripts/Components/${CompName}.js`).string} />} />,
+    <ExampleView demo={<Comp />} code={<CodeView content={$file.read(`scripts/Examples/${CompName}.js`).string} />} />,
     $(CompName)
   )
 }