Separated local/remote clipboard views

src/App.tsx

@@ -18,28 +18,22 @@ import {
 } from 'react-native';
 
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import ClipViewLocal from './clip/ClipViewLocal';
+import ClipViewRemote from './clip/ClipViewRemote';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 
-const Stack = createNativeStackNavigator();
+const Stack = createMaterialBottomTabNavigator();
 
 function App(): JSX.Element {
     return (
         <NavigationContainer>
             <Stack.Navigator>
-        {/* <Stack.Screen
-          name="Login"
-          component={LoginScreen}
-          options={{title: 'Login Screen'}}
-          />
-          <Stack.Screen
-          name="Home"
-          component={RemoteClipboard}
-          options={{title: 'Welcome'}}
-          />\
-          <Stack.Screen
-          name="Home"
-          component={LocalClipboard}
-          options={{title: 'Welcome'}}
-          />*/}
+                <Stack.Screen name="Remote" options={{ title: 'remote' }}>
+                    {(props) => <ClipViewRemote navigation={props.navigation} type={"remote"} />}
+                </Stack.Screen>
+                <Stack.Screen name="Local" options={{ title: 'local' }}>
+                    {(props) => <ClipViewLocal navigation={props.navigation} type={"local"} />}
+                </Stack.Screen>
             </Stack.Navigator>
         </NavigationContainer>
     );

src/clip/AClipView.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ScrollView, Text, Button } from 'react-native';
+import ClipList from './ClipList';
+
+
+export default abstract class AClipView extends React.Component<any, any> {
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            clips: []
+        }
+    }
+
+    abstract getClips(): any;
+
+    abstract componentDidMount(): any;
+}

src/clip/ClipView.tsx

@@ -1,45 +0,0 @@
-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 }}>{this.props.type[0].toUpperCase() + this.props.type.slice(1) + " Clipboard"}</Text>
-            <ClipList type={this.props.type} clips={this.state.clips} />
-        </ScrollView>;
-    }
-}

src/clip/ClipViewLocal.tsx

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import React from 'react';
+import { ScrollView, Text, Button } from 'react-native';
+import ClipList from './ClipList';
+import AClipView from './AClipView';
+
+
+export default class ClipViewLocal extends AClipView {
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    getClips() {
+        return [{ content: "test" }, { content: "test2" }];
+    }
+
+    componentDidMount() {
+        let clips;
+        clips = this.getClips();
+        this.setState({clips: clips});
+    }
+
+    render(): JSX.Element {
+        let title = "Local Clipboard";
+        let notTitle = "Remote Clipboard";
+        return <ScrollView>
+            <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
+            <ClipList type={this.props.type} clips={this.state.clips} />
+        </ScrollView>;
+    }
+}

src/clip/ClipViewRemote.tsx

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import React from 'react';
+import { ScrollView, Text, Button } from 'react-native';
+import ClipList from './ClipList';
+import AClipView from './AClipView';
+
+export default class ClipViewRemote extends AClipView {
+    constructor(props: any) {
+        super(props);
+    }
+
+    async getClips() {
+        const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=FFmkeNAxguFM5My52PhhzlOB_1ZwDr0ureD2kzuewMlhmJ6Ia6YkhcdZd1Nw4SXdLu9Ji0gzVYCfGCcgB8v8zQ");
+        return Object.values(data['clipboard']);
+    }
+
+    async componentDidMount() {
+        let clips;
+        clips = await this.getClips();
+        this.setState({clips: clips});
+    }
+
+    render(): JSX.Element {
+        let title = "Remote Clipboard";
+        let notTitle = "Local Clipboard";
+        return <ScrollView>
+            <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
+            <ClipList type={this.props.type} clips={this.state.clips} />
+            <Button title="Refresh" onPress={() => this.componentDidMount()} />
+        </ScrollView>;
+    }
+}