From 57f47d910f5baeaa1e7422f14977cc9785c20dc0 Mon Sep 17 00:00:00 2001 From: user Date: Thu, 3 Oct 2024 00:07:35 -0700 Subject: [PATCH 1/4] fixed linting and formatting issues --- src/screens/PostScreen.tsx | 79 ++++++++++++++++++++++++++------------ src/screens/styles.ts | 67 ++++++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+), 24 deletions(-) diff --git a/src/screens/PostScreen.tsx b/src/screens/PostScreen.tsx index 30e4da9..c8cbb27 100644 --- a/src/screens/PostScreen.tsx +++ b/src/screens/PostScreen.tsx @@ -1,4 +1,5 @@ -import { Text, View } from 'react-native'; +import React from 'react'; +import { Image, Linking, Text, TouchableOpacity, 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'; @@ -7,37 +8,67 @@ import { styles } from './styles'; export default function PostScreen() { return ( - - rbeggs - September 19 - + {/* Profile Header */} + + + + rbeggs + September 19 + + + + {/* Post Content */} + 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/ - - - Image URL: - 'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg' + programs, and mental health support. - - 256 Likes - - - philip_ye - September 20 - - This organization is doing amazing work tackling the complex root causes - of the issue. + + {/* External Link */} + + + read more online: https://www.codetenderloin.org/ - - vppraggie - September 21 - Thanks for sharing! + + {/* Post Image */} + + + {/* Like and Share Section */} + + + 256 Likes + + + + {/* Comments */} + + + + + philip_ye + + This organization is doing amazing work tackling the complex root + causes of the issue. + + + + + + + vppraggie + Thanks for sharing! + + + ); } diff --git a/src/screens/styles.ts b/src/screens/styles.ts index 09f352c..1cf0e3f 100644 --- a/src/screens/styles.ts +++ b/src/screens/styles.ts @@ -7,4 +7,71 @@ export const styles = StyleSheet.create({ alignItems: 'center', backgroundColor: 'white', }, + profileHeader: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 8, + }, + profileIcon: { + width: 40, + height: 40, + marginRight: 10, + }, + profileName: { + fontWeight: 'bold', + fontSize: 16, + }, + postDate: { + color: 'gray', + }, + postText: { + fontSize: 14, + lineHeight: 20, + marginBottom: 10, + }, + linkText: { + color: '#1E90FF', + textDecorationLine: 'underline', + }, + postImage: { + width: '100%', + height: 200, + borderRadius: 10, + marginVertical: 10, + }, + interactionRow: { + flexDirection: 'row', + marginVertical: 10, + }, + icon: { + marginRight: 8, + }, + likesText: { + marginRight: 20, + }, + commentSection: { + marginTop: 20, + }, + comment: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + commentIcon: { + width: 30, + height: 30, + marginRight: 10, + }, + commentName: { + fontWeight: 'bold', + }, + commentText: { + fontSize: 14, + lineHeight: 18, + }, + logo: { + width: 60, + height: 60, + marginBottom: 12, + }, }); From cbbe0e2849ad94c53fa899543cb2d8568f13380e Mon Sep 17 00:00:00 2001 From: user Date: Thu, 3 Oct 2024 23:03:16 -0700 Subject: [PATCH 2/4] implemented changes --- src/screens/PostScreen.tsx | 68 ++++++++++++++++++++++---------------- src/screens/styles.ts | 41 ++++++++++++++++++----- 2 files changed, 72 insertions(+), 37 deletions(-) diff --git a/src/screens/PostScreen.tsx b/src/screens/PostScreen.tsx index c8cbb27..1650194 100644 --- a/src/screens/PostScreen.tsx +++ b/src/screens/PostScreen.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Image, Linking, Text, TouchableOpacity, View } from 'react-native'; +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'; @@ -10,29 +10,27 @@ export default function PostScreen() { {/* Profile Header */} - - + + rbeggs - September 19 + September 19 - {/* Post Content */} - - 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. - - - {/* External Link */} - - - read more online: https://www.codetenderloin.org/ - + {/* Post Content with inline link */} + + + 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/ + + {/* Post Image */} - - 256 Likes + + + 256 Likes + @@ -54,18 +54,28 @@ export default function PostScreen() { - philip_ye - - This organization is doing amazing work tackling the complex root - causes of the issue. - + + philip_ye + September 20 + + + + This organization is doing amazing work tackling the complex + root causes of the issue. + + - vppraggie - Thanks for sharing! + + vppraggie + September 21 + + + Thanks for sharing! + diff --git a/src/screens/styles.ts b/src/screens/styles.ts index 1cf0e3f..4fc4b65 100644 --- a/src/screens/styles.ts +++ b/src/screens/styles.ts @@ -4,13 +4,14 @@ 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', }, profileIcon: { width: 40, @@ -24,10 +25,16 @@ export const styles = StyleSheet.create({ postDate: { color: 'gray', }, + postTextContainer: { + marginBottom: 10, + }, postText: { fontSize: 14, lineHeight: 20, - marginBottom: 10, + }, + inlineLink: { + fontSize: 14, + color: 'black', }, linkText: { color: '#1E90FF', @@ -41,37 +48,55 @@ export const styles = StyleSheet.create({ }, interactionRow: { flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', marginVertical: 10, + width: '100%', }, icon: { marginRight: 8, }, likesText: { - marginRight: 20, + marginLeft: 5, }, commentSection: { + borderTopWidth: 1, + borderTopColor: '#ccc', + paddingTop: 10, marginTop: 20, + paddingRight: 10, }, comment: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, + rowGap: 10, + paddingRight: 10, }, commentIcon: { width: 30, height: 30, marginRight: 10, }, + commentHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + columnGap: 10, + }, commentName: { fontWeight: 'bold', }, + commentDate: { + color: 'gray', + paddingRight: 15, + }, + commentTextContainer: { + marginTop: 4, + }, commentText: { fontSize: 14, lineHeight: 18, }, - logo: { - width: 60, - height: 60, - marginBottom: 12, - }, }); From c7669305c73e45fb1899ddaafdb84ea19c3ff668 Mon Sep 17 00:00:00 2001 From: user Date: Tue, 22 Oct 2024 11:25:36 -0700 Subject: [PATCH 3/4] done assignment 2 --- .env | 2 + package-lock.json | 90 +++++++++++++++++++++ package.json | 1 + src/screens/PostScreen.tsx | 162 ++++++++++++++++++++++--------------- src/screens/styles.ts | 31 ++++--- supabase/.gitignore | 2 + supabase/client.ts | 13 +++ 7 files changed, 223 insertions(+), 78 deletions(-) create mode 100644 .env create mode 100644 supabase/.gitignore create mode 100644 supabase/client.ts diff --git a/.env b/.env new file mode 100644 index 0000000..2049a66 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +EXPO_PUBLIC_SUPABASE_URL=https://vaimftgbjqbylduffpkw.supabase.co +EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZhaW1mdGdianFieWxkdWZmcGt3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjgwMDM3NzMsImV4cCI6MjA0MzU3OTc3M30.7uvkyKie49rkNr-fG0E77PsdMreHvAmb9hmSOIdh2Sc \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3010811..d5eed80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,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", @@ -6365,6 +6366,80 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@supabase/auth-js": { + "version": "2.65.0", + "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.65.0.tgz", + "integrity": "sha512-+wboHfZufAE2Y612OsKeVP4rVOeGZzzMLD/Ac3HrTQkkY4qXNjI6Af9gtmxwccE5nFvTiF114FEbIQ1hRq5uUw==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/functions-js": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.1.tgz", + "integrity": "sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/node-fetch": { + "version": "2.6.15", + "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz", + "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + } + }, + "node_modules/@supabase/postgrest-js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.16.1.tgz", + "integrity": "sha512-EOSEZFm5pPuCPGCmLF1VOCS78DfkSz600PBuvBND/IZmMciJ1pmsS3ss6TkB6UkuvTybYiBh7gKOYyxoEO3USA==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/realtime-js": { + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.10.2.tgz", + "integrity": "sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14", + "@types/phoenix": "^1.5.4", + "@types/ws": "^8.5.10", + "ws": "^8.14.2" + } + }, + "node_modules/@supabase/storage-js": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.7.0.tgz", + "integrity": "sha512-iZenEdO6Mx9iTR6T7wC7sk6KKsoDPLq8rdu5VRy7+JiT1i8fnqfcOr6mfF2Eaqky9VQzhP8zZKQYjzozB65Rig==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/supabase-js": { + "version": "2.45.4", + "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.45.4.tgz", + "integrity": "sha512-E5p8/zOLaQ3a462MZnmnz03CrduA5ySH9hZyL03Y+QZLIOO4/Gs8Rdy4ZCKDHsN7x0xdanVEWWFN3pJFQr9/hg==", + "license": "MIT", + "dependencies": { + "@supabase/auth-js": "2.65.0", + "@supabase/functions-js": "2.4.1", + "@supabase/node-fetch": "2.6.15", + "@supabase/postgrest-js": "1.16.1", + "@supabase/realtime-js": "2.10.2", + "@supabase/storage-js": "2.7.0" + } + }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -6827,6 +6902,12 @@ "@types/node": "*" } }, + "node_modules/@types/phoenix": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.5.tgz", + "integrity": "sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==", + "license": "MIT" + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -6848,6 +6929,15 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/ws": { + "version": "8.5.12", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz", + "integrity": "sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==", + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/yargs": { "version": "13.0.12", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.12.tgz", diff --git a/package.json b/package.json index 746fb32..3a80b08 100644 --- a/package.json +++ b/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", diff --git a/src/screens/PostScreen.tsx b/src/screens/PostScreen.tsx index 1650194..b8f6502 100644 --- a/src/screens/PostScreen.tsx +++ b/src/screens/PostScreen.tsx @@ -1,84 +1,116 @@ -import React from 'react'; -import { Image, Text, View } from 'react-native'; +import React, { useEffect, useState } from 'react'; +import { View, Text, Image, ActivityIndicator } 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'; +import { styles } from './styles'; export default function PostScreen() { - return ( - - {/* Profile Header */} - - - - rbeggs - - September 19 - + interface Post { + id: number; + created_at: string; + description: string; + username: string; + image_url: string; + like_count: number; + } - {/* Post Content with inline link */} - - - 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/ - - + const getPostData = async (): Promise => { + const { data, error } = await supabase + .from('posts') + .select('*') + .eq('username', 'rbeggs'); - {/* Post Image */} - + if (error) { + throw new Error(`Error fetching post: ${error.message}`); + } + return data as Post[]; + }; - {/* Like and Share Section */} - - - - 256 Likes - - - + const [postData, setPostData] = useState([]); - {/* Comments */} - - - - - - philip_ye - September 20 + useEffect(() => { + fetchPostData(); + }, []); + + const fetchPostData = async () => { + try { + const data = await getPostData(); + setPostData(data); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + return ( + + {postData.map((post) => ( + + {/* Profile Header */} + + + + {post.username} - - - This organization is doing amazing work tackling the complex - root causes of the issue. - + + {new Date(post.created_at).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + })} + + + + {/* Post Text */} + + {post.description} + + + {/* Post Image */} + {post.image_url ? ( + + ) : null} + + {/* Interaction Row */} + + + + {post.like_count} Likes + - - - - - - vppraggie - September 21 + + {/* Comment Section */} + + {/* First Comment */} + + + + + philip_ye + September 20 + + + This organization is doing amazing work tackling the complex root causes of the issue. + + - - Thanks for sharing! + + {/* Second Comment */} + + + + + vppraggie + September 21 + + Thanks for sharing! + - + ))} ); } diff --git a/src/screens/styles.ts b/src/screens/styles.ts index 4fc4b65..8ab683f 100644 --- a/src/screens/styles.ts +++ b/src/screens/styles.ts @@ -13,17 +13,14 @@ export const styles = StyleSheet.create({ marginBottom: 8, justifyContent: 'space-between', }, - profileIcon: { - width: 40, - height: 40, - marginRight: 10, - }, profileName: { fontWeight: 'bold', fontSize: 16, + marginLeft: 8, }, postDate: { color: 'gray', + paddingLeft: 120, }, postTextContainer: { marginBottom: 10, @@ -66,17 +63,23 @@ export const styles = StyleSheet.create({ marginTop: 20, paddingRight: 10, }, - comment: { - flexDirection: 'row', - alignItems: 'center', - marginBottom: 10, - rowGap: 10, - 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', @@ -87,15 +90,17 @@ export const styles = StyleSheet.create({ }, commentName: { fontWeight: 'bold', + fontSize: 14, }, commentDate: { color: 'gray', - paddingRight: 15, + paddingRight: 12, }, commentTextContainer: { marginTop: 4, }, commentText: { + marginTop: 2, fontSize: 14, lineHeight: 18, }, diff --git a/supabase/.gitignore b/supabase/.gitignore new file mode 100644 index 0000000..e346b91 --- /dev/null +++ b/supabase/.gitignore @@ -0,0 +1,2 @@ +#supabase +.env \ No newline at end of file diff --git a/supabase/client.ts b/supabase/client.ts new file mode 100644 index 0000000..46364bb --- /dev/null +++ b/supabase/client.ts @@ -0,0 +1,13 @@ +import { createClient } from '@supabase/supabase-js'; + +if ( + !process.env.EXPO_PUBLIC_SUPABASE_URL || + !process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY +) { + throw new Error('Supabase environment variables are not defined.'); +} +const supabase = createClient( + process.env.EXPO_PUBLIC_SUPABASE_URL, + process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY, +); +export default supabase; \ No newline at end of file From eabd71fa1c8fd35101590de665a5444187e2b0dc Mon Sep 17 00:00:00 2001 From: user Date: Tue, 22 Oct 2024 11:26:50 -0700 Subject: [PATCH 4/4] done assignment 2 --- src/screens/PostScreen.tsx | 9 +++++---- src/screens/styles.ts | 7 +++---- supabase/client.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/screens/PostScreen.tsx b/src/screens/PostScreen.tsx index b8f6502..707a957 100644 --- a/src/screens/PostScreen.tsx +++ b/src/screens/PostScreen.tsx @@ -1,10 +1,10 @@ import React, { useEffect, useState } from 'react'; -import { View, Text, Image, ActivityIndicator } from 'react-native'; +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'; +import { styles } from './styles'; export default function PostScreen() { interface Post { @@ -45,7 +45,7 @@ export default function PostScreen() { return ( - {postData.map((post) => ( + {postData.map(post => ( {/* Profile Header */} @@ -92,7 +92,8 @@ export default function PostScreen() { September 20 - This organization is doing amazing work tackling the complex root causes of the issue. + This organization is doing amazing work tackling the complex + root causes of the issue. diff --git a/src/screens/styles.ts b/src/screens/styles.ts index 8ab683f..48fc40b 100644 --- a/src/screens/styles.ts +++ b/src/screens/styles.ts @@ -67,17 +67,16 @@ export const styles = StyleSheet.create({ width: 30, height: 30, marginRight: 10, - }, commentBody: { - flex: 1, + flex: 1, }, profileIcon: { width: 40, }, comment: { - flexDirection: 'row', - alignItems: 'flex-start', + flexDirection: 'row', + alignItems: 'flex-start', marginBottom: 10, paddingRight: 10, }, diff --git a/supabase/client.ts b/supabase/client.ts index 46364bb..255116b 100644 --- a/supabase/client.ts +++ b/supabase/client.ts @@ -10,4 +10,4 @@ const supabase = createClient( process.env.EXPO_PUBLIC_SUPABASE_URL, process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY, ); -export default supabase; \ No newline at end of file +export default supabase;