Angeline assignment2

.env

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_SUPABASE_URL=https://vaimftgbjqbylduffpkw.supabase.co
+EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZhaW1mdGdianFieWxkdWZmcGt3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjgwMDM3NzMsImV4cCI6MjA0MzU3OTc3M30.7uvkyKie49rkNr-fG0E77PsdMreHvAmb9hmSOIdh2Sc

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
+    "@supabase/supabase-js": "^2.45.4",
     "expo": "~51.0.34",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",

src/screens/PostScreen.tsx

@@ -1,43 +1,117 @@
-import { Text, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Image, Text, View } from 'react-native';
+import supabase from 'supabase/client';
 import HeartIcon from '../../assets/heart-icon.svg';
 import ShareIcon from '../../assets/messenger-icon.svg';
 import ProfilePlaceholder from '../../assets/profile-placeholder-icon.svg';
 import { styles } from './styles';
 
 export default function PostScreen() {
+  interface Post {
+    id: number;
+    created_at: string;
+    description: string;
+    username: string;
+    image_url: string;
+    like_count: number;
+  }
+
+  const getPostData = async (): Promise<Post[]> => {
+    const { data, error } = await supabase
+      .from('posts')
+      .select('*')
+      .eq('username', 'rbeggs');
+
+    if (error) {
+      throw new Error(`Error fetching post: ${error.message}`);
+    }
+    return data as Post[];
+  };
+
+  const [postData, setPostData] = useState<Post[]>([]);
+
+  useEffect(() => {
+    fetchPostData();
+  }, []);
+
+  const fetchPostData = async () => {
+    try {
+      const data = await getPostData();
+      setPostData(data);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
   return (
     <View style={styles.container}>
-      <ProfilePlaceholder />
-      <Text>rbeggs</Text>
-      <Text>September 19</Text>
-      <Text>
-        In response to the growing homelessness crisis in San Francisco, a local
-        nonprofit organization, Code Tenderloin, has launched a comprehensive
-        initiative aimed at providing long-term solutions for individuals
-        experiencing homelessness. The organization, founded in 2015, is
-        dedicated to addressing both immediate needs and underlying causes of
-        homelessness through a combination of shelter services, job training
-        programs, and mental health support. read more online:
-        https://www.codetenderloin.org/
-      </Text>
-      <Text>
-        Image URL:
-        'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg'
-      </Text>
-      <HeartIcon />
-      <Text>256 Likes</Text>
-      <ShareIcon />
-      <ProfilePlaceholder />
-      <Text>philip_ye</Text>
-      <Text>September 20</Text>
-      <Text>
-        This organization is doing amazing work tackling the complex root causes
-        of the issue.
-      </Text>
-      <ProfilePlaceholder />
-      <Text>vppraggie</Text>
-      <Text>September 21</Text>
-      <Text>Thanks for sharing!</Text>
+      {postData.map(post => (
+        <View key={post.id}>
+          {/* Profile Header */}
+          <View style={styles.profileHeader}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <ProfilePlaceholder style={styles.profileIcon} />
+              <Text style={styles.profileName}>{post.username}</Text>
+            </View>
+            <Text style={styles.postDate}>
+              {new Date(post.created_at).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </Text>
+          </View>
+
+          {/* Post Text */}
+          <View style={styles.postTextContainer}>
+            <Text style={styles.postText}>{post.description}</Text>
+          </View>
+
+          {/* Post Image */}
+          {post.image_url ? (
+            <Image source={{ uri: post.image_url }} style={styles.postImage} />
+          ) : null}
+
+          {/* Interaction Row */}
+          <View style={styles.interactionRow}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <HeartIcon style={styles.icon} />
+              <Text style={styles.likesText}>{post.like_count} Likes</Text>
+            </View>
+            <ShareIcon style={styles.icon} />
+          </View>
+
+          {/* Comment Section */}
+          <View style={styles.commentSection}>
+            {/* First Comment */}
+            <View style={styles.comment}>
+              <ProfilePlaceholder style={styles.commentIcon} />
+              <View style={styles.commentBody}>
+                <View style={styles.commentHeader}>
+                  <Text style={styles.commentName}>philip_ye</Text>
+                  <Text style={styles.commentDate}>September 20</Text>
+                </View>
+                <Text style={styles.commentText}>
+                  This organization is doing amazing work tackling the complex
+                  root causes of the issue.
+                </Text>
+              </View>
+            </View>
+
+            {/* Second Comment */}
+            <View style={styles.comment}>
+              <ProfilePlaceholder style={styles.commentIcon} />
+              <View style={styles.commentBody}>
+                <View style={styles.commentHeader}>
+                  <Text style={styles.commentName}>vppraggie</Text>
+                  <Text style={styles.commentDate}>September 21</Text>
+                </View>
+                <Text style={styles.commentText}>Thanks for sharing!</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      ))}
     </View>
   );
 }

src/screens/styles.ts

@@ -4,7 +4,103 @@ export const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
-    alignItems: 'center',
     backgroundColor: 'white',
+    padding: 10,
+  },
+  profileHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+    justifyContent: 'space-between',
+  },
+  profileName: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginLeft: 8,
+  },
+  postDate: {
+    color: 'gray',
+    paddingLeft: 120,
+  },
+  postTextContainer: {
+    marginBottom: 10,
+  },
+  postText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  inlineLink: {
+    fontSize: 14,
+    color: 'black',
+  },
+  linkText: {
+    color: '#1E90FF',
+    textDecorationLine: 'underline',
+  },
+  postImage: {
+    width: '100%',
+    height: 200,
+    borderRadius: 10,
+    marginVertical: 10,
+  },
+  interactionRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginVertical: 10,
+    width: '100%',
+  },
+  icon: {
+    marginRight: 8,
+  },
+  likesText: {
+    marginLeft: 5,
+  },
+  commentSection: {
+    borderTopWidth: 1,
+    borderTopColor: '#ccc',
+    paddingTop: 10,
+    marginTop: 20,
+    paddingRight: 10,
+  },
+  commentIcon: {
+    width: 30,
+    height: 30,
+    marginRight: 10,
+  },
+  commentBody: {
+    flex: 1,
+  },
+  profileIcon: {
+    width: 40,
+  },
+  comment: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 10,
+    paddingRight: 10,
+  },
+  commentHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    columnGap: 10,
+  },
+  commentName: {
+    fontWeight: 'bold',
+    fontSize: 14,
+  },
+  commentDate: {
+    color: 'gray',
+    paddingRight: 12,
+  },
+  commentTextContainer: {
+    marginTop: 4,
+  },
+  commentText: {
+    marginTop: 2,
+    fontSize: 14,
+    lineHeight: 18,
   },
 });

supabase/.gitignore

@@ -0,0 +1,2 @@
+#supabase
+.env