egfrank / bike-philadelphia-backend Goto Github PK

https://www.w3schools.com/jsref/met_element_scrollintoview.asp

Need to reformat the list with divs etc.

UI Reducers

clickMarker

clickPanel

• activePanel: selectionPanel
  or
• activePanel: searchPanel

searchForLocation

• searchTerm

also clean up all that codee.

Presentational components

Marker

• onClick
• kioskID
• text

MarkerList

• onMarkerClick(id)
• selectedStations

StationInfo

• kioskID
• name
• address
• bikes
• open spots

StationList:

• stationsToDisplay [ {} ]

PanelTab

• text

SearchBar

• input

Container components

HeadingLink

• MapStateToProps
  • visibleHeading
• Dispatch
  • selectHeading

VisibleStations

• MapStateToProps
  • select which stations to show
  • needs "selectedPanel," "stationsByID," and either "selectedStations" or "stationsByDistances"

SubmitSearch

• MapStateToProps ??
• Dispatch

the window should zoom in on the location

all the popups should come up

need to learn how to do this,

obviously a good resource, although written for Django1.7 or whatever it is.

https://www.obeythetestinggoat.com/pages/book.html#toc

CLICK_MARKER

CLICK_EXPLORE_PANEL

CLICK_SEARCH_PANEL

need more research on this

make the side panel responsive if possible too.

Overall app UI:

• selectedPanel

App data:

• stationsInfoByID

Explore UI:

• selectedMarkers

SearchUI:
// Searching for a term

• searchTerm
• searchLocationFound
• searchCoordinates

// Ordering

• orderIsLoading: true
  (can be local state)

// Ordering based on closest stations

• stationsByEstimatedDistance: []
  (can local state)

// Ordering based on Geocoded API

• geocodedDistancesByID: {}
• orderIsLoading: false
  (can be local state)

1) You call store.dispatch(action)

2) The Redux store calls the reducer function you gave it

3) The root reducer may combine the output of multiple reducers into a single state tree

4) The Redux store saves the complete state tree returned by the root reducer

need a new layout for the cards

finish the styling
move it to the correct part of the app
figure out what to do with it on mobile

Any one of these solutions:

https://stackoverflow.com/questions/25683871/assign-id-to-marker-in-leaflet

This shouldn't be super hard but important just to carefully think through