Merge pull request #81 from indexnetwork/fix

Fix
indexnetwork · Apr 17, 2024 · 8a2d2a3 · 8a2d2a3
2 parents 7b6a73d + c73696c
commit 8a2d2a3
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 87 deletions.
diff --git a/api/src/types/fragments.js b/api/src/types/fragments.js
@@ -15,6 +15,7 @@ export const didIndexFragment = `
 export const profileFragment = `
   ... on Profile {
     id
+    bio
     name
     avatar
     createdAt
@@ -116,7 +117,7 @@ export const teamFragment = `
           updatedAt
       }
   }
-`
+`;
 
 export const modelBundleFragment = `
   id
@@ -208,7 +209,6 @@ export const modelBundleFragment = `
   }
 `;
 
-
 export const indexItemFragment = `
   ... on IndexItem {
     id
@@ -232,4 +232,4 @@ export const indexItemFragment = `
       deletedAt
     }
   }
-`
+`;
diff --git a/web-app/package.json b/web-app/package.json
@@ -35,6 +35,7 @@
     "@reduxjs/toolkit": "^1.8.2",
     "@self.id/web": "^0.5.0",
     "@stablelib/random": "^1.0.1",
+    "@types/react-infinite-scroll-component": "^5.0.0",
     "add": "^2.0.6",
     "ai": "^2.1.19",
     "axios": "^1.6.2",
@@ -65,7 +66,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-images-uploading": "^3.1.7",
-    "react-infinite-scroller": "^1.2.6",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-intersection-observer": "^9.5.2",
     "react-lazyload": "^3.2.0",
     "react-lottie-player": "^1.4.3",

diff --git a/web-app/src/app/[id]/page.tsx b/web-app/src/app/[id]/page.tsx
@@ -8,17 +8,12 @@ import UserConversationSection from "components/sections/UserConversation";
 import { useRouteParams } from "hooks/useRouteParams";
 import { useEffect } from "react";
 import "../../styles/main.scss";
