feat: lo-fi contact page (#5)

* added contact page * updated contact page * fixed duplicates and prettier checks --------- Co-authored-by: Chris Torres <[email protected]>
calblueprint · Dec 2, 2024 · e64788b · e64788b
1 parent 2fb4108
commit e64788b
Show file tree

Hide file tree

Showing 7 changed files with 363 additions and 45 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,54 +1,23 @@
-import * as React from 'react';
+import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import QRCodeScanner from '@/components/QRCodeScanner/QRCodeScanner';
-import AdminLoginScreen from '@/screens/AdminLoginScreen';
-import HomeScreen from '@/screens/Home/Home';
-import LoginScreen from '@/screens/LoginScreen';
-import TreeInfoPage from '@/screens/TreeInfo/TreeInfo';
-import { LoginStackParamList, RootStackParamList } from '@/types/navigation';
+import ContactPage from './src/screens/contactPage';
+import SearchScreen from './src/screens/searchScreen';
 
-const LoginStack = createNativeStackNavigator<LoginStackParamList>();
-const RootStack = createNativeStackNavigator<RootStackParamList>();
+export type RootStackParamList = {
+  Search: undefined;
+  Contact: undefined;
+};
 
-function LoginStackNavigator() {
-  return (
-    <LoginStack.Navigator initialRouteName="Login">
-      <LoginStack.Screen name="Login" component={LoginScreen} />
-      <LoginStack.Screen name="AdminLogin" component={AdminLoginScreen} />
-    </LoginStack.Navigator>
-  );
-}
-
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-function RootStackNavigator() {
-  return (
-    <RootStack.Navigator initialRouteName="Home">
-      <RootStack.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{ headerShown: false }}
-      />
-      <RootStack.Screen
-        name="Scanner"
-        component={QRCodeScanner}
-        options={{ headerShown: false }}
-      />
-      <RootStack.Screen
-        name="TreeInfoPage"
-        component={TreeInfoPage}
-        options={{ headerShown: false }}
-      />
-    </RootStack.Navigator>
-  );
-}
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
-function App() {
+export default function App() {
   return (
     <NavigationContainer>
-      <LoginStackNavigator />
+      <Stack.Navigator initialRouteName="Search">
+        <Stack.Screen name="Search" component={SearchScreen} />
+        <Stack.Screen name="Contact" component={ContactPage} />
+      </Stack.Navigator>
     </NavigationContainer>
   );
 }
-
-export default App;
diff --git a/src/screens/contactPage.tsx b/src/screens/contactPage.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Image, ScrollView, Text, View } from 'react-native';
+import { styles } from './styles/styles';
+
+export default function App() {
+  return (
+    <ScrollView style={styles.backgroundContainer}>
+      <View style={styles.imageContainer}>
+        <Image
+          source={{
+            uri: 'https://images.squarespace-cdn.com/content/v1/545bbd7ee4b032c1794c4020/1502738972151-U1234630JTWT5NEITDFG/image-asset.jpeg?format=1500w',
+          }}
+          style={styles.contactImage}
+        />
+
+        <View style={styles.contactOverlay}></View>
+      </View>
+
+      <View style={styles.contactInfo}>
+        <View>
+          <Text style={styles.Heading4Contact}>Contact Us</Text>
+        </View>
+        <View>
+          <Text style={styles.contactboldText}>Location</Text>
+          <Text style={styles.contactText}>
+            123 Berkeley Way, San Jose, CA 95035
+          </Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactboldText}>Hours</Text>
+          <Text style={styles.contactText}>M-TH | 9 AM - 12 PM</Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactboldText}>Call</Text>
+          <Text style={styles.contactText}>123 - 456 - 7890</Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactboldText}>Email</Text>
+          <Text style={styles.contactText}>
+            [email protected]
+          </Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactText}>Instagram - Facebook</Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
diff --git a/src/screens/searchScreen.tsx b/src/screens/searchScreen.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import {
+  FlatList,
+  ImageBackground,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../App';
+import { fetchTreeData } from '../supabase/client';
+import { styles } from './styles/styles';
+
+type SearchScreenProps = NativeStackScreenProps<RootStackParamList, 'Search'>;
+
+export default function SearchScreen({ navigation }: SearchScreenProps) {
+  const [trees, setTrees] = useState<any[]>([]);
+
+  useEffect(() => {
+    const loadTreeData = async () => {
+      const treeData = await fetchTreeData();
+      console.log('Fetched trees:', treeData);
+      if (treeData) {
+        setTrees(treeData);
+      }
+    };
+
+    loadTreeData();
+  }, []);
+
+  const renderTreeCard = ({ item }: { item: any }) => (
+    <View style={styles.treeRow}>
+      <View style={styles.treeCard}>
+        <ImageBackground
+          source={{
+            uri: item.image_url || 'https://example.com/placeholder-image.jpg',
+          }}
+          style={styles.treeImage}
+        ></ImageBackground>
+        <View>
+          <Text style={styles.treeName}>{item.species}</Text>
+          <View style={styles.treeDetails}>
+            <Text style={styles.treeInfo}>Row {item.row}</Text>
+            <Text style={styles.treeInfo}> • </Text>
+            <Text style={styles.treeInfo}>Bank {item.bank}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+
+  return (
+    <ScrollView style={styles.backgroundContainer}>
+      <TouchableOpacity onPress={() => navigation.navigate('Contact')}>
+        <Text>Contact Us</Text>
+      </TouchableOpacity>
+
+      <View style={styles.searchContainer}>
+        <Text style={styles.Heading4Search}>Trees Availibility</Text>
+
+        <FlatList
+          data={trees}
+          renderItem={renderTreeCard}
+          keyExtractor={item => item.tree_id.toString()}
+        />
+      </View>
+    </ScrollView>
+  );
+}
diff --git a/src/screens/styles/styles.ts b/src/screens/styles/styles.ts
@@ -0,0 +1,135 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  backgroundContainer: {
+    flexGrow: 1,
+    flexDirection: 'column',
+    backgroundColor: 'white',
+  },
+
+  searchContainer: {
+    paddingTop: 32,
+    paddingLeft: 27,
+    paddingRight: 27,
+  },
+
+  Heading4Contact: {
+    // change this later
+    color: '#333',
+    fontSize: 24,
+    fontWeight: '700',
+    paddingBottom: 30,
+    textAlign: 'left',
+  },
+
+  Heading4Search: {
+    // change this later
+    color: '#446127',
+    fontSize: 32,
+    fontWeight: '700',
+    paddingBottom: 10,
+    textAlign: 'left',
+  },
+
+  imageContainer: {
+    width: '100%',
+    aspectRatio: 8 / 9,
+    position: 'relative',
+    top: 0,
+    left: 0,
+  },
+
+  contactImage: {
+    width: '100%',
+    height: '70%',
+    resizeMode: 'cover',
+  },
+
+  contactOverlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+
+  contactInfo: {
+    position: 'absolute',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+    borderRadius: 20,
+    marginTop: 250,
+    padding: 40,
+  },
+
+  contactText: {
+    // change this later
+    color: '#4F4F4F',
+    fontSize: 16,
+    paddingBottom: 40,
+    textAlign: 'center',
+  },
+
+  contactboldText: {
+    // change this later
+    color: '#4F4F4F',
+    fontSize: 18,
+    paddingBottom: 10,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+
+  iconColor: {
+    color: '#446127',
+    paddingBottom: 20,
+    textAlign: 'center',
+  },
+
+  treeRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    padding: 10,
+  },
+
+  treeCard: {
+    width: 160,
+    height: 182,
+    flexShrink: 0,
+    borderRadius: 5,
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+  },
+
+  treeImage: {
+    width: 160,
+    height: 135,
+    flexShrink: 0,
+    borderRadius: 5,
+    resizeMode: 'cover',
+    backgroundColor: 'grey',
+  },
+
+  treeDetails: {
+    alignItems: 'flex-start',
+    overflow: 'hidden',
+    flexDirection: 'row',
+  },
+
+  treeName: {
+    // change this later
+    flexShrink: 1,
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+
+  treeInfo: {
+    // change this later
+    fontSize: 14,
+    fontWeight: 'medium',
+  },
+});
diff --git a/src/supabase/client.ts b/src/supabase/client.ts
@@ -7,3 +7,16 @@ const SUPABASE_ANON_KEY = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;
 
 // Create a single Supabase client instance
 export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+export const fetchTreeData = async () => {
+  try {
+    const { data, error } = await supabase.from('trees').select('*');
+
+    if (error) throw error;
+
+    return data;
+  } catch (error) {
+    console.error('Error fetching tree data:', error);
+    return null;
+  }
+};