feat: update example

- add conversation fields
- add conversation tags

refs #25

Author: leegeunhyeok

example/src/App.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import {
   StyleSheet,
   SafeAreaView,
+  ScrollView,
   View,
   Text,
   TextInput,
@@ -22,11 +23,12 @@ const LoadingView = () => (
 
 const App = () => {
   const [token, setToken] = useState('');
+  const [fieldId, setFieldId] = useState('');
+  const [tag, setTag] = useState('');
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     Zendesk.initialize({ channelKey: CHANNEL_KEY })
-
       .then(() => {
         console.log('zendesk initialized');
 
@@ -44,6 +46,8 @@ const App = () => {
   }, []);
 
   const handleChangeToken = (text: string) => setToken(text);
+  const handleChangeFieldId = (id: string) => setFieldId(id);
+  const handleChangeTag = (tag: string) => setTag(tag);
 
   const runner = async (fn: () => Promise<any>) => {
     if (isLoading) return;
@@ -70,33 +74,83 @@ const App = () => {
       )
     );
   };
+  const handlePressSetFields = () => {
+    if (!fieldId) {
+      console.warn('field id is empty');
+      return
+    }
+    Zendesk.setConversationFields({ [fieldId]: 'react-native-zendesk-messaging' });
+    Alert.alert('setConversationFields: ' + fieldId);
+  };
+  const handlePressClearFields = () => {
+    Zendesk.clearConversationFields();
+    Alert.alert('clearConversationFields');
+  }
+  const handlePressSetTags = () => {
+    if (!tag) {
+      console.warn('tag is empty');
+      return;
+    }
+    Zendesk.setConversationTags([tag]);
+    Alert.alert('setConversationTags: ' + JSON.stringify([tag]));
+  };
+  const handlePressClearTags = () => {
+    Zendesk.clearConversationTags();
+    Alert.alert('clearConversationTags');
+  }
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.heading}>Zendesk</Text>
-      <Section title="User Authentication">
-        <TextInput
-          value={token}
-          onChangeText={handleChangeToken}
-          style={styles.textInput}
-          placeholder="User token"
-        />
-        <View style={styles.gap} />
-        <Text style={styles.text}>
-          {'User token: '}
-          <EmptyText>{token}</EmptyText>
-        </Text>
-        <View style={styles.gap} />
-        <Button label="Login" onPress={handlePressLogin} />
-        <View style={styles.gap} />
-        <Button label="Logout" onPress={handlePressLogout} />
-      </Section>
-      <Section title="Chat" hideSeparator>
-        <Button label="Open Messaging" onPress={handlePressOpen} />
-      </Section>
-      <Section title="Notifications" hideSeparator>
-        <Button label="Get unread count" onPress={handlePressCount} />
-      </Section>
+      <ScrollView>
+        <Text style={styles.heading}>Zendesk</Text>
+        <Section title="User Authentication">
+          <TextInput
+            value={token}
+            onChangeText={handleChangeToken}
+            style={styles.textInput}
+            placeholder="User token"
+          />
+          <View style={styles.gap} />
+          <Text style={styles.text}>
+            {'User token: '}
+            <EmptyText>{token}</EmptyText>
+          </Text>
+          <View style={styles.gap} />
+          <Button label="Login" onPress={handlePressLogin} />
+          <View style={styles.gap} />
+          <Button label="Logout" onPress={handlePressLogout} />
+        </Section>
+        <Section title="Chat">
+          <Button label="Open Messaging" onPress={handlePressOpen} />
+        </Section>
+        <Section title="Fields">
+          <TextInput
+            value={fieldId}
+            onChangeText={handleChangeFieldId}
+            style={styles.textInput}
+            placeholder="Field id"
+          />
+          <View style={styles.gap} />
+          <Button label="Set Fields" onPress={handlePressSetFields} />
+          <View style={styles.gap} />
+          <Button label="Clear Fields" onPress={handlePressClearFields} />
+        </Section>
+        <Section title="Tags">
+          <TextInput
+            value={tag}
+            onChangeText={handleChangeTag}
+            style={styles.textInput}
+            placeholder="Tag"
+          />
+          <View style={styles.gap} />
+          <Button label="Set Tags" onPress={handlePressSetTags} />
+          <View style={styles.gap} />
+          <Button label="Clear Tags" onPress={handlePressClearTags} />
+        </Section>
+        <Section title="Notifications" hideSeparator>
+          <Button label="Get unread count" onPress={handlePressCount} />
+        </Section>
+      </ScrollView>
       {isLoading ? <LoadingView /> : null}
     </SafeAreaView>
   );