Include the sort retainer feature

src/App.js

@@ -14,8 +14,10 @@ import Accordion from 'react-bootstrap/Accordion';
 import ToastContainer from 'react-bootstrap/ToastContainer'
 import Toast from 'react-bootstrap/Toast'
 import Nav from 'react-bootstrap/Nav'
+import Spinner from 'react-bootstrap/Spinner';
 
 import { FaCheckCircle } from 'react-icons/fa';
+import { IoCheckmarkCircleOutline,IoCloseCircleSharp,IoAlertCircleOutline } from 'react-icons/io5';
 
 
 const parse = require('csv-parse/lib/sync')
@@ -114,20 +116,208 @@ function DarkInput(p){
 }
 
 function SorterApp(){
+
+	function submitForm(){
+		if (item1.length>0&&item2.length>0&&item3.length>0&&item4.length>0&&item5.length>0&&
+			item1_2.length>0&&item2_2.length>0&&item3_2.length>0&&item4_2.length>0&&item5_2.length>0){
+			setChecking(true);
+
+			for (let i of [
+				{"endItem":item1,"beginItem":item1_2,"resultFunc":setResult1},
+				{"endItem":item2,"beginItem":item2_2,"resultFunc":setResult2},
+				{"endItem":item3,"beginItem":item3_2,"resultFunc":setResult3},
+				{"endItem":item4,"beginItem":item4_2,"resultFunc":setResult4},
+				{"endItem":item5,"beginItem":item5_2,"resultFunc":setResult5},
+			]) {
+				let itemData1={}
+				let itemData2={}
+				axios.get(encodeURI("https://xivapi.com/search?string="+i.endItem))
+				.then((data)=>{
+						var results = data.data.Results
+						for (var r of results) {
+							if (r.Name===i.endItem&&r.UrlType==="Item") {
+								return axios.get(encodeURI("https://xivapi.com"+r.Url))
+							}
+						}
+						i.resultFunc(NOTFOUND)
+						throw new Error("Item 1 Not Found!");
+					}
+				)
+				.then((data)=>{
+					var results = data.data
+					itemData1={...results}
+					return axios.get(encodeURI("https://xivapi.com/search?string="+i.beginItem))
+				})
+				.then((data)=>{
+						var results = data.data.Results
+						for (var r of results) {
+							if (r.Name===i.beginItem&&r.UrlType==="Item") {
+								return axios.get(encodeURI("https://xivapi.com"+r.Url))
+							}
+						}
+						i.resultFunc(NOTFOUND)
+						throw new Error("Item 2 Not Found!");
+					}
+				)
+				.then((data)=>{
+					var results = data.data
+					itemData2={...results}
+					if (itemData1.ItemSortCategory.ID<itemData2.ItemSortCategory.ID){
+						i.resultFunc(SUCCESS)
+						return
+					} else
+					if (itemData1.ItemSortCategory.ID==itemData2.ItemSortCategory.ID&&
+						itemData1.ItemUICategory.ID<itemData2.ItemUICategory.ID){
+						i.resultFunc(SUCCESS)
+						return
+					} else
+					if (itemData1.ItemSortCategory.ID==itemData2.ItemSortCategory.ID&&
+						itemData1.ItemUICategory.ID==itemData2.ItemUICategory.ID&&
+						itemData1.ID<itemData2.ID){
+						i.resultFunc(SUCCESS)
+						return
+					} else {
+						i.resultFunc(REJECTED)
+					}
+				})
+				.catch((err)=>{console.log(err);})
+				.finally(()=>{setChecking(false)})
+			}
+			//axios.get(encodeURI("https://xivapi.com/search?string="+i))
+		}
+	}
+
+	const retainerNames = ["Ayayayayay","Howdoesanyonenameall","Kkittyy","Butwhy","Nowitsabun","Finalretainer"];
+	const NONE=0;
+	const REJECTED=1;
+	const SUCCESS=2;
+	const NOTFOUND=3;
+
 	const [item1,setItem1] = useState("")
 	const [item2,setItem2] = useState("")
 	const [item3,setItem3] = useState("")
 	const [item4,setItem4] = useState("")
 	const [item5,setItem5] = useState("")
-	const [item6,setItem6] = 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 [result1,setResult1] = useState(NONE)
+	const [result2,setResult2] = useState(NONE)
+	const [result3,setResult3] = useState(NONE)
+	const [result4,setResult4] = useState(NONE)
+	const [result5,setResult5] = useState(NONE)
+
+	const [checking,setChecking] = useState(false)
 
 	return <>
-	<Row className="text-white"><Col>Item 1:<DarkInput value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput></Col><Col><input type="text"></input></Col></Row>
+	<Row className="text-white" style={{background:result1===NONE?"":result1===SUCCESS?"#003300":result1===NOTFOUND?"#333300":"#330000"}}>
-	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+		<Col>
-	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+			Ending {retainerNames[0]} Item 1:
-	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+		</Col>
-	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+		<Col>
-	<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			Beginning {retainerNames[1]} Item 1:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1_2} onChange={(f)=>{setItem1_2(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			{result1===NONE?<></>
+			:result1===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
+			:result1===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
+			:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
+		</Col>
+	</Row>
+	<Row className="text-white" style={{background:result2===NONE?"":result2===SUCCESS?"#003300":result2===NOTFOUND?"#333300":"#330000"}}>
+		<Col>
+			Ending {retainerNames[1]} Item 2:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2} onChange={(f)=>{setItem2(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			Beginning {retainerNames[2]} Item 2:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2_2} onChange={(f)=>{setItem2_2(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			{result2===NONE?<></>
+			:result2===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
+			:result2===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
+			:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
+		</Col>
+	</Row>
+	<Row className="text-white" style={{background:result3===NONE?"":result3===SUCCESS?"#003300":result3===NOTFOUND?"#333300":"#330000"}}>
+		<Col>
+			Ending {retainerNames[2]} Item 3:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3} onChange={(f)=>{setItem3(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			Beginning {retainerNames[3]} Item 3:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3_2} onChange={(f)=>{setItem3_2(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			{result3===NONE?<></>
+			:result3===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
+			:result3===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
+			:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
+		</Col>
+	</Row>
+	<Row className="text-white" style={{background:result4===NONE?"":result4===SUCCESS?"#003300":result4===NOTFOUND?"#333300":"#330000"}}>
+		<Col>
+			Ending {retainerNames[3]} Item 4:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4} onChange={(f)=>{setItem4(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			Beginning {retainerNames[4]} Item 4:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4_2} onChange={(f)=>{setItem4_2(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			{result4===NONE?<></>
+			:result4===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
+			:result4===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
+			:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
+		</Col>
+	</Row>
+	<Row className="text-white" style={{background:result5===NONE?"":result5===SUCCESS?"#003300":result5===NOTFOUND?"#333300":"#330000"}}>
+		<Col>
+			Ending {retainerNames[4]} Item 5:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5} onChange={(f)=>{setItem5(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			Beginning {retainerNames[5]} Item 5:
+		</Col>
+		<Col>
+			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5_2} onChange={(f)=>{setItem5_2(f.currentTarget.value);}}></DarkInput>
+		</Col>
+		<Col>
+			{result5===NONE?<></>
+			:result5===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
+			:result5===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
+			:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
+		</Col>
+	</Row>
+	<Row>
+		<span>A</span>
+	</Row>
+	<Row>
+		<Button onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} disabled={checking} onClick={()=>{submitForm()}}>{checking?<Spinner animation="border"></Spinner>:"Check"}</Button>
+	</Row>
 	</>
 }
 
@@ -311,9 +501,9 @@ function App() {
 				  <img src={process.env.PUBLIC_URL+"/favicon.ico"} width="30" height="30" className="d-inline-block align-top" alt="BUN logo"/> BUN Collab App
 				</Navbar.Brand>
 				{contributor.length>0&&<>
-				<Nav.Link style={(nav==="main")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("main")}}>Main</Nav.Link>
+				<Nav.Link style={(nav==="main")?{"color":"lime","textDecoration":"underline"}:{}} onClick={()=>{setNav("main")}}>Main</Nav.Link>
-				<Nav.Link style={(nav==="sort")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("sort")}}>Sort Check</Nav.Link>
+				<Nav.Link style={(nav==="sort")?{"color":"lime","textDecoration":"underline"}:{}} onClick={()=>{setNav("sort")}}>Sort Check</Nav.Link>
-				<Nav.Link style={(nav==="list")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("list")}}>Grocery List</Nav.Link>
+				<Nav.Link style={(nav==="list")?{"color":"lime","textDecoration":"underline"}:{}} onClick={()=>{setNav("list")}}>Grocery List</Nav.Link>
 				<span className="text-light font-weight-light font-italic">Signed in as {contributor}</span>
 				</>}
 			  </Container>