attempt to authenticate, pass uppy

examples/react-native-expo/react-native/file-picker/index.js

@@ -12,8 +12,8 @@ import {
 import takePicture from './takePicture'
 import selectImage from './selectImage'
 import selectDocument from './selectDocument'
-// import Provider from './provider'
-import ProviderGrid from './provider-grid'
+import Provider from './provider'
+// import ProviderGrid from './provider-grid'
 
 export default class UppyReactNativeFilePicker extends React.Component {
   constructor () {
@@ -149,7 +149,7 @@ export default class UppyReactNativeFilePicker extends React.Component {
           Expo.Alert.alert('Modal has been closed.')
           this.props.onRequestClose()
         }}>
-        {this.state.openProvider ? <ProviderGrid id={this.state.openProvider} /> : this.renderSourceList()}
+        {this.state.openProvider ? <Provider id={this.state.openProvider} uppy={this.uppy} /> : this.renderSourceList()}
       </Modal>
     )
   }

examples/react-native-expo/react-native/file-picker/provider.js

@@ -1,12 +1,23 @@
 import React from 'react'
 // import Expo from 'expo'
 import {
-  StyleSheet,
-  FlatList,
-  View,
-  Image } from 'react-native'
+  // StyleSheet,
+  // FlatList,
+  // View,
+  // Image,
+  WebView } from 'react-native'
 
-export default class UppyReactNativeFilePicker extends React.Component {
+import Instagram from '@uppy/instagram'
+
+function getQueryParamValueFromUrl (name, url) {
+  name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]')
+  var regexS = '[\\?&]' + name + '=([^&#]*)'
+  var regex = new RegExp(regexS)
+  var results = regex.exec(url)
+  return results == null ? null : results[1]
+}
+
+export default class Provider extends React.Component {
   constructor () {
     super()
 
@@ -28,41 +39,65 @@ export default class UppyReactNativeFilePicker extends React.Component {
     }
   }
 
-  renderGrid (items) {
-    return (
-      <View style={styles.container}>
-        <FlatList
-          data={items}
-          renderItem={({item}) => (
-            <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
-              <Image style={styles.item} source={{uri: item.url}} />
-            </View>
-          )}
-          keyExtractor={(item, index) => index.toString()}
-          numColumns={3}
-        />
-      </View>
-    )
+  componentDidMount () {
+    this.uppy = this.props.uppy
+    // console.log('123', this.uppy)
+    this.plugin = new Instagram(this.uppy, {
+      serverUrl: 'http://localhost:3020'
+    })
+    // this.authUrl = 'http://localhost:3020'
+    this.setState({
+      // authUrl: 'http://localhost:3020'
+      authUrl: this.plugin.provider.authUrl()
+    })
   }
 
-  renderRow () {
-
-  }
+  // renderGrid (items) {
+  //   return (
+  //     <View style={styles.container}>
+  //       <FlatList
+  //         data={items}
+  //         renderItem={({item}) => (
+  //           <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
+  //             <Image style={styles.item} source={{uri: item.url}} />
+  //           </View>
+  //         )}
+  //         keyExtractor={(item, index) => index.toString()}
+  //         numColumns={3}
+  //       />
+  //     </View>
+  //   )
+  // }
 
   render () {
-    return this.renderGrid(this.state.instagram.items)
+    console.log(this.state.authUrl)
+    return <WebView
+      source={{ uri: this.state.authUrl }}
+      style={{marginTop: 20}}
+      onNavigationStateChange={(ev) => {
+        const url = ev.url
+        const token = getQueryParamValueFromUrl('uppyAuthToken', url)
+        console.log(token)
+        // this.plugin.provider.setAuthToken(token)
+        // console.log(this.plugin.provider.list())
+      }}
+    />
+    // plugin.provider.setAuthToken('')
+    // plugin.provider.list()
+
+    // return this.renderGrid(this.state.instagram.items)
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    flex: 1,
-    paddingTop: 30
-  },
-  item: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 100
-  }
-})
+// const styles = StyleSheet.create({
+//   container: {
+//     justifyContent: 'center',
+//     flex: 1,
+//     paddingTop: 30
+//   },
+//   item: {
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     height: 100
+//   }
+// })