All files / src/components/Settings SiteSection.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useState, useEffect } from "react";
import SettingsTitle from "./SettingsTitle.tsx";
import CustomButton from "../common/CustomButton/index.tsx";
import { useUpdateSiteUrlMutation } from "../../store/features/integrations/api/index.ts";
import { CircularProgress } from "@mui/material";
import { useGetSiteUrlQuery } from "../../store/features/integrations/api/getSiteUrlApi.ts";
import { useDispatch } from "react-redux";
import { showSnackbar } from "../../store/features/snackbar/snackbarSlice.ts";
 
function SiteSection() {
  const { data, isFetching, error: siteUrlError } = useGetSiteUrlQuery();
  const [value, setValue] = useState(data?.url);
  const [error, setError] = useState("");
  const [triggerSaveSite, { isLoading, error: saveUrlError }] =
    useUpdateSiteUrlMutation();
  const dispatch = useDispatch();
 
  const validate = () => {
    let errorString = "";
    Iif (!value || !value.trim()) {
      errorString = "Site URL is required";
    }
 
    Iif (errorString) {
      setError(errorString);
      return false;
    }
 
    return true;
  };
 
  const removeError = () => {
    Iif (!validate()) return;
    setError("");
  };
 
  const handleUpdate = async () => {
    Iif (!validate()) return;
    try {
      await triggerSaveSite(value);
      dispatch(
        showSnackbar({ message: "Site URL has been updated", type: "success" }),
      );
    } catch (e: any) {
      setError(e.message);
    }
  };
 
  useEffect(() => {
    Iif (value) {
      removeError();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);
 
  useEffect(() => {
    Iif (data?.url) {
      setValue(data.url);
    }
  }, [data]);
 
  useEffect(() => {
    Iif (siteUrlError || saveUrlError) {
      setError(saveUrlError ?? siteUrlError);
    }
  }, [siteUrlError, saveUrlError]);
 
  return (
    <section className="border-b pb-4 mb-4">
      <SettingsTitle title="Site URL" />
      <div className="mt-2 flex flex-col items-baseline gap-2">
        <div className="flex flex-col">
          <input
            className={`${
              error ? "border-red-500" : ""
            } border p-1 text-sm outline-none rounded w-[500px]`}
            value={value}
            type="url"
            placeholder="Your Site URL"
            onChange={(e) => setValue(e.target.value)}
          />
          {error && <p className="text-red-500 text-xs">{error.toString()}</p>}
        </div>
        <div className="flex items-center gap-2">
          <CustomButton onClick={handleUpdate}>Update</CustomButton>
          {(isLoading || isFetching) && <CircularProgress size={20} />}
        </div>
      </div>
    </section>
  );
}
 
export default SiteSection;