-import { useRouter } from "next/navigation";
 
 const Discovery = () => {
   const { discoveryType, indexes } = useApp();
   const { id } = useRouteParams();
-  const router = useRouter();
 
   useEffect(() => {
-    console.log("discoveryType in page.tsx:", discoveryType, id);
-    console.log("indexes in page.tsx:", indexes);
-
     // if (typeof window !== "undefined") {
     //   window.ethereum.on("message", (message: any) => {
     //     console.log("eth: ", message);

diff --git a/web-app/src/components/ai/no-indexes.tsx b/web-app/src/components/ai/no-indexes.tsx
@@ -14,7 +14,7 @@ export default function NoIndexesChat({ isSelfDid }: { isSelfDid?: boolean }) {
         textAlign: "center",
         flexDirection: "column",
         alignItems: "center",
-        padding: "4rem 0",
+        padding: "8rem 0 0 0",
       }}
     >
       <Image

diff --git a/web-app/src/components/base/SearchInput/index.tsx b/web-app/src/components/base/SearchInput/index.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useState } from "react";
 import debounce from "lodash.debounce";
+import React, { useCallback, useEffect, useState } from "react";
+import IconClose from "../Icon/IconClose";
 import IconSearch from "../Icon/IconSearch";
 import Input, { InputProps } from "../Input";
-import IconClose from "../Icon/IconClose";
 import Spin from "../Spin";
 
 export interface SearchInputProps extends InputProps {
@@ -59,7 +59,15 @@ const SearchInput = ({
     <Input
       {...inputProps}
       inputSize={"lg"}
-      addOnBefore={<IconSearch width={20} height={20} />}
+      addOnBefore={
+        <span
+          style={{
+            marginRight: "6px",
+          }}
+        >
+          <IconSearch width={20} height={20} />
+        </span>
+      }
       addOnAfter={
         loading ? (
           <Spin active={true} thickness="light" theme="secondary" />

diff --git a/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx b/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx
@@ -74,7 +74,7 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
         }
 
         const response = await api!.getItems(viewedIndex.id, itemParams);
-
+        console.log(response.endCursor, "endCursor");
         if (response) {
           setItemsState((prevState) => ({
             items:
@@ -98,7 +98,7 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
   const fetchInitial = useCallback(async () => {
     await fetchIndex();
     fetchIndexItems(true);
-  }, [viewedIndex, fetchIndex, fetchIndexItems]);
+  }, [fetchIndex]);
 
   useEffect(() => {
     fetchInitial();

diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx
@@ -34,7 +34,6 @@ export default function IndexItemsTabSection() {
 
   useEffect(() => {
     if (addedItem) {
-      console.log("addedItem", addedItem, progress);
       setItemsState({
         items: [addedItem, ...itemsState.items],
         cursor: itemsState.cursor,
@@ -174,23 +173,13 @@ export default function IndexItemsTabSection() {
         </FlexRow>
       )}
 
-      <div
-        key={viewedIndex?.id}
-        className={"scrollable-container mb-4 mt-6"}
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          overflowY: "auto",
-          maxHeight: "calc(100vh - 34rem)",
-        }}
-      >
+      <div key={viewedIndex?.id} className={"mb-4 mt-6"}>
         <IndexItemList
           items={itemsState.items}
           search={search}
           hasMore={!!itemsState.cursor}
           removeItem={handleRemove}
-          // loadMore={fetchIndexItems}
-          loadMore={() => {}}
+          loadMore={() => fetchIndexItems(false)}
         />
       </div>
     </Flex>

diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx
@@ -36,10 +36,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
     header = (
       <div>
         <h2>Waiting for transaction</h2>
-        <p>
-          Please wait while the transaction is being processed. This may take a
-          few minutes.
-        </p>
+        <p>Please wait while the transaction is being processed.</p>
       </div>
     );
   } else if (step === "done") {

diff --git a/.../components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx b/.../components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx
@@ -1,4 +1,3 @@
-import Button from "@/components/base/Button";
 import { FC } from "react";
 
 interface WaitingForTransactionProps {
@@ -41,7 +40,7 @@ const WaitingForTransaction: FC<WaitingForTransactionProps> = ({
         </video>
       </div>
 
-      <div
+      {/* <div
         style={{
           display: "flex",
           justifyContent: "space-between",
@@ -65,7 +64,7 @@ const WaitingForTransaction: FC<WaitingForTransactionProps> = ({
         >
           Loading
         </Button>
-      </div>
+      </div> */}
     </div>
   </div>
 );

diff --git a/web-app/src/components/site/index-details/IndexItemList/index.tsx b/web-app/src/components/site/index-details/IndexItemList/index.tsx
@@ -1,10 +1,11 @@
-import React from "react";
 import List from "components/base/List";
-import InfiniteScroll from "react-infinite-scroller";
-import { IndexItem } from "types/entity";
+import { FC, memo } from "react";
 import { useRole } from "hooks/useRole";
-import LinkItem from "../LinkItem";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { IndexItem } from "types/entity";
+
 import NoLinks from "../../indexes/NoLinks";
+import LinkItem from "../LinkItem";
 
 export interface IndexItemListProps {
   search: string;
@@ -14,9 +15,9 @@ export interface IndexItemListProps {
   loadMore: () => void;
 }
 
-const MemoLinkItem = React.memo(LinkItem);
+const MemoLinkItem = memo(LinkItem);
 
-const IndexItemList: React.VFC<IndexItemListProps> = ({
+const IndexItemList: FC<IndexItemListProps> = ({
   search,
   items,
   hasMore,
@@ -31,18 +32,20 @@ const IndexItemList: React.VFC<IndexItemListProps> = ({
         <NoLinks isOwner={isOwner} tabKey="items" search={search} />
       ) : (
         <InfiniteScroll
-          className="scrollable-area idxflex-grow-1 pb-6"
-          useWindow={false}
           hasMore={hasMore}
-          loadMore={loadMore}
-          marginHeight={50}
+          next={loadMore}
+          dataLength={items.length}
+          height={"calc(100vh - 36rem)"}
+          loader={<div className="loader" key={0}></div>}
         >
           <List
             listClass="index-item-list"
             render={(item: IndexItem) => (
               <MemoLinkItem
                 handleRemove={() => removeItem(item)}
-                search={!!search} item={item} />
+                search={!!search}
+                item={item}
+              />
             )}
             divided
             data={items}

diff --git a/web-app/src/components/site/indexes/AskIndexes/index.tsx b/web-app/src/components/site/indexes/AskIndexes/index.tsx
@@ -163,7 +163,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
 
   useEffect(() => {
     scrollToBottom();
-  }, [messages, isLoading]);
+  }, [messages, isLoading, scrollToBottom]);
 
   if (leftSectionIndexes.length === 0) {
     return <NoIndexes tabKey={leftTabKey} />;
@@ -192,6 +192,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
               height: "100%",
               justifyContent: "stretch",
               width: "100%",
+              flexDirection: "column",
             }}
           >
             {messages.length ? (

diff --git a/web-app/src/components/site/input/LinkInput/index.tsx b/web-app/src/components/site/input/LinkInput/index.tsx
@@ -61,7 +61,7 @@ const LinkInput: React.FC<LinkInputProps> = ({
         className={cc(["link-input__input", `link-input-${size}`])}
         disabled={disabled}
         addOnBefore={
-          <IconAdd style={{ marginRight: "4px" }} width={20} height={20} />
+          <IconAdd style={{ marginRight: "6px" }} width={20} height={20} />
         }
         addOnAfter={
           loading ? (

diff --git a/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx b/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx
@@ -1,8 +1,5 @@
-import React from "react";
 import Text from "components/base/Text";
-import Col from "components/layout/base/Grid/Col";
 import Modal from "components/base/Modal";
-import Button from "components/base/Button";
 import Row from "components/layout/base/Grid/Row";
 import Header from "components/base/Header";
 import Flex from "components/layout/base/Grid/Flex";
@@ -19,7 +16,12 @@ const ConfirmTransaction = ({ handleCancel, ...modalProps }: any) => {
       body={
         <>
           <Row></Row>
-          <Flex alignitems="center">
+          <Flex
+            alignitems="center"
+            style={{
+              paddingBottom: "2.4rem",
+            }}
+          >
             <video
               autoPlay
               loop
@@ -40,37 +42,37 @@ const ConfirmTransaction = ({ handleCancel, ...modalProps }: any) => {
         <>
           <Header level={2}>Waiting for network confirmation</Header>
           <Text className={"mt-4"} element={"p"}>
-          Please wait for a few seconds.
+            Please wait for a few seconds.
           </Text>
         </>
       }
-      footer={
-        <>
-          <Row>
-            <Col pullLeft>
-              <Button
-                onClick={handleCancel}
-                className="pl-8 pr-8 "
-                size="lg"
-                theme="clear"
-              >
-                Cancel
-              </Button>
-            </Col>
-            <Col pullRight>
-              <Button
-                theme="primary"
-                size="lg"
-                className="pl-6 pr-6"
-                loading={true}
-                disabled={true}
-              >
-                Loading
-              </Button>
-            </Col>
-          </Row>
-        </>
-      }
+      // footer={
+      //   <>
+      //     <Row>
+      //       <Col pullLeft>
+      //         <Button
+      //           onClick={handleCancel}
+      //           className="pl-8 pr-8 "
+      //           size="lg"
+      //           theme="clear"
+      //         >
+      //           Cancel
+      //         </Button>
+      //       </Col>
+      //       <Col pullRight>
+      //         <Button
+      //           theme="primary"
+      //           size="lg"
+      //           className="pl-6 pr-6"
+      //           loading={true}
+      //           disabled={true}
+      //         >
+      //           Loading
+      //         </Button>
+      //       </Col>
+      //     </Row>
+      //   </>
+      // }
     ></Modal>
   );
 };

diff --git a/web-app/src/context/AppContext.tsx b/web-app/src/context/AppContext.tsx
@@ -147,7 +147,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
       console.error("Error fetching index", error);
       toast.error("Error fetching index, please refresh the page");
     }
-  }, [id, viewedIndex, isIndex, apiReady]);
+  }, [id, viewedIndex, isIndex, apiReady, api]);
 
   const handleTransactionCancel = useCallback(() => {
     setTransactionApprovalWaiting(false);