From ab9e1b9e5477ac887007e692e3b398f3f8a1ea49 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 12 Jul 2022 17:48:28 +0800
Subject: [PATCH] feat: get license

---
 .vscode/settings.json          |  4 ++
 src/app/services/server.ts     | 10 ++++-
 src/common/hook/useLicense.ts  | 20 ++++-----
 src/routes/setting/License.tsx | 79 +++++++++++++++++++++++++++++++---
 src/types/server.ts            |  4 +-
 5 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7a121e2b..59537987 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  "todohighlight.isCaseSensitive": false,
   "css.validate": false,
   "editor.quickSuggestions": {
     "other": true,
@@ -40,6 +41,9 @@
     "tippyjs",
     "toastui",
     "uiball",
+    "upsert",
+    "upserted",
+    "upserting",
     "vocechat"
   ],
   "reactSnippets.settings.prettierEnabled": true,
diff --git a/src/app/services/server.ts b/src/app/services/server.ts
index 65300e33..5748933e 100644
--- a/src/app/services/server.ts
+++ b/src/app/services/server.ts
@@ -194,6 +194,11 @@ export const serverApi = createApi({
         url: `/admin/system/initialized`
       })
     }),
+    getLicense: builder.query<LicenseResponse, void>({
+      query: () => ({
+        url: `/license`
+      })
+    }),
 
     checkLicense: builder.mutation<LicenseResponse, string>({
       query: (license) => ({
@@ -205,7 +210,7 @@ export const serverApi = createApi({
     upsertLicense: builder.mutation<boolean, string>({
       query: (license) => ({
         url: "/license/save",
-        method: "POST",
+        method: "PUT",
         body: { license }
       })
     })
@@ -241,5 +246,6 @@ export const {
   useCreateAdminMutation,
   useGetInitializedQuery,
   useUpsertLicenseMutation,
-  useCheckLicenseMutation
+  useCheckLicenseMutation,
+  useGetLicenseQuery
 } = serverApi;
diff --git a/src/common/hook/useLicense.ts b/src/common/hook/useLicense.ts
index 1b03ea1b..07a9c096 100644
--- a/src/common/hook/useLicense.ts
+++ b/src/common/hook/useLicense.ts
@@ -1,8 +1,13 @@
-import { useEffect } from "react";
-import { useCheckLicenseMutation, useUpsertLicenseMutation } from "../../app/services/server";
+// import { useEffect } from "react";
+import {
+  useCheckLicenseMutation,
+  useGetLicenseQuery,
+  useUpsertLicenseMutation
+} from "../../app/services/server";
 
-const useLicense = (license?: string) => {
-  const [check, { data, isLoading: isChecking, isSuccess: checked }] = useCheckLicenseMutation();
+const useLicense = () => {
+  const { data: license } = useGetLicenseQuery();
+  const [check, { isLoading: isChecking, isSuccess: checked }] = useCheckLicenseMutation();
   const [upsert, { isSuccess: upserted, isLoading: upserting }] = useUpsertLicenseMutation();
   const checkLicense = (l: string) => {
     check(l);
@@ -16,14 +21,9 @@ const useLicense = (license?: string) => {
       return false;
     }
   };
-  useEffect(() => {
-    if (license) {
-      checkLicense(license);
-    }
-  }, [license]);
 
   return {
-    validInfo: data,
+    license,
     checked,
     checking: isChecking,
     upserting,
diff --git a/src/routes/setting/License.tsx b/src/routes/setting/License.tsx
index d3e30bc5..879786e7 100644
--- a/src/routes/setting/License.tsx
+++ b/src/routes/setting/License.tsx
@@ -1,4 +1,5 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState, useEffect } from "react";
+import dayjs from "dayjs";
 import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import toast from "react-hot-toast";
@@ -28,6 +29,34 @@ const StyledConfirm = styled.div`
     gap: 14px;
   }
 `;
+const StyledInfo = styled.div`
+  padding: 12px;
+  border-radius: 5px;
+  border: 2px solid #557d2340;
+  background-color: #d1fadf60;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  .item {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    line-height: 1.2;
+    .label {
+      font-size: 13px;
+      color: #aaa;
+      &:after {
+        content: ":";
+      }
+    }
+    .info {
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+`;
 const Styled = styled.div`
   max-width: 500px;
   display: flex;
@@ -45,7 +74,7 @@ const Styled = styled.div`
 `;
 
 export default function License() {
-  const { checking, upserting, upsertLicense } = useLicense();
+  const { license: licenseInfo, checking, upserting, upsertLicense } = useLicense();
   const [license, setLicense] = useState("");
   const handleUpsert = async () => {
     if (!license) {
@@ -64,12 +93,52 @@ export default function License() {
   const handleLicenseInput = (evt: ChangeEvent<HTMLTextAreaElement>) => {
     setLicense(evt.target.value);
   };
+  useEffect(() => {
+    if (licenseInfo?.base58) {
+      setLicense(licenseInfo.base58);
+    }
+  }, [licenseInfo]);
+
+  const disableBtn = checking || upserting || !license || license === licenseInfo?.base58;
+  console.log("ddd", licenseInfo);
 
-  const disableBtn = checking || upserting || !license;
   return (
     <Styled>
       <div className="input">
-        <Textarea rows={10} id="license" value={license} onChange={handleLicenseInput} />
+        <Tippy
+          placement="right-start"
+          visible={!!licenseInfo}
+          content={
+            <StyledInfo>
+              <div className="item">
+                <span className="label">Signed</span>
+                <span className="info">{licenseInfo?.sign ? "Yes" : "Not Yet"}</span>
+              </div>
+              <div className="item">
+                <span className="label">Domains</span>
+                <span className="info"> {licenseInfo?.domains.join(",")}</span>
+              </div>
+              <div className="item">
+                <span className="label">User Limit</span>
+                <span className="info"> {licenseInfo?.user_limit}</span>
+              </div>
+              <div className="item">
+                <span className="label">Expired At</span>
+                <span className="info">
+                  {dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")}
+                </span>
+              </div>
+              <div className="item">
+                <span className="label">Created At</span>
+                <span className="info">
+                  {dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")}
+                </span>
+              </div>
+            </StyledInfo>
+          }
+        >
+          <Textarea rows={15} id="license" value={license} onChange={handleLicenseInput} />
+        </Tippy>
       </div>
       <Tippy
         interactive
@@ -89,7 +158,7 @@ export default function License() {
           </StyledConfirm>
         }
       >
-        <Button disabled={disableBtn}>Save License</Button>
+        <Button disabled={disableBtn}>Update License</Button>
       </Tippy>
     </Styled>
   );
diff --git a/src/types/server.ts b/src/types/server.ts
index ee9ad230..e01a15c9 100644
--- a/src/types/server.ts
+++ b/src/types/server.ts
@@ -59,10 +59,12 @@ export interface LoginConfig {
   third_party: boolean;
 }
 export interface LicenseResponse {
-  domain: string;
+  domains: string[];
   created_at: string;
   expired_at: string;
   sign: boolean;
+  base58: string;
+  user_limit: number;
 }
 export interface CreateAdminDTO extends Pick<User, "email" | "name" | "gender"> {
   password: string;