Make tabbing more consistent

app/(tabs)/candidate/[id].jsx → app/(tabs)/candidate.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { useLocalSearchParams } from "expo-router";
+import { Text } from "../../components/Themed.tsx";
 
-import { GET } from "../../../components/API";
-import CandidateSwiper from "../../../components/CandidateSwiper";
+import { GET } from "../../components/API";
+import CandidateSwiper from "../../components/CandidateSwiper";
 
 function CandidateList() {
   const params = useLocalSearchParams();
-  const { id } = params;
+  const { id, save, reject } = params;
 
   const [candidates, setCandidates] = useState(null);
   const [pageInfo, setPageInfo] = useState(null);
@@ -16,8 +17,7 @@ function CandidateList() {
     const endpoint = "candidates";
     // Define parameters
     const get_params = {
-      groupIDs: [280],
-      // groupIDs: [id],
+      groupIDs: [id],
       // Add any other parameters as needed
     };
 
@@ -34,11 +34,22 @@ function CandidateList() {
   }, [id]);
 
   // Render an empty component if data is null
-  if (candidates === null || candidates.length === 0) {
-    return null; // or any other empty component you want to render
+  if (candidates === null || candidates === undefined) {
+    return <Text>Querying for candidates...</Text>;
   }
 
-  return <CandidateSwiper items={candidates} pageInfo={pageInfo} />;
+  if (candidates.length === 0) {
+    return <Text>No candidates found.</Text>;
+  }
+
+  return (
+    <CandidateSwiper
+      items={candidates}
+      save={save}
+      reject={reject}
+      pageInfo={pageInfo}
+    />
+  );
 }
 
 export default CandidateList;

app/(tabs)/candidates.tsx

@@ -8,7 +8,9 @@ import { GET } from "../../components/API";
 function Candidates() {
   const [groups, setGroups] = useState(null);
   const [queryStatus, setQueryStatus] = useState(false);
-  const [selectedGroup, setSelectedGroup] = useState(null);
+  const [selectedScanGroup, setSelectedScanGroup] = useState(null);
+  const [selectedSaveGroup, setSelectedSaveGroup] = useState(null);
+  const [selectedRejectGroup, setSelectedRejectGroup] = useState(null);
 
   useEffect(() => {
     // Show loading indicator
@@ -21,14 +23,16 @@ function Candidates() {
       const response = await GET(endpoint, {});
       setGroups(response.data.all_groups);
       setQueryStatus(false);
-      setSelectedGroup(response.data.all_groups[0].id);
+      setSelectedScanGroup(response.data.all_groups[0].id);
+      setSelectedSaveGroup(response.data.all_groups[0].id);
+      setSelectedRejectGroup(response.data.all_groups[0].id);
     }
 
     fetchData();
   }, []);
 
   // Render an empty component if data is null
-  if ((groups === null) | (selectedGroup === null)) {
+  if ((groups === null) | (selectedScanGroup === null)) {
     return null; // or any other empty component you want to render
   }
 
@@ -38,45 +42,88 @@ function Candidates() {
     key: item.id,
   }));
 
-  const handleValueChange = (value) => {
+  const handleScanChange = (value) => {
     if (value && value !== -1) {
-      setSelectedGroup(value);
+      setSelectedScanGroup(value);
     }
   };
 
+  const handleSaveChange = (value) => {
+    if (value && value !== -1) {
+      setSelectedSaveGroup(value);
+    }
+  };
+
+  const handleRejectChange = (value) => {
+    if (value && value !== -1) {
+      setSelectedRejectGroup(value);
+    }
+  };
+
+  const picker_style = {
+    inputAndroid: {
+      color: "black",
+      backgroundColor: "transparent",
+      fontSize: 16,
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+      borderWidth: 0.5,
+      borderColor: "purple",
+      borderRadius: 8,
+      paddingRight: 30,
+    },
+  };
+
   return (
     <View>
       {!queryStatus && groups ? (
         <View>
-          <Text>Select an option:</Text>
+          <Text>Group to scan for:</Text>
           <RNPickerSelect
-            style={{
-              inputAndroid: {
-                color: "black",
-                backgroundColor: "transparent",
-                fontSize: 16,
-                paddingHorizontal: 10,
-                paddingVertical: 8,
-                borderWidth: 0.5,
-                borderColor: "purple",
-                borderRadius: 8,
-                paddingRight: 30,
-              },
-            }}
+            style={picker_style}
+            items={options}
+            onValueChange={handleScanChange}
+            value={selectedScanGroup}
+            useNativeAndroidPickerStyle={false}
+            hideDoneBar
+          />
+          <Text>{selectedScanGroup}</Text>
+
+          <Text>Group to save candidate to:</Text>
+          <RNPickerSelect
+            style={picker_style}
             items={options}
-            onValueChange={handleValueChange}
-            value={selectedGroup}
+            onValueChange={handleSaveChange}
+            value={selectedSaveGroup}
             useNativeAndroidPickerStyle={false}
             hideDoneBar
           />
+          <Text>{selectedSaveGroup}</Text>
+
+          <Text>Group to saved rejected candidates to:</Text>
+          <RNPickerSelect
+            style={picker_style}
+            items={options}
+            onValueChange={handleRejectChange}
+            value={selectedRejectGroup}
+            useNativeAndroidPickerStyle={false}
+            hideDoneBar
+          />
+          <Text>{selectedRejectGroup}</Text>
+
           <Link
             push
             href={{
-              pathname: "/candidate/[id]",
-              params: { id: selectedGroup },
+              pathname: "/(tabs)/candidate",
+              params: {
+                id: selectedScanGroup,
+                save: selectedSaveGroup,
+                reject: selectedRejectGroup,
+              },
             }}
+            asChild
           >
-            <Text>{selectedGroup}</Text>
+            <Button title="Let's do some scanning!" />
           </Link>
         </View>
       ) : (

app/(tabs)/gcn_events.tsx

@@ -60,7 +60,7 @@ function GcnEvents() {
   );
 
   // Render an empty component if data is null
-  if (events === null || events.length === 0) {
+  if (events === null || events === undefined || events.length === 0) {
     return null; // or any other empty component you want to render
   }
 

app/(tabs)/source/[id].jsx → app/(tabs)/source.jsx

@@ -1,19 +1,48 @@
 import React, { useEffect, useState } from "react";
-import { ScrollView, Image } from "react-native";
-import { useLocalSearchParams } from "expo-router";
-import { Text, View } from "../../../components/Themed.tsx";
+import {
+  StyleSheet,
+  ScrollView,
+  Image,
+  TouchableOpacity,
+  Linking,
+} from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Text, View } from "../../components/Themed.tsx";
 
-import { ra_to_hours, dec_to_dms } from "../../../components/units";
-import { GET } from "../../../components/API";
-import PostComment from "../../../components/PostComment";
+import { ra_to_hours, dec_to_dms } from "../../components/units";
+import { GET } from "../../components/API";
+import PostComment from "../../components/PostComment";
 
 function Source() {
   const params = useLocalSearchParams();
   const { id } = params;
 
   const [data, setData] = useState(null);
+  const [userData, setUserData] = useState(null);
   const [comment, setComment] = useState(false);
 
+  const styles = StyleSheet.create({
+    itemContainer: {
+      width: "80%",
+      height: 600,
+      overflow: "hidden",
+      backgroundColor: "lightgray",
+      borderRadius: 10,
+      padding: 20,
+      margin: 10,
+    },
+    itemText: {
+      fontSize: 18,
+      fontWeight: "bold",
+    },
+    linkText: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: "blue",
+    },
+  });
+
   useEffect(() => {
     const endpoint = `sources/${id}`;
     // Define parameters
@@ -32,23 +61,41 @@ function Source() {
     setComment(false);
   }, [comment, id]);
 
+  useEffect(() => {
+    async function fetchUserData() {
+      const userdata = await AsyncStorage.getItem("userData");
+      const parsedData = JSON.parse(userdata);
+      setUserData(parsedData);
+    }
+    fetchUserData();
+  }, []);
+
   // Render an empty component if data is null
   if (data === null) {
     return null; // or any other empty component you want to render
   }
 
+  const sourceUrl = `${userData.url}/sources/${id}`;
+
   return (
-    <ScrollView style={{ padding: 20 }}>
+    <ScrollView style={styles.itemContainer}>
+      <Stack.Screen options={{ headerShown: true, title: id }} />
       {!data ? (
         <View style={{ marginTop: 20 }}>
           <Text>No data available.</Text>
         </View>
       ) : (
         <View>
-          <Text style={{ fontSize: 18, fontWeight: "bold" }}>{data.id}</Text>
-          <Text>
-            RA: {ra_to_hours(data.ra)} Dec: {dec_to_dms(data.dec)}
-          </Text>
+          <TouchableOpacity
+            onPress={() => {
+              Linking.openURL(sourceUrl);
+            }}
+          >
+            <Text style={styles.linkText}>{data.id}</Text>
+          </TouchableOpacity>
+
+          <Text style={styles.itemText}>RA: {ra_to_hours(data.ra)}</Text>
+          <Text style={styles.itemText}>Dec: {dec_to_dms(data.dec)}</Text>
 
           <Text style={{ marginTop: 10, fontSize: 16, fontWeight: "bold" }}>
             Images:
@@ -90,13 +137,19 @@ function Source() {
           </Text>
           <View style={{ marginTop: 5 }}>
             {data.comments?.map((thisComment) => (
-              <View style={{ marginBottom: 15 }} key={thisComment.id}>
+              <View
+                style={{ flexDirection: "row", alignItems: "center" }}
+                key={thisComment.id}
+              >
                 <Image
-                  source={{ uri: thisComment.gravatarUrl }}
-                  style={{ width: 40, height: 40, borderRadius: 20 }}
+                  source={{ uri: thisComment.author?.gravatar_url }}
+                  style={{ width: 30, height: 30, borderRadius: 10 }}
                 />
-                <Text style={{ marginLeft: 10 }}>
-                  {thisComment.author?.username}: {thisComment.text}
+                <Text style={{ fontSize: 16, fontWeight: "bold" }}>
+                  {thisComment.author?.username}
+                </Text>
+                <Text style={{ marginRight: 60, marginLeft: 15 }}>
+                  {thisComment.text}
                 </Text>
               </View>
             ))}

app/(tabs)/sources.tsx

@@ -50,7 +50,7 @@ function Sources() {
         <Link
           push
           href={{
-            pathname: "/source/[id]",
+            pathname: "/(tabs)/source",
             params: { id: item.id },
           }}
         >

app/_layout.tsx

@@ -53,7 +53,7 @@ function RootLayoutNav() {
     <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="info" options={{ presentation: "info" }} />
+        <Stack.Screen name="info" options={{ title: "About" }} />
       </Stack>
     </ThemeProvider>
   );