refactor(ui): refactor emails state using zustand store

ui/src/components/certimate/EmailsEdit.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
@@ -10,10 +10,8 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { PbErrorData } from "@/domain/base";
-import { EmailsSetting } from "@/domain/settings";
-import { update } from "@/repository/settings";
-import { useConfigContext } from "@/providers/config";
+import { type PbErrorData } from "@/domain/base";
+import { useContactStore } from "@/stores/contact";
 
 type EmailsEditProps = {
   className?: string;
@@ -21,10 +19,7 @@ type EmailsEditProps = {
 };
 
 const EmailsEdit = ({ className, trigger }: EmailsEditProps) => {
-  const {
-    config: { emails },
-    setEmails,
-  } = useConfigContext();
+  const { emails, setEmails, fetchEmails } = useContactStore();
 
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
@@ -40,30 +35,21 @@ const EmailsEdit = ({ className, trigger }: EmailsEditProps) => {
     },
   });
 
+  useEffect(() => {
+    fetchEmails();
+  }, []);
+
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
-    if ((emails.content as EmailsSetting).emails.includes(data.email)) {
+    if (emails.includes(data.email)) {
       form.setError("email", {
         message: "common.errmsg.email_duplicate",
       });
       return;
     }
 
-    // 保存到 config
-    const newEmails = [...(emails.content as EmailsSetting).emails, data.email];
-
     try {
-      const resp = await update({
-        ...emails,
-        name: "emails",
-        content: {
-          emails: newEmails,
-        },
-      });
+      await setEmails([...emails, data.email]);
 
-      // 更新本地状态
-      setEmails(resp);
-
-      // 关闭弹窗
       form.reset();
       form.clearErrors();
 

ui/src/components/notify/Bark.tsx

@@ -8,7 +8,7 @@ import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/ui/use-toast";
 import { getErrMsg } from "@/utils/error";
 import { NotifyChannels, NotifyChannelBark } from "@/domain/settings";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import { useNotifyContext } from "@/providers/notify";
 import { notifyTest } from "@/api/notify";
 import Show from "@/components/Show";
@@ -96,7 +96,7 @@ const Bark = () => {
 
   const handleSaveClick = async () => {
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -160,7 +160,7 @@ const Bark = () => {
     setBark(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/notify/DingTalk.tsx

@@ -9,7 +9,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { getErrMsg } from "@/utils/error";
 import { NotifyChannelDingTalk, NotifyChannels } from "@/domain/settings";
 import { useNotifyContext } from "@/providers/notify";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import Show from "@/components/Show";
 import { notifyTest } from "@/api/notify";
 
@@ -96,7 +96,7 @@ const DingTalk = () => {
 
   const handleSaveClick = async () => {
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -160,7 +160,7 @@ const DingTalk = () => {
     setDingtalk(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/notify/Email.tsx

@@ -9,7 +9,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { getErrMsg } from "@/utils/error";
 import { NotifyChannelEmail, NotifyChannels } from "@/domain/settings";
 import { useNotifyContext } from "@/providers/notify";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import Show from "@/components/Show";
 import { notifyTest } from "@/api/notify";
 
@@ -119,7 +119,7 @@ const Mail = () => {
 
   const handleSaveClick = async () => {
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -183,7 +183,7 @@ const Mail = () => {
     setMail(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/notify/Lark.tsx

@@ -5,7 +5,7 @@ import { Label } from "@/components/ui/label";
 import { useNotifyContext } from "@/providers/notify";
 import { NotifyChannelLark, NotifyChannels } from "@/domain/settings";
 import { useEffect, useState } from "react";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import { getErrMsg } from "@/utils/error";
 import { useToast } from "@/components/ui/use-toast";
 import { useTranslation } from "react-i18next";
@@ -92,7 +92,7 @@ const Lark = () => {
 
   const handleSaveClick = async () => {
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -156,7 +156,7 @@ const Lark = () => {
     setLark(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/notify/NotifyTemplate.tsx

@@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/components/ui/use-toast";
 import { defaultNotifyTemplate, NotifyTemplates, NotifyTemplate as NotifyTemplateT } from "@/domain/settings";
-import { getSetting, update } from "@/repository/settings";
+import { get, save } from "@/repository/settings";
 
 const NotifyTemplate = () => {
   const [id, setId] = useState("");
@@ -17,7 +17,7 @@ const NotifyTemplate = () => {
 
   useEffect(() => {
     const featchData = async () => {
-      const resp = await getSetting("templates");
+      const resp = await get("templates");
 
       if (resp.content) {
         setTemplates((resp.content as NotifyTemplates).notifyTemplates);
@@ -50,7 +50,7 @@ const NotifyTemplate = () => {
   };
 
   const handleSaveClick = async () => {
-    const resp = await update({
+    const resp = await save({
       id: id,
       content: {
         notifyTemplates: templates,

ui/src/components/notify/ServerChan.tsx

@@ -9,7 +9,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { getErrMsg } from "@/utils/error";
 import { isValidURL } from "@/utils/url";
 import { NotifyChannels, NotifyChannelServerChan } from "@/domain/settings";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import { useNotifyContext } from "@/providers/notify";
 import { notifyTest } from "@/api/notify";
 import Show from "@/components/Show";
@@ -103,7 +103,7 @@ const ServerChan = () => {
         return;
       }
 
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -167,7 +167,7 @@ const ServerChan = () => {
     setServerChan(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/notify/Telegram.tsx

@@ -8,7 +8,7 @@ import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/ui/use-toast";
 import { getErrMsg } from "@/utils/error";
 import { NotifyChannels, NotifyChannelTelegram } from "@/domain/settings";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import { useNotifyContext } from "@/providers/notify";
 import { notifyTest } from "@/api/notify";
 import Show from "@/components/Show";
@@ -96,7 +96,7 @@ const Telegram = () => {
 
   const handleSaveClick = async () => {
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -160,7 +160,7 @@ const Telegram = () => {
     setTelegram(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/notify/Webhook.tsx

@@ -9,7 +9,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { getErrMsg } from "@/utils/error";
 import { isValidURL } from "@/utils/url";
 import { NotifyChannels, NotifyChannelWebhook } from "@/domain/settings";
-import { update } from "@/repository/settings";
+import { save } from "@/repository/settings";
 import { useNotifyContext } from "@/providers/notify";
 import { notifyTest } from "@/api/notify";
 import Show from "@/components/Show";
@@ -103,7 +103,7 @@ const Webhook = () => {
         return;
       }
 
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {
@@ -167,7 +167,7 @@ const Webhook = () => {
     setWebhook(newData);
 
     try {
-      const resp = await update({
+      const resp = await save({
         ...config,
         name: "notifyChannels",
         content: {

ui/src/components/workflow/ApplyForm.tsx

@@ -1,5 +1,4 @@
-import { memo } from "react";
-
+import { memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import z from "zod";
@@ -16,8 +15,7 @@ import EmailsEdit from "@/components/certimate/EmailsEdit";
 import StringList from "@/components/certimate/StringList";
 
 import { accessProvidersMap } from "@/domain/access";
-import { EmailsSetting } from "@/domain/settings";
-
+import { useContactStore } from "@/stores/contact";
 import { useConfigContext } from "@/providers/config";
 import { Switch } from "@/components/ui/switch";
 import { TooltipFast } from "@/components/ui/tooltip";
@@ -36,8 +34,13 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
   const { updateNode } = useWorkflowStore(useShallow(selectState));
 
   const {
-    config: { accesses, emails },
+    config: { accesses },
   } = useConfigContext();
+  const { emails, fetchEmails } = useContactStore();
+
+  useEffect(() => {
+    fetchEmails();
+  }, []);
 
   const { t } = useTranslation();
 
@@ -141,7 +144,7 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
                     <SelectContent>
                       <SelectGroup>
                         <SelectLabel>{t("domain.application.form.email.list")}</SelectLabel>
-                        {(emails.content as EmailsSetting).emails.map((item) => (
+                        {emails.map((item) => (
                           <SelectItem key={item} value={item}>
                             <div>{item}</div>
                           </SelectItem>