feat: get item components

src/pages/home/Home.jsx

@@ -210,15 +210,37 @@ function reducer(state, action) {
 	if (action.type === "ADD_GROUP_ITEM") {
 		// params:
 		//  - action.groupId
+		//  - action.items?
 
 		const newGroups = [...state.groups];
 
 		// Get the group index
 		const index = newGroups.findIndex((_group) => _group.id === action.groupId);
 		if (index === -1) return state;
 
-		// Add the item
-		newGroups[index].items.push(new ItemGroupElement({ type: "ingredient" }));
+		const items = action?.items;
+		const isMultipleItems = Array.isArray(items);
+
+		// Add only one empty item
+		if (!items) {
+			newGroups[index].items.push(new ItemGroupElement({ type: "ingredient" }));
+		} else {
+			// Add multiple items
+			if (isMultipleItems) {
+				for (const _item of items) {
+					newGroups[index].items.push({
+						..._item,
+						type: "ingredient",
+					});
+				}
+				// Add one item
+			} else {
+				newGroups[index].items.push({
+					...items,
+					type: "ingredient",
+				});
+			}
+		}
 
 		return {
 			...state,
@@ -421,6 +443,45 @@ export default observer(function Home() {
 		});
 	}
 
+	async function getIngredients({ groupId }) {
+		setLoadingGroup(groupId);
+
+		const group = state.groups.find((_group) => _group.id === groupId);
+		const { product } = getGroupParts(group);
+
+		const productId = product?.id;
+
+		const url = new URL(
+			`https://gameinfo.albiononline.com/api/gameinfo/items/${productId}/data`,
+		);
+
+		const { isError, response } = await dame.get(url.toString());
+
+		setLoadingGroup(null);
+
+		if (isError) {
+			return;
+		}
+
+		const newItemsToAdd = [];
+
+		const craftingRequirements = response?.craftingRequirements ?? {};
+		const craftingResourceList = craftingRequirements?.craftingResourceList ?? [];
+
+		for (const _res of craftingResourceList) {
+			newItemsToAdd.push({
+				id: _res.uniqueName,
+				quantity: _res.count,
+			});
+		}
+
+		dispatchWithSave({
+			type: "ADD_GROUP_ITEM",
+			groupId: groupId,
+			items: newItemsToAdd,
+		});
+	}
+
 	// This will force re-render
 	const language = globalStore.language;
 
@@ -523,6 +584,9 @@ export default observer(function Home() {
 														isProduct: true,
 													});
 												}}
+												onGetIngredients={() =>
+													getIngredients({ groupId: _group.id })
+												}
 												isHighlighted
 											/>
 
@@ -586,6 +650,11 @@ export default observer(function Home() {
 																	payload: _payload,
 																});
 															}}
+															onGetIngredients={() =>
+																getIngredients({
+																	groupId: _group.id,
+																})
+															}
 														/>
 													);
 												})}

src/pages/home/partials/ItemRow.jsx

@@ -1,15 +1,23 @@
 import { globalStore } from "@/mobx/rootStore";
 import * as m from "@/paraglide/messages.js";
-import { ActionIcon, Group, Image, NumberInput, Select, Stack } from "@mantine/core";
+import { ActionIcon, Group, Image, NumberInput, Select, Stack, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { IconClipboard, IconX } from "@tabler/icons-react";
 import { observer } from "mobx-react-lite";
 import { memo, useMemo } from "react";
 import { albionData } from "../../../data/items";
+import { IconHammer } from "@tabler/icons-react";
 
 export const ItemRow = observer(
-	({ label, item = {}, onChange = () => {}, onDelete, isHighlighted = false }) => {
+	({
+		label,
+		item = {},
+		onChange = () => {},
+		onGetIngredients,
+		onDelete,
+		isHighlighted = false,
+	}) => {
 		const clipboard = useClipboard();
 
 		const language = globalStore.language;
@@ -166,13 +174,23 @@ export const ItemRow = observer(
 					value={calculatedTotal}
 					readOnly
 				/>
-				{onDelete && (
-					<Stack justify="flex-end" mt="lg">
-						<ActionIcon variant="subtle" onClick={onDelete}>
-							<IconX />
-						</ActionIcon>
-					</Stack>
-				)}
+
+				<Group gap="xs" mt="lg" pr="xs">
+					{onGetIngredients && (
+						<Tooltip label="Get required items to craft">
+							<ActionIcon variant="subtle" onClick={onGetIngredients}>
+								<IconHammer />
+							</ActionIcon>
+						</Tooltip>
+					)}
+					{onDelete && (
+						<Tooltip label="Delete this component">
+							<ActionIcon color="red" variant="subtle" onClick={onDelete}>
+								<IconX />
+							</ActionIcon>
+						</Tooltip>
+					)}
+				</Group>
 			</Group>
 		);
 	},