• Refactor for detail displaying dynamically
• Readable scss
• Follow ux of project

• Mock data for display that we want to render on load
• Conditionals for icons to display with changes in data from air quality api
• Switch statement might work well depending on the changes in air data we get
• Rendering components with bad data or unresolved promise

• Card Component - added to render dynamic cities to home page
• Page should display the same as before
• Move all styling to match previous

• Add in local storage so that when the user navigates back to Home, the data does not have to be fetched again.
• Maybe when page loads we can update state to show firstLoad to be true or something?

• Add crude jsx
• Add crude styling
• Test

App structure
Initial Wireframe

• Display day of week on the weekly forecast data in Location
• Update timestamp on Location page in the top card to say the Date/Day of week next to the running time

• Integrate testing into Location Prop
• needs mostly render tests
• App component has locations fetch call

fetch 15 cities on load and display them

• Home page should render top 5 locations (horizontal scroll) - Hard code in top 5 cities with lat and long.
• Add initial styling
• Account for bad data, error handling
• Test

• REMOVE and add routing to app
• Move any styling attached to view component

• Add crude jsx
• Add crude styling
• Test

• Do we want a component for errors? Something consistent for all errors throughout the app?

• use useEffect to render a clocks current time
• dont set it for 1000 ms it can cause timing issues set just below

• Hardcode mocked data as placeholders to style elements and views
• Add pop of color other than blue on to the site
• Add Legend to About
• Test rendered components?
• Make top cities clickable to respective page
• What to do about tables..... sep component?
• What data do we want for each city?
• How to toggle weather icon near temp ??

Set up file tree (TSX, SCSS, test) for:
Home
Location
Header
Search
View

• Combine data fetch to a singular object to remove any data we dont need.
• What functionality do we need to manipulate the data for display?
• What data are we getting?
• Any data we may be missing?

NavLink in Header that takes User to Page of info about site.
Could be Legend, description of site and devs, etc.

Find bug in React that doesn't like target=blank for outside links

add rel="noopener noreferrer" in all a tags where target=_blank is

• Connect AirQuality Api
• run proxy to prevent cors errors
• evaluate data from request
• plan for function to clean data
• plan for error handling functionality

• work on removing any instances of the any type from the project
• This will be an on going project
• Get used to the errors and what they mean

Fetch returns multiple cities, but we are grabbing the first match (not UX friendly). Will need multiple cities for drop down or user options.

• Get weekly data to render to details page covering a 7 day forecast
• Set unique id for each card rendering

• What is our mission?
• What information should we add here?
• Is it for us or for the user?
• What websites abouts do we like and why?
• What component upgrades do we need to add this new display?
• Contact info? Maybe free email address to add

Add an Activity Box with 3 icons and a string that change color based on the UV and AQI value in Location

Discussion
Display the top 5 cities and automatically fetch data on user's current location using API Khalid gave us

• location page not loading to due to TS props
• add TS props file to import to check to set type of each key value pair

• Render the View component in App
• In View component, render Home

Since the position stack API is getting us multiple results back from the query typed in, we could get ALL of them back and display just the basics (the query typed in, type, region, country, continent, label(?)). Type returns things like "locality" "postal code" "venue?" "county". It may help make it easier on the user to ensure they are getting the location they want! These could be displayed at the route '/results'. Once the user clicks on the result they wanted, they are taken to the Location page ( and that would be when the second fetch call is made taking the lat and long of the clicked card and passed into the correct method ).

This would essentially solve issue #19

• Map through weeklyWeather.daily and build a card to display 7 day forecast
• Still need to figure out the Date conversion from the API
• Use day.weather.id for the key value in the card to prevent linter errors in React

• Test
• Fix Bug
  When you navigate to the About page, this error appears in the console:

Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <thead>. in thead (at About.tsx:76) in table (at About.tsx:75) in div (at About.tsx:69) in section (at About.tsx:23) in About (at App.tsx:44) in Route (at App.tsx:41) in main (at App.tsx:34) in div (at App.tsx:30) in App (at src/index.tsx:8) in Router (created by BrowserRouter) in BrowserRouter (at src/index.tsx:8)

• Retrieve data from getCoordinates API based on the query entered in search bar
• Render the Results component after button click
• Results component will render cards for each result returned
• Handle errors!!!
• Style
• Clear input upon search button clicked

• Make this a drop-down for all supported cities from the API?

• Write functionality to locate the nearest supported city?

• We ended up going with a 2nd API that will get the latitude and longitude from a query (can be zip, city, county, address) and using that to fetch the nearest city data from the air quality API.

• add component to map the 7 day forcast to display each upcoming day
• match structure of Location components jsx
• Add types to all props being passed in

Clean up Home Page
Scour weather websites that bring color or life to a page full of facts and numbers
Reading articles???
Header -- bugging me. Needs more professionalism or something.

Look for other places to tighten up styling. Resume!!!!!!!!!!

• Make each card in Results a link
• When a user clicks a card, at Route to '/:query(location)'
• Write method in Location that calls getAllData from dataCleaner

• On Home: 2 horizontal galleries for top cities for AQ-- pollution + ozone (hardcoded?) [Lung Assoc of America]
  (https://www.stateoftheair.org/city-rankings/cleanest-cities.html)
  Ozone: Anchorage, AK; Savannah, GA; Destin, FL; Honolulu, HI; Casper, WY
  Particle Pollution: Hot Springs, AR; Colorado Springs, CO; Bellingham, WA; Albuquerque, NM; Portland, ME;

• On Details: Expand on AQ section and add icons for activity, health, dog

Data we want:

• general weather (Temp, feels like?, Humidity, Precip, cloudy?, snow, storm, visibility, time) ----> Open Weather API
• aq (pollution, ozone), -text description about weather and aq ----> AirNow API

What we communicate:

• activities you can do
• optimal places to travel
• health

• Add TS definitions for all data coming back from API to remove errors of loading
• in Helpers export interface LocationProps

• Add-in functionality to click a card on Home page

• When the card is clicked, display the Location (details) page for that city.

• Pass props from Home to Card (lat and long)

• Add pollen, allergies and wildfire : Coming Soon!
• If we get the wildfire details from air quality API (category.discussion?), display that!

• What data are we getting back?
• What data do we need?
• What do we want to display for each city?
• What errors are we getting on unsuccessful promise?
• How are we gonna return that error display?