add endpoint operations

app/api/endpoint/list/route.ts

@@ -6,5 +6,5 @@ import { list } from "../../../../lib/googlesheets";
 export async function POST(req: NextRequest) {
   const ret = await list();
 
-  return NextResponse.json({ list: ret });
+  return NextResponse.json({ success: true, data: ret });
 }

app/page.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import CodeEditor from "@uiw/react-textarea-code-editor";
 import { Triangle } from "react-loader-spinner";
+import {EndpointList} from "../components/endpoint"
 
 export default function Home() {
   const [loading, setLoading] = useState(false);
+  const [endpoints, setEndpoints] = useState([]);
   const [formData, setFormData] = useState({
     typeName: "ShareOrNot",
     schema:
@@ -14,6 +16,17 @@ export default function Home() {
     prompt: "https://github.com/shengxia/RWKV_Role_Playing_API 一个基于Flask实现的RWKV角色扮演API",
   });
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch("/api/endpoint/list", {
+        method: "POST",
+      });
+      const rsp = await response.json();
+      setEndpoints(rsp.data);
+    };
+    fetchData();
+  }, []);
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = event.target;
     setFormData((prevState) => ({ ...prevState, [name]: value }));
@@ -33,6 +46,26 @@ export default function Home() {
     setLoading(false);
   };
 
+  const onAddEndpoint = async () => {
+    setLoading(true);
+    const response = await fetch("/api/endpoint/add", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    });
+    let list = [...endpoints];
+    list.push(formData);
+    setEndpoints(list);
+    setLoading(false);
+  };
+
+  const onClickEndpoint = async (endpoint) => {
+    setFormData({...formData, typeName: endpoint.typeName, schema: endpoint.schema});
+  };
+
+
   return (
     <>
       {loading && (
@@ -124,6 +157,15 @@ export default function Home() {
                   {loading ? "Translating（转换中）" : "Translate (转换)"}
                 </button>
               </div>
+
+              <div>
+                <button
+                  className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  onClick={onAddEndpoint}
+                >
+                  Add TO Endpoint
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -149,6 +191,7 @@ export default function Home() {
           </div>
         </div>
       </main>
+      <EndpointList endpoints={endpoints} onClickEndpoint={onClickEndpoint}/>
     </>
   );
 }

components/endpoint.tsx

@@ -0,0 +1,31 @@
+import CodeEditor from "@uiw/react-textarea-code-editor";
+
+export function EndpointList(props) {
+  const { endpoints, onClickEndpoint } = props;
+  return (
+    <div className="p-2">
+      Endpoints:
+      <div className="flex flex-row">
+        {endpoints.map((endpoint, index) => (
+          <div className="max-w-sm rounded overflow-hidden shadow-lg hover:bg-gray-100" key={index} onClick={()=>onClickEndpoint(endpoint)}>
+            <div className="px-6 py-4">
+              <div className="font-bold text-xl mb-2">{endpoint.typeName}</div>
+              <div className="mt-2">
+                <CodeEditor
+                  name="schema"
+                  value={endpoint.schema || ""}
+                  language="typescript"
+                  padding={15}
+                  style={{
+                    fontSize: 12,
+                    fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

lib/googlesheets.ts

@@ -1,17 +1,12 @@
 import { google } from "googleapis";
 
-const sheets = google.sheets("v4");
-
-const client = async function() {
-  const auth = await google.auth.getClient({
-    scopes: ["https://www.googleapis.com/auth/spreadsheets"],
-    credentials: {
-      client_email: process.env.GOOGLE_CLIENT_EMAIL,
-      private_key: process.env.GOOGLE_PRIVATE_KEY,
-    },
-  });
-  return auth;
-}
+const target = ["https://www.googleapis.com/auth/spreadsheets"];
+const jwt = new google.auth.JWT({
+  email: process.env.GOOGLE_CLIENT_EMAIL,
+  key: (process.env.GOOGLE_PRIVATE_KEY || "").replace(/\\n/g, "\n"),
+  scopes: target,
+});
+const sheets = google.sheets({ version: "v4", auth: jwt });
 
 export interface Endpoint {
   id: string;
@@ -21,11 +16,9 @@ export interface Endpoint {
 }
 
 export async function list() {
-  const auth = await client();
   const response = await sheets.spreadsheets.values.get({
     spreadsheetId: process.env.SHEET_ID,
     range: "endpoints",
-    auth,
   });
 
   let ret: Endpoint[] = [];
@@ -42,12 +35,10 @@ export async function list() {
 }
 
 export async function add(record: Endpoint) {
-  const auth = await client();
   const { id, typeName, schema, input } = record;
   const response = await sheets.spreadsheets.values.append({
     spreadsheetId: process.env.SHEET_ID,
     range: "endpoints",
-    auth,
     valueInputOption: "RAW",
     requestBody: {
       values: [[id, typeName, schema, input]],
@@ -57,11 +48,9 @@ export async function add(record: Endpoint) {
 }
 
 export async function get(id: string) {
-  const auth = await client();
   const response = await sheets.spreadsheets.values.get({
     spreadsheetId: process.env.SHEET_ID,
     range: "endpoints",
-    auth,
   });
 
   let ret: Endpoint[] = [];