TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more enhancements to loading and error feedback

Browse Source
This commit is contained in:
Toba Ojo
2025-10-06 15:18:58 +01:00
parent f275f50383
commit a95c9077c4
10 changed files with 127 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
View File

@@ -25,7 +25,7 @@ const ModemSettings = () => {
authenticationType: "PAP",
};
const handleSubmit = (values: ModemSettingsType) => {
const handleSubmit = async (values: ModemSettingsType) => {
const modemConfig = {
id: "ModemAndWifiManager-modem",
fields: [
@@ -48,7 +48,7 @@ const ModemSettings = () => {
},
],
};
modemMutation.mutate(modemConfig);
await modemMutation.mutateAsync(modemConfig);
};
return (
@@ -63,76 +63,80 @@ const ModemSettings = () => {
onSubmit={handleSubmit}
enableReinitialize
>
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="apn"
className="font-medium whitespace-nowrap md:w-2/3"
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="apn"
className="font-medium whitespace-nowrap md:w-2/3"
>
APN
</label>
<Field
placeholder="Enter APN"
name="apn"
id="apn"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="username"
className="font-medium whitespace-nowrap md:w-2/3"
>
Username
</label>
<Field
placeholder="Enter Username"
name="username"
id="username"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
placeholder="Enter Password"
name="password"
id="password"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
name="authenticationType"
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</option>
<option value="none">None</option>
</Field>
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
>
APN
</label>
<Field
placeholder="Enter APN"
name="apn"
id="apn"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="username"
className="font-medium whitespace-nowrap md:w-2/3"
>
Username
</label>
<Field
placeholder="Enter Username"
name="username"
id="username"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
placeholder="Enter Password"
name="password"
id="password"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
name="authenticationType"
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</option>
<option value="none">None</option>
</Field>
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
>
Save Modem settings
</button>
</Form>
{isSubmitting || modemMutation.isPending
? "Saving..."
: "Save Modem settings"}
</button>
</Form>
)}
</Formik>
)}
</>

10
src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
View File

@@ -19,7 +19,7 @@ const WiFiSettingsForm = () => {
encryption: "WPA2",
};
const handleSubmit = (values: WifiSettingValues) => {
const handleSubmit = async (values: WifiSettingValues) => {
const wifiConfig = {
id: "ModemAndWifiManager-wifi",
fields: [
@@ -34,7 +34,7 @@ const WiFiSettingsForm = () => {
],
};
wifiMutation.mutate(wifiConfig);
await wifiMutation.mutateAsync(wifiConfig);
};
return (
<Formik
@@ -42,7 +42,7 @@ const WiFiSettingsForm = () => {
onSubmit={handleSubmit}
enableReinitialize
>
{() => (
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
@@ -103,7 +103,9 @@ const WiFiSettingsForm = () => {
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
>
Save WiFi settings
{isSubmitting || wifiMutation.isPending
? "Saving..."
: " Save WiFi settings"}
</button>
</Form>
)}