| 1 | "use client"; |
| 2 | |
| 3 | import * as Form from "@radix-ui/react-form"; |
| 4 | import { invoke } from "@tauri-apps/api/tauri"; |
| 5 | import { |
| 6 | TAURI_GET_ENVIRONMENT, |
| 7 | TAURI_SET_ENVIRONMENT, |
| 8 | } from "@/lib/tauri-handler"; |
| 9 | import { useEffect, useState } from "react"; |
| 10 | import { TauriResponse } from "@/models/shared"; |
| 11 | import { useLogger } from "@/lib/logger"; |
| 12 | import { LoadingView } from "@/components/ui/loading-view"; |
| 13 | import { Button } from "@/components/button"; |
| 14 | |
| 15 | enum State { |
| 16 | LOADING, |
| 17 | LOADED, |
| 18 | ERROR, |
| 19 | } |
| 20 | enum Environment { |
| 21 | DEVELOPMENT = "development", |
| 22 | PRODUCTION = "production", |
| 23 | } |
| 24 | |
| 25 | interface UpdateSettingsResponse { |
| 26 | status: TauriResponse; |
| 27 | } |
| 28 | |
| 29 | export default function Page() { |
| 30 | const log = useLogger("Debug settings"); |
| 31 | const [state, setState] = useState(State.LOADED); |
| 32 | const [environment, setEnvironment] = useState<Environment>( |
| 33 | Environment.PRODUCTION |
| 34 | ); |
| 35 | |
| 36 | const updateEnvironment = async () => { |
| 37 | try { |
| 38 | setState(State.LOADING); |
| 39 | const payload = { environment }; |
| 40 | log.debug("payload", payload); |
| 41 | const response: UpdateSettingsResponse = await invoke( |
| 42 | TAURI_SET_ENVIRONMENT, |
| 43 | payload |
| 44 | ); |
| 45 | log.debug("response", response); |
| 46 | setState(State.LOADED); |
| 47 | } catch (error) { |
| 48 | log.error("Error updating environment", error); |
| 49 | setState(State.ERROR); |
| 50 | } |
| 51 | }; |
| 52 | |
| 53 | const onSelectedEnvironmentChange = (value: string) => { |
| 54 | log.debug("Selected environment", value); |
| 55 | setEnvironment(value as Environment); |
| 56 | }; |
| 57 | |
| 58 | useEffect(() => { |
| 59 | log.debug("Debug settings page loaded."); |
| 60 | async function fetchData() { |
| 61 | try { |
| 62 | const environment: Environment = await invoke(TAURI_GET_ENVIRONMENT); |
| 63 | log.debug("Current environment settings", environment); |
| 64 | setEnvironment(environment); |
| 65 | setState(State.LOADED); |
| 66 | } catch (error) { |
| 67 | log.error(error); |
| 68 | setState(State.ERROR); |
| 69 | } |
| 70 | } |
| 71 | fetchData(); |
| 72 | // eslint-disable-next-line react-hooks/exhaustive-deps |
| 73 | }, []); |
| 74 | |
| 75 | if (state === State.LOADING) { |
| 76 | return <LoadingView />; |
| 77 | } |
| 78 | |
| 79 | return ( |
| 80 | <div className="prose prose-sm prose-invert max-w-none"> |
| 81 | <div className="flex grid-rows-1"> |
| 82 | <Form.Root |
| 83 | className="FormRoot" |
| 84 | onSubmit={(event) => { |
| 85 | event.preventDefault(); |
| 86 | }} |
| 87 | > |
| 88 | <Form.Field className="FormField my-6" name="Environment"> |
| 89 | <div |
| 90 | style={{ |
| 91 | display: "flex", |
| 92 | alignItems: "baseline", |
| 93 | justifyContent: "space-between", |
| 94 | }} |
| 95 | > |
| 96 | <Form.Label className="FormLabel">Environment</Form.Label> |
| 97 | </div> |
| 98 | <Form.Control asChild className="my-6"> |
| 99 | <select |
| 100 | onChange={(e) => |
| 101 | onSelectedEnvironmentChange(e.currentTarget.value) |
| 102 | } |
| 103 | > |
| 104 | <option |
| 105 | value={Environment.DEVELOPMENT} |
| 106 | selected={environment === Environment.DEVELOPMENT} |
| 107 | > |
| 108 | Development |
| 109 | </option> |
| 110 | <option |
| 111 | value={Environment.PRODUCTION} |
| 112 | selected={environment === Environment.PRODUCTION} |
| 113 | > |
| 114 | Production |
| 115 | </option> |
| 116 | </select> |
| 117 | </Form.Control> |
| 118 | </Form.Field> |
| 119 | <Form.Field className="FormField my-6" name="password"> |
| 120 | <Button onClick={updateEnvironment} variant={"outline"} size={"lg"}> |
| 121 | Update |
| 122 | </Button> |
| 123 | </Form.Field> |
| 124 | </Form.Root> |
| 125 | </div> |
| 126 | </div> |
| 127 | ); |
| 128 | } |