devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactoring

Browse Source
This commit is contained in:
Joao Correia
2025-01-23 22:12:25 +00:00
parent a4f60455b5
commit c921d54d50
3 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
View File

@@ -7,6 +7,7 @@ import { BsTrash } from "react-icons/bs";
import { LuGripHorizontal } from "react-icons/lu";
import WorkflowStepNumber from "./WorkflowStepNumber";
import WorkflowStepSelects from "./WorkflowStepSelects";
import Image from "next/image";
interface Props extends WorkflowStep {
entityTeachers: TeacherUser[];
@@ -31,7 +32,7 @@ export default function WorkflowEditableStepComponent({
.map((teacher) => ({
value: teacher.id,
label: teacher.name,
icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
icon: () => <Image src={teacher.profilePicture} alt={teacher.name} />
}))
.sort((a, b) => a.label.localeCompare(b.label)),
[entityTeachers]
@@ -42,7 +43,7 @@ export default function WorkflowEditableStepComponent({
.map((corporate) => ({
value: corporate.id,
label: corporate.name,
icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
}))
.sort((a, b) => a.label.localeCompare(b.label)),
[entityCorporates]
@@ -55,9 +56,16 @@ export default function WorkflowEditableStepComponent({
const initialSelects = assignees.map((assignee) =>
typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
);
if (JSON.stringify(initialSelects) !== JSON.stringify(selects)) {
setSelects(initialSelects);
}
setSelects((prevSelects) => {
// This is needed to avoid unnecessary re-renders which can cause warning of a child component being re-rendered while parent is in the midle of also re-rendering.
const areEqual = initialSelects.length === prevSelects.length && initialSelects.every((option, idx) => option?.value === prevSelects[idx]?.value);
if (!areEqual) {
return initialSelects;
}
return prevSelects;
});
}
}, [assignees, allOptions]);

83
src/components/ApprovalWorkflows/WorkflowForm.tsx
View File

@@ -23,18 +23,8 @@ interface Props {
}
export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
const lastStep = steps[steps.length - 1];
useEffect(() => {
setSteps(workflow.steps);
}, [workflow]);
useEffect(() => {
const updatedWorkflow = { ...workflow, steps };
onWorkflowChange(updatedWorkflow);
}, [steps]);
const lastStep = workflow.steps[workflow.steps.length - 1];
const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
return steps.map((step, index) => ({
@@ -44,49 +34,49 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
};
const addStep = () => {
setSteps((prev) => {
const newStep: WorkflowStep = {
key: stepCounter,
stepType: "approval-by",
stepNumber: steps.length,
completed: false,
assignees: [null],
};
setStepCounter((count) => count + 1);
const newStep: WorkflowStep = {
key: stepCounter,
stepType: "approval-by",
stepNumber: workflow.steps.length,
completed: false,
assignees: [null],
};
setStepCounter((count) => count + 1);
const updatedSteps = [...prev.slice(0, -1), newStep, lastStep];
return renumberSteps(updatedSteps);
});
const updatedSteps = [
...workflow.steps.slice(0, -1),
newStep,
lastStep
];
onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
};
const handleDelete = (key: number | undefined) => {
if (key) {
setSteps((prev) => {
const updatedSteps = prev.filter((step) => step.key !== key);
return renumberSteps(updatedSteps);
});
}
if (!key) return;
const updatedSteps = workflow.steps.filter((step) => step.key !== key);
onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
};
const handleSelectChange = (key: number | undefined, numberOfSelects: number, index: number, selectedOption: Option | null) => {
if (key === undefined) return;
if (!key) return;
setSteps((prevSteps) =>
prevSteps.map((step) => {
if (step.key !== key) return step;
const updatedSteps = workflow.steps.map((step) => {
if (step.key !== key) return step;
const assignees = step.assignees ?? [];
let newAssignees = [...assignees];
const assignees = step.assignees ?? [];
let newAssignees = [...assignees];
if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
newAssignees[index] = selectedOption?.value;
} else if (numberOfSelects === assignees.length + 1) { // means a new select was added
newAssignees.push(selectedOption?.value || null);
}
if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
newAssignees[index] = selectedOption?.value;
} else if (numberOfSelects === assignees.length + 1) { // means a new select was added
newAssignees.push(selectedOption?.value || null);
}
return { ...step, assignees: newAssignees };
})
);
return { ...step, assignees: newAssignees };
});
onWorkflowChange({ ...workflow, steps: updatedSteps });
};
const handleReorder = (newOrder: WorkflowStep[]) => {
@@ -101,7 +91,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
const [final] = newOrder.splice(finalIndex, 1);
newOrder.push(final);
}
setSteps(renumberSteps(newOrder));
onWorkflowChange({ ...workflow, steps: renumberSteps(newOrder) });
};
return (
@@ -119,13 +110,13 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
<Reorder.Group
axis="y"
values={steps}
values={workflow.steps}
onReorder={handleReorder}
className="flex flex-col gap-0"
>
<AnimatePresence>
{steps.map((step, index) => (
{workflow.steps.map((step, index) => (
<Reorder.Item
key={step.key}
value={step}