Finished Assignment 1

.gitignore

@@ -30,6 +30,7 @@ yarn-error.*
 
 # local env files
 .env*.local
+.env
 
 # typescript
 *.tsbuildinfo

package.json

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

src/screens/PostScreen.tsx

@@ -1,43 +1,92 @@
-import { Text, View } from 'react-native';
+// import { useState } from 'react';
+import { Image, Text, View } from 'react-native';
 import HeartIcon from '../../assets/heart-icon.svg';
 import ShareIcon from '../../assets/messenger-icon.svg';
 import ProfilePlaceholder from '../../assets/profile-placeholder-icon.svg';
+// import supabase from '../../supabase/client';
 import { styles } from './styles';
 
 export default function PostScreen() {
+  // const [postData, setPostData] = useState({
+  //   description: 'description',
+  //   username: 'username',
+  //   imageURL: 'imageURL',
+  //   likes: 0,
+  // });
+
+  // const { data, error } = await supabase.from('posts').select();
+
+  // await supabase.from('posts').select()
+  //   .then(data => ...)
+  //   .catch(error => ...);
+
+  const comments = [
+    {
+      username: 'daviddd',
+      date: 'September 20',
+      text: 'This organization is doing amazing work tackling the complex root causes of the issue.',
+    },
+    {
+      username: 'vppraggie',
+      date: 'September 21',
+      text: 'Thanks for sharing!',
+    },
+  ];
+
   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>
+      <View style={styles.post}>
+        <View style={styles.personHeader}>
+          <View style={styles.nameProfile}>
+            <ProfilePlaceholder />
+            <Text style={styles.username}>rbeggs</Text>
+          </View>
+          <View style={styles.dateDiv}>
+            <Text style={styles.postDate}>September 19</Text>
+          </View>
+        </View>
+        <Text style={styles.caption}>
+          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:
+          <Text style={styles.link}>https://www.codetenderloin.org/</Text>
+        </Text>
+        <Image
+          style={styles.postImage}
+          source={{
+            uri: 'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg',
+          }}
+          alt="image attached to post: photo of San Francisco"
+        />
+        <View style={styles.interactions}>
+          <View style={styles.likes}>
+            <HeartIcon />
+            <Text style={styles.username}>256 Likes</Text>
+          </View>
+          <ShareIcon />
+        </View>
+      </View>
+
+      <View style={styles.comments}>
+        {comments.map(comment => (
+          <View>
+            <View style={styles.personHeader}>
+              <View style={styles.nameProfile}>
+                <ProfilePlaceholder />
+                <Text style={styles.username}>{comment['username']}</Text>
+              </View>
+              <View style={styles.dateDiv}>
+                <Text style={styles.postDate}>{comment['date']}</Text>
+              </View>
+            </View>
+            <Text style={styles.commentText}>{comment['text']}</Text>
+          </View>
+        ))}
+      </View>
     </View>
   );
 }

src/screens/styles.ts

@@ -5,6 +5,69 @@ export const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
+    backgroundColor: 'grey',
+    gap: 1,
+  },
+  post: {
+    paddingHorizontal: 15,
+    paddingTop: 8,
+    backgroundColor: 'white',
+  },
+  personHeader: {
+    paddingTop: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  nameProfile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  username: {
+    fontWeight: 'bold',
+    fontSize: 13,
+  },
+  dateDiv: {
+    paddingRight: 2,
+  },
+  postDate: {
+    color: 'grey',
+    fontSize: 11,
+  },
+  caption: {
+    paddingVertical: 15,
+    fontSize: 13,
+  },
+  link: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+  postImage: {
+    width: '100%',
+    height: undefined,
+    aspectRatio: 1.5,
+    borderRadius: 10,
+  },
+  interactions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 15,
+  },
+  likes: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  comments: {
+    paddingHorizontal: 15,
     backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+  },
+  commentText: {
+    paddingLeft: 34,
+    paddingTop: 8,
   },
 });

supabase/client.ts

@@ -0,0 +1,7 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(
+  process.env.PUBLIC_SUPABASE_URL!,
+  process.env.PUBLIC_SUPABASE_ANON_KEY!,
+);
+export default supabase;