Add upload feedback

Add better feedback when uploading content

app/style/component/ui.js

@@ -2,28 +2,25 @@ import { StyleSheet } from "react-native"
 
 import colors from "../../values/colors"
 
-function rounded_pressable(event) {
-    return {
-        backgroundColor: colors.blue,
-        alignItems: "center",
+const rounded_pressable = {
+    backgroundColor: colors.blue,
+    alignItems: "center",
 
-        width: "70%",
+    width: "70%",
 
-        marginLeft: "auto",
-        marginRight: "auto",
-        paddingTop: 10,
-        paddingBottom: 10,
-        paddingLeft: 30,
-        paddingRight: 30,
+    marginLeft: "auto",
+    marginRight: "auto",
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 30,
+    paddingRight: 30,
 
-        borderRadius: 1000,
-
-        opacity: event.pressed ? 0.3 : 1,
-    }
+    borderRadius: 1000,
 }
 
-function rounded_pressable_disabled(event) {
-    return { ...rounded_pressable(event), opacity: 0.7 }
+const rounded_pressable_disabled = {
+    ...rounded_pressable,
+    opacity: 0.7
 }
 
 const text_light = {
@@ -33,16 +30,21 @@ const text_light = {
     fontSize: 19,
 }
 
+const text_small = {
+    fontSize: 10,
+}
+
 const text_code_block = {
     color: colors.text_code_block,
     backgroundColor: colors.background_code_block,
 
-    fontSize: 8,
+    ...text_small,
 }
 
 export default StyleSheet.create({
     rounded_pressable,
     rounded_pressable_disabled,
     text_light,
+    text_small,
     text_code_block,
 })

app/values/colors.js

@@ -3,13 +3,14 @@ const text_gray = "#888b94"
 
 const colors = {
     background: dark,
-    background_code_block: "#5e6066",
+    background_code_block: "#434447",
 
     light: "white",
     dark: dark,
     gray: "#43464d",
     blue: "#304FF3",
     red: "#f3304a",
+    green: "#30f34a",
 
     gray_text_dark: text_gray,
     text_code_block: text_gray,

app/views/create.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import {
-    Pressable,
+    TouchableOpacity,
     Text,
     TextInput,
     View,
@@ -9,6 +9,7 @@ import * as DocumentPicker from "expo-document-picker"
 import * as FileSystem from "expo-file-system"
 import HeadedView from "../components/headed_view"
 import state from "../state"
+import colors from "../values/colors"
 
 const style = {
     ui: require("../style/component/ui").default,
@@ -23,28 +24,34 @@ class CreateView extends HeadedView {
              nsfw: false,
              featurable: true,
              select_result: {},
-             draw_select_result: false,
-             submitting: true,
+             submitting: false,
+             submit_button_text: "submit",
+             submit_button_color: colors.blue,
          }
     }
 
     get select_result() {
         return this.state.select_result
     }
 
-    get draw_select_result() {
-        return this.state.draw_select_result
+    get submitting() {
+        return this.state.submitting
     }
 
-    get file_select_stream() {
+    get submit_button_text() {
+        return this.state.submit_button_text
+    }
 
+    get submit_button_color() {
+        return this.state.submit_button_color
     }
 
     get submittable() {
         return [
             this.select_result.uri,
             this.select_result.size,
             this.select_result.type === "success",
+            !this.submitting
         ].every(it => it)
     }
 
@@ -53,67 +60,92 @@ class CreateView extends HeadedView {
     }
 
     async submit_selected() {
-        console.log(new Blob([1]) == null);
-        if (!this.submittable) {
-            return
-        }
-
         const result = this.select_result
         const file_base64 = await FileSystem.readAsStringAsync(result.uri, { encoding: FileSystem.EncodingType.Base64 })
-        let uploaded = await state.client.upload_content_base64([], false, false, file_base64)
+        try {
+            await state.client.upload_content_base64([], false, false, file_base64)
+            return true
+        } catch (err) {
+            return false
+        }
+    }
+
+    async submit_selected_wrap() {
+        this.setState(
+            { submitting: true, submit_button_text: "submitting" },
+            async () => {
+                this.draw_upload_result(await this.submit_selected())
+                this.setState({ submitting: false })
+            }
+        )
+
+    }
+
+    async draw_upload_result(ok) {
+        this.setState(
+            {
+                submit_button_text: ok ? "submitted" : "failed",
+                submit_button_color: ok ? colors.green : colors.red,
+            }, () => {
+                setTimeout( () => { this.props.navigation.replace("feed_all") }, 3000 )
+            }
+        )
     }
 
     get file_select_button() {
         return (
-            <Pressable
+            <TouchableOpacity
+                disabled = { this.submitting }
                 onPress = { () => DocumentPicker.getDocumentAsync().then(it => this.setState({ select_result: it })) }
-                onLongPress = { () => this.setState({ draw_select_result: !this.draw_select_result }) }
                 style = { style.ui.rounded_pressable }>
                 <Text style = { style.ui.text_light }>
                     { "browse" }
                 </Text>
-            </Pressable>
+            </TouchableOpacity>
         )
     }
 
     get file_select_info_text() {
-        if (!this.select_result.type === "success") {
+        if (this.select_result.type !== "success") {
             return "nothing selected"
         }
 
-        return "something"
-    }
-
-    get file_select_info() {
-        return (
-            <Text>
-                { this.draw_select_result ? this.file_select_info_text : null }
-            </Text>
-        )
+        return this.select_result.name
     }
 
     get file_select() {
         return (
             <View>
                 { this.file_select_button }
-                { this.file_select_info }
             </View>
         )
     }
 
     get submit_button() {
         return (
-            <Pressable
-                onPress = { () => this.submit_selected() }
-                style = {
-                    this.submittable ?
-                    style.ui.rounded_pressable :
-                    style.ui.rounded_pressable_disabled
-                }>
+            <TouchableOpacity
+                disabled = { !this.submittable }
+                onPress = { () => this.submit_selected_wrap() }
+                style = {[
+                    style.ui.rounded_pressable,
+                    { opacity: this.submittable ? 1 : 0.7 },
+                    { backgroundColor: this.submit_button_color }
+                ]}>
                 <Text style = { style.ui.text_light }>
-                    { "upload" }
+                    { this.submit_button_text }
                 </Text>
-            </Pressable>
+            </TouchableOpacity>
+        )
+    }
+
+    get meta_fields() {
+        return (
+            <View>
+                <Text
+                    style = { { ...style.ui.text_light, ...style.ui.text_small } }>
+                    { this.file_select_info_text }
+                </Text>
+            </View>
         )
     }
 
@@ -123,10 +155,6 @@ class CreateView extends HeadedView {
                     style = { style.create.tags_text_input }/>
     }
 
-    get meta_fields() {
-        return null
-    }
-
     get content() {
         return (
             <View style = { style.create.contain }>