Basic DAT setup

* metro config
* file storage
* react-native-tcp + react-native-udp
* dns hack
* ui
* README
* LICENSE

App.js

@@ -1,113 +1,145 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow strict-local
- */
-
-import React from 'react';
+import React, {useState, useCallback, useRef} from 'react';
 import {
   SafeAreaView,
   StyleSheet,
   ScrollView,
   View,
   Text,
+  Button,
+  TextInput,
   StatusBar,
 } from 'react-native';
+import storage from './storage';
+import apiFactory from '@sammacbeth/dat-api-v1';
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+const defaultAddress =
+  '41f8a987cfeba80a037e51cc8357d513b62514de36f2f9b3d3eeec7a8fb3b5a5';
+
+// create an API using file persistence
+const api = apiFactory({
+  persistantStorageFactory: address =>
+    Promise.resolve(file => storage('hyperdrive')(`${address}/${file}`)),
+});
+
+const load = async address => {
+  // load an existing dat in memory
+  const existing = await api.getDat(address, {
+    persist: true,
+    driveOptions: {
+      sparse: true,
+    },
+  });
 
-const App: () => React$Node = () => {
+  // wait for data
+  await new Promise(async (resolve, reject) => {
+    setTimeout(reject.bind(null, 'timeout'), 10000);
+    await existing.ready;
+    resolve();
+  });
+
+  const files = await new Promise((resolve, reject) => {
+    existing.drive.readdir('/', (err, files) => {
+      if (err) {
+        return reject('error listing directory');
+      }
+      resolve(files);
+    });
+  });
+  return files;
+};
+
+const App = () => {
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [address, setAddress] = useState(defaultAddress);
+  const inputRef = useRef();
+  const loadCallback = useCallback(async () => {
+    setLoading(true);
+    setError(false);
+    try {
+      const newFiles = await load(address);
+      setFiles(newFiles);
+    } catch (e) {
+      setError(e);
+    }
+    setLoading(false);
+  }, [address]);
   return (
     <>
       <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.wrapper}>
+          <View style={styles.topBar}>
+            <TextInput
+              ref={inputRef}
+              editable
+              style={styles.input}
+              defaultValue={defaultAddress}
+              placeholder="Enter DAT address"
+              placeholderTextColor="#666666"
+              autoCorrect={false}
+              autoCompleteType="off"
+              autoCapitalize="none"
+              onChangeText={setAddress}
+            />
+            <Button onPress={loadCallback} style={styles.button} title="load" />
           </View>
-        </ScrollView>
+          <ScrollView style={styles.scrollView}>
+            <View style={styles.content}>
+              {error ? (
+                <Text>Error: {error}</Text>
+              ) : (
+                <>
+                  {loading ? (
+                    <Text>Loading...</Text>
+                  ) : (
+                    <>
+                      {files.length > 0 && (
+                        <View>
+                          <Text>List of files:</Text>
+                          {files.map(file => (
+                            <Text key={file}>{file}</Text>
+                          ))}
+                        </View>
+                      )}
+                    </>
+                  )}
+                </>
+              )}
+            </View>
+          </ScrollView>
+        </View>
       </SafeAreaView>
     </>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
+  safeArea: {
+    flex: 1,
   },
-  body: {
-    backgroundColor: Colors.white,
+  wrapper: {
+    flexGrow: 1,
+    flexDirection: 'column',
   },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
+  input: {
+    width: '70%',
+    flexGrow: 1,
+    padding: 5,
+    marginLeft: 10,
+    backgroundColor: '#cccccc',
   },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
+  button: {},
+  scrollView: {
+    flexGrow: 1,
   },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
+  content: {
+    margin: 10,
   },
 });
 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Cliqz GmbH., Krzysztof Modras, Sam Macbeth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,13 @@
+# DAT React Native
+
+This is a proof of concept itegration of DAT on iOS.
+
+## Setup
+
+* Prepare ReactNative development [environment](https://reactnative.dev/docs/environment-setup)
+* Clone this repo
+* Open cloned repo in terminal
+* Install node packages: `npm ci`
+* Install Cocoapods: `cd ios; pod install; cd ..`
+* Start React Native development server `npx react-native start`
+* Run the app `npx react-native run-ios`

android/app/build.gradle

@@ -213,6 +213,8 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    implementation project(':react-native-fs')
 }
 
 // Run this once to be able to run the application with BUCK

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'DatReactNative'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+include ':react-native-fs'
+project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
 include ':app'

dns-shim.js

@@ -0,0 +1,20 @@
+const lookup = (domain, options, cb) => {
+  if (!cb) {
+    cb = options;
+  }
+  if (domain === 'router.bittorrent.com') {
+    cb(null, '67.215.246.10', 4);
+    return;
+  }
+  if (domain === 'router.utorrent.com') {
+    cb(null, '82.221.103.244', 4);
+    return;
+  }
+  if (domain === 'dht.transmissionbt.com') {
+    cb(null, '212.129.33.59', 4);
+    return;
+  }
+  console.error('dns call for ', domain);
+};
+
+export { lookup };

index.js

@@ -1,9 +1,5 @@
-/**
- * @format
- */
-
 import {AppRegistry} from 'react-native';
-import hyperdrive from 'hyperdrive';
+import './setup';
 import App from './App';
 import {name as appName} from './app.json';