Supabase

KDT2006 · KDT2006 · commit 78300eb20c59 · 2024-11-10T00:19:55.000-05:00
diff --git a/TAQ/Navigation.jsx b/TAQ/Navigation.jsx
@@ -30,6 +30,13 @@ function RootStack() {
           animation: "slide_from_right",
         }}
       />
+      <Stack.Screen
+        name="Queue"
+        component={ClassQueue}
+        options={{
+          animation: "slide_from_right",
+        }}
+      />
     </Stack.Navigator>
   );
 }
diff --git a/TAQ/components/Course.jsx b/TAQ/components/Course.jsx
@@ -46,12 +46,12 @@ const Course = ({ course, navigation, disabled }) => {
         numberOfLines={2}
         style={[styles.name, { fontSize: Platform.OS === "android" ? 14 : 18 }]}
       >
-        {course.name}
+        {course.courses.name}
       </Text>
       <Text
         style={[styles.code, { fontSize: Platform.OS === "android" ? 13 : 15 }]}
       >
-        {course.code}
+        {course.courses.code}
       </Text>
     </AnimatedPressable>
   );
diff --git a/TAQ/screens/Auth.jsx b/TAQ/screens/Auth.jsx
@@ -1,17 +1,102 @@
 import {
+  Alert,
+  AppState,
   Pressable,
   StatusBar,
   StyleSheet,
   Text,
   TextInput,
   View,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Colors } from "../config/Colors";
