mibfb-collab / message-in-a-bottle Goto Github PK

• add error page for bad route

• when a user clicks "submit a story" a story submission form displays that is able to make a post to the API

• Perform HTTP request method POST
• Body has to have required information
• Test back end and front end connection
• Get promise response success
• Status code has to be 204 or 200

Use react-toastify to handle notifications for promises, form submissions, and button clicks.

React Toastify Docs

npm i react-toastify

• Fill component for basic JSX
• Add dummy instructions
• CSS layout

Need to make sure correct error messages are rendering when errors are caught

reference the error handling card and all files that render the error handling card

• Find the way to alternative router component which can take us to a different page and on back click has to take back
• Maybe more Router history method research
• Redirect router component will not takes us back

• Function to locate users lat and lon
• Need Google Maps
• Need pre build react navigate.getCurrentLocation
• Maybe button to trigger function
• Find city name by lat and lon

• moving forward for edited stories we need to use patch method to be able to send data to back end and body has to include only title and message

• Use flexbox or grid
• Responsive layout
• Assign element width/height
• Assign primary colors
• Use className for css styling

• add testing for micromodals, specific for mui components

• For each component we need to create folder with files , js and css
• Assets folder to drop images
• Api folder with file for HTTP request

• Assign all HTML elements for given component
• Basic CSS styling

• Add route between homepage and stories page

• Stub HTTP request for Cypress testing
• Intercept
• Stub HTTP request Response body
• Stub HTTP request status code and error handling

• When user clicks button to submit edited story, modal has to close
• Edited story has to be accurate in BE, check in dev tools Network

• Define each components JSX elements

• Use flexbox or grid
• Responsive layout
• Assign element width/height
• Assign primary colors
• Use className for css styling

• Assign all HTML elements for given component
• Basic CSS styling

• Overall
• Setup instructions
• Collaborators
• Tools used
• Deployed page
• Technologies used
• Features
• Gif's
• Future Features
• Wins
• Learning goals

• When there are no stories in the user's area, an error message will display

• Define each components JSX elements

• User should be able to access to web page by URL
• User should be able to see HomePage
• User should be able to see Title containing Welcome to Message in a Bottle
• User should be able to see Instructions containing Text
• User should be able to see button button to submit a story
• User should be able to see text on the button Submit a Story
• User should be able to click button, in order to submit a new story
• User should be able to see button get stories
• User should be able to click button get stories in order view them

• User should be able to click button submit new story
• User should be able to see modal to pop up
• User should be able to type story Name and Story
• User should be able to see character limit track upon typing
• User should be able to submit new story
• User should be able close modal

• convert responding files to TS file format and use interface and declare property types

• Define each components JSX elements

Getting the user's current location takes about 5 seconds.
If the user submits a new story before the location is retrieved, the location data sent to the API is an empty string.

need to set a timeout or find a way to ensure the location data is sent before the POST request is made.

• Set up MicroModal that pops up the story when the user is within range of viewing the entire story

• Choose accessible color across application
• Buttons to have same color
• Borders to have same color
• Text same to have some color

• Nav bar component has to have title and button
• Also use accordion react styling

• When user clicks get stories button
• User should be able get to a new page routing localstorage3000/StoriesPage
• User should be able to see instructions
• User should be able to see all stories near by
• User should be able to see StoryCard
• User should be able to see StoryCard title
• User should be able to see StoryCard distance

• Create Home Page component
• Home Page will wrap all supported components

Install google maps api so users can find story locations
create pins that contain stories that can be opened when a user is close enough

Notes

• I have an API key that we can use
• We are limited to a monthly limit of API calls to the API - we need to restrict it so I do not get charged extra
• We will need to use a .env file to protect the google cloud workplace API key

• When a user is submitting a new story, they are able to see a real time log of how many characters they have left before they meet the character limit

• When user submits a new story
• User will se another pop up modal with edit instructions
• User can edit story they submitted and click all done, submit button
• Upon button click http request PUT method will be triggered and send updated story to back-end
• User also can click to delete button and http request will be executed and send with story ID, to delete corresponding story which matches ID from back-end data

• Use flexbox or grid
• Responsive layout
• Assign element width/height
• Assign primary colors
• Use className for css styling

• User should be able to click button submit story
• User should be able to see modal to pop up
• User should be able to see instruction if they would like to edit story
• User should be able to see character limit track upon typing
• user should be able edit story
• User should be able to submit new edited story
• User should be able to delete story
• User should be able close modal

When user clicks view directions they are directed to a page with instruction to story

• Overall
• Setup instructions
• Collaborators
• Tools used
• Deployed page
• Technologies used
• How to use
• Endpoints
• Sample requests/responses
• Special Thanks
• Learning goals
• Schema

• Function to locate users Lat and Long
• Send HTTP request
• Style it

Set up MicroModal to pop up directions on click

• After the user has edited their story and sends either the post request or the put request, the stories container refreshes to include the new story in the page view

• This is necessary before jumping to code

This should be used if we do not utilize react toastify

Create loading image for fetch requests

• create component
• install micromodal
• Add instructions for the user
• Allow user to edit story and submit on button click
• Add button that will delete the story
• Add a button that will do nothing and close the modal

• Use in value to character limit to stop after limit is reached

• Function in separate file for http request
• Be able to import into component
• Function for fetch status for Error Handling

• should user be able to click anywhere outside of the modal to close? Will this delete the user's input? We can turn off the setting to enable a user to do this if needed

• Update DOM after story was edited/ PUT request
• Make sure delete works

Create a search component to search for stories by entering a city name