chore: fixs,updates,refactors etc

src/routes/setting/APIConfig.js

@@ -1,54 +1,107 @@
-// import React from "react";
-import styled from "styled-components";
+import { useEffect } from 'react';
+import styled from 'styled-components';
+import { hideAll } from 'tippy.js';
+const StyledConfirm = styled.div`
+ padding: 12px;
+ border-radius: 10px;
+ border: 1px solid orange;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 250px;
+ .tip {
+  /* word-break: break-all; */
+  color: orange;
+  font-size: 12px;
+  line-height: 1.5;
+ }
+ .btns {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  gap: 14px;
+ }
+`;
 const Styled = styled.div`
-  max-width: 500px;
+ max-width: 500px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 15px;
+ > .input {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: flex-start;
-  gap: 15px;
-  .input {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    label {
-      white-space: nowrap;
-      font-size: 14px;
-      color: #555;
-    }
-  }
-  .tip {
-    font-size: 12px;
-    color: #999;
-    line-height: 1.5;
+  gap: 8px;
+  label {
+   white-space: nowrap;
+   font-size: 14px;
+   color: #555;
   }
+ }
+ > .tip {
+  font-size: 12px;
+  color: #999;
+  line-height: 1.5;
+ }
 `;
-import Input from "../../common/component/styled/Input";
-import Button from "../../common/component/styled/Button";
+import Input from '../../common/component/styled/Input';
+import Button from '../../common/component/styled/Button';
 import {
-  useGetThirdPartySecretQuery,
-  useUpdateThirdPartySecretMutation,
-} from "../../app/services/server";
+ useGetThirdPartySecretQuery,
+ useUpdateThirdPartySecretMutation
+} from '../../app/services/server';
+import Tippy from '@tippyjs/react';
+import toast from 'react-hot-toast';
 export default function APIConfig() {
-  const { data } = useGetThirdPartySecretQuery();
-  const [
-    updateSecret,
-    { data: updatedSecret },
-  ] = useUpdateThirdPartySecretMutation();
-  console.log("secret", data);
-  return (
-    <Styled>
-      <div className="input">
-        <label htmlFor="secret">API Secure Key:</label>
-        <Input type="password" id="secret" value={updatedSecret || data} />
-      </div>
-      <Button onClick={updateSecret}>Update Secret</Button>
+ const { data } = useGetThirdPartySecretQuery();
+ const [updateSecret, { data: updatedSecret, isSuccess, isLoading }] =
+  useUpdateThirdPartySecretMutation();
+ console.log('secret', data);
+ useEffect(() => {
+  if (isSuccess) {
+   hideAll();
+   toast.success('Update API Secret Successfully!');
+  }
+ }, [isSuccess]);
+
+ return (
+  <Styled>
+   <div className="input">
+    <label htmlFor="secret">API Secure Key:</label>
+    <Input type="password" id="secret" value={updatedSecret || data} />
+   </div>
+   <Tippy
+    delay={[0, 0]}
+    duration={0}
+    interactive
+    placement="right-start"
+    trigger="click"
+    content={
+     <StyledConfirm>
       <div className="tip">
-        Tip: The security key agreed between the rustchat server and the
-        third-party app is used to encrypt the communication data.{" "}
+       Are you sure to update API secret? Previous secret will be invalided
       </div>
-    </Styled>
-  );
+      <div className="btns">
+       <Button onClick={hideAll} className="cancel small">
+        Cancel
+       </Button>
+       <Button disabled={isLoading} className="small danger" onClick={updateSecret}>
+        Yes
+       </Button>
+      </div>
+     </StyledConfirm>
+    }
+   >
+    <Button>Update Secret</Button>
+   </Tippy>
+   <div className="tip">
+    Tip: The security key agreed between the rustchat server and the third-party app is used to
+    encrypt the communication data.{' '}
+   </div>
+  </Styled>
+ );
 }