-
Notifications
You must be signed in to change notification settings - Fork 122
/
EditPlanLoader.tsx
80 lines (72 loc) · 2.3 KB
/
EditPlanLoader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// create react FC component called EditPlanLoader
import React, { Fragment, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery } from '@tanstack/react-query';
import { Button } from "antd";
import { Plan } from "../api/api";
import { PlanDetailType } from "../types/plan-type";
import LoadingSpinner from "../components/LoadingSpinner";
import { usePlanState } from "../context/PlanContext";
import EditPlan from "./EditPlan";
type PlanDetailParams = {
planId: string;
versionId?: string;
};
interface EditPlanLoaderProps {
type: "backtest" | "version" | "custom" | "currency";
}
function EditPlanLoader({ type }: EditPlanLoaderProps) {
const navigate = useNavigate();
const { planId, versionId } = useParams<PlanDetailParams>();
const [versionIndex, setVersionIndex] = React.useState<number>();
const { replacementPlanVersion } = usePlanState();
const {
data: plan,
isLoading,
isError,
} = useQuery<PlanDetailType>(["plan_detail", planId], async () => {
if (!planId) {
return Promise.reject(new Error("No plan id provided"));
}
const res = Plan.getPlan(planId);
return res;
});
useEffect(() => {
if (plan !== undefined) {
if (type === "backtest") {
setVersionIndex(
plan.versions.findIndex(
(v) => v.version_id === replacementPlanVersion?.version_id
)
);
} else if (type === "currency") {
setVersionIndex(
plan.versions.findIndex((x) => x.version_id === versionId)
);
} else {
setVersionIndex(plan.versions.findIndex((x) => x.status === "active"));
}
}
}, [plan, replacementPlanVersion?.version_id, type]);
return (
<>
{isLoading && (
<div className="flex justify-center">
<LoadingSpinner />{" "}
</div>
)}
{isError && (
<div className="flex flex-col items-center justify-center h-full">
<h2 className="mb-4">Could Not Load Plan</h2>
<Button type="primary" onClick={() => navigate(-1)}>
Go Back
</Button>
</div>
)}
{plan !== undefined && versionIndex !== undefined ? (
<EditPlan type={type} plan={plan} versionIndex={versionIndex} />
) : null}
</>
);
}
export default EditPlanLoader;