diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx index 4f75215..786646b 100644 --- a/client/src/pages/spools/create.tsx +++ b/client/src/pages/spools/create.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useMemo, useState } from "react"; import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core"; import { Create, useForm, useSelect } from "@refinedev/antd"; import { @@ -85,10 +85,32 @@ export const SpoolCreate: React.FC { + // id is a number of it's an internal filament, and a string of it's an external filament. + if (typeof selectedFilamentID === "number") { + return ( + internalSelectOptions?.find((obj) => { + return obj.value === selectedFilamentID; + }) ?? null + ); + } else if (typeof selectedFilamentID === "string") { + return ( + externalSelectOptions?.find((obj) => { + return obj.value === selectedFilamentID; + }) ?? null + ); + } else { + return null; + } + }, [selectedFilamentID, internalSelectOptions, externalSelectOptions]); // // Submit handler @@ -96,8 +118,7 @@ export const SpoolCreate: React.FC { const values = StringifiedExtras(await form.validateFields()); - const selectOption = getById(values.filament_id); - if (selectOption?.is_internal === false) { + if (selectedFilament?.is_internal === false) { // Filament ID being a string indicates its an external filament. // If so, we should first create the internal filament version, then create the spool(s) const externalFilament = allExternalFilaments?.find((f) => f.id === values.filament_id); diff --git a/client/src/pages/spools/edit.tsx b/client/src/pages/spools/edit.tsx index 49c91ff..bcfde98 100644 --- a/client/src/pages/spools/edit.tsx +++ b/client/src/pages/spools/edit.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core"; import { Edit, useForm, useSelect } from "@refinedev/antd"; import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Alert, Typography } from "antd"; @@ -46,10 +46,6 @@ export const SpoolEdit: React.FC = () => { const initialWeightValue = Form.useWatch("initial_weight", form); const spoolWeightValue = Form.useWatch("spool_weight", form); - // Get filament selection options - const { queryResult } = useSelect({ - resource: "filament", - }); // Add the filament_id field to the form if (formProps.initialValues) { @@ -62,10 +58,32 @@ export const SpoolEdit: React.FC = () => { // // Set up the filament selection options // - const { options: filamentOptions, getById, allExternalFilaments } = useGetFilamentSelectOptions(); + const { + options: filamentOptions, + internalSelectOptions, + externalSelectOptions, + allExternalFilaments, + } = useGetFilamentSelectOptions(); const selectedFilamentID = Form.useWatch("filament_id", form); - const selectedFilament = getById(selectedFilamentID); + const selectedFilament = useMemo(() => { + // id is a number of it's an internal filament, and a string of it's an external filament. + if (typeof selectedFilamentID === "number") { + return ( + internalSelectOptions?.find((obj) => { + return obj.value === selectedFilamentID; + }) ?? null + ); + } else if (typeof selectedFilamentID === "string") { + return ( + externalSelectOptions?.find((obj) => { + return obj.value === selectedFilamentID; + }) ?? null + ); + } else { + return null; + } + }, [selectedFilamentID, internalSelectOptions, externalSelectOptions]); // Override the form's onFinish method to stringify the extra fields const originalOnFinish = formProps.onFinish; @@ -73,8 +91,7 @@ export const SpoolEdit: React.FC = () => { if (allValues !== undefined && allValues !== null) { // Lot of stupidity here to make types work const values = StringifiedExtras(allValues); - const selectOption = getById(values.filament_id); - if (selectOption?.is_internal === false) { + if (selectedFilament?.is_internal === false) { // Filament ID being a string indicates its an external filament. // If so, we should first create the internal filament version, then edit the spool const externalFilament = allExternalFilaments?.find((f) => f.id === values.filament_id); @@ -103,6 +120,7 @@ export const SpoolEdit: React.FC = () => { React.useEffect(() => { const newFilamentWeight = selectedFilament?.weight || 0; const newSpoolWeight = selectedFilament?.spool_weight || 0; + console.log("selectedFilament", selectedFilament, newFilamentWeight, newSpoolWeight); if (newFilamentWeight > 0) { form.setFieldValue("initial_weight", newFilamentWeight); } diff --git a/client/src/pages/spools/functions.tsx b/client/src/pages/spools/functions.tsx index 51d580e..1a8a1b8 100644 --- a/client/src/pages/spools/functions.tsx +++ b/client/src/pages/spools/functions.tsx @@ -4,6 +4,7 @@ import { getAPIURL } from "../../utils/url"; import { ISpool } from "./model"; import { IFilament } from "../filaments/model"; import { useGetExternalDBFilaments } from "../../utils/queryExternalDB"; +import { useMemo } from "react"; export async function setSpoolArchived(spool: ISpool, archived: boolean) { const init: RequestInit = { @@ -62,36 +63,42 @@ export function useGetFilamentSelectOptions() { const externalFilaments = useGetExternalDBFilaments(); // Format and sort internal filament options - const filamentSelectInternal: SelectOption[] = - internalFilaments.data?.data.map((item) => { - return { - label: formatFilamentLabel( - item.name ?? `ID ${item.id}`, - item.diameter, - item.vendor?.name, - item.material, - item.weight - ), - value: item.id, - weight: item.weight, - spool_weight: item.spool_weight, - is_internal: true, - }; - }) ?? []; - filamentSelectInternal.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); + const filamentSelectInternal: SelectOption[] = useMemo(() => { + const data = + internalFilaments.data?.data.map((item) => { + return { + label: formatFilamentLabel( + item.name ?? `ID ${item.id}`, + item.diameter, + item.vendor?.name, + item.material, + item.weight + ), + value: item.id, + weight: item.weight, + spool_weight: item.spool_weight, + is_internal: true, + }; + }) ?? []; + data.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); + return data; + }, [internalFilaments.data?.data]); // Format and sort external filament options - const filamentSelectExternal: SelectOption[] = - externalFilaments.data?.map((item) => { - return { - label: formatFilamentLabel(item.name, item.diameter, item.manufacturer, item.material, item.weight), - value: item.id, - weight: item.weight, - spool_weight: item.spool_weight || undefined, - is_internal: false, - }; - }) ?? []; - filamentSelectExternal.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); + const filamentSelectExternal: SelectOption[] = useMemo(() => { + const data = + externalFilaments.data?.map((item) => { + return { + label: formatFilamentLabel(item.name, item.diameter, item.manufacturer, item.material, item.weight), + value: item.id, + weight: item.weight, + spool_weight: item.spool_weight || undefined, + is_internal: false, + }; + }) ?? []; + data.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); + return data; + }, [externalFilaments.data]); return { options: [ @@ -104,24 +111,8 @@ export function useGetFilamentSelectOptions() { options: filamentSelectExternal, }, ], - getById: (id: number | string | null) => { - // id is a number of it's an internal filament, and a string of it's an external filament. - if (typeof id === "number") { - return ( - filamentSelectInternal?.find((obj) => { - return obj.value === id; - }) ?? null - ); - } else if (typeof id === "string") { - return ( - filamentSelectExternal?.find((obj) => { - return obj.value === id; - }) ?? null - ); - } else { - return null; - } - }, + internalSelectOptions: filamentSelectInternal, + externalSelectOptions: filamentSelectExternal, allExternalFilaments: externalFilaments.data, }; }