Change tab and bottom sheet libraries

2024-09-28 22:30:41 +00:00 · 2023-01-18 19:25:13 +01:00 · 2023-01-18 19:25:13 +01:00 · e89c4ba380
commit e89c4ba380
parent 1b301e52ae
8 changed files with 151 additions and 113 deletions
--- a/android/app/src/main/java/com/nostros/classes/Event.java
+++ b/android/app/src/main/java/com/nostros/classes/Event.java
@ -9,6 +9,7 @@ import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;

+import java.time.Instant;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.UUID;
--- a/android/app/src/main/java/com/nostros/classes/Websocket.java
+++ b/android/app/src/main/java/com/nostros/classes/Websocket.java
@ -17,6 +17,7 @@ import org.json.JSONException;
 import org.json.JSONObject;

 import java.io.IOException;
+import java.time.Instant;

 public class Websocket {
    private WebSocket webSocket;
@ -41,11 +42,15 @@ public class Websocket {
            }
        }
        webSocket.sendText(message);
-        JSONArray jsonArray = null;
        try {
+            JSONArray jsonArray = null;
            jsonArray = new JSONArray(message);
-            JSONObject data = jsonArray.getJSONObject(2);
-            database.saveEvent(data, pubKey);
+            String messageType = jsonArray.get(0).toString();
+            if (messageType.equals("EVENT")) {
+                JSONObject data = jsonArray.getJSONObject(2);
+                data.put("created_at", String.valueOf(System.currentTimeMillis() / 1000L));
+                database.saveEvent(data, pubKey);
+            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
--- a/frontend/Pages/ContactsFeed/index.tsx
+++ b/frontend/Pages/ContactsFeed/index.tsx
@ -20,6 +20,7 @@ import { RelayPoolContext } from '../../Contexts/RelayPoolContext'
 import { formatPubKey, populatePets, username } from '../../Functions/RelayFunctions/Users'
 import { getNip19Key } from '../../lib/nostr/Nip19'
 import { UserContext } from '../../Contexts/UserContext'
+import { TabView, SceneMap, TabBar } from 'react-native-tab-view'
 import {
  AnimatedFAB,
  Button,
@ -35,8 +36,14 @@ import NostrosAvatar from '../../Components/NostrosAvatar'
 import { navigate } from '../../lib/Navigation'
 import RBSheet from 'react-native-raw-bottom-sheet'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import {
+  NavigationState,
+  Route,
+  SceneRendererProps,
+} from 'react-native-tab-view/lib/typescript/src/types'

 export const ContactsFeed: React.FC = () => {
+  const { t } = useTranslation('common')
  const { database } = useContext(AppContext)
  const { publicKey, setContantsCount, setFollowersCount, nPub } = React.useContext(UserContext)
  const { relayPool, lastEventId } = useContext(RelayPoolContext)
@ -48,8 +55,11 @@ export const ContactsFeed: React.FC = () => {
  const [contactInput, setContactInput] = useState<string>()
  const [isAddingContact, setIsAddingContact] = useState<boolean>(false)
  const [showNotification, setShowNotification] = useState<undefined | string>()
-
-  const { t } = useTranslation('common')
+  const [index, setIndex] = React.useState(0)
+  const [routes] = React.useState([
+    { key: 'following', title: t('contactsFeed.following', { count: following.length }) },
+    { key: 'followers', title: t('contactsFeed.followers', { count: followers.length }) },
+  ])

  useEffect(() => {
    loadUsers()
@ -182,91 +192,99 @@ export const ContactsFeed: React.FC = () => {
    }
  }, [])

+  const Following: () => JSX.Element = () => (
+    <View style={styles.container}>
+      {following.length > 0 ? (
+        <ScrollView horizontal={false}>
+          <View>
+            <FlatList
+              data={following}
+              renderItem={renderContactItem}
+              ItemSeparatorComponent={Divider}
+            />
+          </View>
+        </ScrollView>
+      ) : (
+        <View style={styles.blank}>
+          <MaterialCommunityIcons name='account-group-outline' size={64} style={styles.center} />
+          <Text variant='headlineSmall' style={styles.center}>
+            {t('contactsFeed.emptyTitleFollowing')}
+          </Text>
+          <Text variant='bodyMedium' style={styles.center}>
+            {t('contactsFeed.emptyDescriptionFollowing')}
+          </Text>
+          <Button mode='contained' compact onPress={() => bottomSheetAddContactRef.current?.open()}>
+            {t('contactsFeed.emptyButtonFollowing')}
+          </Button>
+        </View>
+      )}
+    </View>
+  )
+
+  const Follower: () => JSX.Element = () => (
+    <View style={styles.container}>
+      {followers.length > 0 ? (
+        <ScrollView horizontal={false}>
+          <View>
+            <FlatList
+              data={followers}
+              renderItem={renderContactItem}
+              ItemSeparatorComponent={Divider}
+            />
+          </View>
+        </ScrollView>
+      ) : (
+        <View style={styles.blank}>
+          <MaterialCommunityIcons name='account-group-outline' size={64} style={styles.center} />
+          <Text variant='headlineSmall' style={styles.center}>
+            {t('contactsFeed.emptyTitleFollower')}
+          </Text>
+          <Text variant='bodyMedium' style={styles.center}>
+            {t('contactsFeed.emptyDescriptionFollower')}
+          </Text>
+          <Button
+            mode='contained'
+            compact
+            onPress={() => {
+              setShowNotification('keyCopied')
+              Clipboard.setString(nPub ?? '')
+            }}
+          >
+            {t('contactsFeed.emptyButtonFollower')}
+          </Button>
+        </View>
+      )}
+    </View>
+  )
+
+  const renderScene = SceneMap({
+    following: Following,
+    followers: Follower,
+  })
+
+  const renderTabBar: (
+    props: SceneRendererProps & { navigationState: NavigationState<Route> },
+  ) => JSX.Element = (props) => (
+    <TabBar
+      {...props}
+      indicatorStyle={{ backgroundColor: theme.colors.primary }}
+      style={{ backgroundColor: theme.colors.background }}
+      renderLabel={({ route }) => (
+        <Text style={[styles.tabLabel, { color: theme.colors.onSurfaceVariant }]}>
+          {route.title}
+        </Text>
+      )}
+    />
+  )
+
  return (
    <>
-      <Tabs
-        value={0}
-        onChange={() => {}}
-        defaultIndex={0}
-        uppercase={false}
-        style={{ backgroundColor: theme.colors.background }}
-      >
-        <TabScreen label={t('contactsFeed.following', { count: following.length })}>
-          <View style={styles.container}>
-            {following.length > 0 ? (
-              <ScrollView horizontal={false}>
-                <View>
-                  <FlatList
-                    data={following}
-                    renderItem={renderContactItem}
-                    ItemSeparatorComponent={Divider}
-                  />
-                </View>
-              </ScrollView>
-            ) : (
-              <View style={styles.blank}>
-                <MaterialCommunityIcons
-                  name='account-group-outline'
-                  size={64}
-                  style={styles.center}
-                />
-                <Text variant='headlineSmall' style={styles.center}>
-                  {t('contactsFeed.emptyTitleFollowing')}
-                </Text>
-                <Text variant='bodyMedium' style={styles.center}>
-                  {t('contactsFeed.emptyDescriptionFollowing')}
-                </Text>
-                <Button
-                  mode='contained'
-                  compact
-                  onPress={() => bottomSheetAddContactRef.current?.open()}
-                >
-                  {t('contactsFeed.emptyButtonFollowing')}
-                </Button>
-              </View>
-            )}
-          </View>
-        </TabScreen>
-        <TabScreen label={t('contactsFeed.followers', { count: followers.length })}>
-          <View style={styles.container}>
-            {followers.length > 0 ? (
-              <ScrollView horizontal={false}>
-                <View>
-                  <FlatList
-                    data={followers}
-                    renderItem={renderContactItem}
-                    ItemSeparatorComponent={Divider}
-                  />
-                </View>
-              </ScrollView>
-            ) : (
-              <View style={styles.blank}>
-                <MaterialCommunityIcons
-                  name='account-group-outline'
-                  size={64}
-                  style={styles.center}
-                />
-                <Text variant='headlineSmall' style={styles.center}>
-                  {t('contactsFeed.emptyTitleFollower')}
-                </Text>
-                <Text variant='bodyMedium' style={styles.center}>
-                  {t('contactsFeed.emptyDescriptionFollower')}
-                </Text>
-                <Button
-                  mode='contained'
-                  compact
-                  onPress={() => {
-                    setShowNotification('keyCopied')
-                    Clipboard.setString(nPub ?? '')
-                  }}
-                >
-                  {t('contactsFeed.emptyButtonFollower')}
-                </Button>
-              </View>
-            )}
-          </View>
-        </TabScreen>
-      </Tabs>
+      <TabView
+        navigationState={{ index, routes }}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={() => {}}
+      />
      <AnimatedFAB
        style={[styles.fab, { top: Dimensions.get('window').height - 220 }]}
        icon='account-multiple-plus-outline'
@ -370,9 +388,12 @@ const styles = StyleSheet.create({
  blank: {
    justifyContent: 'space-between',
    height: 232,
-    marginTop: 12,
+    marginTop: 5,
    padding: 16,
  },
+  tabLabel: {
+    margin: 8,
+  },
 })

 export default ContactsFeed
--- a/frontend/Pages/HomeFeed/index.tsx
+++ b/frontend/Pages/HomeFeed/index.tsx
@ -152,7 +152,6 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ jumpTo }) => {
          horizontal={false}
          showsVerticalScrollIndicator={false}
          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
-          style={styles.list}
        >
          {notes.map((note) => renderItem(note))}
          {notes.length >= 10 && <ActivityIndicator animating={true} />}
@ -193,9 +192,6 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ jumpTo }) => {
 }

 const styles = StyleSheet.create({
-  list: {
-    padding: 16,
-  },
  noteCard: {
    marginBottom: 16,
  },
--- a/frontend/Pages/ProfileLoadPage/index.tsx
+++ b/frontend/Pages/ProfileLoadPage/index.tsx
@ -10,25 +10,33 @@ import { StyleSheet, View } from 'react-native'
 import Logo from '../../Components/Logo'
 import { Button, Snackbar, Text } from 'react-native-paper'
 import { navigate } from '../../lib/Navigation'
+import { useFocusEffect } from '@react-navigation/native'

 export const ProfileLoadPage: React.FC = () => {
-  const { loadingDb, database } = useContext(AppContext)
-  const { relayPool, lastEventId, loadingRelayPool } = useContext(RelayPoolContext)
+  const { database } = useContext(AppContext)
+  const { relayPool, lastEventId } = useContext(RelayPoolContext)
  const { publicKey, reloadUser, user } = useContext(UserContext)
  const { t } = useTranslation('common')
  const [profileFound, setProfileFound] = useState<boolean>(false)
  const [contactsCount, setContactsCount] = useState<number>(0)
+    
+  useFocusEffect(
+    React.useCallback(() => {
+      console.log('FOCUS ProfileLoadPage')
+      if (publicKey) {
+        relayPool?.subscribe('loading-meta', [
+          {
+            kinds: [EventKind.meta],
+            authors: [publicKey],
+          },
+        ])
+      }

-  useEffect(() => {
-    if (!loadingRelayPool && !loadingDb && publicKey) {
-      relayPool?.subscribe('loading-meta', [
-        {
-          kinds: [EventKind.meta],
-          authors: [publicKey],
-        },
-      ])
-    }
-  }, [loadingRelayPool, publicKey, loadingDb])
+      return () => {
+        console.log('UNFOCUS ProfileLoadPage')
+      };
+    }, [])
+  )

  useEffect(() => {
    loadPets()
@ -50,7 +58,7 @@ export const ProfileLoadPage: React.FC = () => {
            {
              kinds: [EventKind.meta, EventKind.textNote],
              authors,
-              since: moment().unix() - 86400,
+              since: moment().unix() - 43200,
            },
          ])
        }
@ -58,6 +66,10 @@ export const ProfileLoadPage: React.FC = () => {
    }
  }

+  const goHome: () => void = () => {
+    navigate('Feed')
+  }
+
  return (
    <View style={styles.container}>
      <Logo onlyIcon size='medium' />
@ -65,7 +77,7 @@ export const ProfileLoadPage: React.FC = () => {
        {profileFound ? t('profileLoadPage.foundProfile') : t('profileLoadPage.searchingProfile')}
      </Text>
      <Text variant='titleMedium'>{t('profileLoadPage.foundContacts', { contactsCount })}</Text>
-      <Button mode='contained' onPress={() => navigate('Feed')}>
+      <Button mode='contained' onPress={goHome}>
        {t('profileLoadPage.home')}
      </Button>
      <Snackbar
--- a/frontend/Pages/RelaysPage/index.tsx
+++ b/frontend/Pages/RelaysPage/index.tsx
@ -17,6 +17,7 @@ import {
  Snackbar,
 } from 'react-native-paper'
 import RBSheet from 'react-native-raw-bottom-sheet'
+import { useFocusEffect } from '@react-navigation/native'

 export const RelaysPage: React.FC = () => {
  const defaultRelayInput = React.useMemo(() => 'wss://', [])
--- a/package.json
+++ b/package.json
@ -39,7 +39,6 @@
    "react-native-multithreading": "^1.1.1",
    "react-native-pager-view": "^6.1.2",
    "react-native-paper": "^5.1.3",
-    "react-native-paper-tabs": "^0.7.0",
    "react-native-parsed-text": "^0.0.22",
    "react-native-qrcode-svg": "^6.1.2",
    "react-native-quick-sqlite": "^6.1.1",
@ -50,6 +49,7 @@
    "react-native-securerandom": "^1.0.1",
    "react-native-sensitive-info": "^5.5.8",
    "react-native-svg": "^13.7.0",
+    "react-native-tab-view": "^3.3.4",
    "react-native-vector-icons": "^9.2.0",
    "react-native-webp-format": "^1.1.2",
    "readable-stream": "^4.3.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -7230,11 +7230,6 @@ react-native-pager-view@^6.1.2:
  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.1.2.tgz#3522079b9a9d6634ca5e8d153bc0b4d660254552"
  integrity sha512-qs2KSFc+7N7B+UZ6SG2sTvCkppagm5fVyRclv1KFKc7lDtrhXLzN59tXJw575LDP/dRJoXsNwqUAhZJdws6ABQ==

-react-native-paper-tabs@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-native-paper-tabs/-/react-native-paper-tabs-0.7.0.tgz#97ae5838f8a2d3ac2826cf1dee065364d7c3bad8"
-  integrity sha512-TXz1G1hLJNvykJ57VhjKFVRgRDC2bxzb/bwPJ59POK9nGO0yD+Rx7+W5D0i5/ZQF1uKSV92IMv+eowd/BRM46Q==
-
 react-native-paper@^5.1.3:
  version "5.1.3"
  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.1.3.tgz#31b9c52633c1ee0e5842ca0f61179de0750b48ee"
@ -7315,6 +7310,13 @@ react-native-svg@^13.7.0:
    css-select "^5.1.0"
    css-tree "^1.1.3"

+react-native-tab-view@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.3.4.tgz#856d4527f3bbf05e2649302ec80abe9f2f004666"
+  integrity sha512-rceAYWpHa6knA7tsTnnjlcOxlCErR4F+yXQPpNm125IvYFyv09YRhE5uMU2IzyPIQ1CJvADCHurF3KySzVI+4Q==
+  dependencies:
+    use-latest-callback "^0.1.5"
+
 react-native-vector-icons@^9.2.0:
  version "9.2.0"
  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz#3c0c82e95defd274d56363cbe8fead8d53167ebd"