refactor(frontend): migrate TrainingTypesCard.tsx to the banner system
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { api } from "../api/client";
|
import { api } from "../api/client";
|
||||||
|
import { showError } from "../banner";
|
||||||
import { NullableNumberField } from "./NullableNumberField";
|
import { NullableNumberField } from "./NullableNumberField";
|
||||||
import { PaceField, formatPace } from "./PaceField";
|
import { PaceField, formatPace } from "./PaceField";
|
||||||
import type { WorkoutKind } from "../types/api";
|
import type { WorkoutKind } from "../types/api";
|
||||||
@@ -31,10 +32,9 @@ export function TrainingTypesCard() {
|
|||||||
const [paceMax, setPaceMax] = useState<number | null>(null);
|
const [paceMax, setPaceMax] = useState<number | null>(null);
|
||||||
const [hrMin, setHrMin] = useState<number | null>(null);
|
const [hrMin, setHrMin] = useState<number | null>(null);
|
||||||
const [hrMax, setHrMax] = useState<number | null>(null);
|
const [hrMax, setHrMax] = useState<number | null>(null);
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
function reload() {
|
function reload() {
|
||||||
api.listWorkoutKinds(true).then(setKinds).catch((e) => setError(String(e)));
|
api.listWorkoutKinds(true).then(setKinds).catch((e) => showError(String(e)));
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(reload, []);
|
useEffect(reload, []);
|
||||||
@@ -47,12 +47,10 @@ export function TrainingTypesCard() {
|
|||||||
setPaceMax(k.pace_max_sec_per_km);
|
setPaceMax(k.pace_max_sec_per_km);
|
||||||
setHrMin(k.hr_min_pct_hrr);
|
setHrMin(k.hr_min_pct_hrr);
|
||||||
setHrMax(k.hr_max_pct_hrr);
|
setHrMax(k.hr_max_pct_hrr);
|
||||||
setError(null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function save() {
|
async function save() {
|
||||||
if (!editing) return;
|
if (!editing) return;
|
||||||
setError(null);
|
|
||||||
try {
|
try {
|
||||||
await api.updateWorkoutKind(editing.ID, {
|
await api.updateWorkoutKind(editing.ID, {
|
||||||
name,
|
name,
|
||||||
@@ -66,7 +64,7 @@ export function TrainingTypesCard() {
|
|||||||
setEditing(null);
|
setEditing(null);
|
||||||
reload();
|
reload();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(String(e));
|
showError(String(e));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -74,8 +72,6 @@ export function TrainingTypesCard() {
|
|||||||
<fieldset className="kind-editor">
|
<fieldset className="kind-editor">
|
||||||
<legend>Training types</legend>
|
<legend>Training types</legend>
|
||||||
|
|
||||||
{error && <p className="error">{error}</p>}
|
|
||||||
|
|
||||||
<ul className="training-type-list">
|
<ul className="training-type-list">
|
||||||
{kinds.map((k) => (
|
{kinds.map((k) => (
|
||||||
<li key={k.ID} className="training-type-item">
|
<li key={k.ID} className="training-type-item">
|
||||||
|
|||||||
Reference in New Issue
Block a user