Merge pull request #13 from ThomasRubini/view-clip

Added clip local/remote

src/clip/AClipElement.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Clipboard } from 'react-native';
+import Toast from 'react-native-simple-toast';
+
+export default class AClipElement extends React.Component<any, any> {
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    onCopy() {
+        Clipboard.setString(this.props.content);
+        Toast.show('Put "' + this.props.content + '" in clipboard', Toast.SHORT);
+    }
+
+}

src/clip/ClipElement.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { View, Text, Clipboard } from 'react-native';
-import IconVector from 'react-native-vector-icons/FontAwesome5';
-import Toast from 'react-native-simple-toast';
-
-export default class ClipElement extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);
-    }
-
-    onCopy() {
-        Clipboard.setString(this.props.title);
-        Toast.show('Put "' + this.props.title + '" in clipboard', Toast.SHORT);
-    }
-
-    render(): JSX.Element {
-        return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
-            <Text style={{fontSize:20,}}>{this.props.title}</Text>
-            <IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
-        </View>;
-    }
-}

src/clip/ClipElementLocal.tsx

@@ -0,0 +1,17 @@
+import { View, Text } from 'react-native';
+import IconVector from 'react-native-vector-icons/FontAwesome5';
+import AClipElement from './AClipElement';
+
+export default class ClipElementLocal extends AClipElement {
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    render(): JSX.Element {
+        return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
+            <Text style={{fontSize:20,}}>{this.props.content}</Text>
+            <IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
+        </View>;
+    }
+}

src/clip/ClipElementRemote.tsx

@@ -0,0 +1,21 @@
+import { View, Text } from 'react-native';
+import IconVector from 'react-native-vector-icons/FontAwesome5';
+import AClipElement from './AClipElement';
+
+export default class ClipElementRemote extends AClipElement {
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    render(): JSX.Element {
+        return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
+            <View style={{flex:1,margin:10,flexDirection:'column'}}>
+                <Text style={{fontSize:20,}}>{this.props.content}</Text>
+                <Text style={{fontSize:10,}}>{this.props.deviceName}</Text>
+                <Text style={{fontSize:10,}}>{this.props.timestamp}</Text>
+            </View>
+            <IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
+        </View>;
+    }
+}

src/clip/ClipList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import ClipElement from './ClipElement';
+import ClipElementLocal from './ClipElementLocal';
+import ClipElementRemote from './ClipElementRemote';
 
 export default class ClipList extends React.Component<any, any> {
 
@@ -8,13 +9,18 @@ export default class ClipList extends React.Component<any, any> {
         super(props);
     }
 
-    createClipElement(title: string): JSX.Element {
-        return <ClipElement title={title} />;
+    createClipElementLocal(content: string): JSX.Element {
+        return <ClipElementLocal content={content} />;
+    }
+
+    createClipElementRemote(content: string, deviceName: string, timestamp: number): JSX.Element {
+        return <ClipElementRemote content={content} deviceName={deviceName} timestamp={timestamp} />;
     }
 
     render(): JSX.Element {
-        return <ScrollView>
-            {this.props.clips.map((entry: any) => this.createClipElement(entry.title))}
-        </ScrollView>;
+        let clips;
+        if (this.props.type === "local") clips = this.props.clips.map((entry: any) => this.createClipElementLocal(entry.content));
+        else clips = this.props.clips.map((entry: any) => this.createClipElementRemote(entry.content, entry.deviceName, entry.timestamp));
+        return <ScrollView>{clips}</ScrollView>;
     }
 }

src/clip/ClipView.tsx

@@ -1,17 +1,45 @@
+import axios from 'axios';
 import React from 'react';
 import { ScrollView, Text } from 'react-native';
 import ClipList from './ClipList';
 
+type Clip = {
+    content: string;
+    token: string;
+    deviceName: string;
+    id: number;
+    timestamp: number;
+};
+
+async function getLocalClips() {
+    return [{ content: "test" }, { content: "test2" }];
+}
+
+async function getRemoteClips() {
+    const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=FFmkeNAxguFM5My52PhhzlOB_1ZwDr0ureD2kzuewMlhmJ6Ia6YkhcdZd1Nw4SXdLu9Ji0gzVYCfGCcgB8v8zQ");
+    return Object.values(data['clipboard']);
+}
+
 export default class ClipView extends React.Component<any, any> {
 
     constructor(props: any) {
         super(props);
+        this.state = {
+            clips: []
+        }
+    }
+
+    async componentDidMount() {
+        let clips;
+        if (this.props.type === "local") clips = await getLocalClips();
+        else clips = await getRemoteClips();
+        this.setState({clips: clips});
     }
 
     render(): JSX.Element {
         return <ScrollView>
-            <Text style={{fontWeight:'bold',fontSize:30, margin:20}}>Local Clipboard</Text>
-            <ClipList clips={[{"title":"abcd"}, {"title": "j'aime manger mon caca"}]} />
+            <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{this.props.type[0].toUpperCase() + this.props.type.slice(1) + " Clipboard"}</Text>
+            <ClipList type={this.props.type} clips={this.state.clips} />
         </ScrollView>;
     }
 }