Finish sorting algorithm and list displays

src/App.js

@@ -398,12 +398,85 @@ function ListApp(p){
 		return new Promise(resolve => setTimeout(resolve, ms));
 	}
 
+	async function itemComesBefore(retainer,item){
+		let targetItem=""
+		let result=false;
+		switch(retainer){
+			case 0:{
+				targetItem=item1
+			}break;
+			case 1:{
+				targetItem=item2
+			}break;
+			case 2:{
+				targetItem=item3
+			}break;
+			case 3:{
+				targetItem=item4
+			}break;
+			case 4:{
+				targetItem=item5
+			}break;
+		}
+		let itemData1={}
+		let itemData2={}
+		await axios.get(encodeURI("https://xivapi.com/search?string="+item))
+		.then(async(data)=>{
+				var results = data.data.Results
+				for (var r of results) {
+					if (r.Name===item&&r.UrlType==="Item") {
+						return await axios.get(encodeURI("https://xivapi.com"+r.Url))
+					}
+				}
+				throw new Error("Item 1 Not Found!");
+			}
+		)
+		.then(async(data)=>{
+			var results = data.data
+			itemData1={...results}
+			return await axios.get(encodeURI("https://xivapi.com/search?string="+targetItem))
+		})
+		.then(async(data)=>{
+				var results = data.data.Results
+				for (var r of results) {
+					if (r.Name===targetItem&&r.UrlType==="Item") {
+						return await axios.get(encodeURI("https://xivapi.com"+r.Url))
+					}
+				}
+				throw new Error("Item 2 Not Found!");
+			}
+		)
+		.then(async(data)=>{
+			var results = data.data
+			itemData2={...results}
+			console.log(itemData1.Name+" vs "+itemData2.Name)
+			if (itemData1.ItemSortCategory.ID<itemData2.ItemSortCategory.ID){
+				result=true
+			} else
+			if (itemData1.ItemSortCategory.ID===itemData2.ItemSortCategory.ID&&
+				itemData1.ItemUICategory.ID<itemData2.ItemUICategory.ID){
+				result=true
+			} else
+			if (itemData1.ItemSortCategory.ID===itemData2.ItemSortCategory.ID&&
+				itemData1.ItemUICategory.ID===itemData2.ItemUICategory.ID&&
+				itemData1.ID<itemData2.ID){
+				result=true
+			} else {
+				result=false
+			}
+		})
+		.catch((err)=>{console.log(err);setChecking(false)})
+		
+		return [result,itemData1]
+	}
+
 	function submitForm(){
 		let classID=Number(selectedCrafter)+8
 		let filter="https://xivapi.com/search?filters=ClassJob.ID="+classID+",RecipeLevelTable.ClassJobLevel>="+minLevel+",RecipeLevelTable.ClassJobLevel<="+maxLevel
 		let pageCount=0
 		let currentPage=1
 		let recipeData=[]
+		setChecking(true)
 		axios.get(encodeURI(filter))
 		.then(async(resp)=>{
 			let data=resp.data
@@ -429,8 +502,36 @@ function ListApp(p){
 				})
 			}
 		})
-		.finally(()=>{
-			console.log(recipeData)
+		.finally(async()=>{
+			//console.log(recipeData)
+			//setChecking(false)
+			let craftedItems={}
+			for(var recipe of recipeData){
+				for (let i=0;i<5;i++){
+					var ingredient=recipe["ItemIngredient"+i]
+					if (ingredient!==null){
+						craftedItems[ingredient.Name]=1
+					}
+				}
+			}
+			let retainerItems=[[],[],[],[],[],[]]
+			for (var item of Object.keys(craftedItems)){
+				let found=false
+				for (var i=0;i<5;i++){
+					let response = await itemComesBefore(i,item);
+					if (response[0]===true){
+						retainerItems[i]=[response[1],...retainerItems[i]]
+						found=true
+						break; 
+					}
+				}
+				if (found===false){
+					retainerItems[5]=[item,...retainerItems[5]]
+				}
+				await sleep(250)
+			}
+			setGroceryList(retainerItems)
+			setChecking(false)
 		})
 	}
 
@@ -530,6 +631,13 @@ function ListApp(p){
 				<Button onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} disabled={checking} onClick={()=>{submitForm()}}>{checking?<Spinner animation="border"></Spinner>:"Compose"}</Button>
 			</Col>
 		</Row>
+		<Row><span>A</span></Row>
+		{groceryList.map((list,i)=><><Row className="text-white">
+			<h2>{retainerNames[i]}</h2>
+		</Row>
+		<Row className="text-white"><ul>
+			{list.map((item)=><li>{item.Name}</li>)}	
+		</ul></Row></>)}
 	</>
 }