tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed selected filament re-rendering too much

Browse Source
This commit is contained in:
Donkie
2024-05-15 19:40:34 +02:00
parent 69bb3cec77
commit 090cbadf3b
3 changed files with 90 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/pages/spools/create.tsx
View File

@@ -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<IResourceComponentsProps & CreateOrCloneProps
//
// 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]);
//
// Submit handler
@@ -96,8 +118,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
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);

36
client/src/pages/spools/edit.tsx
View File

@@ -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<IResourceComponentsProps> = () => {
const initialWeightValue = Form.useWatch("initial_weight", form);
const spoolWeightValue = Form.useWatch("spool_weight", form);
// Get filament selection options
const { queryResult } = useSelect<IFilament>({
resource: "filament",
});
// Add the filament_id field to the form
if (formProps.initialValues) {
@@ -62,10 +58,32 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
//
// 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<IResourceComponentsProps> = () => {
if (allValues !== undefined && allValues !== null) {
// Lot of stupidity here to make types work
const values = StringifiedExtras<ISpoolRequest>(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<IResourceComponentsProps> = () => {
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);
}

35
client/src/pages/spools/functions.tsx
View File

@@ -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,7 +63,8 @@ export function useGetFilamentSelectOptions() {
const externalFilaments = useGetExternalDBFilaments();
// Format and sort internal filament options
const filamentSelectInternal: SelectOption[] =
const filamentSelectInternal: SelectOption[] = useMemo(() => {
const data =
internalFilaments.data?.data.map((item) => {
return {
label: formatFilamentLabel(
@@ -78,10 +80,13 @@ export function useGetFilamentSelectOptions() {
is_internal: true,
};
}) ?? [];
filamentSelectInternal.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
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[] =
const filamentSelectExternal: SelectOption[] = useMemo(() => {
const data =
externalFilaments.data?.map((item) => {
return {
label: formatFilamentLabel(item.name, item.diameter, item.manufacturer, item.material, item.weight),
@@ -91,7 +96,9 @@ export function useGetFilamentSelectOptions() {
is_internal: false,
};
}) ?? [];
filamentSelectExternal.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
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,
};
}