From fbd4c945ea4301547fc28de0b9a8ee99f8e6aef7 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Sat, 30 Sep 2023 01:44:54 -0700 Subject: [PATCH 1/6] npx prettier . --write --- src/screens/StoryScreen.tsx | 41 +++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/screens/StoryScreen.tsx b/src/screens/StoryScreen.tsx index 4576d543..4a58f6f6 100644 --- a/src/screens/StoryScreen.tsx +++ b/src/screens/StoryScreen.tsx @@ -1,10 +1,47 @@ -import React from 'react'; -import { Text, View } from 'react-native'; +import React, { useEffect, useState } from 'react'; +import { ActivityIndicator, Text, View } from 'react-native'; + +// type Story = { +// content: string; +// }; export default function StoryScreen() { + const [isLoading, setLoading] = useState(true); + const [title, setTitle] = useState(String); + const [content, setContent] = useState(String); + + const getStory = async () => { + try { + const response = await fetch( + 'https://girlswritenow.org/wp-json/wp/v2/story/170947', + ); + const json = await response.json(); + setTitle(json.title.rendered); + setContent(json.content.rendered); + } catch (error) { + // console.log(error); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + getStory(); + }, []); + return ( Story Page + + {isLoading ? ( + + ) : ( + + {title} + {'\n'} + {content} + // title shows weird symbols and content shows + )} ); } From 5c4de73fca4d5745a1e7fe615bce1b4a238abeac Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Sat, 30 Sep 2023 01:45:42 -0700 Subject: [PATCH 2/6] title and content display on StoryScreen, but are not formatted --- src/screens/StoryScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/StoryScreen.tsx b/src/screens/StoryScreen.tsx index 4a58f6f6..215f3c8a 100644 --- a/src/screens/StoryScreen.tsx +++ b/src/screens/StoryScreen.tsx @@ -19,7 +19,7 @@ export default function StoryScreen() { setTitle(json.title.rendered); setContent(json.content.rendered); } catch (error) { - // console.log(error); + // console.error(error); } finally { setLoading(false); } From d702cc737ac28fd81c3091e0649aeb8c7f1ec25b Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Mon, 2 Oct 2023 15:57:40 -0700 Subject: [PATCH 3/6] unorganized and unformatted content display on screen, but successfully accesses wordpress database stories --- package-lock.json | 394 +++++++++++++++++++++++++++++++++++- package.json | 10 +- src/screens/StoryScreen.tsx | 19 +- 3 files changed, 402 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index f8ccb568..009fc5c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,15 @@ "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "axios": "^1.5.0", + "dom-parser": "^0.1.6", "expo": "~49.0.11", "expo-status-bar": "~1.6.0", + "html-entities": "^2.4.0", "react": "18.2.0", "react-native": "0.72.4", + "react-native-dom-parser": "^1.5.3", + "react-native-htmlview": "^0.16.0", + "react-native-render-html": "^6.3.4", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0" }, @@ -23,6 +28,7 @@ "@calblueprint/eslint-config-react": "^0.0.3", "@calblueprint/prettier-config": "^0.0.1", "@types/react": "~18.2.14", + "@types/react-native-htmlview": "^0.16.1", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "eslint": "^8.50.0", @@ -3891,6 +3897,53 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@jsamr/counter-style": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@jsamr/counter-style/-/counter-style-2.0.2.tgz", + "integrity": "sha512-2mXudGVtSzVxWEA7B9jZLKjoXUeUFYDDtFrQoC0IFX9/Dszz4t1vZOmafi3JSw/FxD+udMQ+4TAFR8Qs0J3URQ==" + }, + "node_modules/@jsamr/react-native-li": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@jsamr/react-native-li/-/react-native-li-2.3.1.tgz", + "integrity": "sha512-Qbo4NEj48SQ4k8FZJHFE2fgZDKTWaUGmVxcIQh3msg5JezLdTMMHuRRDYctfdHI6L0FZGObmEv3haWbIvmol8w==", + "peerDependencies": { + "@jsamr/counter-style": "^1.0.0 || ^2.0.0", + "react": "*", + "react-native": "*" + } + }, + "node_modules/@native-html/css-processor": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@native-html/css-processor/-/css-processor-1.11.0.tgz", + "integrity": "sha512-NnhBEbJX5M2gBGltPKOetiLlKhNf3OHdRafc8//e2ZQxXN8JaSW/Hy8cm94pnIckQxwaMKxrtaNT3x4ZcffoNQ==", + "dependencies": { + "css-to-react-native": "^3.0.0", + "csstype": "^3.0.8" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-native": "*" + } + }, + "node_modules/@native-html/transient-render-engine": { + "version": "11.2.3", + "resolved": "https://registry.npmjs.org/@native-html/transient-render-engine/-/transient-render-engine-11.2.3.tgz", + "integrity": "sha512-zXwgA3gPUEmFs3I3syfnvDvS6WiUHXEE6jY09OBzK+trq7wkweOSFWIoyXiGkbXrozGYG0KY90YgPyr8Tg8Uyg==", + "dependencies": { + "@native-html/css-processor": "1.11.0", + "@types/ramda": "^0.27.44", + "csstype": "^3.0.9", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.2", + "domutils": "^2.8.0", + "htmlparser2": "^7.1.2", + "ramda": "^0.27.2" + }, + "peerDependencies": { + "@types/react-native": "*", + "react-native": "^*" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -6214,25 +6267,49 @@ "node_modules/@types/prop-types": { "version": "15.7.6", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.6.tgz", - "integrity": "sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==", - "dev": true + "integrity": "sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==" + }, + "node_modules/@types/ramda": { + "version": "0.27.66", + "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.66.tgz", + "integrity": "sha512-i2YW+E2U6NfMt3dp0RxNcejox+bxJUNDjB7BpYuRuoHIzv5juPHkJkNgcUOu+YSQEmaWu8cnAo/8r63C0NnuVA==", + "dependencies": { + "ts-toolbelt": "^6.15.1" + } }, "node_modules/@types/react": { "version": "18.2.22", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.22.tgz", "integrity": "sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "node_modules/@types/react-native": { + "version": "0.72.3", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.72.3.tgz", + "integrity": "sha512-9+g+DBJIY3bG7+ZlYzKPr9kxTQxUuZQgLWZhYK4RlIcrsm3qaJhL2PU2e/K4CjnzznWCo2Islgec94x2z1pG4Q==", + "dependencies": { + "@react-native/virtualized-lists": "^0.72.4", + "@types/react": "*" + } + }, + "node_modules/@types/react-native-htmlview": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/@types/react-native-htmlview/-/react-native-htmlview-0.16.1.tgz", + "integrity": "sha512-xYWZeTaZsajT2uWwTxi+uATgTJT8yPhrRShWVQOG8xCV5FoYaJJH6Ez4v49mMOJ8ns1yrGNiFzD65DmZwBZeeA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/react-native": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", - "dev": true + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, "node_modules/@types/semver": { "version": "7.5.3", @@ -6245,6 +6322,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/urijs": { + "version": "1.19.20", + "resolved": "https://registry.npmjs.org/@types/urijs/-/urijs-1.19.20.tgz", + "integrity": "sha512-77Mq/2BeHU894J364dUv9tSwxxyCLtcX228Pc8TwZpP5bvOoMns+gZoftp3LYl3FBH8vChpWbuagKGiMki2c1A==" + }, "node_modules/@types/yargs": { "version": "15.0.15", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz", @@ -7533,6 +7615,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001538", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz", @@ -7565,6 +7655,24 @@ "node": ">=4" } }, + "node_modules/character-entities-html4": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz", + "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/charenc": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", @@ -7905,11 +8013,28 @@ "node": ">=8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/dag-map": { "version": "1.0.2", @@ -8169,6 +8294,62 @@ "node": ">=6.0.0" } }, + "node_modules/dom-parser": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/dom-parser/-/dom-parser-0.1.6.tgz", + "integrity": "sha512-3nVRKbLEwmGfghLoeT1dxlK/0votalnOfasP+8VCHYDfDuCETY4LeMblfOeqww6XZk2ymZ1Uewy/hVad6Dy3yw==" + }, + "node_modules/dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/dotenv": { "version": "16.0.3", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", @@ -8216,6 +8397,14 @@ "once": "^1.4.0" } }, + "node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-editor": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz", @@ -9061,6 +9250,11 @@ "node": ">=6" } }, + "node_modules/eventemitter2": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-1.0.5.tgz", + "integrity": "sha512-EUFhWUYzqqBZlzBMI+dPU8rnKXfQZEUnitnccQuEIAnvWFHCpt3+4fts2+4dpxLtlsiseVXCMFg37KjYChSxpg==" + }, "node_modules/exec-async": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/exec-async/-/exec-async-2.2.0.tgz", @@ -10027,6 +10221,119 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/html-entities": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.4.0.tgz", + "integrity": "sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/mdevils" + }, + { + "type": "patreon", + "url": "https://patreon.com/mdevils" + } + ] + }, + "node_modules/htmlparser2": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", + "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.2", + "domutils": "^2.8.0", + "entities": "^3.0.1" + } + }, + "node_modules/htmlparser2-without-node-native": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz", + "integrity": "sha512-+FplQXqmY5fRx6vCIp2P5urWaoBCpTNJMXnKP/6mNCcyb+AZWWJzA8D03peXfozlxDL+vpgLK5dJblqEgu8j6A==", + "dependencies": { + "domelementtype": "^1.3.0", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "eventemitter2": "^1.0.0", + "inherits": "^2.0.1", + "readable-stream": "^2.0.2" + } + }, + "node_modules/htmlparser2-without-node-native/node_modules/dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "dependencies": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + } + }, + "node_modules/htmlparser2-without-node-native/node_modules/dom-serializer/node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/htmlparser2-without-node-native/node_modules/dom-serializer/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/htmlparser2-without-node-native/node_modules/domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==" + }, + "node_modules/htmlparser2-without-node-native/node_modules/domhandler": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "dependencies": { + "domelementtype": "1" + } + }, + "node_modules/htmlparser2-without-node-native/node_modules/domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dependencies": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "node_modules/htmlparser2-without-node-native/node_modules/entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + }, + "node_modules/htmlparser2/node_modules/entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/http-errors": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", @@ -14135,6 +14442,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -14361,6 +14673,11 @@ } ] }, + "node_modules/ramda": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.2.tgz", + "integrity": "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==" + }, "node_modules/range-parser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", @@ -14505,6 +14822,45 @@ "react": "18.2.0" } }, + "node_modules/react-native-dom-parser": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/react-native-dom-parser/-/react-native-dom-parser-1.5.3.tgz", + "integrity": "sha512-bcuNLVK2D0T39kRAK75/FJZFcvZ6/V3F0f5niLfYN+9gKelmNcCvBVHOOrEz4ZMmJ/1iutam8PqeF1fNqGV7Jg==" + }, + "node_modules/react-native-htmlview": { + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/react-native-htmlview/-/react-native-htmlview-0.16.0.tgz", + "integrity": "sha512-yUrzXje+kKKLkWkccKNBeg3CbvrodA7f4+1d/XRrrg0SDFfIdj7NnjRdH+WXqGze6R501bfRZOPaZx/M5HTz3A==", + "dependencies": { + "entities": "^1.1.1", + "htmlparser2-without-node-native": "^3.9.2" + } + }, + "node_modules/react-native-htmlview/node_modules/entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + }, + "node_modules/react-native-render-html": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-6.3.4.tgz", + "integrity": "sha512-H2jSMzZjidE+Wo3qCWPUMU1nm98Vs2SGCvQCz/i6xf0P3Y9uVtG/b0sDbG/cYFir2mSYBYCIlS1Dv0WC1LjYig==", + "dependencies": { + "@jsamr/counter-style": "^2.0.1", + "@jsamr/react-native-li": "^2.3.0", + "@native-html/transient-render-engine": "11.2.3", + "@types/ramda": "^0.27.40", + "@types/urijs": "^1.19.15", + "prop-types": "^15.5.7", + "ramda": "^0.27.2", + "stringify-entities": "^3.1.0", + "urijs": "^1.19.6" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz", @@ -15399,6 +15755,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/stringify-entities": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz", + "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==", + "dependencies": { + "character-entities-html4": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "xtend": "^4.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -15799,6 +16169,11 @@ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" }, + "node_modules/ts-toolbelt": { + "version": "6.15.5", + "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz", + "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==" + }, "node_modules/tsconfig-paths": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", @@ -16153,6 +16528,11 @@ "punycode": "^2.1.0" } }, + "node_modules/urijs": { + "version": "1.19.11", + "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.11.tgz", + "integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==" + }, "node_modules/url-join": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz", diff --git a/package.json b/package.json index 75347d86..1327be40 100644 --- a/package.json +++ b/package.json @@ -15,18 +15,24 @@ "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "axios": "^1.5.0", + "dom-parser": "^0.1.6", "expo": "~49.0.11", "expo-status-bar": "~1.6.0", + "html-entities": "^2.4.0", "react": "18.2.0", "react-native": "0.72.4", - "react-native-screens": "~3.22.0", - "react-native-safe-area-context": "4.6.3" + "react-native-dom-parser": "^1.5.3", + "react-native-htmlview": "^0.16.0", + "react-native-render-html": "^6.3.4", + "react-native-safe-area-context": "4.6.3", + "react-native-screens": "~3.22.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@calblueprint/eslint-config-react": "^0.0.3", "@calblueprint/prettier-config": "^0.0.1", "@types/react": "~18.2.14", + "@types/react-native-htmlview": "^0.16.1", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "eslint": "^8.50.0", diff --git a/src/screens/StoryScreen.tsx b/src/screens/StoryScreen.tsx index 215f3c8a..dc00653f 100644 --- a/src/screens/StoryScreen.tsx +++ b/src/screens/StoryScreen.tsx @@ -1,9 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { ActivityIndicator, Text, View } from 'react-native'; - -// type Story = { -// content: string; -// }; +import { ActivityIndicator, ScrollView, View } from 'react-native'; +// eslint-disable-next-line import/no-extraneous-dependencies +import HTMLView from 'react-native-htmlview'; export default function StoryScreen() { const [isLoading, setLoading] = useState(true); @@ -31,16 +29,13 @@ export default function StoryScreen() { return ( - Story Page - {isLoading ? ( ) : ( - - {title} - {'\n'} - {content} - // title shows weird symbols and content shows + + + + )} ); From a7fea68b48e8a8dd64dc35f4598aad37deea42c5 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Fri, 6 Oct 2023 02:28:51 -0700 Subject: [PATCH 4/6] getStory function now abstractly takes any valid story id to display --- package-lock.json | 17 ++++++++++++++--- package.json | 1 + src/screens/StoryScreen.tsx | 12 +++++------- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1a871155..4a914a60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "axios": "^1.5.0", + "deprecated-react-native-prop-types": "^4.2.1", "dom-parser": "^0.1.6", "expo": "~49.0.11", "expo-status-bar": "~1.6.0", @@ -8349,9 +8350,9 @@ } }, "node_modules/deprecated-react-native-prop-types": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-4.1.0.tgz", - "integrity": "sha512-WfepZHmRbbdTvhcolb8aOKEvQdcmTMn5tKLbqbXmkBvjFjRVWAYqsXk/DBsV8TZxws8SdGHLuHaJrHSQUPRdfw==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-4.2.1.tgz", + "integrity": "sha512-ef9AXisRrRhxuxd7d+noOEeGTtxIPVkfOQWf9WZUWuOqI+gs7P7hKTi49Rgb/dfvkmFULhwxO2UqAkH4nJsMfw==", "dependencies": { "@react-native/normalize-colors": "*", "invariant": "*", @@ -15107,6 +15108,16 @@ "node": ">=10" } }, + "node_modules/react-native/node_modules/deprecated-react-native-prop-types": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-4.1.0.tgz", + "integrity": "sha512-WfepZHmRbbdTvhcolb8aOKEvQdcmTMn5tKLbqbXmkBvjFjRVWAYqsXk/DBsV8TZxws8SdGHLuHaJrHSQUPRdfw==", + "dependencies": { + "@react-native/normalize-colors": "*", + "invariant": "*", + "prop-types": "*" + } + }, "node_modules/react-native/node_modules/promise": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz", diff --git a/package.json b/package.json index 750a8dd0..52a1c0ba 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "axios": "^1.5.0", + "deprecated-react-native-prop-types": "^4.2.1", "dom-parser": "^0.1.6", "expo": "~49.0.11", "expo-status-bar": "~1.6.0", diff --git a/src/screens/StoryScreen.tsx b/src/screens/StoryScreen.tsx index dc00653f..96a8b9db 100644 --- a/src/screens/StoryScreen.tsx +++ b/src/screens/StoryScreen.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; import { ActivityIndicator, ScrollView, View } from 'react-native'; -// eslint-disable-next-line import/no-extraneous-dependencies import HTMLView from 'react-native-htmlview'; export default function StoryScreen() { @@ -8,23 +7,22 @@ export default function StoryScreen() { const [title, setTitle] = useState(String); const [content, setContent] = useState(String); - const getStory = async () => { + const getStory = async (id: string) => { try { - const response = await fetch( - 'https://girlswritenow.org/wp-json/wp/v2/story/170947', - ); + const url = `https://girlswritenow.org/wp-json/wp/v2/story/${id}`; + const response = await fetch(url); const json = await response.json(); setTitle(json.title.rendered); setContent(json.content.rendered); } catch (error) { - // console.error(error); + console.error(error); } finally { setLoading(false); } }; useEffect(() => { - getStory(); + getStory('170947'); }, []); return ( From f7c96212b63b7f4dd91fbbb411207ff14bff97e6 Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Fri, 6 Oct 2023 11:22:21 -0700 Subject: [PATCH 5/6] reverted changed in story.tsx --- src/app/(tabs)/search/story.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index ec69f9b3..cd57613e 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -6,7 +6,6 @@ function StoryScreen() { return ( Story - ); } From f20e4f5cf1c93f5475dbb16429e73528d996cc8d Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Sat, 7 Oct 2023 11:46:07 -0700 Subject: [PATCH 6/6] deleted StoryScreen.tsx and moved file changes to story.tsx --- src/app/(tabs)/search/story.tsx | 35 +++++++++++++++++++++++++++-- src/screens/StoryScreen.tsx | 40 --------------------------------- 2 files changed, 33 insertions(+), 42 deletions(-) delete mode 100644 src/screens/StoryScreen.tsx diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index cd57613e..04df8cfd 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -1,11 +1,42 @@ -import { Text } from 'react-native'; +import { ActivityIndicator, ScrollView, Text, View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; +import { useEffect, useState } from 'react'; +import HTMLView from 'react-native-htmlview'; import globalStyles from '../../../../globalStyles'; function StoryScreen() { + const [isLoading, setLoading] = useState(true); + const [title, setTitle] = useState(String); + const [content, setContent] = useState(String); + + const getStory = async (id: string) => { + try { + const url = `https://girlswritenow.org/wp-json/wp/v2/story/${id}`; + const response = await fetch(url); + const json = await response.json(); + setTitle(json.title.rendered); + setContent(json.content.rendered); + } catch (error) { + console.error(error); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + getStory('170947'); + }, []); + return ( - Story + {isLoading ? ( + + ) : ( + + + + + )} ); } diff --git a/src/screens/StoryScreen.tsx b/src/screens/StoryScreen.tsx deleted file mode 100644 index 96a8b9db..00000000 --- a/src/screens/StoryScreen.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { ActivityIndicator, ScrollView, View } from 'react-native'; -import HTMLView from 'react-native-htmlview'; - -export default function StoryScreen() { - const [isLoading, setLoading] = useState(true); - const [title, setTitle] = useState(String); - const [content, setContent] = useState(String); - - const getStory = async (id: string) => { - try { - const url = `https://girlswritenow.org/wp-json/wp/v2/story/${id}`; - const response = await fetch(url); - const json = await response.json(); - setTitle(json.title.rendered); - setContent(json.content.rendered); - } catch (error) { - console.error(error); - } finally { - setLoading(false); - } - }; - - useEffect(() => { - getStory('170947'); - }, []); - - return ( - - {isLoading ? ( - - ) : ( - - - - - )} - - ); -}