cleanup

indexnetwork · Feb 6, 2024 · 6288617 · 6288617
1 parent d4edc34
commit 6288617
Show file tree

Hide file tree

Showing 21 changed files with 510 additions and 517 deletions.
diff --git a/web-app/.eslintrc.json b/web-app/.eslintrc.json
@@ -24,6 +24,7 @@
   },
   "rules": {
     "no-console": "off",
+    "implicit-arrow-linebreak": ["beside"],
     "linebreak-style": "off",
     "no-plusplus": "off",
     "no-unused-vars": "off",

diff --git a/web-app/src/app/discovery/[id]/page.tsx b/web-app/src/app/discovery/[id]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import LoadingSection from "@/components/sections/Loading";
+// import LoadingSection from "@/components/sections/Loading";
 import { DiscoveryType, useApp } from "@/context/AppContext";
 import DiscoveryLayout from "components/layout/site/DiscoveryLayout";
 import IndexConversationSection from "components/sections/IndexConversation";
@@ -9,7 +9,7 @@ import { useRouteParams } from "hooks/useRouteParams";
 import { useEffect } from "react";
 
 const Discovery = () => {
-  const { discoveryType, indexes, loading } = useApp();
+  const { discoveryType, indexes } = useApp();
   const { id } = useRouteParams();
 
   useEffect(() => {

diff --git a/web-app/src/components/base/List/index.tsx b/web-app/src/components/base/List/index.tsx
@@ -1,6 +1,4 @@
-import React, {
-  ReactElement, useRef,
-} from "react";
+import { FC, ReactElement, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import cc from "classcat";
 import ListItem from "./ListItem";
@@ -13,7 +11,7 @@ export interface ListProps<T = {}> {
   divided?: boolean;
 }
 
-const List: React.VFC<ListProps> = ({
+const List: FC<ListProps> = ({
   listClass,
   itemContainerClass,
   render,
@@ -23,26 +21,19 @@ const List: React.VFC<ListProps> = ({
   const containerId = useRef<string>(uuidv4());
 
   return (
-    <ul
-      className={
-        cc([
-          "list",
-          listClass || "",
-        ])
-      }>
-      {
-        data && data.map((item, index) => (
+    <ul className={cc(["list", listClass || ""])}>
+      {data &&
+        data.map((item, index) => (
           <ListItem
             key={`listItem${index}-${containerId}`}
-            className={cc([
-              itemContainerClass || "",
-            ])}
+            className={cc([itemContainerClass || ""])}
           >
             {render(item, index)}
-            {divided && index !== data.length - 1 && <div className="list-divider"></div>}
+            {divided && index !== data.length - 1 && (
+              <div className="list-divider"></div>
+            )}
           </ListItem>
-        ))
-      }
+        ))}
     </ul>
   );
 };

diff --git a/web-app/src/components/layout/site/AppHeader/index.tsx b/web-app/src/components/layout/site/AppHeader/index.tsx
@@ -130,7 +130,7 @@ const AppHeader = () => {
                   </Text>
                 </Flex>
               </DropdownMenuItem>
-              <DropdownMenuItem>
+              {/* <DropdownMenuItem>
                 <Flex alignitems="center">
                   <IconSettings width={12} height="100%" />
                   <Text
@@ -142,7 +142,7 @@ const AppHeader = () => {
                     Settings
                   </Text>
                 </Flex>
-              </DropdownMenuItem>
+              </DropdownMenuItem> */}
               <DropdownMenuItem divider />
               <DropdownMenuItem onClick={disconnect}>
                 <Flex alignitems="center">

diff --git a/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx b/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx
@@ -1,12 +1,13 @@
 import { useApi } from "@/context/APIContext";
 import { useApp } from "@/context/AppContext";
+import { useRouteParams } from "@/hooks/useRouteParams";
+import { GetItemQueryParams } from "@/services/api-service-new";
 import { IndexItem } from "@/types/entity";
 import React, {
   createContext,
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState,
 } from "react";
 
@@ -18,12 +19,13 @@ export type IndexItemsState = {
 type IndexConversationContextType = {
   itemsState: IndexItemsState;
   setItemsState: (state: IndexItemsState) => void;
+  fetchIndexItems: (resetCursor?: boolean, params?: GetItemQueryParams) => void;
   loading: boolean;
   setLoading: (loading: boolean) => void;
   error: any;
   addItem: (item: IndexItem) => void;
   removeItem: (itemId: string) => void;
-  loadMoreItems: () => void; // Function to load more items
+  loadMoreItems: () => void;
 };
 
 const IndexConversationContext = createContext<
@@ -40,53 +42,66 @@ export const useIndexConversation = () => {
   return context;
 };
 
-export const IndexConversationProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export const IndexConversationProvider = ({ children }: { children: any }) => {
   const [itemsState, setItemsState] = useState<IndexItemsState>({
     items: [],
     cursor: undefined,
   });
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<any>(null);
-  const lastFetchedIndexId = useRef<string | undefined>(undefined);
 
   const { apiService: api } = useApi();
-  const { viewedIndex } = useApp();
-
-  const fetchIndexItems = useCallback(async () => {
-    if (
-      !api ||
-      !viewedIndex ||
-      loading ||
-      viewedIndex.id === lastFetchedIndexId.current
-    )
-      return;
-
-    setLoading(true);
-    lastFetchedIndexId.current = viewedIndex.id; // Update the last fetched ID
-    try {
-      const body = itemsState.cursor ? { cursor: itemsState.cursor } : {};
-      const response = await api.getItems(viewedIndex.id, body);
-
-      if (response) {
-        setItemsState((prevState) => ({
-          items:
-            lastFetchedIndexId.current === viewedIndex.id
-              ? [...prevState.items, ...response.items]
-              : response.items,
-          cursor: response.endCursor,
-        }));
+  const { viewedIndex, fetchIndex } = useApp();
+  const { id } = useRouteParams();
+
+  const fetchIndexItems = useCallback(
+    async (resetCursor = false, params: GetItemQueryParams = {}) => {
+      if (!api || !viewedIndex) return;
+
+      // setLoading(true);
+      try {
+        const itemParams: GetItemQueryParams = {};
+
+        if (!resetCursor && itemsState?.cursor) {
+          itemParams.cursor = itemsState.cursor;
+        }
+
+        if (params?.query) {
+          itemParams.query = params.query;
+        }
+
+        // DEBUG
+        let response = await api.getItems(viewedIndex.id, itemParams);
+        // if (itemParams.query) {
+        //   response = {
+        //     items: [],
+        //     cursor: null,
+        //   };
+        // }
+
+        if (response) {
+          setItemsState((prevState) => ({
+            items:
+              resetCursor || itemParams.query
+                ? response.items
+                : [...prevState.items, ...response.items],
+            cursor: response.endCursor,
+          }));
+        }
+      } catch (error) {
+        console.error("Error fetching index links", error);
+        setError(error);
+      } finally {
+        // setLoading(false);
       }
-    } catch (error) {
-      console.error("Error fetching index links", error);
-      setError(error);
-    } finally {
-      setLoading(false);
-    }
-  }, [api, viewedIndex, loading]);
+    },
+    [api, id, viewedIndex, itemsState.cursor],
+  );
+
+  useEffect(() => {
+    fetchIndex();
+    fetchIndexItems(true);
+  }, [viewedIndex?.id]);
 
   const addItem = useCallback((item: IndexItem) => {
     setItemsState((prevState) => ({
@@ -106,11 +121,6 @@ export const IndexConversationProvider = ({
     fetchIndexItems();
   }, [fetchIndexItems]);
 
-  // Effect for initial fetch and re-fetch on viewedIndex.id change
-  useEffect(() => {
-    fetchIndexItems();
-  }, [fetchIndexItems]);
-
   return (
     <IndexConversationContext.Provider
       value={{
@@ -122,6 +132,7 @@ export const IndexConversationProvider = ({
         loadMoreItems,
         setItemsState,
         setLoading,
+        fetchIndexItems,
       }}
     >
       {children}

diff --git a/web-app/src/components/sections/IndexConversation/IndexConversationHeader.tsx b/web-app/src/components/sections/IndexConversation/IndexConversationHeader.tsx
@@ -76,29 +76,29 @@ export const IndexConversationHeader: React.FC = () => {
     [viewedIndex, viewedProfile, api, setViewedIndex, indexes, setIndexes],
   );
 
-  if (!viewedIndex) return null;
+  // if (!viewedIndex) return null;
 
   return (
     <>
       <FlexRow>
         <Col centerBlock className="idxflex-grow-1">
-          {viewedIndex && (
-            <Link href={`/discovery/${viewedIndex.ownerDID?.id!}`}>
-              <Avatar size={20} user={viewedIndex.ownerDID} />
+          {
+            <Link href={`/discovery/${viewedIndex?.ownerDID?.id!}`}>
+              <Avatar size={20} user={viewedIndex?.ownerDID} />
               <Text
                 className="ml-3"
                 size="sm"
                 verticalAlign="middle"
                 fontWeight={500}
                 element="span"
               >
-                {viewedIndex.ownerDID?.name ||
-                  (viewedIndex.ownerDID &&
-                    maskDID(viewedIndex.ownerDID?.id!)) ||
+                {viewedIndex?.ownerDID?.name ||
+                  (viewedIndex?.ownerDID &&
+                    maskDID(viewedIndex?.ownerDID?.id!)) ||
                   ""}
               </Text>
             </Link>
-          )}
+          }
         </Col>
       </FlexRow>
 

diff --git a/...dexConversation/TabContainer/IndexTab.tsx → ...nversation/TabContainer/IndexItemsTab.tsx b/...dexConversation/TabContainer/IndexTab.tsx → ...nversation/TabContainer/IndexItemsTab.tsx
@@ -11,37 +11,58 @@ import { IndexItem } from "@/types/entity";
 import { useCallback, useState } from "react";
 import { useIndexConversation } from "../IndexConversationContext";
 
-export default function IndexTabSection() {
-  const { itemsState, setItemsState, loading, setLoading } =
-    useIndexConversation();
+export default function IndexItemsTabSection() {
+  const {
+    itemsState,
+    setItemsState,
+    loading,
+    setLoading,
+    fetchIndexItems,
+    // loadMoreItems,
+  } = useIndexConversation();
   const { isCreator } = useRole();
   const { apiService: api } = useApi();
   const [search, setSearch] = useState("");
 
   const { viewedIndex } = useApp();
 
+  const handleSearch = useCallback(
+    (searchQuery: string) => {
+      setSearch(searchQuery);
+      fetchIndexItems(true, { query: searchQuery }); // Reset cursor and pass query
+    },
+    [fetchIndexItems],
+  );
+
   const handleAddLink = useCallback(
     async (urls: string[]) => {
       if (!api || !viewedIndex) return;
+
       setLoading(true);
       for (const url of urls) {
         try {
           const createdLink = await api.crawlLink(url);
-          if (createdLink) {
-            const resp = await api.createItem(viewedIndex.id, createdLink.id);
-            if (resp && resp.id) {
-              const createdItem = await api.getItem(viewedIndex.id, resp.id);
-              setItemsState({
-                items: [createdItem, ...itemsState.items],
-                cursor: itemsState.cursor,
-              });
-            }
+          if (!createdLink) {
+            throw new Error("Error creating link");
           }
+          const createdItem = await api.createItem(
+            viewedIndex.id,
+            createdLink.id,
+          );
+          console.log("create item", createdItem);
+          if (!createdItem) {
+            throw new Error("Error creating item");
+          }
+          setItemsState({
+            items: [createdItem, ...itemsState.items],
+            cursor: itemsState.cursor,
+          });
         } catch (error) {
           console.error("Error adding link", error);
+        } finally {
+          setLoading(false);
         }
       }
-      setLoading(false);
     },
     [api, viewedIndex, setItemsState, setLoading],
   );
@@ -72,7 +93,7 @@ export default function IndexTabSection() {
         <Col className="idxflex-grow-1">
           <SearchInput
             loading={loading}
-            onSearch={setSearch}
+            onSearch={handleSearch}
             debounceTime={300}
             showClear
             defaultValue={search}

diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/index.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/index.tsx
@@ -8,7 +8,7 @@ import React, { useCallback } from "react";
 import AccessControlTab from "./AccessControlTab";
 import ChatTab from "./ChatTab";
 import CreatorsTab from "./CreatorsTab";
-import IndexTab from "./IndexTab";
+import IndexItemsTab from "./IndexItemsTab";
 import IndexSettingsTab from "./SettingsTab";
 
 enum TabKey {
@@ -36,7 +36,7 @@ export default function TabContainer() {
       case TabKey.Chat:
         return <ChatTab />;
       case TabKey.Index:
-        return <IndexTab />;
+        return <IndexItemsTab />;
       case TabKey.Creators:
         return <CreatorsTab />;
       case TabKey.AccessControl: