Separated local/remote clipboard views

src/App.tsx

@@ -5,63 +5,57 @@
  * @format
  */
 import * as React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import type {PropsWithChildren} from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import type { PropsWithChildren } from 'react';
 import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
+    SafeAreaView,
+    ScrollView,
+    StatusBar,
+    StyleSheet,
+    Text,
+    useColorScheme,
+    View,
 } from 'react-native';
 
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+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.Navigator>
-    </NavigationContainer>
-  );
+    return (
+        <NavigationContainer>
+            <Stack.Navigator>
+                <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>
+    );
 }
 
 const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
+    sectionContainer: {
+        marginTop: 32,
+        paddingHorizontal: 24,
+    },
+    sectionTitle: {
+        fontSize: 24,
+        fontWeight: '600',
+    },
+    sectionDescription: {
+        marginTop: 8,
+        fontSize: 18,
+        fontWeight: '400',
+    },
+    highlight: {
+        fontWeight: '700',
+    },
 });
 
 export default App;

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>;
+    }
+}