Merge pull request #63 from indexnetwork/bugfix

Bugfix
indexnetwork · Feb 28, 2024 · a4588ac · a4588ac
2 parents 17a05b6 + 1498248
commit a4588ac
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 143 deletions.
diff --git a/web-app/src/components/layout/base/Navbar/index.tsx b/web-app/src/components/layout/base/Navbar/index.tsx
@@ -1,14 +1,14 @@
-import { useApp } from "@/context/AppContext";
+import { IndexListTabKey, useApp } from "@/context/AppContext";
+import { AuthStatus, useAuth } from "@/context/AuthContext";
+import { useRouteParams } from "@/hooks/useRouteParams";
 import cc from "classcat";
 import Button from "components/base/Button";
 import IconMenu from "components/base/Icon/IconMenu";
 import LogoFull from "components/base/Logo/LogoFull";
 import LogoMini from "components/base/Logo/LogoMini";
-import { AuthStatus, useAuth } from "@/context/AuthContext";
 import { useYOffSet } from "hooks/useYOffset";
 import { useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { useRouteParams } from "@/hooks/useRouteParams";
 import Text from "../../../base/Text";
 import Col from "../Grid/Col";
 import Container from "../Grid/Container";
@@ -52,12 +52,11 @@ const Navbar = ({
   const yOffSet = useYOffSet(sticky);
   const [bgSticky, setBgSticky] = useState(false);
 
-  // const { did } = useAppSelector(selectConnection);
   const { session, status } = useAuth();
   const { isLanding } = useRouteParams();
 
   const router = useRouter();
-  const { leftSidebarOpen, setLeftSidebarOpen } = useApp();
+  const { leftSidebarOpen, setLeftTabKey, setLeftSidebarOpen } = useApp();
 
   /*
   const [showTestnetWarning, setShowTestnetWarning] = useState(false);
@@ -82,6 +81,7 @@ const Navbar = ({
   }, [bgSticky, sticky, stickyBgChangeAfter, stickyBgColor, yOffSet]);
 
   const handleLogoClick = () => {
+    setLeftTabKey(IndexListTabKey.ALL);
     if (status === AuthStatus.CONNECTED) {
       router.push(`/${session?.did.parent}`);
     } else {

diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/AccessControlTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/AccessControlTab.tsx
@@ -1,41 +1,22 @@
-import Col from "@/components/layout/base/Grid/Col";
-import FlexRow from "@/components/layout/base/Grid/FlexRow";
-import { useApi } from "@/context/APIContext";
-import { useApp } from "@/context/AppContext";
 import Soon from "@/components/site/indexes/Soon";
-import { useRole } from "@/hooks/useRole";
-import { useRouteParams } from "@/hooks/useRouteParams";
-import React from "react";
-import { useIndexConversation } from "../IndexConversationContext";
 
 export default function AccessControlTabSection() {
-  const { id: indexID } = useRouteParams();
-  // const [links, setLinks] = useState<IndexLink[]>([]);
-  const { isOwner } = useRole();
-  const { api } = useApi();
-  const { viewedIndex } = useApp();
-  const { itemsState } = useIndexConversation();
-
-  // const loadLinks = useCallback(async () => {
-  //   // Logic to load chat links and update state
-  //   // Example:
-  //   try {
-  //     const response = await api.searchLink({ index_id: indexID });
-  //     setLinks(response.records);
-  //   } catch (error) {
-  //     console.error("Error fetching chat links", error);
-  //   }
-  // }, [api, indexID]);
-
-  // useEffect(() => {
-  //   loadLinks();
-  // }, [loadLinks]);
-
   return (
-    <FlexRow justify="center" align="center" fullHeight>
-      <Col>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          paddingTop: "4rem",
+        }}
+      >
         <Soon section={"access_control"}></Soon>
-      </Col>
-    </FlexRow>
+      </div>
+    </div>
   );
 }
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/ChatTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/ChatTab.tsx
@@ -17,14 +17,15 @@ export default function ChatTabSection() {
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          paddingBottom: "24rem",
         }}
       >
         <LoadingSection />
       </div>
     );
   }
 
-  if (itemsState.items.length > 0) {
+  if (itemsState.items.length > 0 && viewedIndex) {
     return chatID ? (
       <div
         style={{
@@ -38,7 +39,7 @@ export default function ChatTabSection() {
         <AskIndexes
           did={viewedIndex?.ownerDID.id}
           chatID={chatID}
-          indexIds={[viewedIndex?.id!]}
+          indexIds={[viewedIndex?.id]}
         />
       </div>
     ) : null;

diff --git a/web-app/src/components/sections/IndexList.tsx b/web-app/src/components/sections/IndexList.tsx
@@ -7,46 +7,49 @@ import Col from "components/layout/base/Grid/Col";
 import FlexRow from "components/layout/base/Grid/FlexRow";
 import IndexItem from "components/site/indexes/IndexItem";
 import { useRouteParams } from "hooks/useRouteParams";
-import { useRouter } from "next/navigation";
-import { FC, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { FC, useCallback, useEffect, useRef } from "react";
 import { Indexes } from "types/entity";
 
+const TAB_QUERY = "tab";
+
 const IndexListSection: FC = () => {
-  const { id, isIndex } = useRouteParams();
+  const { id, isIndex, isDID } = useRouteParams();
   const router = useRouter();
+  const query = useSearchParams();
 
-  const { indexes, setLeftTabKey, leftTabKey, viewedProfile } = useApp();
+  const {
+    indexes,
+    leftSectionIndexes,
+    setLeftTabKey,
+    leftTabKey,
+    viewedProfile,
+  } = useApp();
 
   const prevProfileID = useRef(viewedProfile?.id);
 
   const handleTabChange = useCallback(
     (tabKey: IndexListTabKey) => {
+      if (!viewedProfile) return;
+
       setLeftTabKey(tabKey);
-      if (isIndex) {
+      if (tabKey !== IndexListTabKey.ALL) {
+        router.push(`/${viewedProfile?.id}?${TAB_QUERY}=${tabKey}`);
+      } else {
         router.push(`/${viewedProfile?.id}`);
       }
     },
-    [setLeftTabKey],
+    [setLeftTabKey, router, viewedProfile, isIndex],
   );
 
-  const sectionIndexes = useMemo(() => {
-    if (leftTabKey === IndexListTabKey.ALL) {
-      return indexes;
-    }
-    if (leftTabKey === IndexListTabKey.OWNER) {
-      return indexes.filter((i) => i.did.owned);
-    }
-    if (leftTabKey === IndexListTabKey.STARRED) {
-      return indexes.filter((i) => i.did.starred);
-    }
-    return [];
-  }, [indexes, leftTabKey]);
-
   useEffect(() => {
-    if (viewedProfile?.id !== prevProfileID.current) {
+    const tab = query.get(TAB_QUERY) as IndexListTabKey;
+    if (tab && isDID) {
+      setLeftTabKey(tab);
+    } else if (viewedProfile?.id !== prevProfileID.current) {
       setLeftTabKey(IndexListTabKey.ALL);
     }
-  }, [viewedProfile?.id, setLeftTabKey]);
+  }, [query, viewedProfile?.id, setLeftTabKey]);
 
   return (
     <>
@@ -65,7 +68,7 @@ const IndexListSection: FC = () => {
             />
             <TabPane
               enabled={true}
-              tabKey={IndexListTabKey.OWNER}
+              tabKey={IndexListTabKey.OWNED}
               total={indexes.filter((i) => i.did.owned).length}
               title={`Owned`}
             />
@@ -79,10 +82,10 @@ const IndexListSection: FC = () => {
         </Col>
       </FlexRow>
       <FlexRow className={"scrollable-area index-list idxflex-grow-1 pr-6"}>
-        {sectionIndexes.length > 0 ? (
+        {leftSectionIndexes.length > 0 ? (
           <div className={"idxflex-grow-1"}>
             <List
-              data={sectionIndexes}
+              data={leftSectionIndexes}
               render={(itm: Indexes) => (
                 <>
                   <IndexItem index={itm} selected={itm.id === id} />

diff --git a/web-app/src/components/sections/Loading.tsx b/web-app/src/components/sections/Loading.tsx
@@ -5,6 +5,7 @@ export default function LoadingSection() {
         display: "flex",
         alignItems: "center",
         flexDirection: "column",
+        justifyContent: "center",
         height: "100%",
         textAlign: "center",
         margin: "auto",

diff --git a/web-app/src/components/sections/UserConversation.tsx b/web-app/src/components/sections/UserConversation.tsx
@@ -4,7 +4,7 @@ import { useRouteParams } from "hooks/useRouteParams";
 
 export default function UserConversationSection() {
   const { id } = useRouteParams();
-  const { chatID } = useApp();
+  const { chatID, leftSectionIndexes } = useApp();
 
   if (!chatID || !id) {
     return null;
@@ -21,7 +21,11 @@ export default function UserConversationSection() {
         maxHeight: "calc(100dvh - 12em)",
       }}
     >
-      <AskIndexes chatID={chatID} did={id} />
+      <AskIndexes
+        indexIds={leftSectionIndexes.map((i) => i.id)}
+        chatID={chatID}
+        did={id}
+      />
     </div>
   );
 }
diff --git a/web-app/src/components/sections/landing/Feature3.tsx b/web-app/src/components/sections/landing/Feature3.tsx
@@ -54,17 +54,6 @@ const FeatureSection3 = () => {
               </p>
             </div>
           </div>
-          <div className="flex flex-1 flex-row gap-4">
-            <div className="pt-1">
-              <Abstract variant={3} />
-            </div>
-            <div className="flex flex-col gap-6">
-              <h3 className="text-lg font-bold">Real-time listening</h3>
-              <p>
-                Store, share, and discover verifiable generative information.
-              </p>
-            </div>
-          </div>
         </div>
       </div>
     </section>

diff --git a/web-app/src/components/site/index-details/CreatorSettings/index.tsx b/web-app/src/components/site/index-details/CreatorSettings/index.tsx
@@ -129,7 +129,7 @@ const CreatorSettings = () => {
                 <br />
               </>
             )}
-            Creators can add items, add tags to theirs and delete them.
+            Creators can add and remove items.
           </Text>
         </Col>
       </Row>

diff --git a/web-app/src/components/site/indexes/AskIndexes/index.tsx b/web-app/src/components/site/indexes/AskIndexes/index.tsx
@@ -1,4 +1,4 @@
-import { IndexListTabKey, useApp } from "@/context/AppContext";
+import { useApp } from "@/context/AppContext";
 import { useAuth } from "@/context/AuthContext";
 import { useRouteParams } from "@/hooks/useRouteParams";
 import { useChat, type Message } from "ai/react";
@@ -16,7 +16,6 @@ import {
   FC,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -29,6 +28,7 @@ export interface ChatProps extends ComponentProps<"div"> {
   initialMessages?: Message[];
   id?: string;
 }
+
 export interface AskIndexesProps {
   chatID: string;
   did?: string;
@@ -40,7 +40,7 @@ export interface MessageWithIndex extends Message {
 }
 
 const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
-  const { viewedProfile, indexes: indexesFromApp, leftTabKey } = useApp();
+  const { viewedProfile, leftSectionIndexes, leftTabKey } = useApp();
 
   const { session } = useAuth();
   const { viewedIndex } = useApp();
@@ -52,19 +52,6 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
 
   const bottomRef = useRef<null | HTMLDivElement>(null);
 
-  const sectionIndexes = useMemo(() => {
-    if (leftTabKey === IndexListTabKey.ALL) {
-      return indexesFromApp;
-    }
-    if (leftTabKey === IndexListTabKey.OWNER) {
-      return indexesFromApp.filter((i) => i.did.owned);
-    }
-    if (leftTabKey === IndexListTabKey.STARRED) {
-      return indexesFromApp.filter((i) => i.did.starred);
-    }
-    return [];
-  }, [indexesFromApp, leftTabKey]);
-
   const handleEditClick = (message: Message, indexOfMessage: number) => {
     setEditingMessage(message);
     setEditingIndex(indexOfMessage);
@@ -98,7 +85,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
 
     if (session && viewedProfile?.id === session.did.parent) {
       const sections = {
-        owner: "indexes owned by you",
+        owned: "indexes owned by you",
         starred: "indexes starred by you",
         all: "all your indexes",
       } as any;
@@ -107,7 +94,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
 
     if (viewedProfile?.id) {
       const sections = {
-        owner: "indexes owned by",
+        owned: "indexes owned by",
         starred: "indexes starred by",
         all: "all indexes of",
       } as any;
@@ -157,7 +144,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
     scrollToBottom();
   }, [messages, isLoading]);
 
-  if (sectionIndexes.length === 0) {
+  if (leftSectionIndexes.length === 0) {
     return <NoIndexes tabKey={leftTabKey} />;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -129,7 +129,7 @@ const CreatorSettings = () => { @@
                     <br />
                   </>
                 )}
-                Creators can add items, add tags to theirs and delete them.
+                Creators can add and remove items.
               </Text>
             </Col>
           </Row>
@@ Expand Down @@