From 42a992bd1ff6d8243916cea2636c1592b0db24aa Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Thu, 12 Oct 2023 17:36:00 -0700 Subject: [PATCH 01/11] merging new changes --- src/app/(tabs)/search/story.tsx | 4 +++- src/database/story.json | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index c75e2394..b1a07624 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { ActivityIndicator, ScrollView } from 'react-native'; +import { ActivityIndicator, ScrollView, Image } from 'react-native'; import HTMLView from 'react-native-htmlview'; import { SafeAreaView } from 'react-native-safe-area-context'; import globalStyles from '../../../styles/globalStyles'; @@ -40,6 +40,8 @@ function StoryScreen() { ) : ( + {/* */} diff --git a/src/database/story.json b/src/database/story.json index 5f4788f2..118ceac9 100644 --- a/src/database/story.json +++ b/src/database/story.json @@ -15,5 +15,6 @@ "tone": ["Charming", "Heartwarming", "Narrative"], "topic": ["Community & Belonging", "Culture", "Diaspora", "Identity"], "coauthors": ["Allison Elliot"], - "acf": [] + "acf": [], + "website_url": "https://girlswritenow.org/story/its-carnival/" } From 82dee44c2fe81e021d36c9b2fc66bd8832d83629 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Thu, 12 Oct 2023 23:43:21 -0700 Subject: [PATCH 02/11] organized some of the information, still need to format genres and retrieve author information --- package-lock.json | 11 +++++- package.json | 10 +++--- src/app/(tabs)/search/story.tsx | 60 ++++++++++++++++++++++++++++++--- 3 files changed, 70 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index c1f97db0..816bd5bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,8 @@ "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-url-polyfill": "^2.0.0", - "react-native-vector-icons": "^10.0.0" + "react-native-vector-icons": "^10.0.0", + "react-scroll-to-top": "^3.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -15413,6 +15414,14 @@ "node": ">=0.10.0" } }, + "node_modules/react-scroll-to-top": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz", + "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==", + "peerDependencies": { + "react": "^16.8.0 || 17.x || ^18" + } + }, "node_modules/react-shallow-renderer": { "version": "16.15.0", "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", diff --git a/package.json b/package.json index 42503c67..88493176 100644 --- a/package.json +++ b/package.json @@ -31,20 +31,20 @@ "expo-status-bar": "~1.6.0", "html-entities": "^2.4.0", "react": "18.2.0", - "react-native": "0.72.4", + "react-native": "0.72.5", "react-native-dom-parser": "^1.5.3", + "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.12.0", "react-native-htmlview": "^0.16.0", + "react-native-ionicons": "^4.6.5", "react-native-render-html": "^6.3.4", "react-native-root-siblings": "^4.1.1", "react-native-root-toast": "^3.5.1", - "react-native-ionicons": "^4.6.5", - "react-native": "0.72.5", - "react-native-elements": "^3.4.3", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", + "react-native-url-polyfill": "^2.0.0", "react-native-vector-icons": "^10.0.0", - "react-native-url-polyfill": "^2.0.0" + "react-scroll-to-top": "^3.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index b1a07624..d8c4da8a 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -1,11 +1,20 @@ -import { useEffect, useState } from 'react'; -import { ActivityIndicator, ScrollView, Image } from 'react-native'; +import React, { createRef, useEffect, useRef, useState } from 'react'; +import { + ActivityIndicator, + ScrollView, + Image, + Text, + Share, + Button, +} from 'react-native'; import HTMLView from 'react-native-htmlview'; import { SafeAreaView } from 'react-native-safe-area-context'; import globalStyles from '../../../styles/globalStyles'; +import jsonStory from '../../../database/story.json'; + function htmlParser(html: string) { - const regex = /(\n+)+/; // regex grabs heading and paragraph tags for story + const regex = /()(\n+)+()/; // regex grabs heading and paragraph tags for story const corresp = regex.exec(html); const story = corresp ? corresp[0] : ''; //

heading

paragraph1

... return story; @@ -15,7 +24,10 @@ function StoryScreen() { const [isLoading, setLoading] = useState(true); const [title, setTitle] = useState(String); const [content, setContent] = useState(String); + const [author, setAuthor] = useState(String); + const [genres, setGenres] = useState(['']); + // Load Wordpress API and its contents const getStory = async (id: string) => { try { const url = `https://girlswritenow.org/wp-json/wp/v2/story/${id}`; @@ -23,6 +35,8 @@ function StoryScreen() { const json = await response.json(); setTitle(json.title.rendered); setContent(json.content.rendered); + setAuthor(jsonStory.author); + setGenres(jsonStory['genre-medium'].map(txt => `
  • ${txt}
    • `)); // .map(txt => `

    ${txt}

    `) } catch (error) { console.error(error); } finally { @@ -30,6 +44,31 @@ function StoryScreen() { } }; + // Share Story Button action + const onShare = async () => { + try { + const result = await Share.share({ + message: + 'React Native | A framework for building native apps using React', + }); + if (result.action === Share.sharedAction) { + if (result.activityType) { + // shared with activity type of result.activityType + } else { + // shared + } + } else if (result.action === Share.dismissedAction) { + // dismissed + } + } catch (error) { + console.error(error); + } + }; + + // const backToTop = () => { + + // } + useEffect(() => { getStory('170947'); }, []); @@ -40,10 +79,21 @@ function StoryScreen() { ) : ( - {/* */} + + By {author} + + + - - + Author's Process + By {author} {/* - - - - Author's Process - - By {author} + {/* STYLING & URI WARNING */} + + + +

    ${title}

    `)} + /> +     + + + + By {author} + {'\n'} + + + + + + {'\n'} + + + + + {'\n'} + + + + + {'\n'} + + + + + {'\n'} + + Author's Process + {'\n'} + + + {'\n'} + + + + By {author} + + {'\n\n'} + {/* + + {'\n\n\n\n\n\n\n\n\n\n'}     )} diff --git a/src/styles/temp.ts b/src/styles/temp.ts new file mode 100644 index 00000000..8e3171d7 --- /dev/null +++ b/src/styles/temp.ts @@ -0,0 +1,14 @@ +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + image: { + width: '100%', + height: '5%', + }, + body: { + fontSize: 16, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, +}); From 4fce35f168905ccc6709ddcf387f7644c58c6000 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Thu, 19 Oct 2023 22:08:14 -0700 Subject: [PATCH 07/11] finished back to top button --- package-lock.json | 19 +- src/app/(tabs)/search/story.tsx | 297 ++++++++++++++++++++++---------- src/styles/temp.ts | 14 -- src/styles/tempStyles.ts | 98 +++++++++++ 4 files changed, 316 insertions(+), 112 deletions(-) delete mode 100644 src/styles/temp.ts create mode 100644 src/styles/tempStyles.ts diff --git a/package-lock.json b/package-lock.json index f03f021e..f39660ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,8 +47,7 @@ "react-native-screens": "~3.22.0", "react-native-url-polyfill": "^2.0.0", "react-native-vector-icons": "^10.0.0", - "react-scroll-to-top": "^3.0.0", - "styled-components": "^6.1.0" + "react-scroll-to-top": "^3.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -4733,6 +4732,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz", @@ -7252,7 +7260,8 @@ "node_modules/@types/stylis": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.1.tgz", - "integrity": "sha512-OSaMrXUKxVigGlKRrET39V2xdhzlztQ9Aqumn1WbCBKHOi9ry7jKSd7rkyj0GzmWaU960Rd+LpOFpLfx5bMQAg==" + "integrity": "sha512-OSaMrXUKxVigGlKRrET39V2xdhzlztQ9Aqumn1WbCBKHOi9ry7jKSd7rkyj0GzmWaU960Rd+LpOFpLfx5bMQAg==", + "peer": true }, "node_modules/@types/urijs": { "version": "1.19.20", @@ -17492,6 +17501,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.0.tgz", "integrity": "sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==", + "peer": true, "dependencies": { "@emotion/is-prop-valid": "^1.2.1", "@emotion/unitless": "^0.8.0", @@ -17518,7 +17528,8 @@ "node_modules/styled-components/node_modules/stylis": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", - "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==", + "peer": true }, "node_modules/stylis": { "version": "4.2.0", diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index dfefe15b..6178d046 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -1,18 +1,18 @@ -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { ActivityIndicator, + FlatList, Image, ScrollView, Share, Text, View, } from 'react-native'; -import HTMLView from 'react-native-htmlview'; import { Button } from 'react-native-paper'; import { SafeAreaView } from 'react-native-safe-area-context'; + import jsonStory from '../../../database/story.json'; import globalStyles from '../../../styles/globalStyles'; -import temp from '../../../styles/temp'; function htmlParser(htmlString: string) { const regexHeading = /()/; @@ -24,10 +24,26 @@ function htmlParser(htmlString: string) { const process = regexProcess.exec(htmlString); const contentHeading = heading - ? heading[0].replace('', '

    ') - : ''; //

    heading

    - const contentStory = story ? story[0].replace(/(\n)+/gi, '') : ''; //

    paragraph1

    ... - const contentProcess = process ? process[0].replace(' ', '') : ''; + ? heading[0] + .replace('

    ', '') + .replace(//, '') + .replace(/’/gi, "'") + : ''; + const contentStory = story + ? story[0] + .replace(/(\n)+/gi, '') + .replace(/

    /gi, '') + .replace(/<\/p>/gi, '\n\n') + .replace(/ /gi, '') + .replace(/’/gi, "'") + : ''; + const contentProcess = process + ? process[0] + .replace(/

    /gi, '') + .replace(/<\/p>/gi, '') + .replace(/ /gi, '') + .replace(/’/gi, "'") + : ''; return { heading: contentHeading, story: contentStory, @@ -38,10 +54,13 @@ function htmlParser(htmlString: string) { function StoryScreen() { const [isLoading, setLoading] = useState(true); const [title, setTitle] = useState(String); - const [content, setContent] = useState(String); + const [story, setStory] = useState(String); + const [heading, setHeading] = useState(String); + const [process, setProcess] = useState(String); const [author, setAuthor] = useState(String); - const [genres, setGenres] = useState(String); + const [genres, setGenres] = useState(['']); const [image, setImage] = useState(String); + const ref = React.useRef(null); // Load Wordpress API and its contents const getStory = async (id: string) => { @@ -50,15 +69,12 @@ function StoryScreen() { const response = await fetch(url); const json = await response.json(); - setTitle(json.title.rendered); - setContent(json.content.rendered); + setTitle(json.title.rendered.replace(/’/gi, "'")); + setStory(htmlParser(json.content.rendered).story); + setHeading(htmlParser(json.content.rendered).heading); + setProcess(htmlParser(json.content.rendered).process); setAuthor(jsonStory.author); - setGenres( - `

      ${jsonStory['genre-medium'] - .map(txt => `
    • ${txt}
      • `) - .toString() - .replace(',', '')}
    `, - ); + setGenres(jsonStory['genre-medium']); setImage(jsonStory.featured_media); } catch (error) { console.error(error); @@ -74,10 +90,10 @@ function StoryScreen() { message: `${title}\n` + `By ${author}\n\n\n` + - `${htmlParser(content).heading.replace(/<[^>]+>/g, '\n')}` + - `${htmlParser(content).story.replace(/<[^>]+>/g, '\n')}\n\n\n` + + `${heading}` + + `${story}\n` + `Author's Process:\n` + - `${htmlParser(content).process.replace(/<[^>]+>/g, '')}`, + `${process}`, }); if (result.action === Share.sharedAction) { if (result.activityType) { @@ -93,6 +109,10 @@ function StoryScreen() { } }; + const scrollUp = () => { + ref.current?.scrollTo({ x: 0, y: 0 }); + }; + useEffect(() => { getStory('170947'); }, []); @@ -102,87 +122,85 @@ function StoryScreen() { {isLoading ? ( ) : ( - - {/* STYLING & URI WARNING */} - - - -

    ${title}

    `)} - /> -     + + - - - By {author} - {'\n'} - + + {title} - - - - {'\n'} - - - - - {'\n'} - - - - - {'\n'} - - - + + + By {author} + + + + ( + {item} + )} + /> + + + + + - {'\n'} - Author's Process - {'\n'} + {heading} - - {'\n'} + {story} - - - By {author} - - {'\n\n'} - - {/* + + + + + + Author's Process + + {process} + + + + By {author} + + + + + - {'\n\n\n\n\n\n\n\n\n\n'} )} @@ -190,3 +208,94 @@ function StoryScreen() { } export default StoryScreen; + +const tempStyles = { + image: { + width: '100%', + height: '5%', + }, + top: { + justifyContent: 'space-between', + gap: 16, + paddingTop: 20, + paddingBottom: 34, + }, + bottom: { + justifyContent: 'space-between', + gap: 16, + paddingBottom: 160, + }, + title: { + fontFamily: 'Avenir', + fontSize: 24, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + author: { + display: 'flex', + flexDirection: 'row', + gap: 10, + }, + authorText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + genres: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + borderRadius: 10, + }, + genresText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + color: 'black', + backgroundColor: '#D9D9D9', + paddingTop: 5, + paddingBottom: 5, + paddingLeft: 10, + paddingRight: 10, + }, + shareButtonText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + textDecorationLine: 'underline', + }, + heading: { + fontFamily: 'Avenir', + fontSize: 16, + fontWeight: '400', + textAlign: 'left', + color: 'black', + paddingBottom: 34, + }, + story: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + process: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + backToTopButtonText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '600', + textAlign: 'left', + color: 'black', + }, +}; diff --git a/src/styles/temp.ts b/src/styles/temp.ts deleted file mode 100644 index 8e3171d7..00000000 --- a/src/styles/temp.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { StyleSheet } from 'react-native'; - -export default StyleSheet.create({ - image: { - width: '100%', - height: '5%', - }, - body: { - fontSize: 16, - fontWeight: '400', - textAlign: 'left', - color: 'black', - }, -}); diff --git a/src/styles/tempStyles.ts b/src/styles/tempStyles.ts new file mode 100644 index 00000000..352d4905 --- /dev/null +++ b/src/styles/tempStyles.ts @@ -0,0 +1,98 @@ +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + image: { + width: '100%', + height: '5%', + }, + top: { + justifyContent: 'space-between', + gap: 16, + paddingTop: 20, + paddingBottom: 34, + }, + bottom: { + justifyContent: 'space-between', + gap: 16, + paddingBottom: 160, + }, + title: { + fontFamily: 'Avenir', + fontSize: 24, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + author: { + display: 'flex', + flexDirection: 'row', + gap: 10, + }, + circle: { + width: 21, + height: 21, + borderRadius: 100 / 2, + backgroundColor: '#D9D9D9', + }, + authorText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + genres: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + borderRadius: 10, + }, + genresText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + color: 'black', + backgroundColor: '#D9D9D9', + paddingTop: 5, + paddingBottom: 5, + paddingLeft: 10, + paddingRight: 10, + }, + shareButtonText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + textDecorationLine: 'underline', + }, + heading: { + fontFamily: 'Avenir', + fontSize: 16, + fontWeight: '400', + textAlign: 'left', + color: 'black', + paddingBottom: 34, + }, + story: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + process: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + backToTopButtonText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '600', + textAlign: 'left', + color: 'black', + }, +}); From 0bd0231290096e95c76f17cb72be3acde2cca7a0 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Thu, 19 Oct 2023 22:10:07 -0700 Subject: [PATCH 08/11] ran prettier and deleted temporary style sheet to add styles to story.tsx --- src/styles/tempStyles.ts | 98 ---------------------------------------- 1 file changed, 98 deletions(-) delete mode 100644 src/styles/tempStyles.ts diff --git a/src/styles/tempStyles.ts b/src/styles/tempStyles.ts deleted file mode 100644 index 352d4905..00000000 --- a/src/styles/tempStyles.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { StyleSheet } from 'react-native'; - -export default StyleSheet.create({ - image: { - width: '100%', - height: '5%', - }, - top: { - justifyContent: 'space-between', - gap: 16, - paddingTop: 20, - paddingBottom: 34, - }, - bottom: { - justifyContent: 'space-between', - gap: 16, - paddingBottom: 160, - }, - title: { - fontFamily: 'Avenir', - fontSize: 24, - fontWeight: '400', - textAlign: 'left', - color: 'black', - }, - author: { - display: 'flex', - flexDirection: 'row', - gap: 10, - }, - circle: { - width: 21, - height: 21, - borderRadius: 100 / 2, - backgroundColor: '#D9D9D9', - }, - authorText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - textAlign: 'left', - color: 'black', - }, - genres: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - borderRadius: 10, - }, - genresText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - color: 'black', - backgroundColor: '#D9D9D9', - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 10, - paddingRight: 10, - }, - shareButtonText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - textAlign: 'left', - color: 'black', - textDecorationLine: 'underline', - }, - heading: { - fontFamily: 'Avenir', - fontSize: 16, - fontWeight: '400', - textAlign: 'left', - color: 'black', - paddingBottom: 34, - }, - story: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - textAlign: 'left', - color: 'black', - }, - process: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - textAlign: 'left', - color: 'black', - }, - backToTopButtonText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '600', - textAlign: 'left', - color: 'black', - }, -}); From 67237a53f68e9453bff6bfb60d14a87f21dfc8e4 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Thu, 19 Oct 2023 22:45:45 -0700 Subject: [PATCH 09/11] fixed minor error which would not grab heading --- src/app/(tabs)/search/story.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index 6178d046..4b9b3ac8 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -16,7 +16,7 @@ import globalStyles from '../../../styles/globalStyles'; function htmlParser(htmlString: string) { const regexHeading = /()/; - const regexStory = /(\n+)+/; // regex grabs heading and paragraph tags for story + const regexStory = /(\n+)+/; const regexProcess = /

     (.*?)p>/; const heading = regexHeading.exec(htmlString); From c1cb6db2008ddbc8c046fd0ad16a92ce5b354ffc Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Sat, 21 Oct 2023 12:35:29 -0700 Subject: [PATCH 10/11] pull regrest changes made (styling fixes and html parser decoder added) --- src/app/(tabs)/search/story.tsx | 85 ++++++++++++++++----------------- 1 file changed, 42 insertions(+), 43 deletions(-) diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index 4b9b3ac8..586748a4 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -1,3 +1,4 @@ +import { decode } from 'html-entities'; import React, { useEffect, useState } from 'react'; import { ActivityIndicator, @@ -7,6 +8,7 @@ import { Share, Text, View, + StyleSheet, } from 'react-native'; import { Button } from 'react-native-paper'; import { SafeAreaView } from 'react-native-safe-area-context'; @@ -24,25 +26,20 @@ function htmlParser(htmlString: string) { const process = regexProcess.exec(htmlString); const contentHeading = heading - ? heading[0] + ? decode(heading[0], { level: 'html5' }) .replace('', '') .replace(//, '') - .replace(/’/gi, "'") : ''; const contentStory = story - ? story[0] + ? decode(story[0], { level: 'html5' }) .replace(/(\n)+/gi, '') .replace(/

    /gi, '') .replace(/<\/p>/gi, '\n\n') - .replace(/ /gi, '') - .replace(/’/gi, "'") : ''; const contentProcess = process - ? process[0] + ? decode(process[0], { level: 'html5' }) .replace(/

    /gi, '') .replace(/<\/p>/gi, '') - .replace(/ /gi, '') - .replace(/’/gi, "'") : ''; return { heading: contentHeading, @@ -69,7 +66,7 @@ function StoryScreen() { const response = await fetch(url); const json = await response.json(); - setTitle(json.title.rendered.replace(/’/gi, "'")); + setTitle(decode(json.title.rendered)); setStory(htmlParser(json.content.rendered).story); setHeading(htmlParser(json.content.rendered).heading); setProcess(htmlParser(json.content.rendered).process); @@ -87,13 +84,7 @@ function StoryScreen() { const onShare = async () => { try { const result = await Share.share({ - message: - `${title}\n` + - `By ${author}\n\n\n` + - `${heading}` + - `${story}\n` + - `Author's Process:\n` + - `${process}`, + message: `Check out this story from Girls Write Now!!!\nhttps://girlswritenow.org/story/${jsonStory.slug}/`, }); if (result.action === Share.sharedAction) { if (result.activityType) { @@ -118,7 +109,7 @@ function StoryScreen() { }, []); return ( - + {isLoading ? ( ) : ( @@ -129,24 +120,19 @@ function StoryScreen() { {title} - + By {author} - + ( - {item} + + {item} + )} /> @@ -184,14 +170,7 @@ function StoryScreen() { {process} - + By {author} @@ -209,10 +188,25 @@ function StoryScreen() { export default StoryScreen; -const tempStyles = { +const tempStyles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + alignItems: 'flex-start', + justifyContent: 'flex-start', + paddingLeft: 24, + paddingRight: 24, + paddingTop: 48, + }, image: { width: '100%', - height: '5%', + height: 153, + }, + authorImage: { + backgroundColor: '#D9D9D9', + width: 21, + height: 21, + borderRadius: 100 / 2, }, top: { justifyContent: 'space-between', @@ -223,7 +217,7 @@ const tempStyles = { bottom: { justifyContent: 'space-between', gap: 16, - paddingBottom: 160, + paddingBottom: 32, }, title: { fontFamily: 'Avenir', @@ -250,16 +244,21 @@ const tempStyles = { flexWrap: 'wrap', borderRadius: 10, }, + genresBorder: { + backgroundColor: '#D9D9D9', + paddingTop: 5, + paddingBottom: 5, + paddingLeft: 10, + paddingRight: 10, + borderRadius: 10, + marginRight: 8, + }, genresText: { fontFamily: 'Avenir', fontSize: 12, fontWeight: '400', color: 'black', backgroundColor: '#D9D9D9', - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 10, - paddingRight: 10, }, shareButtonText: { fontFamily: 'Avenir', @@ -298,4 +297,4 @@ const tempStyles = { textAlign: 'left', color: 'black', }, -}; +}); From 0dbc36a4a892f7d0f477e64955e1c4d3316c0e7b Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Sat, 21 Oct 2023 16:07:14 -0700 Subject: [PATCH 11/11] ran prettier and fixed styling (removed top and bottom components and added margin to every component individually) --- src/app/(tabs)/search/story.tsx | 135 ++++++++++++++++++-------------- 1 file changed, 76 insertions(+), 59 deletions(-) diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index 586748a4..ea49c1be 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -14,7 +14,6 @@ import { Button } from 'react-native-paper'; import { SafeAreaView } from 'react-native-safe-area-context'; import jsonStory from '../../../database/story.json'; -import globalStyles from '../../../styles/globalStyles'; function htmlParser(htmlString: string) { const regexHeading = /()/; @@ -57,7 +56,7 @@ function StoryScreen() { const [author, setAuthor] = useState(String); const [genres, setGenres] = useState(['']); const [image, setImage] = useState(String); - const ref = React.useRef(null); + const scrollRef = React.useRef(null); // Load Wordpress API and its contents const getStory = async (id: string) => { @@ -101,7 +100,7 @@ function StoryScreen() { }; const scrollUp = () => { - ref.current?.scrollTo({ x: 0, y: 0 }); + scrollRef.current?.scrollTo({ x: 0, y: 0 }); }; useEffect(() => { @@ -113,73 +112,75 @@ function StoryScreen() { {isLoading ? ( ) : ( - + - - {title} + {title} - - - By {author} - + + + By {author} + - - ( - - {item} - - )} - /> - + + ( + + {item} + + )} + /> + {/* */} - - - + {heading} {story} - - - - - - Author's Process + - {process} + Author's Process - - - By {author} - + {process} - - - + + + By {author} + + )} @@ -201,6 +202,7 @@ const tempStyles = StyleSheet.create({ image: { width: '100%', height: 153, + marginBottom: 16, }, authorImage: { backgroundColor: '#D9D9D9', @@ -210,13 +212,14 @@ const tempStyles = StyleSheet.create({ }, top: { justifyContent: 'space-between', - gap: 16, + gap: 14, paddingTop: 20, - paddingBottom: 34, + paddingBottom: 32, }, bottom: { + alignItems: 'flex-start', justifyContent: 'space-between', - gap: 16, + gap: 14, paddingBottom: 32, }, title: { @@ -225,11 +228,13 @@ const tempStyles = StyleSheet.create({ fontWeight: '400', textAlign: 'left', color: 'black', + marginBottom: 16, }, author: { display: 'flex', flexDirection: 'row', gap: 10, + marginBottom: 16, }, authorText: { fontFamily: 'Avenir', @@ -243,6 +248,7 @@ const tempStyles = StyleSheet.create({ flexDirection: 'row', flexWrap: 'wrap', borderRadius: 10, + marginBottom: 16, }, genresBorder: { backgroundColor: '#D9D9D9', @@ -267,6 +273,7 @@ const tempStyles = StyleSheet.create({ textAlign: 'left', color: 'black', textDecorationLine: 'underline', + backgroundColor: '#D9D9D9', }, heading: { fontFamily: 'Avenir', @@ -282,6 +289,15 @@ const tempStyles = StyleSheet.create({ fontWeight: '400', textAlign: 'left', color: 'black', + marginBottom: 16, + }, + authorProcess: { + fontFamily: 'Avenir', + fontSize: 16, + fontWeight: '600', + textAlign: 'left', + color: 'black', + marginBottom: 16, }, process: { fontFamily: 'Avenir', @@ -289,11 +305,12 @@ const tempStyles = StyleSheet.create({ fontWeight: '400', textAlign: 'left', color: 'black', + marginBottom: 16, }, backToTopButtonText: { fontFamily: 'Avenir', fontSize: 12, - fontWeight: '600', + fontWeight: '800', textAlign: 'left', color: 'black', },