Clear looking for

TODO

@@ -8,8 +8,8 @@ trading block - specify what you want
     - if "prospects" or "best current players", apply that as a sort the entire time (valueNoPot or some combination of age and value)
     - how to handle multiple "other" selections? maybe don't allow both best and prospects
 - ui
-  - clear button - maybe make it a dropdown for Assets/Filters/Both
   - make sure to save this new state along with the other persisted trading block state
+    - and for clear button, pass type to clearTradingBlock
   - responsive
   - light+dark
 

src/ui/views/Trade/Buttons.tsx

@@ -74,7 +74,7 @@ const Buttons = ({
 					disabled={!enablePropose && !forceTrade}
 					onClick={handleClickPropose}
 				>
-					Propose Trade
+					Propose trade
 				</button>
 				<Dropdown as={ButtonGroup}>
 					<button
@@ -85,7 +85,7 @@ const Buttons = ({
 						Clear
 					</button>
 
-					<Dropdown.Toggle split variant="secondary" id="clear-trade-more" />
+					<Dropdown.Toggle split variant="secondary" />
 
 					<Dropdown.Menu align="end">
 						<Dropdown.Item onClick={onClick("all")}>

src/ui/views/TradingBlock/LookingFor.tsx

@@ -44,6 +44,7 @@ const LookingFor = ({
 													type="checkbox"
 													className="form-check-input me-1"
 													disabled={disabled}
+													checked={state[categoryKey][option.key]}
 													onChange={() => {
 														setState(state => {
 															return {
@@ -67,6 +68,7 @@ const LookingFor = ({
 										// position-fixed is for https://stackoverflow.com/a/75264190/786644
 										return (
 											<OverlayTrigger
+												key={option.key}
 												overlay={
 													<Tooltip className="position-fixed">
 														{option.tooltip}

src/ui/views/TradingBlock/index.tsx

@@ -23,6 +23,7 @@ import type { MissingAsset } from "../../../worker/views/savedTrades";
 import useTradeOffersSwitch from "../../hooks/useTradeOffersSwitch";
 import LookingFor from "./LookingFor";
 import useLookingForState from "./useLookingForState";
+import { ButtonGroup, Dropdown } from "react-bootstrap";
 
 export type OfferType = Awaited<
 	ReturnType<(typeof api)["main"]["getTradingBlockOffers"]>
@@ -538,7 +539,8 @@ const TradingBlock = ({
 		};
 	});
 
-	const [lookingForState, setLookingForState] = useLookingForState();
+	const [lookingForState, setLookingForState, resetLookingForState] =
+		useLookingForState();
 
 	const handleChangeAsset = (type: "pids" | "dpids", id: number) => {
 		setState(prevState => {
@@ -600,6 +602,23 @@ const TradingBlock = ({
 		}));
 	};
 
+	const clear = async (type: "all" | "lookingFor" | "assets") => {
+		if (type === "all" || type === "lookingFor") {
+			resetLookingForState();
+		}
+
+		if (type === "all" || type === "assets") {
+			setState({
+				asking: false,
+				offers: [],
+				pids: [],
+				dpids: [],
+			});
+
+			await toWorker("main", "clearTradingBlock", undefined);
+		}
+	};
+
 	useTitleBar({ title: "Trading Block" });
 
 	const { teamInfoCache } = useLocalPartial(["teamInfoCache"]);
@@ -773,23 +792,30 @@ const TradingBlock = ({
 				>
 					Ask for trade proposals
 				</ActionButton>
-				<button
-					type="button"
-					className="btn btn-secondary btn-lg ms-2"
-					disabled={state.asking}
-					onClick={async () => {
-						setState({
-							asking: false,
-							offers: [],
-							pids: [],
-							dpids: [],
-						});
-
-						await toWorker("main", "clearTradingBlock", undefined);
-					}}
-				>
-					Clear
-				</button>
+				<Dropdown as={ButtonGroup}>
+					<button
+						type="button"
+						className="btn btn-secondary btn-lg ms-2"
+						disabled={state.asking}
+						onClick={() => clear("all")}
+					>
+						Clear
+					</button>
+
+					<Dropdown.Toggle split variant="secondary" />
+
+					<Dropdown.Menu align="end">
+						<Dropdown.Item onClick={() => clear("all")}>
+							All (default)
+						</Dropdown.Item>
+						<Dropdown.Item onClick={() => clear("assets")}>
+							Assets only
+						</Dropdown.Item>
+						<Dropdown.Item onClick={() => clear("lookingFor")}>
+							Looking for only
+						</Dropdown.Item>
+					</Dropdown.Menu>
+				</Dropdown>
 			</div>
 
 			{state.offers.length > 0 ? (

src/ui/views/TradingBlock/useLookingForState.ts

@@ -68,24 +68,30 @@ export const categories: Categories = {
 	},
 };
 
+const getInitialState = () => {
+	const makeObj = (category: Category) => {
+		const obj: Record<string, boolean> = {};
+		for (const { key } of category.options) {
+			obj[key] = false;
+		}
+		return obj;
+	};
+
+	return {
+		positions: makeObj(categories.positions),
+		skills: makeObj(categories.skills),
+		assets: makeObj(categories.assets),
+	};
+};
+
 const useLookingForState = () => {
-	const [state, setState] = useState(() => {
-		const makeObj = (category: Category) => {
-			const obj: Record<string, boolean> = {};
-			for (const { key } of category.options) {
-				obj[key] = false;
-			}
-			return obj;
-		};
+	const [state, setState] = useState(getInitialState);
 
-		return {
-			positions: makeObj(categories.positions),
-			skills: makeObj(categories.skills),
-			assets: makeObj(categories.assets),
-		};
-	});
+	const resetState = () => {
+		setState(getInitialState());
+	};
 
-	return [state, setState] as const;
+	return [state, setState, resetState] as const;
 };
 
 export default useLookingForState;