+import { supabase } from "../supabase";
 
 const Auth = ({ navigation }) => {
-  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const handleAppStateChange = (state) => {
+      if (state === "active") {
+        supabase.auth.startAutoRefresh();
+        checkSession();
+      } else {
+        supabase.auth.stopAutoRefresh();
+      }
+    };
+
+    // Initial session check
+    checkSession();
+
+    // Add the AppState change listener
+    const subscription = AppState.addEventListener(
+      "change",
+      handleAppStateChange
+    );
+
+    // Clean up the listener on component unmount
+    return () => {
+      subscription.remove();
+      supabase.auth.stopAutoRefresh();
+    };
+  }, [navigation]);
+
+  const checkSession = async () => {
+    const {
+      data: { session },
+    } = await supabase.auth.getSession();
+    if (session) {
+      navigation.navigate("Courses");
+    }
+  };
+
+  async function signInWithEmail() {
+    setLoading(true);
+    try {
+      const { error } = await supabase.auth.signInWithPassword({
+        email: email,
+        password: password,
+      });
+
+      if (error) {
+        Alert.alert("Error", error.message);
+      } else {
+        navigation.navigate("Courses");
+      }
+    } catch (error) {
+      Alert.alert("Error", error.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function signUpWithEmail() {
+    setLoading(true);
+    try {
+      const { data, error } = await supabase.auth.signUp({
+        email: email,
+        password: password,
+        options: {
+          data: {
+            name: "KDT",
+          },
+        },
+        // You can remove the options.data part unless you need it for other metadata
+      });
+
+      if (error) {
+        Alert.alert("Error", error.message);
+      } else if (data.session) {
+        navigation.navigate("Courses");
+      }
+    } catch (error) {
+      Alert.alert("Error", error.message);
+    } finally {
+      setLoading(false);
+    }
+  }
 
   return (
     <View style={styles.container}>
@@ -22,20 +107,17 @@ const Auth = ({ navigation }) => {
       />
       <TextInput
         style={styles.input}
-        placeholder="Username"
-        value={username}
-        onChangeText={setUsername}
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
       />
       <TextInput
         style={styles.input}
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
       />
-      <Pressable
-        onPress={() => navigation.navigate("Courses")}
-        style={styles.login}
-      >
+      <Pressable onPress={signUpWithEmail} style={styles.login}>
         <Text style={{ color: Colors.Background, fontWeight: "bold" }}>
           Login
         </Text>
diff --git a/TAQ/screens/Home.jsx b/TAQ/screens/Home.jsx
@@ -1,15 +1,18 @@
 import { FlatList, StatusBar, StyleSheet, Text, View } from "react-native";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import { Colors } from "../config/Colors";
-import courses from "../assets/data/courses";
+// import courses from "../assets/data/courses";
 import Course from "../components/Course";
 
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { supabase } from "../supabase";
 
 const Home = ({ navigation }) => {
   const [isScrolling, setIsScrolling] = React.useState(false);
+  // const [user, setUser] = useState(null);
+  const [courses, setCourses] = useState([]);
 
   useEffect(() => {
     const unsub = navigation.addListener("beforeRemove", (e) => {
@@ -19,6 +22,23 @@ const Home = ({ navigation }) => {
     return unsub;
   }, []);
 
+  useEffect(() => {
+    const fetchCourses = async () => {
+      const { data, error } = await supabase.from("user_courses").select(`
+          courses (*)
+        `);
+
+      if (error) {
+        console.error("Error fetching courses:", error);
+      } else {
+        console.log("Fetched courses:", data);
+        setCourses(data);
+      }
+    };
+
+    fetchCourses();
+  }, []);
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={{ paddingTop: 10, flex: 1 }}>
@@ -37,7 +57,12 @@ const Home = ({ navigation }) => {
             }}
           >
             <Text style={styles.welcomeText}>Welcome back, Amit!</Text>
-            <MaterialIcons name="logout" size={30} color={Colors.Red} />
+            <MaterialIcons
+              name="logout"
+              onPress={() => supabase.auth.signOut()}
+              size={30}
+              color={Colors.Red}
+            />
           </View>
           <Text style={styles.sub}>
             Please choose from the list of available office hours below:
diff --git a/TAQ/screens/Locations.jsx b/TAQ/screens/Locations.jsx
@@ -1,60 +1,114 @@
 import {
   FlatList,
   Platform,
+  Pressable,
   StatusBar,
   StyleSheet,
   Text,
   View,
 } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import courses from "../assets/data/courses";
 import { Colors } from "../config/Colors";
+import Animated, {
+  FadeIn,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import Constants from "expo-constants";
 
-const Locations = () => {
+const Locations = ({ navigation }) => {
   const course = courses[1];
 
+  const [isScrolling, setIsScrolling] = useState(false);
+
   return (
     <View style={styles.container}>
       <StatusBar
         barStyle={"light-content"}
         backgroundColor="transparent"
         translucent
       />
-      <Text style={styles.heading}>Locations</Text>
-      <Text style={styles.sub}>Please choose one of the following: </Text>
+      <Animated.Text style={styles.heading}>Locations</Animated.Text>
+      <Animated.Text style={styles.sub}>
+        Please choose one of the following:
+      </Animated.Text>
       <View
         style={{ height: 2, backgroundColor: "#fff9", marginVertical: 15 }}
       />
       <FlatList
         data={course.location}
-        // numColumns={2}
         contentContainerStyle={{ gap: 10 }}
+        onScrollBeginDrag={() => {
+          // Disable touch events while scrolling
+          setIsScrolling(true);
+        }}
+        onScrollEndDrag={() => {
+          // Enable touch events after scrolling
+          setIsScrolling(false, 150);
+        }}
         renderItem={({ item, index }) => (
-          <LocationItem key={index} location={item} />
+          <LocationItem
+            key={index}
+            location={item}
+            navigation={navigation}
+            disabled={isScrolling}
+          />
         )}
       />
     </View>
   );
 };
 
-const LocationItem = ({ location }) => {
+const LocationItem = ({ location, navigation, disabled }) => {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const onPressIn = () => {
+    scale.value = withSpring(0.9, { damping: 15, stiffness: 100 });
+  };
+
+  const onPressOut = () => {
+    scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+    if (disabled) return;
+    navigation.navigate("Queue"); // Navigate after animation
+  };
+
+  const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
   return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: Colors.Secondary,
-        padding: 30,
-        borderRadius: 15,
-        margin: 10,
-        alignItems: "center",
-      }}
+    <AnimatedPressable
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      entering={FadeIn.delay(300).damping(0.5).stiffness(100)}
+      exiting={FadeIn.delay(300).damping(0.5).stiffness(100)}
+      style={[{ flex: 1 }, animatedStyle]}
     >
-      <Text
-        style={{ color: Colors.Background, fontWeight: "bold", fontSize: 14 }}
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: Colors.Secondary,
+          padding: 30,
+          borderRadius: 15,
+          margin: 10,
+          alignItems: "center",
+        }}
       >
-        {location}
-      </Text>
-    </View>
+        <Text
+          style={{
+            color: Colors.Background,
+            fontWeight: "bold",
+            fontSize: Platform.OS === "android" ? 14 : 18,
+          }}
+        >
+          {location}
+        </Text>
+      </View>
+    </AnimatedPressable>
   );
 };
 
@@ -64,7 +118,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.Background,
-    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight + 20 : 0,
+    paddingTop: Constants.statusBarHeight + 20,
     padding: 10,
   },
   heading: {
diff --git a/TAQ/supabase.js b/TAQ/supabase.js
@@ -0,0 +1,15 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = "https://ijcorhcaxkyxheioiqti.supabase.co";
+const supabaseAnonKey =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImlqY29yaGNheGt5eGhlaW9pcXRpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzExNjkxMzYsImV4cCI6MjA0Njc0NTEzNn0.a5jb9HY-Sx6u4AgpxM9ctTtTfD44DVOuSHYjT3wH3Us";
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+  auth: {
+    storage: AsyncStorage,
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false,
+  },
+});
