Added gridview 🎉

StarNumber12046 · Sep 22, 2024 · f5dbb4e · f5dbb4e
1 parent 3b2c1f2
commit f5dbb4e
Show file tree

Hide file tree

Showing 9 changed files with 349 additions and 108 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -100,6 +100,7 @@ export default function RootLayout() {
             <Stack.Screen name="tokenLogin" options={{ headerShown: false }} />
             <Stack.Screen name="onboarding" options={{ headerShown: false }} />
             <Stack.Screen name="gridView" options={{ headerShown: false }} />
+            <Stack.Screen name="post/[id]" options={{ headerShown: false }} />
           </Stack>
         </GestureHandlerRootView>
       </ThemeProvider>

diff --git a/app/gridView.tsx b/app/gridView.tsx
@@ -1,32 +1,64 @@
 import { SmallPost } from "@/components/ReBeal";
 import { FriendsPost, FriendsPostPost, getFriendsPosts } from "@/sdk";
-import { useEffect, useState } from "react";
+import { router } from "expo-router";
+import { useEffect, useRef, useState } from "react";
 import { FlatList, View, Text, StyleSheet, Dimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import Animated from "react-native-reanimated";
 
 export default function GridView() {
   const screenWidth = Dimensions.get("window").width; // Get the screen width
   const itemWidth = screenWidth / 3 - 5; // Calculate item width with some margin
   const [friendsPosts, setFriendsPosts] = useState<any[]>([]);
   let last = 0;
+
+  const translateY = useSharedValue(0);
+
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const debounce = (func: Function, delay: number) => {
+    // Clear any existing timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Set a new timeout
+    debounceTimeoutRef.current = setTimeout(() => {
+      func();
+    }, delay);
+  };
+  const onGestureEvent = (event: any) => {
+    if (event.nativeEvent.translationY > 50 && translateY.value === 0) {
+      // Check if the user swipes down and is at the top
+      debounce(() => {
+        router.push("/"); // Navigate to a new screen
+      }, 200);
+    }
+  };
+
   useEffect(() => {
     getFriendsPosts().then((posts) =>
       setFriendsPosts(posts.map((item) => ({ ...item, i: last++ })))
     );
   }, []);
   return (
-    <View>
-      <FlatList
-        style={styles.container}
-        numColumns={3}
-        data={friendsPosts}
-        initialNumToRender={1}
-        maxToRenderPerBatch={1}
-        keyExtractor={(item) => item.i.toString()}
-        renderItem={({ item }) => (
-          <SmallPost post={item} user={item.user} width={itemWidth} />
-        )}
-      />
-    </View>
+    <PanGestureHandler onGestureEvent={onGestureEvent}>
+      <Animated.View>
+        <View>
+          <FlatList
+            style={styles.container}
+            numColumns={3}
+            data={friendsPosts}
+            initialNumToRender={1}
+            maxToRenderPerBatch={1}
+            keyExtractor={(item) => item.i.toString()}
+            renderItem={({ item }) => (
+              <SmallPost post={item} user={item.user} width={itemWidth} />
+            )}
+          />
+        </View>
+      </Animated.View>
+    </PanGestureHandler>
   );
 }
 

diff --git a/app/index.tsx b/app/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { IOScrollView, InView } from "react-native-intersection-observer";
 import { View, StyleSheet, Text } from "react-native";
 import { TopBar } from "@/components/TopBar";
@@ -7,6 +7,13 @@ import { CameraButton } from "@/components/CameraButton";
 import { router } from "expo-router";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import getHeaders from "happy-headers";
+import { PanGestureHandler } from "react-native-gesture-handler"; // Import PanGestureHandler
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from "react-native-reanimated";
+
 import {
   checkToken,
   FullUser,
@@ -28,6 +35,11 @@ export default function App() {
   const [myPosts, setMyPosts] = useState<UserPost[]>([]);
   const [me, setMe] = useState<FullUser | null>(null);
   const userContext = useContext(ProfileContext);
+  const translateY = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
   async function checkAuth() {
     if (
       !(await AsyncStorage.getItem("authToken")) ||
@@ -63,84 +75,110 @@ export default function App() {
     }));
   };
 
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const debounce = (func: Function, delay: number) => {
+    // Clear any existing timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Set a new timeout
+    debounceTimeoutRef.current = setTimeout(() => {
+      func();
+    }, delay);
+  };
+  const onGestureEvent = (event: any) => {
+    if (event.nativeEvent.translationY > 50 && translateY.value === 0) {
+      // Check if the user swipes down and is at the top
+      debounce(() => {
+        router.push("/gridView"); // Navigate to a new screen
+      }, 200);
+    }
+  };
+
   return (
-    <View>
-      <TopBar
-        action={() => {
-          getFriendsPosts().then((p) => setFriendsPosts(p));
-          getMyPosts().then((p) => setMyPosts(p));
-          getMyProfile(userContext).then((p) => setMe(p));
-        }}
-      />
-      <IOScrollView style={styles.scrollView}>
-        <ScrollView
-          horizontal
-          style={{
-            width: "100%",
-            flexDirection: "row",
-          }}
-          contentContainerStyle={{
-            flexDirection: "row",
-            alignItems: "flex-start",
-            justifyContent: "center",
-            width: "100%",
-          }}
-        >
-          {myPosts.map((value) => (
-            <InView
-              key={value.id}
+    <PanGestureHandler onGestureEvent={onGestureEvent}>
+      <Animated.View style={[animatedStyle]}>
+        <View>
+          <TopBar
+            action={() => {
+              getFriendsPosts().then((p) => setFriendsPosts(p));
+              getMyPosts().then((p) => setMyPosts(p));
+              getMyProfile(userContext).then((p) => setMe(p));
+            }}
+          />
+          <IOScrollView style={styles.scrollView}>
+            <ScrollView
+              horizontal
               style={{
-                flex: 1,
-                height: 240,
-                marginHorizontal: -10,
+                width: "100%",
+                flexDirection: "row",
+              }}
+              contentContainerStyle={{
+                flexDirection: "row",
+                alignItems: "flex-start",
+                justifyContent: "center",
+                width: "100%",
               }}
             >
-              <MyPost
-                primaryHeight={value.primary.height}
-                primaryWidth={value.primary.width}
-                primaryUrl={value.primary.url}
-                secondaryHeight={value.secondary.height}
-                secondaryWidth={value.secondary.width}
-                secondaryUrl={value.secondary.url}
-              />
-            </InView>
-          ))}
-        </ScrollView>
-        <View style={{ width: "100%", top: -80 }}>
-          {friendsPosts.map(
-            (value) =>
-              value && (
+              {myPosts.map((value) => (
                 <InView
                   key={value.id}
-                  onChange={(inView) =>
-                    handleVisibilityChange(value.id, inView)
-                  }
+                  style={{
+                    flex: 1,
+                    height: 240,
+                    marginHorizontal: -10,
+                  }}
                 >
-                  <ReBeal
-                    userId={value.user.id}
+                  <MyPost
                     primaryHeight={value.primary.height}
                     primaryWidth={value.primary.width}
                     primaryUrl={value.primary.url}
                     secondaryHeight={value.secondary.height}
                     secondaryWidth={value.secondary.width}
                     secondaryUrl={value.secondary.url}
-                    userName={value.user.username}
-                    userUrl={(value.user.profilePicture ?? { url: "" }).url}
-                    isLate={value.isLate}
-                    postedAt={value.postedAt}
-                    lateInSeconds={value.lateInSeconds}
-                    isMain={value.isMain}
-                    visible={visibleItems[value.id]} // Pass visibility state here
-                    blurred={myPosts.length <= 0}
                   />
                 </InView>
-              )
-          )}
-          <View style={{ width: "100%", height: 0 }}></View>
+              ))}
+            </ScrollView>
+            <View style={{ width: "100%", top: -80 }}>
+              {friendsPosts.map(
+                (value) =>
+                  value && (
+                    <InView
+                      key={value.id}
+                      onChange={(inView) =>
+                        handleVisibilityChange(value.id, inView)
+                      }
+                    >
+                      <ReBeal
+                        postData={value}
+                        userId={value.user.id}
+                        primaryHeight={value.primary.height}
+                        primaryWidth={value.primary.width}
+                        primaryUrl={value.primary.url}
+                        secondaryHeight={value.secondary.height}
+                        secondaryWidth={value.secondary.width}
+                        secondaryUrl={value.secondary.url}
+                        userName={value.user.username}
+                        userUrl={(value.user.profilePicture ?? { url: "" }).url}
+                        isLate={value.isLate}
+                        postedAt={value.postedAt}
+                        lateInSeconds={value.lateInSeconds}
+                        isMain={value.isMain}
+                        visible={visibleItems[value.id]} // Pass visibility state here
+                        blurred={myPosts.length <= 0}
+                      />
+                    </InView>
+                  )
+              )}
+              <View style={{ width: "100%", height: 0 }}></View>
+            </View>
+          </IOScrollView>
+          <CameraButton shown={me?.canPost ?? true} />
         </View>
-      </IOScrollView>
-      <CameraButton shown={me?.canPost ?? true} />
-    </View>
+      </Animated.View>
+    </PanGestureHandler>
   );
 }
 

diff --git a/app/onboarding.tsx b/app/onboarding.tsx
@@ -25,6 +25,7 @@ function handleRegistrationError(errorMessage: string) {
 // Register background handler
 messaging().setBackgroundMessageHandler(async (remoteMessage) => {
   console.log(remoteMessage);
+  if (remoteMessage.notification) return; // Ignore notifications
   if (remoteMessage.data?.type == "moment") {
     console.log("moments");
     PushNotification.localNotification({