From 9b323ab516cd07b1bd8142766d4086e9d999e589 Mon Sep 17 00:00:00 2001
From: gmuni001 <you@example.com>
Date: Sat, 5 Apr 2025 02:35:02 +0100
Subject: [PATCH] Created the swipescreens to allow users to like / dislike
images.
---
README.md | 3 +-
navigation/AppNavigation.js | 4 +-
screens/CameraScreen.js | 36 +++++++++++++++--
screens/SwipeScreen.js | 77 +++++++++++++++++++++++++++++++++++++
4 files changed, 113 insertions(+), 7 deletions(-)
create mode 100644 screens/SwipeScreen.js
diff --git a/README.md b/README.md
index 91bcc9f..2d2f516 100644
--- a/README.md
+++ b/README.md
@@ -7,4 +7,5 @@
## 27/03/2025
#### I have just added the fetch POST commands to push my photos to my server. I have attempted to use Axios to communicate with the server, but Fetch seemed to work easier for me. I used RNFS to change the path of my file; VisionCamera makes the path of the photos hidden so RNFS is required.
-
\ No newline at end of file
+## 05/04/2025
+#### I have began to implement the Swipe Engine, similar to Tinder Swiping Engine. I am successful in fetching the Image URL's stored on my Supabase server and fetching them to my Swipescreen. Soon enough, I will have various images that will allow for users to swipe left and right on images.
\ No newline at end of file
diff --git a/navigation/AppNavigation.js b/navigation/AppNavigation.js
index 524692f..82099fa 100644
--- a/navigation/AppNavigation.js
+++ b/navigation/AppNavigation.js
@@ -2,7 +2,7 @@ import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import CameraScreen from '../screens/CameraScreen';
-// import SwipeScreen from '../screens/SwipeScreen';
+import SwipeScreen from '../screens/SwipeScreen';
import MapScreen from '../screens/MapScreen';
// import ProfileScreen from '../screens/ProfileScreen';
@@ -13,7 +13,7 @@ const AppNavigator = () => {
<NavigationContainer>
<Stack.Navigator initialRouteName="Camera">
<Stack.Screen name="Camera" component={CameraScreen} />
- {/* <Stack.Screen name="Swipe" component={SwipeScreen} /> */}
+ <Stack.Screen name="Swipe" component={SwipeScreen} />
{ <Stack.Screen name="Map" component={MapScreen} /> }
{/* <Stack.Screen name="Profile" component={ProfileScreen} /> */}
</Stack.Navigator>
diff --git a/screens/CameraScreen.js b/screens/CameraScreen.js
index bf7e239..7e40e41 100644
--- a/screens/CameraScreen.js
+++ b/screens/CameraScreen.js
@@ -3,6 +3,8 @@ import React, { useEffect, useRef, useState } from 'react';
import { View, ActivityIndicator, StyleSheet, Pressable, Text } from 'react-native';
import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
import RNFS from 'react-native-fs';
+import { supabase } from '../components/Supabase.js';
+
// import axios from 'axios';
@@ -33,6 +35,7 @@ const CameraScreen = ({ navigation }) => {
console.log("Photo captured:", photo.path);
+
const formData = new FormData();
formData.append('photo', {
@@ -41,7 +44,9 @@ const CameraScreen = ({ navigation }) => {
name: 'photo.jpg',
});
- const response = await fetch('https://7317-82-7-110-137.ngrok-free.app/upload', {
+
+
+ const response = await fetch('https://ff13-82-7-110-137.ngrok-free.app/upload', {
method: 'POST',
body: formData,
headers: {
@@ -50,11 +55,30 @@ const CameraScreen = ({ navigation }) => {
},
});
+ console.log("FormData for upload:", formData);
+
+
+
const data = await response.json();
- console.log('Uploaded Photo URL:', data.photoUrl);
+ console.log('Response for PhotoURL:', data.photoUrl);
-
-};
+
+ // Save the photo URL to Supabase
+ const { info, error } = await supabase
+ .from('photos') // Replace 'photos' with your actual table name
+ .insert([{ url: data.photoUrl }])
+ .select()
+
+
+
+
+
+if (error) {
+ console.error('Error saving photo URL to Supabase:', error);
+} else if (info) {
+ console.log('Photo URL saved to Supabase:', info[0].url);
+}
+ };
const onStartRecording = async () => {
if (!camera.current) return;
@@ -92,6 +116,10 @@ const CameraScreen = ({ navigation }) => {
<Text style={styles.buttonText}>Go to Map</Text>
</Pressable>
+ <Pressable onPress={() => navigation.navigate('Swipe')} style={styles.captureButton}>
+ <Text style={styles.buttonText}>Go to Swoipe</Text>
+ </Pressable>
+
</View>
</View>
);
diff --git a/screens/SwipeScreen.js b/screens/SwipeScreen.js
new file mode 100644
index 0000000..621cda9
--- /dev/null
+++ b/screens/SwipeScreen.js
@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, View , Image} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import { supabase } from '../components/Supabase';
+
+const SwipeScreen = () => {
+const [images, setImages] = React.useState(null);
+const [loading, setLoading] = React.useState(false);
+const [error, setError] = React.useState(null);
+
+
+useEffect(() => {
+const DisplayAnImage = async () => {
+try{
+ setLoading(true);
+ const { data, error } = await supabase
+ .from('photos')
+ .select('url')
+ .eq('id', 10); // Replace with the actual ID of the photo you want to display
+
+
+ console.log("Supabase response:", data, error);
+
+ if (error) throw error;
+ setImages(data);
+} catch (err) {
+ setError(err.message);
+ console.error('Error fetching image:', err);
+} finally {
+ setLoading(false);
+}
+};
+
+DisplayAnImage();
+}, []);
+
+
+
+return (
+ <SafeAreaProvider>
+ <SafeAreaView style={styles.container}>
+ {loading ? (
+ <Text>Loading...</Text> // Show loading message
+ ) : error ? (
+ <Text style={styles.errorText}>Error: {error}</Text> // Show error message
+ ) : images ? (
+ <Image
+ style={styles.image}
+ source={{ uri: images[0].url }}
+/>
+ ) : (
+ <Text>No image available</Text> // Handle case where no image is found
+ )}
+ </SafeAreaView>
+ </SafeAreaProvider>
+ );
+};
+
+export default SwipeScreen;
+
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ image: {
+ width: 200,
+ height: 200,
+ resizeMode: 'contain',
+ },
+ errorText: {
+ color: 'red',
+ fontSize: 16,
+ },
+ });
\ No newline at end of file
--
GitLab