pager view in profile page

Author: MarkussMadsbakken

actions/users/me.ts

@@ -41,6 +41,31 @@ export async function myEvents(): Promise<{ results: Event[] }> {
         throw new Error(errorData.detail);
     }
 
+    const data = await response.json() as { results: Event[] };
+    return data;
+}
+
+export async function myPreviousEvents(): Promise<{ results: Event[] }> {
+    const queryParams = new URLSearchParams({
+        expired: "true",
+    });
+
+    const url = `${BASE_URL}/users/me/events/?${queryParams}`;
+    const token = await getToken();
+
+    const response = await fetch(url, {
+        //@ts-expect-error
+        headers: {
+            "method": "GET",
+            "X-Csrf-Token": token,
+        }
+    });
+
+    if (!response.ok) {
+        const errorData = await response.json() as LeptonError;
+        throw new Error(errorData.detail);
+    }
+
     const data = await response.json() as { results: Event[] };
     return data;
 }

app/(tabs)/profil/index.tsx

@@ -1,4 +1,4 @@
-import me, { myEvents } from "@/actions/users/me";
+import me, { myEvents, myPreviousEvents } from "@/actions/users/me";
 import { ThemeToggle } from "@/components/themeToggle";
 import { Button } from "@/components/ui/button";
 import EventCard from "@/components/ui/eventCard";
@@ -8,10 +8,16 @@ import { useAuth } from "@/context/auth";
 import { deleteToken } from "@/lib/storage";
 import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
