Merge pull request #21 from indexnetwork/new-session-flow

New session flow 2

web-app/.eslintrc.json

@@ -24,7 +24,8 @@
   },
   "rules": {
     "no-console": "off",
-    "linebreak-style": "off"
+    "implicit-arrow-linebreak": ["beside"],
+    "linebreak-style": "off",
     "no-plusplus": "off",
     "no-unused-vars": "off",
     "prefer-destructuring": "warn",

web-app/src/app/discovery/[id]/page.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useEffect } from "react";
-import { DiscoveryType, useApp } from "@/components/site/context/AppContext";
+// import LoadingSection from "@/components/sections/Loading";
+import { DiscoveryType, useApp } from "@/context/AppContext";
 import DiscoveryLayout from "components/layout/site/DiscoveryLayout";
-import { useRouteParams } from "hooks/useRouteParams";
 import IndexConversationSection from "components/sections/IndexConversation";
 import UserConversationSection from "components/sections/UserConversation";
-import LoadingSection from "@/components/sections/Loading";
+import { useRouteParams } from "hooks/useRouteParams";
+import { useEffect } from "react";
 
 const Discovery = () => {
-  const { discoveryType, indexes, loading } = useApp();
+  const { discoveryType, indexes } = useApp();
   const { id } = useRouteParams();
 
   useEffect(() => {

web-app/src/components/ai/no-indexes.tsx

@@ -1,7 +1,7 @@
-import Flex from "components/layout/base/Grid/Flex";
+import { useApp } from "@/context/AppContext";
 import Button from "components/base/Button";
+import Flex from "components/layout/base/Grid/Flex";
 import Text from "../base/Text";
-import { useApp } from "components/site/context/AppContext";
 
 export default function NoIndexesChat({ isSelfDid }: { isSelfDid?: boolean }) {
   const { setCreateModalVisible } = useApp();

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>
   );
 };

web-app/src/components/layout/base/Navbar/index.tsx

@@ -1,18 +1,18 @@
+import { useApp } from "@/context/AppContext";
+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 React, { useContext, useEffect, useState } from "react";
-import cc from "classcat";
+import { AuthContext, AuthStatus } from "@/context/AuthContext";
 import { useYOffSet } from "hooks/useYOffset";
 import { usePathname, useRouter } from "next/navigation";
-import IconMenu from "components/base/Icon/IconMenu";
-import Button from "components/base/Button";
-import Container from "../Grid/Container";
+import React, { useContext, useEffect, useState } from "react";
+import Text from "../../../base/Text";
 import Col from "../Grid/Col";
-import FlexRow from "../Grid/FlexRow";
+import Container from "../Grid/Container";
 import Flex from "../Grid/Flex";
-import Text from "../../../base/Text";
-import { AuthContext, AuthStatus } from "components/site/context/AuthContext";
-import { useApp } from "components/site/context/AppContext";
+import FlexRow from "../Grid/FlexRow";
 
 export interface NavbarProps
   extends React.DetailedHTMLProps<

web-app/src/components/layout/site/AppHeader/index.tsx

@@ -1,4 +1,6 @@
 import Spin from "@/components/base/Spin";
+import { AuthStatus, useAuth } from "@/context/AuthContext";
+import { useApp } from "@/context/AppContext";
 import Avatar from "components/base/Avatar";
 import Button from "components/base/Button";
 import Dropdown from "components/base/Dropdown";
@@ -9,30 +11,22 @@ import IconSettings from "components/base/Icon/IconSettings";
 import Text from "components/base/Text";
 import Flex from "components/layout/base/Grid/Flex";
 import Navbar, { NavbarMenu } from "components/layout/base/Navbar";
-import { useApp } from "components/site/context/AppContext";
-import { AuthStatus, useAuth } from "components/site/context/AuthContext";
 import { usePathname } from "next/navigation";
 import React, { useCallback, useMemo } from "react";
 
 const AppHeader = () => {
+  const { connect, disconnect, status } = useAuth();
   const {
     setCreateModalVisible,
     rightSidebarOpen,
     setRightSidebarOpen,
     setEditProfileModalVisible,
     viewedProfile,
   } = useApp();
-  // const {
-  // 	did,
-  // 	// loading,
-  // } = useAppSelector(selectConnection);
+
   const path = usePathname();
   const isLanding = useMemo(() => path === "/", [path]);
 
-  const { status } = useAuth();
-
-  const { connect, disconnect } = useAuth();
-
   const handleConnect = useCallback(async () => {
     try {
       await connect();
@@ -136,7 +130,7 @@ const AppHeader = () => {
                   </Text>
                 </Flex>
               </DropdownMenuItem>
-              <DropdownMenuItem>
+              {/* <DropdownMenuItem>
                 <Flex alignitems="center">
                   <IconSettings width={12} height="100%" />
                   <Text
@@ -148,7 +142,7 @@ const AppHeader = () => {
                     Settings
                   </Text>
                 </Flex>
-              </DropdownMenuItem>
+              </DropdownMenuItem> */}
               <DropdownMenuItem divider />
               <DropdownMenuItem onClick={disconnect}>
                 <Flex alignitems="center">

web-app/src/components/layout/site/AppLayout/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { APIProvider } from "components/site/context/APIContext";
-import { AppContextProvider } from "components/site/context/AppContext";
-import { AuthProvider } from "components/site/context/AuthContext";
+import { APIProvider } from "@/context/APIContext";
+import { AppContextProvider } from "@/context/AppContext";
+import { AuthProvider } from "@/context/AuthContext";
 import PlausibleProvider from "next-plausible";
 import { ReactNode } from "react";
 import { Toaster } from "react-hot-toast";

web-app/src/components/layout/site/DiscoveryLayout/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import AppLeft from "components/sections/AppLeft";
 import AppRight from "components/sections/AppRight";
-import { useApp } from "components/site/context/AppContext";
+import { useApp } from "@/context/AppContext";
 import cc from "classcat";
 import FlexRow from "../../base/Grid/FlexRow";
 import Col from "../../base/Grid/Col";

web-app/src/components/layout/site/LandingLayout/index.tsx

@@ -1,8 +1,7 @@
-// components/layout/LandingLayout.tsx
-import React from 'react';
-import Head from 'next/head';
-import SiteNavbar from '../SiteNavbar';
-import SiteFooter from '../SiteFooter';
+import React from "react";
+import Head from "next/head";
+import SiteNavbar from "../SiteNavbar";
+import SiteFooter from "../SiteFooter";
 
 export interface LandingLayoutProps {
   children: React.ReactNode;

web-app/src/components/layout/site/SiteNavbar/index.tsx

@@ -8,19 +8,15 @@ import Flex from "components/layout/base/Grid/Flex";
 import { useTranslation } from "next-i18next";
 import React, { useCallback, useContext } from "react";
 import IconDisconnect from "components/base/Icon/IconDisconnect";
-import {
-  AuthContext,
-  AuthStatus,
-  useAuth,
-} from "components/site/context/AuthContext";
+import { AuthContext, AuthStatus, useAuth } from "@/context/AuthContext";
 import { useAppSelector } from "hooks/store";
 import { selectConnection } from "store/slices/connectionSlice";
 import { selectProfile } from "store/slices/profileSlice";
 import IconSettings from "components/base/Icon/IconSettings";
 import Navbar, { NavbarProps, NavbarMenu } from "components/layout/base/Navbar";
 import { useRouter } from "next/router";
 import IconHistory from "components/base/Icon/IconHistory";
-import { useApp } from "components/site/context/AppContext";
+import { useApp } from "@/context/AppContext";
 
 export interface LandingHeaderProps extends NavbarProps {
   headerType: "public" | "user";

web-app/src/components/sections/AppLeft.tsx

@@ -7,7 +7,7 @@ import Text from "components/base/Text";
 import Col from "components/layout/base/Grid/Col";
 import Flex from "components/layout/base/Grid/Flex";
 import FlexRow from "components/layout/base/Grid/FlexRow";
-import { useApp } from "components/site/context/AppContext";
+import { useApp } from "@/context/AppContext";
 import { maskDID } from "utils/helper";
 import IndexListSection from "./IndexList";
 

web-app/src/components/sections/AppRight.tsx

@@ -6,7 +6,7 @@ import TabPane from "components/base/Tabs/TabPane";
 import Col from "components/layout/base/Grid/Col";
 import Flex from "components/layout/base/Grid/Flex";
 import FlexRow from "components/layout/base/Grid/FlexRow";
-import { useApp } from "components/site/context/AppContext";
+import { useApp } from "@/context/AppContext";
 import Soon from "components/site/indexes/Soon";
 
 const AppRight = () => {