Merge pull request #29 from indexnetwork/bugfix

Bugfix
indexnetwork · Feb 13, 2024 · 0b8b38c · 0b8b38c
2 parents fbbb275 + e13c934
commit 0b8b38c
Show file tree

Hide file tree

Showing 20 changed files with 250 additions and 340 deletions.
diff --git a/web-app/.eslintrc.json b/web-app/.eslintrc.json
@@ -24,6 +24,9 @@
   },
   "rules": {
     "no-console": "off",
+    "function-paren-newline": "off",
+    "no-confusing-arrow": "off",
+    "operator-linebreak": "off",
     "implicit-arrow-linebreak": "off",
     "object-curly-newline": "off",
     "linebreak-style": "off",

diff --git a/web-app/src/components/ai/chat-list.tsx b/web-app/src/components/ai/chat-list.tsx
@@ -1,7 +1,6 @@
 import { type Message } from "ai";
 
 import { ChatMessage } from "components/ai/chat-message";
-import React from "react";
 
 export interface ChatListInterface {
   messages: Message[];

diff --git a/web-app/src/components/ai/no-indexes.tsx b/web-app/src/components/ai/no-indexes.tsx
@@ -1,19 +1,22 @@
 import { useApp } from "@/context/AppContext";
 import Button from "components/base/Button";
 import Flex from "components/layout/base/Grid/Flex";
+import Image from "next/image";
 import Text from "../base/Text";
 
 export default function NoIndexesChat({ isSelfDid }: { isSelfDid?: boolean }) {
   const { setCreateModalVisible } = useApp();
 
   return (
-    <Flex
-      flexdirection="column"
-      alignitems="center"
-      gap="4rem"
-      style={{ margin: "auto", padding: "4rem 0" }}
+    <div
+      style={{
+        textAlign: "center",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: "4rem 0",
+      }}
     >
-      <img
+      <Image
         src="/images/no-indexes-screen-new.png"
         height={202}
         width={202}
@@ -43,6 +46,6 @@ export default function NoIndexesChat({ isSelfDid }: { isSelfDid?: boolean }) {
           Create your first index
         </Button>
       )}
-    </Flex>
+    </div>
   );
 }
diff --git a/web-app/src/components/sections/AppLeft.tsx b/web-app/src/components/sections/AppLeft.tsx
@@ -47,7 +47,6 @@ const AppLeft = () => {
               </Col>
               <Col className="idxflex-grow-1 ml-6">
                 <Flex flexdirection={"column"}>
-                  {/* {"viewedProfile " + JSON.stringify(viewedProfile)} */}
                   <>
                     <LoadingText val={viewedProfile?.name || viewedProfile?.id}>
                       <Header level={4} className={"mb-1"}>
@@ -60,7 +59,6 @@ const AppLeft = () => {
                         }
                       </Header>
                     </LoadingText>
-                    {/* <LoadingText val={viewedProfile?.bio}> */}
                     <Text
                       className={"my-0"}
                       theme="gray6"
@@ -71,7 +69,6 @@ const AppLeft = () => {
                     >
                       {viewedProfile?.bio}
                     </Text>
-                    {/* </LoadingText> */}
                   </>
                 </Flex>
               </Col>

diff --git a/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx b/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx
@@ -1,13 +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, {
+import {
   createContext,
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from "react";
 
@@ -22,7 +22,6 @@ type IndexConversationContextType = {
   fetchIndexItems: (resetCursor?: boolean, params?: GetItemQueryParams) => void;
   loading: boolean;
   setLoading: (loading: boolean) => void;
-  error: any;
   addItem: (item: IndexItem) => void;
   removeItem: (itemId: string) => void;
   loadMoreItems: () => void;
@@ -48,15 +47,18 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
     cursor: undefined,
   });
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<any>(null);
 
-  const { apiService: api } = useApi();
+  const { api, ready: apiReady } = useApi();
   const { viewedIndex, fetchIndex } = useApp();
-  const { id } = useRouteParams();
+
+  const fetchingIndexItems = useRef(false);
 
   const fetchIndexItems = useCallback(
     async (resetCursor = false, params: GetItemQueryParams = {}) => {
-      if (!api || !viewedIndex) return;
+      if (!apiReady || !viewedIndex) return;
+      if (fetchingIndexItems.current) return;
+
+      fetchingIndexItems.current = true;
 
       // setLoading(true);
       try {
@@ -70,14 +72,7 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
           itemParams.query = params.query;
         }
 
-        // DEBUG
-        const response = await api.getItems(viewedIndex.id, itemParams);
-        // if (itemParams.query) {
-        //   response = {
-        //     items: [],
-        //     cursor: null,
-        //   };
-        // }
+        const response = await api!.getItems(viewedIndex.id, itemParams);
 
         if (response) {
           setItemsState((prevState) => ({
@@ -90,18 +85,18 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
         }
       } catch (err: any) {
         console.error("Error fetching index links", err);
-        setError(error);
       } finally {
         // setLoading(false);
+        fetchingIndexItems.current = false;
       }
     },
-    [api, id, viewedIndex, itemsState.cursor],
+    [api, viewedIndex, itemsState.cursor, apiReady],
   );
 
   useEffect(() => {
     fetchIndex();
     fetchIndexItems(true);
-  }, [viewedIndex?.id]);
+  }, [viewedIndex?.id, fetchIndex, fetchIndexItems]);
 
   const addItem = useCallback((item: IndexItem) => {
     setItemsState((prevState) => ({
@@ -126,7 +121,6 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
       value={{
         itemsState,
         loading,
-        error,
         addItem,
         removeItem,
         loadMoreItems,

diff --git a/web-app/src/components/sections/IndexConversation/IndexConversationHeader.tsx b/web-app/src/components/sections/IndexConversation/IndexConversationHeader.tsx
@@ -14,48 +14,60 @@ import IndexTitleInput from "components/site/input/IndexTitleInput";
 import IndexOperationsPopup from "components/site/popup/IndexOperationsPopup";
 import moment from "moment";
 import Link from "next/link";
-import { useCallback, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import { Indexes } from "types/entity";
 import { maskDID } from "utils/helper";
 
-export const IndexConversationHeader: React.FC = () => {
+export const IndexConversationHeader: FC = () => {
   const { isOwner } = useRole();
   const { session } = useAuth();
-  const { apiService: api } = useApi();
+  const { api, ready: apiReady } = useApi();
   const [titleLoading, setTitleLoading] = useState(false);
-  const { viewedIndex, viewedProfile, setViewedIndex, indexes, setIndexes } = useApp();
-
-  // if (!viewedIndex || !viewedProfile) return null;
+  const { viewedIndex, setViewedIndex, indexes, setIndexes } = useApp();
 
   const handleTitleChange = useCallback(
     async (title: string) => {
-      if (!api || !viewedIndex) return;
+      if (!apiReady || !viewedIndex) return;
 
       setTitleLoading(true);
       try {
-        const result = await api.updateIndex(viewedIndex.id, { title });
-        setViewedIndex({ ...viewedIndex, title: result.title });
+        const result = await api!.updateIndex(viewedIndex.id, { title });
+        const updatedIndex = {
+          ...viewedIndex,
+          title: result.title,
+          updatedAt: result.updatedAt,
+        };
+        setViewedIndex(updatedIndex);
+        const updatedIndexes = indexes.map((i) =>
+          i.id === viewedIndex.id ? { ...i, title: result.title } : i,
+        );
+
+        console.log("updatedIndexes", updatedIndexes);
+
+        setIndexes(updatedIndexes);
       } catch (error) {
         console.error("Error updating index", error);
+      } finally {
+        setTitleLoading(false);
       }
-      setTitleLoading(false);
     },
-    [viewedIndex, api, setViewedIndex],
+    [api, viewedIndex, indexes, setIndexes, apiReady, setViewedIndex],
   );
 
   const handleUserIndexToggle = useCallback(
     async (type: string, value: boolean) => {
-      if (!api || !viewedIndex || !session) return;
+      if (!apiReady || !viewedIndex || !session) return;
       let updatedIndex: Indexes;
+
       try {
         if (type === "star") {
-          await api?.starIndex(session!.did.parent, viewedIndex.id, value);
+          await api!.starIndex(session!.did.parent, viewedIndex.id, value);
           updatedIndex = {
             ...viewedIndex,
             did: { ...viewedIndex.did, starred: value },
           };
         } else {
-          await api?.ownIndex(session!.did.parent, viewedIndex.id, value);
+          await api!.ownIndex(session!.did.parent, viewedIndex.id, value);
           updatedIndex = {
             ...viewedIndex,
             did: { ...viewedIndex.did, owned: value },
@@ -66,19 +78,26 @@ export const IndexConversationHeader: React.FC = () => {
         return;
       }
 
+      let updatedIndexes: Indexes[];
+      if (!value) {
+        updatedIndexes = indexes.filter((i) => i.id !== viewedIndex.id);
+      } else {
+        updatedIndexes = [updatedIndex, ...indexes];
+      }
+
       setViewedIndex(updatedIndex);
-      setIndexes(
-        indexes.map((index) =>
-          (index.id === updatedIndex.id ? updatedIndex : index)),
-      );
+      setIndexes(updatedIndexes);
     },
-    [viewedIndex, viewedProfile, api, setViewedIndex, indexes, setIndexes],
+    [api, session, viewedIndex, apiReady, setViewedIndex, indexes, setIndexes],
   );
 
-  // if (!viewedIndex) return null;
-
   return (
-    <>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
       <FlexRow>
         <Col centerBlock className="idxflex-grow-1">
           {
@@ -97,10 +116,10 @@ export const IndexConversationHeader: React.FC = () => {
                     fontWeight={500}
                     element="span"
                   >
-                    {viewedIndex?.ownerDID?.name
-                      || (viewedIndex?.ownerDID
-                        && maskDID(viewedIndex?.ownerDID?.id!))
-                      || ""}
+                    {viewedIndex?.ownerDID?.name ||
+                      (viewedIndex?.ownerDID &&
+                        maskDID(viewedIndex?.ownerDID?.id!)) ||
+                      ""}
                   </Text>
                 </LoadingText>
               </div>
@@ -162,6 +181,6 @@ export const IndexConversationHeader: React.FC = () => {
           </Text>
         </LoadingText>
       </FlexRow>
-    </>
+    </div>
   );
 };
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/AccessControlTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/AccessControlTab.tsx
@@ -12,7 +12,7 @@ export default function AccessControlTabSection() {
   const { id: indexID } = useRouteParams();
   // const [links, setLinks] = useState<IndexLink[]>([]);
   const { isOwner } = useRole();
-  const { apiService: api } = useApi();
+  const { api } = useApi();
   const { viewedIndex } = useApp();
   const { itemsState } = useIndexConversation();
 

diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/ChatTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/ChatTab.tsx
@@ -1,7 +1,6 @@
-import { EmptyScreen } from "@/components/ai/empty-screen";
-import { useApp } from "@/context/AppContext";
+import NoIndexesChat from "@/components/ai/no-indexes";
 import AskIndexes from "@/components/site/indexes/AskIndexes";
-import React from "react";
+import { useApp } from "@/context/AppContext";
 import LoadingSection from "../../Loading";
 import { useIndexConversation } from "../IndexConversationContext";
 
@@ -30,5 +29,6 @@ export default function ChatTabSection() {
       <AskIndexes chatID={chatID} indexIds={[viewedIndex?.id!]} />
     ) : null;
   }
-    return <EmptyScreen setInput={() => {}} contextMessage="your responses" />;
+  // return <EmptyScreen setInput={() => {}} contextMessage="your responses" />;
+  return <NoIndexesChat />;
 }
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/CreatorsTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/CreatorsTab.tsx
@@ -14,7 +14,7 @@ export default function CreatorsTabSection({ noLinks }: { noLinks?: boolean }) {
   const { id: indexID } = useRouteParams();
   // const [links, setLinks] = useState<IndexLink[]>([]);
   const { isOwner } = useRole();
-  const { apiService: api } = useApi();
+  const { api, ready: apiReady } = useApi();
   const { viewedIndex } = useApp();
 
   const handleCollabActionChange = async (CID: string) => {