From 57f47d910f5baeaa1e7422f14977cc9785c20dc0 Mon Sep 17 00:00:00 2001 From: user Date: Thu, 3 Oct 2024 00:07:35 -0700 Subject: [PATCH 1/2] 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/2] 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, - }, });