Skip to content

Latest commit

 

History

History
20 lines (16 loc) · 4.53 KB

app-process.md

File metadata and controls

20 lines (16 loc) · 4.53 KB
Raw

What the app does when you...

Make a market search

  • There is an input field and a dropdown, the dropdown consists of options in a select tag getting mapped from an array of objects containing all the regions and their names here. I was able to get this from a route in the api that returns all regions, and saved the resulting JSON in it's own file
  • The user selects a region and inputs an item by name
  • There is an event handler function (handleMarketSearch) that onSubmit grabs the two values passed in and calls a function (getItemId) which makes an api call get the item_id of the entered item. This function uses the result of it's api call to call a second function in it's .then which uses the region_id (from the dropdown) along with the returned item_id (since it's in a .then there's no async issue there) to get all buy and sell orders for that item in that region of the game.
  • In the .then of that second call I use filter to split the results into two different arrays of objects, each assigned to it's own state slice (buyOrders and sellOrders), I can do this because the objects have a is_buy_order property that is either true or false.
  • In addition to setting the state in it's .then, the second function (makeApiCall) calls another function (searchStations) which itself makes an api call for each object in the full result of the buy/sell order array returned from makeApiCall after having reduced that result to a set in the parameter field of searchStations, in order to get only one response from searchStations for each unique value.
  • searchStations sets a new piece of state, structureArray, which holds an array of objects as a resource of information about the stations since that information is not contained in the order objects returned from makeApiCall. It also acounts for whether a station is npc or if it is player owned, since those require different endpoints to get information about and player owned structure endpoint needs auth to access, if the station_id is non npc (if it's id is great than 1 billion), I use an else block to filter from a file of player owned structures that I created from a csv file I found online. All these get concat'd onto the structureArray state slice
  • Lastly, in this submit function I have a function (addStationNameToOrder) set on a timeout of 1 second that has two setStates, which map through both the buy and sell order arrays and use a spread operator to add a "station" property to each object in the array, using filter to match the station_id's between the order array and the structure array, and assigning the station name held by the structure array as the value of the new station property, since the orders returned from the api only hold a station_id and not a station name.
  • Now that I have all the info I need held in state, I pass this down to the MarketTable component which maps all the desired values into a table. I created a sort function that takes a property name and added that to the head of each table column as an onClick so that the user can sort the arrays (and thus the table results) by their desired property, alternating between ascending and descending.

Plot a route

  • If the user clicks the link to show the route plotter page, they are able to enter in two system names and chose between "shortest", "secure" and "insecure".
  • Similar to when we get the item_id there is a function (getSystemIDs) in the event handler function that makes api calls for each system entered to get the system_id for that system.
  • It then uses those two retrieved id's along with the choice from the dropdown to make another api call in a 0.7 second timeout (getTravelRoute) which sets the array of system_id's and sets a slice of state call currentRoute
  • Then the submit function calls another function (getSystemInfo) 0.3 seconds later which makes an api call for each system in the currentRoute state slice and concats the result to a new state slice called systemArray, which holds all the information about each system on the route, since current array is just an array of id numbers
  • Since fetch makes all calls in a map or forEach simultaneously, the systemArray state slice is sometimes out of order, and since the purpose is to display the route from A to B in order, we need to pass both currentRoute and systemArray to the Route component, so that it can map currentRoute in the correct order, using filter to actually display the corresponding systemArray element that holds the needed information for each system on the route.