fix(web): add nextjs env viriable & fix next build errors(#517)

* feat: function deploy

* feat: add file upload

* update: edit bucket modal

* refactor: react query best practice

* fix: add nextjs env viriable & fix next build errors

web/.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_SERVER=http://localhost:3000
+NEXT_PUBLIC_LOGIN_PATH=http://localhost:3000/v1/login

web/components/FileUplaod/index.tsx

@@ -1,4 +1,4 @@
-import React, { DragEventHandler, ReactEventHandler } from "react";
+import React from "react";
 import clsx from "clsx";
 
 import styles from "./index.module.scss";
@@ -57,6 +57,7 @@ function FileUpload(props: { onUpload: (files: any) => void }) {
         type="file"
         className={styles.inputFileUpload}
         multiple={true}
+        // @ts-ignore
         webkitdirectory
         onChange={handleChange}
       />

web/components/SectionList/index.module.scss

@@ -15,7 +15,9 @@
     &:hover,
     &.active {
       background-color: var(--chakra-colors-gray-100);
-      color: #000 !important;
+      span {
+        color: #000 !important;
+      }
     }
 
     &.active {

web/hooks/useOss.ts

@@ -0,0 +1,32 @@
+import AWS from "aws-sdk";
+import useGlobalStore from "pages/globalStore";
+type Credentials = {
+  accessKeyId: string;
+  secretAccessKey: string;
+  sessionToken: string;
+};
+
+const useOss = (credentials: Credentials) => {
+  const { currentApp } = useGlobalStore();
+  const region = "us-east-1";
+  const endpoint = `http://${currentApp.name}.oss-${region}.com`;
+
+  AWS.config.update({
+    accessKeyId: "YOUR_ACCESS_KEY_HERE",
+    secretAccessKey: "YOUR_SECRET_ACCESS_KEY_HERE",
+  });
+
+  const myBucket = new AWS.S3({
+    accessKeyId: credentials.accessKeyId,
+    secretAccessKey: credentials.secretAccessKey,
+    sessionToken: credentials.sessionToken,
+    endpoint: endpoint,
+    s3ForcePathStyle: true,
+    signatureVersion: "v4",
+    region,
+  });
+
+  return myBucket;
+};
+
+export default useOss;

web/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev -p 3001",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 3001",
     "lint": "next lint"
   },
   "dependencies": {
@@ -19,6 +19,7 @@
     "@lingui/react": "^3.15.0",
     "@monaco-editor/react": "^4.4.6",
     "@tanstack/react-query": "^4.19.1",
+    "aws-sdk": "^2.1272.0",
     "axios": "^1.2.1",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",

web/pages/app/[app_id]/database/CollectionDataList/mods/DataPannel/index.tsx

@@ -18,9 +18,9 @@ export default function DataPannel() {
   const [currentData, setCurrentData] = useState<any>(null);
   return (
     <>
-      <div className="flex justify-end pb-2 shadow-sm">
-        <Button colorScheme={"blue"} size="sm" onClick={() => {}}>
-          <AddIcon color="white" />
+      <div className="flex pb-2 mt-2 shadow-sm">
+        <Button colorScheme={"primary"} size="sm" onClick={() => {}}>
+          <AddIcon color="white" className="mr-2" />
           新增记录
         </Button>
       </div>

web/pages/app/[app_id]/database/CollectionDataList/mods/IndexPannel/index.tsx

@@ -1,12 +1,12 @@
 import { Button, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
 
-import AddIndexMoale from "./addIndexModal";
+import AddIndexModal from "./addIndexModal";
 
 export default function IndexPannel() {
   return (
     <div>
       <div className="flex mt-2">
-        <AddIndexMoale />
+        <AddIndexModal />
       </div>
       <div className="rounded border border-slate-200 mt-4 ">
         <TableContainer>

web/pages/app/[app_id]/database/service.ts

@@ -81,3 +81,8 @@ export const useDeleteDBMutation = (config?: { onSuccess: (data: any) => void })
     },
   );
 };
+
+const server = () => {
+  return null;
+};
+export default server;

web/pages/app/[app_id]/functions/mods/DependecePanel/service.ts

@@ -26,3 +26,9 @@ export const useAddPackageMutation = (callback?: () => void) => {
     },
   );
 };
+
+const server = () => {
+  return null;
+};
+
+export default server;

web/pages/app/[app_id]/functions/service.ts

@@ -84,3 +84,8 @@ export const useDeleteFunctionMutation = () => {
     },
   );
 };
+
+const server = () => {
+  return null;
+};
+export default server;

web/pages/app/[app_id]/storages/service.ts

@@ -95,3 +95,8 @@ export const useFileListQuery = () => {
     {},
   );
 };
+
+const server = () => {
+  return null;
+};
+export default server;

web/pages/index.tsx

@@ -101,15 +101,7 @@ function HomePage() {
                   className="flex justify-between items-center p-4 py-6 bg-white rounded-lg shadow mb-6 hover:bg-slate-100"
                 >
                   <div style={{ width: 300 }}>
-                    <Link
-                      onClick={(event) => {
-                        event?.preventDefault();
-                        setCurrentApp(item?.appid);
-                        router.push(`/app/${item?.appid}`);
-                      }}
-                    >
-                      <span className="text-lg font-semibold ">{item?.name}</span>
-                    </Link>
+                    <span className="text-lg font-semibold ">{item?.name}</span>
 
                     <p className="mt-1">
                       App ID: {item?.appid} <CopyText text={item?.appid} />