Merge pull request #117 from indexnetwork/fix

new index page
indexnetwork · May 22, 2024 · 8f58578 · 8f58578
2 parents c1f78cd + 6270c39
commit 8f58578
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 20 deletions.
diff --git a/web-app/src/app/new/page.tsx b/web-app/src/app/new/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import CreateModal from "@/components/site/modal/CreateModal";
+import type { NextPage } from "next";
+import "../[id]/app.css";
+import { useApp } from "@/context/AppContext";
+import ConfirmTransaction from "@/components/site/modal/Common/ConfirmTransaction";
+
+const Home: NextPage = () => {
+  const {
+    handleCreatePublic,
+    transactionApprovalWaiting,
+    handleTransactionCancel,
+  } = useApp();
+  return (
+    <div id="newindex">
+      {transactionApprovalWaiting && (
+        <ConfirmTransaction
+          backdropClose={false}
+          handleCancel={handleTransactionCancel}
+          visible={transactionApprovalWaiting}
+        />
+      )}
+      <CreateModal
+        cancelVisible={false}
+        visible={true}
+        onCreate={handleCreatePublic}
+      />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/web-app/src/components/base/Modal/index.tsx b/web-app/src/components/base/Modal/index.tsx
@@ -18,6 +18,7 @@ export interface ModalProps {
   size?: "fit" | InputSizeType;
   mobileBackdropClose?: boolean;
   onClose?(): void;
+  backdropClose?: boolean;
 }
 
 interface GlobalStyleProps {
@@ -42,6 +43,7 @@ const Modal = ({
   size = "fit",
   mobileMaxVh = 70,
   onClose,
+  backdropClose = false,
 }: ModalProps) => {
   const [portal, setPortal] = useState<HTMLDivElement | null>(null);
 
@@ -116,6 +118,10 @@ const Modal = ({
     if (isMobile && !mobileBackdropClose) {
       return;
     }
+
+    if (!backdropClose) {
+      return;
+    }
     handleClose();
   };
 

diff --git a/web-app/src/components/layout/site/DiscoveryLayout/index.tsx b/web-app/src/components/layout/site/DiscoveryLayout/index.tsx
@@ -73,6 +73,7 @@ const DiscoveryLayout = ({ children }: DiscoveryLayoutProps) => {
       )}
       {transactionApprovalWaiting && (
         <ConfirmTransaction
+          backdropClose={false}
           handleCancel={handleTransactionCancel}
           visible={transactionApprovalWaiting}
         />

diff --git a/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx b/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx
@@ -4,7 +4,11 @@ import Row from "components/layout/base/Grid/Row";
 import Header from "components/base/Header";
 import Flex from "components/layout/base/Grid/Flex";
 
-const ConfirmTransaction = ({ handleCancel, ...modalProps }: any) => {
+const ConfirmTransaction = ({
+  handleCancel,
+  backdropClose,
+  ...modalProps
+}: any) => {
   const handleClose = () => {
     modalProps.onClose?.();
   };
@@ -13,6 +17,7 @@ const ConfirmTransaction = ({ handleCancel, ...modalProps }: any) => {
       {...modalProps}
       size={"fit"}
       destroyOnClose
+      backdropClose={backdropClose}
       body={
         <>
           <Row></Row>

diff --git a/web-app/src/components/site/modal/CreateModal/index.tsx b/web-app/src/components/site/modal/CreateModal/index.tsx
@@ -11,9 +11,14 @@ import React, { useState } from "react";
 export interface CreateModalProps
   extends Omit<ModalProps, "header" | "footer" | "body"> {
   onCreate: (title: string) => void;
+  cancelVisible?: boolean;
 }
 
-const CreateModal = ({ onCreate, ...modalProps }: CreateModalProps) => {
+const CreateModal = ({
+  onCreate,
+  cancelVisible = true,
+  ...modalProps
+}: CreateModalProps) => {
   const handleClose = () => {
     modalProps.onClose?.();
   };
@@ -62,16 +67,18 @@ const CreateModal = ({ onCreate, ...modalProps }: CreateModalProps) => {
       header={<Header level={2}>Create New Index</Header>}
       footer={
         <>
-          <Col pullLeft>
-            <Button
-              size="lg"
-              className="mt-7 pl-8 pr-8"
-              theme="clear"
-              onClick={handleClose}
-            >
-              Cancel
-            </Button>
-          </Col>
+          {cancelVisible && (
+            <Col pullLeft>
+              <Button
+                size="lg"
+                className="mt-7 pl-8 pr-8"
+                theme="clear"
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+            </Col>
+          )}
           <Col pullRight>
             <Button
               disabled={!title}

diff --git a/web-app/src/context/AppContext.tsx b/web-app/src/context/AppContext.tsx
@@ -18,6 +18,7 @@ import { AccessControlCondition, Indexes, Users } from "types/entity";
 import { DEFAULT_CREATE_INDEX_TITLE } from "utils/constants";
 import { v4 as uuidv4 } from "uuid";
 import { CancelTokenSource } from "axios";
+import { DIDSession } from "did-session";
 
 type AppContextProviderProps = {
   children: ReactNode;
@@ -74,6 +75,7 @@ export interface AppContextValue {
     },
   ) => Promise<void>;
   handleCreate: (title: string) => Promise<void>;
+  handleCreatePublic: (title: string) => Promise<void>;
   handleTransactionCancel: () => void;
   chatID: string | undefined;
   transactionApprovalWaiting: boolean;
@@ -151,7 +153,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
       },
     ): Promise<any> => {
       try {
-        if (!apiReady || !isIndex) return;
+        if (!apiReady || !isIndex || !indexId) return;
         // if (viewedIndex?.id === id) return;
         if (isFetchingRef.current) return;
 
@@ -229,6 +231,39 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
     [apiReady, router],
   );
 
+  const handleCreatePublic = useCallback(
+    async (title: string = DEFAULT_CREATE_INDEX_TITLE) => {
+      setTransactionApprovalWaiting(true);
+      try {
+        if (!apiReady) return;
+
+        api?.setSessionToken(
+          "eyJzZXNzaW9uS2V5U2VlZCI6ImhyVU8yaDJHQi8wUjEwYXcyWDBzSjNrZy9ra0tubkduYVpKcG1INVN1U3M9IiwiY2FjYW8iOnsiaCI6eyJ0IjoiZWlwNDM2MSJ9LCJwIjp7ImRvbWFpbiI6ImxvY2FsaG9zdDozMDAwIiwiaWF0IjoiMjAyNC0wNS0wOVQxMjowMTowOC4wMjhaIiwiaXNzIjoiZGlkOnBraDplaXAxNTU6MToweDBENzNjNzI2NzZENzI1MGVlQWUxYTNhMzVjZkIyZjM2MUZDMENjRjciLCJhdWQiOiJkaWQ6a2V5Ono2TWtudERvZDRkYXg3dnlhOTJ1WEE0R3FOMjhTR05LODZVTkZ2UGdqM1E2eHJCOCIsInZlcnNpb24iOiIxIiwibm9uY2UiOiJkcU5EN0xoZDZMIiwiZXhwIjoiMjAyNC0wNi0wM1QxMjowMTowOC4wMjhaIiwic3RhdGVtZW50IjoiR2l2ZSB0aGlzIGFwcGxpY2F0aW9uIGFjY2VzcyB0byBzb21lIG9mIHlvdXIgZGF0YSBvbiBDZXJhbWljIiwicmVzb3VyY2VzIjpbImNlcmFtaWM6Ly8qIl19LCJzIjp7InQiOiJlaXAxOTEiLCJzIjoiMHg5OWE1MmM5OWFiNzA0YjM1MzdiMzQyYzVjNDM0MWFkMjcwZTk0ZGZjODZkYTJhYTBiOWQ0NjIxNTczOTE2MGEzMDk0YmU5YTEyY2NmZjZmYmM5OTY5YzkxMWU3NTE3MTBhNTVmMDQ0MTIzMGIwM2NkNjIwZjhlZDZiNjc1NTQwNDFjIn19fQ",
+        );
+        const doc = await api!.createIndex(title);
+        if (!doc) {
+          throw new Error("API didn't return a doc");
+        }
+        setIndexes((prevIndexes) => [doc, ...prevIndexes]);
+        toast.success("Index created successfully");
+        router.push(`/${doc.id}`);
+      } catch (err: any) {
+        let message = "";
+        if (err?.code === -32603) {
+          message = ": Not enough balance";
+        }
+        if (err?.code === "ACTION_REJECTED") {
+          message = ": Action rejected";
+        }
+        console.error("Couldn't create index", err);
+        toast.error(`Couldn't create index${message}`);
+      } finally {
+        setTransactionApprovalWaiting(false);
+      }
+    },
+    [apiReady, router],
+  );
+
   const updateIndex = useCallback(
     (index: Indexes) => {
       const updatedIndexes = indexes.map((i) => {
@@ -383,6 +418,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
     chatID,
     transactionApprovalWaiting,
     createConditions,
+    handleCreatePublic,
   };
 
   return (

diff --git a/web-app/src/hooks/useRouteParams.ts b/web-app/src/hooks/useRouteParams.ts
@@ -4,21 +4,24 @@ import { useMemo } from "react";
 
 export const useRouteParams = () => {
   const params = useParams();
-  const id = decodeURIComponent(params.id as string);
-
   const path = usePathname();
+
+  const id = params.id ? decodeURIComponent(params.id as string) : undefined;
+
   const isLanding = useMemo(() => path === "/", [path]);
 
-  const discoveryType = useMemo(
-    () => (id.includes("did:") ? DiscoveryType.DID : DiscoveryType.INDEX),
-    [id],
-  );
+  const discoveryType = useMemo(() => {
+    return id
+      ? id.includes("did:")
+        ? DiscoveryType.DID
+        : DiscoveryType.INDEX
+      : undefined;
+  }, [id]);
 
   const isDID = useMemo(
     () => discoveryType === DiscoveryType.DID,
     [discoveryType],
   );
-
   const isIndex = useMemo(
     () => discoveryType === DiscoveryType.INDEX,
     [discoveryType],

diff --git a/web-app/src/services/api-service-new.ts b/web-app/src/services/api-service-new.ts
@@ -73,6 +73,10 @@ class ApiService {
     this.apiAxios.defaults.headers.Authorization = `Bearer ${session.serialize()}`;
   }
 
+  public setSessionToken(token: string) {
+    this.apiAxios.defaults.headers.Authorization = `Bearer ${token}`;
+  }
+
   public getSession() {
     return this.session;
   }