-import { Image, View } from "react-native";
+import { Image, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { Event, Group } from "@/actions/types";
 import Icon from "@/lib/icons/Icon";
+import AnimatedPagerView from "@/components/ui/AnimatedPagerView";
+
+//TODO: Foreløpig er react-native-pager-view broken... Det er ikke mulig å swipe mellom tabs
+// med mindre vi ofrer å vise noe innhold større en rundt 90vh. Forhåpenligvis fikses dette, 
+// men i mellomtiden får vi ofre litt ux...
+// Vi kan også bare... lage en helt egen pager view med reanimated.
 
 export default function Profil() {
     const { setAuthState } = useAuth();
@@ -27,6 +33,11 @@ export default function Profil() {
         queryFn: myEvents,
     });
 
+    const previousEvents = useQuery({
+        queryKey: ["users", "me", "previous-events"],
+        queryFn: myPreviousEvents,
+    })
+
     const getStudyYearAsClass = (studyYear: Group, study: Group): string => {
         const studyyear = Number(studyYear.name);
         const currentYear = new Date().getFullYear();
@@ -107,17 +118,8 @@ export default function Profil() {
                     </Button>
 
                     <ThemeToggle className="flex-1 min-h-full" />
-
-                    <Button
-                        className="flex-1 min-h-full"
-                        variant="default"
-                    >
-                        <Text>
-                            <Icon icon="Settings">
-
-                            </Icon>
-                        </Text>
-                    </Button>
+                </View>
+                <View className="flex flex-row gap-4 w-full h-16">
                     <Button
                         className="flex-1 min-h-full"
                         variant="destructive"
@@ -128,15 +130,28 @@ export default function Profil() {
                         </Text>
                     </Button>
                 </View>
-                <Text className="text-2xl mt-4 font-semibold">Dine arrangementer</Text>
-                <DisplayUserEvents userEvents={userEvents} />
+                <View className="my-2 border-t border-muted-foreground mx-8" />
+                {!userEvents.isPending && !previousEvents.isPending &&
+                    <AnimatedPagerView titles={["Dine arrangementer", "Tidligere arrangementer"]} >
+                        <View key={0} className="max-h-[45vh]">
+                            <ScrollView bounces={false} nestedScrollEnabled>
+                                <DisplayUserEvents userEvents={userEvents} />
+                            </ScrollView>
+                        </View>
+                        <View key={1} className="max-h-[45vh]">
+                            <ScrollView bounces={false} nestedScrollEnabled>
+                                <DisplayUserEvents userEvents={previousEvents} previous />
+                            </ScrollView>
+                        </View>
+                    </AnimatedPagerView>
+                }
             </View>
         </PageWrapper>
     );
 }
 
 
-function DisplayUserEvents({ userEvents }: { userEvents: UseQueryResult<{ results: Event[] }, Error> }) {
+function DisplayUserEvents({ userEvents, previous }: { userEvents: UseQueryResult<{ results: Event[] }, Error>, previous?: boolean }) {
     const router = useRouter();
 
     if (userEvents.isPending) {
@@ -148,7 +163,7 @@ function DisplayUserEvents({ userEvents }: { userEvents: UseQueryResult<{ result
     }
 
     if (userEvents.data.results.length === 0) {
-        return <Text>Du er ikke påmeldt noen arrangementer.</Text>
+        return <Text className="text-center h-fit">{previous ? "Du har ikke deltatt på noen arrangementer" : "Du er ikke påmeldt noen arrangementer."}</Text>
     }
 
     return userEvents.data.results.map((event) => (

components/ui/AnimatedPagerView.tsx

@@ -0,0 +1,71 @@
+
+import { Children, useEffect, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import PagerView from 'react-native-pager-view';
+import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';
+import { Text } from './text';
+
+
+interface AnimatedPagerViewProps {
+    children: React.ReactNode;
+    titles: string[];
+    className?: string;
+}
+
+//TODO: lag en ny pager view som fungerer, gjerne uten react-native-pager-view
+// vurdere evt å lage en issue på react-native-pager-view men virker som at 
+// de folka er jævlig treige på å fikse ting
+
+export default function AnimatedPagerView(props: AnimatedPagerViewProps) {
+    const xpos = useSharedValue(0);
+    const outerRef = useRef<View>(null);
+    const pagerViewRef = useRef<PagerView>(null);
+    const [width, setWidth] = useState(0);
+
+    const numberOfPages = Children.count(props.children);
+
+    useEffect(() => {
+        if (outerRef.current) {
+            outerRef.current.measure((x, y, w, h) => {
+                setWidth(w);
+            });
+        }
+    }, [outerRef.current]);
+
+    const handleScroll = (e) => {
+        xpos.value = (e.nativeEvent.offset + e.nativeEvent.position) * (width / numberOfPages)
+    };
+
+    const scrollIndicatorWidth = 100 / numberOfPages;
+
+    return (
+        <View className={props.className} ref={outerRef} >
+            <View className="flex-row w-full justify-center">
+                {props.titles.map((title, index) => {
+                    return (
+
+                        <Pressable className="p-2 flex-1 active:bg-accent rounded-lg" key={index}
+                            onPress={() => requestAnimationFrame(() => pagerViewRef.current?.setPage(index))}>
+                            <Text className="text-lg w-full text-center">{title}</Text>
+                        </Pressable>
+                    )
+                })
+                }
+            </View>
+            <Animated.View className="mb-4" style={{
+                marginLeft: xpos,
+                width: scrollIndicatorWidth + "%",
+            }}>
+                <View className="h-0.5 rounded-full bg-foreground mx-8" />
+            </Animated.View>
+            <PagerView style={{ flex: 1 }}
+                onPageScroll={handleScroll}
+                orientation="horizontal"
+                ref={pagerViewRef}
+                overdrag={true}
+            >
+                {props.children}
+            </PagerView>
+        </View>
+    )
+}

components/ui/pagewrapper.tsx

@@ -17,7 +17,7 @@ export default function PageWrapper({ children, refreshQueryKey, className }: Pa
     if (!refreshQueryKey) {
         return (
             <SafeAreaWrapper>
-                <ScrollView className={cn("min-h-full", className ?? "")}>
+                <ScrollView className={cn("min-h-full", className ?? "")} nestedScrollEnabled>
                     {children}
                 </ScrollView>
             </SafeAreaWrapper>
@@ -56,6 +56,7 @@ export default function PageWrapper({ children, refreshQueryKey, className }: Pa
                 <RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />
             }
                 className={cn("min-h-full", className ?? "")}
+                nestedScrollEnabled
             >
                 {children}
             </ScrollView>

package-lock.json

@@ -57,7 +57,8 @@
     "react-native-webview": "13.12.5",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.16",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "react-native-pager-view": "7.0.0-rc.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -70,4 +71,4 @@
     "typescript": "^5.3.3"
   },
   "private": true
-}
+}