[story] Implement midfi story screen design

[Marcoss28]

Midfi Story Screen

What's new in this PR

Midfi Story Screen was implemented using the story "It's Carnival". The story screen loads in the image, title, author, genres, story, and author's process content and displays it using midi design. Using regex we are able to get most of this information in a cleaner format to display. A share button is also implemented which shares the story in a text format in any method the device supports. At the bottom, there is also a button which will scroll back to the top once pressed.

Relevant Links

https://girlswritenow.org/story/its-carnival/

Notion Sprint Task

https://www.notion.so/calblueprint/story-Implement-midfi-story-screen-design-af4a443dc0464e8181eba10f592140e0

Online sources

https://callstack.github.io/react-native-paper/docs/guides/icons/
https://juliana-ny2008.medium.com/creating-a-great-user-experience-with-scrollto-in-react-native-48a724cf0296
https://reactnative.dev/docs/share

Related PRs

N/A

How to review

Story.tsx is the only file in need to review.

htmlParser:
At the top, we contain the htmlParser function which parses through the content which is originally filled with HTML tags and ASCII symbols. Once we parse through this and remove any tags and symbols, we can return the clean text/string from the heading, story, and author's process.

getStory:
In the getStory function, I initiate variables and any necessary content based on the story ID using the WordPress API. Assign correct data to variables. If API not loaded, return error.

onShare:
Function which allows user to share a "message" through whatever methods or other applications the device supports (just like sharing any other piece of content in the way you're used to).

scrollUp:
Simple function that uses a ref (reference) which scrolls to the top of the screen when called.

StoryScreen:
Displays and styles the information in mirroring the midfield design in a scrollable fashion.

tempStyles:
Temporary custom variable type which mimics a temporary style sheet located at the bottom of the file. It is referenced throughout the React tags to format and style.

Next steps

API:
Switch the way in which we pull data. We currently use the WordPress API and json file to obtain necessary data. Once we switch completely over to SupaBase, I need to change the way in which I pull the data.

Styling:
Once Hifi designs are created, I will change the format/styling to match that of the hifi design. In addition, the temporary style sheet (tempStyles) will be removed from the file and I will only import styles from the appropriate style file.

Tests Performed, Edge Cases

Edge Cases:
This is device dependent where the ScrollView causes the device to not be able to scroll all the way to the bottom of what's displayed. It essentially cuts off at a certain part. Display on iPhone 15 Plus worked fine. Display on iPhone 8 Plus didn't work well.

Screenshots

RPReplay_Final1697916501.MP4

CC: @akshaynthakur

[akshaynthakur]

Overall, really great work! Most of my comments are styling nitpicks, but this is a really solid first pass of styling the story screen. Please let me know if any of my comments are unclear or if you want help implementing any of the changes I mentioned!

Also, it looks like you're failing eslint, prettier, and TS compiler checks. I think my comment below about using StylesSheet should fix these, but make sure to run eslint and prettier locally and resolve any errors that come up

[akshaynthakur]

LGTM! Great job on this styling, looks clean