Implement fetch requests for all crafting recipes

src/App.js

@@ -112,6 +112,9 @@ function Notification(p) {
 function DarkInput(p){
 	return <input type="text" className="bg-dark text-white" {...p}></input>
 }
+function DarkSelect(p){
+	return <select className="bg-dark text-white" {...p}>{p.children}</select>
+}
 
 function SorterApp(p){
 
@@ -353,13 +356,180 @@ function SorterApp(p){
 
 function ListApp(p){
 
+	//https://xivapi.com/search?filters=ClassJob.ID=11,RecipeLevelTable.ClassJobLevel%3E=36,RecipeLevelTable.ClassJobLevel%3C=45&page=1
 	const {transferItems} = p
+	
+	const [item1,setItem1] = useState("")
+	const [item2,setItem2] = useState("")
+	const [item3,setItem3] = useState("")
+	const [item4,setItem4] = useState("")
+	const [item5,setItem5] = useState("")
+	const [item1_2,setItem1_2] = useState("")
+	const [item2_2,setItem2_2] = useState("")
+	const [item3_2,setItem3_2] = useState("")
+	const [item4_2,setItem4_2] = useState("")
+	const [item5_2,setItem5_2] = useState("")
+	const [groceryList,setGroceryList] = useState([])
+
+	const crafters=["CRP Carpenter","BSM Blacksmith","ARM Armorer","GSM Goldsmith","LTW Leatherworker","WVR Weaver","ALC Alchemist","CUL Culinarian"]
+	const [selectedCrafter,setSelectedCrafter] = useState(0)
+	const [minLevel,setMinLevel] = useState(1)
+	const [maxLevel,setMaxLevel] = useState(10)
+	const [checking,setChecking] = useState(false)
+
+	const retainerNames = ["Ayayayayay","Howdoesanyonenameall","Kkittyy","Butwhy","Nowitsabun","Finalretainer"];
+
+	useEffect(()=>{
+		if (transferItems.length===10){
+			setItem1(transferItems[0])
+			setItem1_2(transferItems[1])
+			setItem2(transferItems[2])
+			setItem2_2(transferItems[3])
+			setItem3(transferItems[4])
+			setItem3_2(transferItems[5])
+			setItem4(transferItems[6])
+			setItem4_2(transferItems[7])
+			setItem5(transferItems[8])
+			setItem5_2(transferItems[9])
+		}
+	},[JSON.stringify(transferItems)])
+
+	function sleep(ms) {
+		return new Promise(resolve => setTimeout(resolve, ms));
+	}
+
+	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=[]
+		axios.get(encodeURI(filter))
+		.then(async(resp)=>{
+			let data=resp.data
+			let pageCount=data.Pagination.PageTotal
+			let results=data.Results
+			while (currentPage<=pageCount){
+				for (let recipe of results){
+					axios.get(encodeURI("https://xivapi.com"+recipe.Url))
+					.then((resp)=>{
+						let d = resp.data
+						recipeData=[d,...recipeData]
+					})
+					await sleep(250)
+				}
+				currentPage++;
+				if (currentPage>pageCount){
+					break;
+				}
+				await axios.get(encodeURI(filter+"&page="+currentPage))
+				.then((resp)=>{
+					let d=resp.data
+					results=d.Results
+				})
+			}
+		})
+		.finally(()=>{
+			console.log(recipeData)
+		})
+	}
 
 	return <>
-	<h1>List App!</h1>
-	<ul>
-		{transferItems.map((item)=><li style={{color:"white"}}>{item}</li>)}
-	</ul>
+		<Row className="text-white">
+			<Col>
+				Ending {retainerNames[0]} Item 1:
+			</Col>
+			<Col>
+				<DarkInput name="item1" value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput>
+			</Col>
+			<Col>
+				Beginning {retainerNames[1]} Item 1:
+			</Col>
+			<Col>
+				<DarkInput name="item1_2" value={item1_2} onChange={(f)=>{setItem1_2(f.currentTarget.value);}}></DarkInput>
+			</Col>
+		</Row>
+		<Row className="text-white">
+			<Col>
+				Ending {retainerNames[1]} Item 2:
+			</Col>
+			<Col>
+				<DarkInput name="item2" value={item2} onChange={(f)=>{setItem2(f.currentTarget.value);}}></DarkInput>
+			</Col>
+			<Col>
+				Beginning {retainerNames[2]} Item 2:
+			</Col>
+			<Col>
+				<DarkInput name="item2_2" value={item2_2} onChange={(f)=>{setItem2_2(f.currentTarget.value);}}></DarkInput>
+			</Col>
+		</Row>
+		<Row className="text-white">
+			<Col>
+				Ending {retainerNames[2]} Item 3:
+			</Col>
+			<Col>
+				<DarkInput name="item3" value={item3} onChange={(f)=>{setItem3(f.currentTarget.value);}}></DarkInput>
+			</Col>
+			<Col>
+				Beginning {retainerNames[3]} Item 3:
+			</Col>
+			<Col>
+				<DarkInput name="item3_2" value={item3_2} onChange={(f)=>{setItem3_2(f.currentTarget.value);}}></DarkInput>
+			</Col>
+		</Row>
+		<Row className="text-white">
+			<Col>
+				Ending {retainerNames[3]} Item 4:
+			</Col>
+			<Col>
+				<DarkInput name="item4" value={item4} onChange={(f)=>{setItem4(f.currentTarget.value);}}></DarkInput>
+			</Col>
+			<Col>
+				Beginning {retainerNames[4]} Item 4:
+			</Col>
+			<Col>
+				<DarkInput name="item4_2" value={item4_2} onChange={(f)=>{setItem4_2(f.currentTarget.value);}}></DarkInput>
+			</Col>
+		</Row>
+		<Row className="text-white">
+			<Col>
+				Ending {retainerNames[4]} Item 5:
+			</Col>
+			<Col>
+				<DarkInput name="item5" value={item5} onChange={(f)=>{setItem5(f.currentTarget.value);}}></DarkInput>
+			</Col>
+			<Col>
+				Beginning {retainerNames[5]} Item 5:
+			</Col>
+			<Col>
+				<DarkInput name="item5_2" value={item5_2} onChange={(f)=>{setItem5_2(f.currentTarget.value);}}></DarkInput>
+			</Col>
+		</Row>
+		<Row>
+			<span>A</span>
+		</Row>
+		<Row className="text-white">
+			<Col xs={4}>
+				<DarkSelect value={selectedCrafter} onChange={(f)=>{setSelectedCrafter(f.currentTarget.value)}}>
+					{crafters.map((crafter,i)=><option value={i}>{crafter}</option>)}
+				</DarkSelect>
+			</Col>
+
+			<Col>
+				Level Range:
+			</Col>
+			
+			<Col xs={2}>
+				<DarkInput value={minLevel} onChange={(f)=>{setMinLevel(f.currentTarget.value)}}></DarkInput>
+			</Col>
+			<Col>-</Col>
+			<Col xs={2}>
+				<DarkInput value={maxLevel} onChange={(f)=>{setMaxLevel(f.currentTarget.value)}}></DarkInput>
+			</Col>
+			<Col xs={3}>
+				<Button onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} disabled={checking} onClick={()=>{submitForm()}}>{checking?<Spinner animation="border"></Spinner>:"Compose"}</Button>
+			</Col>
+		</Row>
 	</>
 }