@teambit/lanes.hooks.use-lanes 0.0.203 → 0.0.204

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { LanesContext, LanesContextModel, useLanesContext } from './lanes-context';
 export { LanesProvider, LanesProviderProps, IgnoreDerivingFromUrl } from './lanes-provider';
 export { useLanes } from './use-lanes';
+export type { UseLanesOptions as UseLaneOptions, UseLanes, UseLanesResult, FetchMoreLanes, FetchMoreLanesResult, SearchLanes, SearchLanesResult, } from './use-lanes';

package/dist/lanes-context.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
 import { LaneId } from '@teambit/lane-id';
 import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { FetchMoreLanes, UseLanesOptions } from './use-lanes';
 export declare type LanesContextModel = {
     lanesModel?: LanesModel;
-    updateLanesModel?: (updatedLanes?: LanesModel) => void;
     updateViewedLane?: (viewedLaneId?: LaneId) => void;
+    fetchMoreLanes?: FetchMoreLanes;
+    hasMore?: boolean;
+    loading?: boolean;
+    options?: UseLanesOptions;
+    offset?: number;
+    limit?: number;
 };
 export declare const LanesContext: React.Context<LanesContextModel | undefined>;
 export declare const useLanesContext: () => LanesContextModel | undefined;

package/dist/lanes-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"lanes-context.js","sourceRoot":"","sources":["../lanes-context.ts"],"names":[],"mappings":";;;AAEA,iCAAkD;AAQrC,QAAA,YAAY,GAAiD,IAAA,qBAAa,EACrF,SAAS,CACV,CAAC;AAEK,MAAM,eAAe,GAAwC,GAAG,EAAE;IACvE,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;IAC9C,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAHW,QAAA,eAAe,mBAG1B"}
+{"version":3,"file":"lanes-context.js","sourceRoot":"","sources":["../lanes-context.ts"],"names":[],"mappings":";;;AAEA,iCAAkD;AAcrC,QAAA,YAAY,GAAiD,IAAA,qBAAa,EACrF,SAAS,CACV,CAAC;AAEK,MAAM,eAAe,GAAwC,GAAG,EAAE;IACvE,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;IAC9C,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAHW,QAAA,eAAe,mBAG1B"}

package/dist/lanes-provider.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { UseLaneOptions } from '@teambit/lanes.hooks.use-lanes';
 import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { Location } from '@teambit/base-react.navigation.link';
 import { LaneId } from '@teambit/lane-id';
@@ -9,5 +10,9 @@ export declare type LanesProviderProps = {
     targetLanes?: LanesModel;
     skipNetworkCall?: boolean;
     ignoreDerivingFromUrl?: IgnoreDerivingFromUrl[];
+    options?: UseLaneOptions;
+    useScope?: () => {
+        scope?: string;
+    };
 };
-export declare function LanesProvider({ children, viewedLaneId: viewedIdFromProps, targetLanes, ignoreDerivingFromUrl: ignoreDerivingFromUrlFromProps, skipNetworkCall, }: LanesProviderProps): JSX.Element;
+export declare function LanesProvider({ children, viewedLaneId: viewedIdFromProps, targetLanes, ignoreDerivingFromUrl: ignoreDerivingFromUrlFromProps, skipNetworkCall, options: optionsFromProps, useScope, }: LanesProviderProps): JSX.Element;

package/dist/lanes-provider.js

@@ -30,10 +30,21 @@ const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-mo
 const ui_foundation_ui_react_router_use_query_1 = require("@teambit/ui-foundation.ui.react-router.use-query");
 const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
 const lanes_context_1 = require("./lanes-context");
-function LanesProvider({ children, viewedLaneId: viewedIdFromProps, targetLanes, ignoreDerivingFromUrl: ignoreDerivingFromUrlFromProps, skipNetworkCall, }) {
-    const { lanesModel, loading } = (0, lanes_hooks_use_lanes_1.useLanes)(targetLanes, skipNetworkCall);
-    const [lanesState, setLanesState] = (0, react_1.useState)(lanesModel);
+function LanesProvider({ children, viewedLaneId: viewedIdFromProps, targetLanes, ignoreDerivingFromUrl: ignoreDerivingFromUrlFromProps, skipNetworkCall, options: optionsFromProps = {}, useScope, }) {
+    var _a;
+    const [lanesState, setLanesState] = (0, react_1.useState)();
     const [viewedLaneId, setViewedLaneId] = (0, react_1.useState)(viewedIdFromProps);
+    const { scope } = (useScope === null || useScope === void 0 ? void 0 : useScope()) || {};
+    const skip = skipNetworkCall || !!targetLanes;
+    const options = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        return (Object.assign({ skip, ids: (_a = optionsFromProps.ids) !== null && _a !== void 0 ? _a : (viewedLaneId ? [viewedLaneId.toString()] : undefined), offset: (_b = optionsFromProps.offset) !== null && _b !== void 0 ? _b : 0, limit: (_c = optionsFromProps.limit) !== null && _c !== void 0 ? _c : 10 }, optionsFromProps));
+    }, [skip, optionsFromProps.ids, (_a = optionsFromProps.ids) === null || _a === void 0 ? void 0 : _a.length, viewedLaneId === null || viewedLaneId === void 0 ? void 0 : viewedLaneId.toString()]);
+    const { lanesModel, loading, hasMore, fetchMoreLanes, offset, limit } = (0, lanes_hooks_use_lanes_1.useLanes)(targetLanes, skipNetworkCall, options, undefined, scope);
+    (0, react_1.useEffect)(() => {
+        if (!loading && lanesModel)
+            setLanesState(lanesModel);
+    }, [lanesModel, loading]);
     const updateViewedLane = (0, react_1.useCallback)((lane) => {
         setViewedLaneId(lane);
         setLanesState((state) => {
@@ -81,8 +92,13 @@ function LanesProvider({ children, viewedLaneId: viewedIdFromProps, targetLanes,
     }, [loading, lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.lanes.length, viewedLaneId]);
     const lanesContextModel = {
         lanesModel: lanesState,
-        updateLanesModel: setLanesState,
         updateViewedLane,
+        loading,
+        hasMore,
+        fetchMoreLanes,
+        options,
+        offset,
+        limit,
     };
     return react_1.default.createElement(lanes_context_1.LanesContext.Provider, { value: lanesContextModel }, children);
 }

package/dist/lanes-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"lanes-provider.js","sourceRoot":"","sources":["../lanes-provider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"lanes-provider.js","sourceRoot":"","sources":["../lanes-provider.tsx"],"names":[],"mappings":"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"}

package/dist/use-lanes.d.ts

@@ -1,8 +1,39 @@
-import { LanesModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
-import { QueryResult } from '@apollo/client';
-import { LanesContextModel } from './lanes-context';
-export declare function useLanes(targetLanes?: LanesModel, skip?: boolean): LanesContextModel & Omit<QueryResult<LanesQuery & {
-    getHost: {
-        id: string;
-    };
-}>, 'data'>;
+import { LaneModel, LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+export declare type LaneSort = {
+    by?: Exclude<keyof LaneModel, 'components' | 'readmeComponent'>;
+    direction?: string;
+};
+export declare type UseLanesOptions = {
+    ids?: string[];
+    offset?: number;
+    limit?: number;
+    sort?: LaneSort;
+    search?: string;
+};
+export declare type FetchMoreLanesResult = {
+    lanesModel?: LanesModel;
+    loading?: boolean;
+    hasMore?: boolean;
+    nextOffset?: number;
+    currentLimit?: number;
+};
+export declare type SearchLanesResult = {
+    lanesModel?: LanesModel;
+    loading?: boolean;
+};
+export declare type FetchMoreLanes = (offset: number, limit: number, sort?: LaneSort) => Promise<FetchMoreLanesResult>;
+export declare type SearchLanes = (search?: string, skip?: boolean) => SearchLanesResult;
+export declare type UseLanesResult = UseRootLanesResult & {
+    searchResult?: SearchLanesResult;
+};
+export declare type UseRootLanesResult = {
+    lanesModel?: LanesModel;
+    loading?: boolean;
+    fetchMoreLanes?: FetchMoreLanes;
+    hasMore?: boolean;
+    offset?: number;
+    limit?: number;
+};
+export declare type UseLanes = (targetLanes?: LanesModel, skip?: boolean, options?: UseLanesOptions, useContext?: boolean, scope?: string) => UseLanesResult;
+export declare const useSearchLanes: SearchLanes;
+export declare const useLanes: UseLanes;

package/dist/use-lanes.js

@@ -1,26 +1,60 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLanes = void 0;
+exports.useLanes = exports.useSearchLanes = void 0;
+const react_1 = require("react");
 const ui_foundation_ui_hooks_use_data_query_1 = require("@teambit/ui-foundation.ui.hooks.use-data-query");
 const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
 const client_1 = require("@apollo/client");
+const lodash_1 = require("lodash");
 const lanes_context_1 = require("./lanes-context");
 const GET_LANES = (0, client_1.gql) `
-  query Lanes($extensionId: String) {
+  query Lanes(
+    $extensionId: String
+    $laneIds: [String!]
+    $offset: Int
+    $limit: Int
+    $sort: LaneSort
+    $search: String
+    $viewedLaneId: [String!]
+    $skipViewedLane: Boolean!
+  ) {
     lanes {
       id
-      list {
+      viewedLane: list(ids: $viewedLaneId) @skip(if: $skipViewedLane) {
+        id {
+          name
+          scope
+        }
+        hash
+        createdAt
+        createdBy {
+          name
+          email
+          profileImage
+        }
+        readmeComponent {
+          id {
+            name
+            scope
+            version
+          }
+        }
+        laneComponentIds {
+          name
+          scope
+          version
+        }
+      }
+      list(ids: $laneIds, offset: $offset, limit: $limit, sort: $sort, search: $search) {
         id {
           name
           scope
@@ -50,6 +84,34 @@ const GET_LANES = (0, client_1.gql) `
           name
           scope
         }
+        createdAt
+        createdBy {
+          name
+          email
+          profileImage
+        }
+        laneComponentIds {
+          name
+          scope
+          version
+        }
+      }
+      default {
+        id {
+          name
+          scope
+        }
+        createdAt
+        createdBy {
+          name
+          email
+          profileImage
+        }
+        laneComponentIds {
+          name
+          scope
+          version
+        }
       }
     }
     getHost(id: $extensionId) {
@@ -57,20 +119,128 @@ const GET_LANES = (0, client_1.gql) `
     }
   }
 `;
-function useLanes(targetLanes, skip) {
-    var _a;
-    const lanesContext = (0, lanes_context_1.useLanesContext)();
-    const shouldSkip = skip || !!targetLanes || !!(lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.lanesModel);
-    const _b = (0, ui_foundation_ui_hooks_use_data_query_1.useDataQuery)(GET_LANES, {
-        skip: shouldSkip,
-    }), { data, loading } = _b, rest = __rest(_b, ["data", "loading"]);
-    let lanesModel;
-    if (lanesContext)
-        lanesModel = lanesContext.lanesModel;
-    else
-        lanesModel = (data && lanes_ui_models_lanes_model_1.LanesModel.from({ data, host: (_a = data === null || data === void 0 ? void 0 : data.getHost) === null || _a === void 0 ? void 0 : _a.id })) || targetLanes;
-    return Object.assign(Object.assign(Object.assign({}, rest), (lanesContext || {})), { loading,
-        lanesModel });
-}
+const useRootLanes = (viewedLaneId, skip, options = {}, scope) => {
+    const { ids, offset, limit, sort } = options;
+    const { data, fetchMore, loading } = (0, ui_foundation_ui_hooks_use_data_query_1.useDataQuery)(GET_LANES, {
+        variables: {
+            laneIds: ids,
+            offset,
+            limit,
+            sort,
+            skipViewedLane: !viewedLaneId || viewedLaneId.isDefault(),
+            viewedLaneId: viewedLaneId ? [viewedLaneId === null || viewedLaneId === void 0 ? void 0 : viewedLaneId.toString()] : undefined,
+        },
+        skip,
+        errorPolicy: 'all',
+        fetchPolicy: 'cache-and-network',
+    });
+    const lanesModel = (0, react_1.useMemo)(() => {
+        if (!loading && !!data) {
+            const newLanesModel = lanes_ui_models_lanes_model_1.LanesModel.from({ data, scope });
+            return newLanesModel;
+        }
+        return undefined;
+    }, [loading, data, viewedLaneId === null || viewedLaneId === void 0 ? void 0 : viewedLaneId.toString(), scope]);
+    const hasMore = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (loading)
+            return true;
+        if (!limit)
+            return false;
+        if (ids === null || ids === void 0 ? void 0 : ids.length)
+            return ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.lanes) === null || _a === void 0 ? void 0 : _a.list) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) === ids.length;
+        return ((_f = (_e = (_d = data === null || data === void 0 ? void 0 : data.lanes) === null || _d === void 0 ? void 0 : _d.list) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) >= limit;
+    }, [loading, data]);
+    const fetchMoreLanes = (0, react_1.useCallback)((newOffset, newLimit) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (hasMore) {
+            try {
+                const { data: moreData, networkStatus } = yield fetchMore({
+                    variables: {
+                        offset: newOffset,
+                        limit: newLimit,
+                        laneIds: [],
+                        skipViewedLane: !viewedLaneId || viewedLaneId.isDefault(),
+                        viewedLaneId: viewedLaneId ? [viewedLaneId === null || viewedLaneId === void 0 ? void 0 : viewedLaneId.toString()] : undefined,
+                    },
+                });
+                // ===  NetworkStatus.fetchMore
+                const loadingMore = networkStatus === 3;
+                if (!loadingMore && moreData.lanes) {
+                    const newLanesModel = lanes_ui_models_lanes_model_1.LanesModel.from({ data: moreData });
+                    return {
+                        lanesModel: newLanesModel,
+                        loading: loadingMore,
+                        hasMore: ((_b = (_a = moreData.lanes.list) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) >= newLimit,
+                        nextOffset: newOffset + newLimit,
+                    };
+                }
+                return {
+                    lanesModel,
+                    loading: loadingMore,
+                    nextOffset: newOffset,
+                    currentLimit: newLimit,
+                };
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                return {};
+            }
+        }
+        return {
+            lanesModel,
+            loading: false,
+            hasMore: false,
+            nextOffset: newOffset,
+            currentLimit: newLimit,
+        };
+    }), [hasMore, viewedLaneId === null || viewedLaneId === void 0 ? void 0 : viewedLaneId.toString(), lanesModel]);
+    return {
+        loading,
+        lanesModel,
+        fetchMoreLanes,
+        hasMore,
+        offset,
+        limit,
+    };
+};
+const useSearchLanes = (search, skip) => {
+    const { data: searchData, loading: loadingSearch } = (0, ui_foundation_ui_hooks_use_data_query_1.useDataQuery)(GET_LANES, {
+        variables: {
+            search,
+            skipViewedLane: true,
+        },
+        skip: skip || !search,
+        errorPolicy: 'all',
+        fetchPolicy: 'cache-and-network',
+    });
+    if (!search) {
+        return {};
+    }
+    return {
+        loading: loadingSearch,
+        lanesModel: searchData &&
+            lanes_ui_models_lanes_model_1.LanesModel.from({ data: { lanes: Object.assign(Object.assign({}, searchData.lanes), { current: undefined, default: undefined }) } }),
+    };
+};
+exports.useSearchLanes = useSearchLanes;
+const useLanes = (targetLanes, skip, optionsFromProps, useContextFromProps = true, scope) => {
+    var _a, _b;
+    const context = (0, lanes_context_1.useLanesContext)() || {};
+    const options = optionsFromProps || (context === null || context === void 0 ? void 0 : context.options);
+    const isSameOptions = (0, lodash_1.isEqual)(options, context === null || context === void 0 ? void 0 : context.options);
+    const useContext = useContextFromProps && !!context && isSameOptions;
+    const shouldSkip = skip || !!targetLanes || useContext;
+    const rootLanesData = useRootLanes((_b = (_a = context === null || context === void 0 ? void 0 : context.lanesModel) === null || _a === void 0 ? void 0 : _a.viewedLane) === null || _b === void 0 ? void 0 : _b.id, shouldSkip, options, scope);
+    const searchResult = (0, exports.useSearchLanes)(options === null || options === void 0 ? void 0 : options.search, shouldSkip);
+    if (targetLanes) {
+        return Object.assign(Object.assign(Object.assign({}, context), rootLanesData), { lanesModel: targetLanes, searchResult });
+    }
+    if (useContext) {
+        return Object.assign(Object.assign({}, context), { searchResult });
+    }
+    return Object.assign(Object.assign(Object.assign({}, context), rootLanesData), { searchResult });
+};
 exports.useLanes = useLanes;
 //# sourceMappingURL=use-lanes.js.map

package/dist/use-lanes.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-lanes.js","sourceRoot":"","sources":["../use-lanes.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,0GAA8E;AAC9E,sFAA8E;AAC9E,2CAAkD;AAClD,mDAAqE;AAErE,MAAM,SAAS,GAAG,IAAA,YAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCpB,CAAC;AAEF,SAAgB,QAAQ,CACtB,WAAwB,EACxB,IAAc;;IAEd,MAAM,YAAY,GAAG,IAAA,+BAAe,GAAE,CAAC;IACvC,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,CAAA,CAAC;IAEvE,MAAM,KAA6B,IAAA,oDAAY,EAA2C,SAAS,EAAE;QACnG,IAAI,EAAE,UAAU;KACjB,CAAC,EAFI,EAAE,IAAI,EAAE,OAAO,OAEnB,EAFwB,IAAI,cAAxB,mBAA0B,CAE9B,CAAC;IAEH,IAAI,UAAkC,CAAC;IACvC,IAAI,YAAY;QAAE,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC;;QAClD,UAAU,GAAG,CAAC,IAAI,IAAI,wCAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,EAAE,EAAE,CAAC,CAAC,IAAI,WAAW,CAAC;IAE9F,qDACK,IAAI,GACJ,CAAC,YAAY,IAAI,EAAE,CAAC,KACvB,OAAO;QACP,UAAU,IACV;AACJ,CAAC;AArBD,4BAqBC"}
+{"version":3,"file":"use-lanes.js","sourceRoot":"","sources":["../use-lanes.tsx"],"names":[],"mappings":"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"}

package/index.ts

@@ -1,3 +1,12 @@
 export { LanesContext, LanesContextModel, useLanesContext } from './lanes-context';
 export { LanesProvider, LanesProviderProps, IgnoreDerivingFromUrl } from './lanes-provider';
 export { useLanes } from './use-lanes';
+export type {
+  UseLanesOptions as UseLaneOptions,
+  UseLanes,
+  UseLanesResult,
+  FetchMoreLanes,
+  FetchMoreLanesResult,
+  SearchLanes,
+  SearchLanesResult,
+} from './use-lanes';

package/lanes-context.ts

@@ -1,11 +1,17 @@
 import { LaneId } from '@teambit/lane-id';
 import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { createContext, useContext } from 'react';
+import { FetchMoreLanes, UseLanesOptions } from './use-lanes';
 
 export type LanesContextModel = {
   lanesModel?: LanesModel;
-  updateLanesModel?: (updatedLanes?: LanesModel) => void;
   updateViewedLane?: (viewedLaneId?: LaneId) => void;
+  fetchMoreLanes?: FetchMoreLanes;
+  hasMore?: boolean;
+  loading?: boolean;
+  options?: UseLanesOptions;
+  offset?: number;
+  limit?: number;
 };
 
 export const LanesContext: React.Context<LanesContextModel | undefined> = createContext<LanesContextModel | undefined>(

package/lanes-provider.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useState, useEffect, useCallback } from 'react';
-import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import React, { ReactNode, useState, useEffect, useCallback, useMemo } from 'react';
+import { UseLaneOptions, useLanes } from '@teambit/lanes.hooks.use-lanes';
 import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
 import { useLocation, Location } from '@teambit/base-react.navigation.link';
@@ -14,6 +14,8 @@ export type LanesProviderProps = {
   targetLanes?: LanesModel;
   skipNetworkCall?: boolean;
   ignoreDerivingFromUrl?: IgnoreDerivingFromUrl[];
+  options?: UseLaneOptions;
+  useScope?: () => { scope?: string };
 };
 
 export function LanesProvider({
@@ -22,11 +24,38 @@ export function LanesProvider({
   targetLanes,
   ignoreDerivingFromUrl: ignoreDerivingFromUrlFromProps,
   skipNetworkCall,
+  options: optionsFromProps = {},
+  useScope,
 }: LanesProviderProps) {
-  const { lanesModel, loading } = useLanes(targetLanes, skipNetworkCall);
-
-  const [lanesState, setLanesState] = useState<LanesModel | undefined>(lanesModel);
+  const [lanesState, setLanesState] = useState<LanesModel | undefined>();
   const [viewedLaneId, setViewedLaneId] = useState<LaneId | undefined>(viewedIdFromProps);
+  const { scope } = useScope?.() || {};
+
+  const skip = skipNetworkCall || !!targetLanes;
+
+  const options = useMemo(
+    () => ({
+      skip,
+      ids: optionsFromProps.ids ?? (viewedLaneId ? [viewedLaneId.toString()] : undefined),
+      offset: optionsFromProps.offset ?? 0,
+      limit: optionsFromProps.limit ?? 10,
+      ...optionsFromProps,
+    }),
+    [skip, optionsFromProps.ids, optionsFromProps.ids?.length, viewedLaneId?.toString()]
+  );
+
+  const { lanesModel, loading, hasMore, fetchMoreLanes, offset, limit } = useLanes(
+    targetLanes,
+    skipNetworkCall,
+    options,
+    undefined,
+    scope
+  );
+
+  useEffect(() => {
+    if (!loading && lanesModel) setLanesState(lanesModel);
+  }, [lanesModel, loading]);
+
   const updateViewedLane = useCallback(
     (lane?: LaneId) => {
       setViewedLaneId(lane);
@@ -82,8 +111,13 @@ export function LanesProvider({
 
   const lanesContextModel: LanesContextModel = {
     lanesModel: lanesState,
-    updateLanesModel: setLanesState,
     updateViewedLane,
+    loading,
+    hasMore,
+    fetchMoreLanes,
+    options,
+    offset,
+    limit,
   };
 
   return <LanesContext.Provider value={lanesContextModel}>{children}</LanesContext.Provider>;

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@teambit/lanes.hooks.use-lanes",
-  "version": "0.0.203",
+  "version": "0.0.204",
   "homepage": "https://bit.cloud/teambit/lanes/hooks/use-lanes",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.lanes",
     "name": "hooks/use-lanes",
-    "version": "0.0.203"
+    "version": "0.0.204"
   },
   "dependencies": {
+    "lodash": "4.17.21",
     "core-js": "^3.0.0",
     "@teambit/base-react.navigation.link": "2.0.27",
-    "@teambit/lane-id": "0.0.256",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.156",
+    "@teambit/lane-id": "0.0.257",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.157",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
+    "@types/lodash": "4.14.165",
     "@types/mocha": "9.1.0",
     "@types/node": "12.20.4",
     "@types/react-dom": "^17.0.5",

package/use-lanes.tsx

@@ -1,13 +1,50 @@
+import { useMemo, useCallback } from 'react';
 import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { LanesModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
-import { gql, QueryResult } from '@apollo/client';
-import { LanesContextModel, useLanesContext } from './lanes-context';
+import { LaneModel, LanesModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
+import { gql } from '@apollo/client';
+import { LaneId } from '@teambit/lane-id';
+import { isEqual } from 'lodash';
+import { useLanesContext } from './lanes-context';
 
 const GET_LANES = gql`
-  query Lanes($extensionId: String) {
+  query Lanes(
+    $extensionId: String
+    $laneIds: [String!]
+    $offset: Int
+    $limit: Int
+    $sort: LaneSort
+    $search: String
+    $viewedLaneId: [String!]
+    $skipViewedLane: Boolean!
+  ) {
     lanes {
       id
-      list {
+      viewedLane: list(ids: $viewedLaneId) @skip(if: $skipViewedLane) {
+        id {
+          name
+          scope
+        }
+        hash
+        createdAt
+        createdBy {
+          name
+          email
+          profileImage
+        }
+        readmeComponent {
+          id {
+            name
+            scope
+            version
+          }
+        }
+        laneComponentIds {
+          name
+          scope
+          version
+        }
+      }
+      list(ids: $laneIds, offset: $offset, limit: $limit, sort: $sort, search: $search) {
         id {
           name
           scope
@@ -37,6 +74,34 @@ const GET_LANES = gql`
           name
           scope
         }
+        createdAt
+        createdBy {
+          name
+          email
+          profileImage
+        }
+        laneComponentIds {
+          name
+          scope
+          version
+        }
+      }
+      default {
+        id {
+          name
+          scope
+        }
+        createdAt
+        createdBy {
+          name
+          email
+          profileImage
+        }
+        laneComponentIds {
+          name
+          scope
+          version
+        }
       }
     }
     getHost(id: $extensionId) {
@@ -45,25 +110,202 @@ const GET_LANES = gql`
   }
 `;
 
-export function useLanes(
+export type LaneSort = {
+  by?: Exclude<keyof LaneModel, 'components' | 'readmeComponent'>;
+  direction?: string;
+};
+export type UseLanesOptions = {
+  ids?: string[];
+  offset?: number;
+  limit?: number;
+  sort?: LaneSort;
+  search?: string;
+};
+
+export type FetchMoreLanesResult = {
+  lanesModel?: LanesModel;
+  loading?: boolean;
+  hasMore?: boolean;
+  nextOffset?: number;
+  currentLimit?: number;
+};
+
+export type SearchLanesResult = {
+  lanesModel?: LanesModel;
+  loading?: boolean;
+};
+
+export type FetchMoreLanes = (offset: number, limit: number, sort?: LaneSort) => Promise<FetchMoreLanesResult>;
+
+export type SearchLanes = (search?: string, skip?: boolean) => SearchLanesResult;
+
+export type UseLanesResult = UseRootLanesResult & {
+  searchResult?: SearchLanesResult;
+};
+
+export type UseRootLanesResult = {
+  lanesModel?: LanesModel;
+  loading?: boolean;
+  fetchMoreLanes?: FetchMoreLanes;
+  hasMore?: boolean;
+  offset?: number;
+  limit?: number;
+};
+
+export type UseLanes = (
   targetLanes?: LanesModel,
-  skip?: boolean
-): LanesContextModel & Omit<QueryResult<LanesQuery & { getHost: { id: string } }>, 'data'> {
-  const lanesContext = useLanesContext();
-  const shouldSkip = skip || !!targetLanes || !!lanesContext?.lanesModel;
+  skip?: boolean,
+  options?: UseLanesOptions,
+  useContext?: boolean,
+  scope?: string
+) => UseLanesResult;
+
+type UseRootLanes = (
+  viewedLaneId?: LaneId,
+  skip?: boolean,
+  options?: UseLanesOptions,
+  scope?: string
+) => UseRootLanesResult;
+
+const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) => {
+  const { ids, offset, limit, sort } = options;
 
-  const { data, loading, ...rest } = useDataQuery<LanesQuery & { getHost: { id: string } }>(GET_LANES, {
-    skip: shouldSkip,
+  const { data, fetchMore, loading } = useDataQuery<LanesQuery>(GET_LANES, {
+    variables: {
+      laneIds: ids,
+      offset,
+      limit,
+      sort,
+      skipViewedLane: !viewedLaneId || viewedLaneId.isDefault(),
+      viewedLaneId: viewedLaneId ? [viewedLaneId?.toString()] : undefined,
+    },
+    skip,
+    errorPolicy: 'all',
+    fetchPolicy: 'cache-and-network',
   });
 
-  let lanesModel: LanesModel | undefined;
-  if (lanesContext) lanesModel = lanesContext.lanesModel;
-  else lanesModel = (data && LanesModel.from({ data, host: data?.getHost?.id })) || targetLanes;
+  const lanesModel = useMemo(() => {
+    if (!loading && !!data) {
+      const newLanesModel = LanesModel.from({ data, scope });
+      return newLanesModel;
+    }
+    return undefined;
+  }, [loading, data, viewedLaneId?.toString(), scope]);
+
+  const hasMore = useMemo(() => {
+    if (loading) return true;
+    if (!limit) return false;
+    if (ids?.length) return (data?.lanes?.list?.length ?? 0) === ids.length;
+    return (data?.lanes?.list?.length ?? 0) >= limit;
+  }, [loading, data]);
+
+  const fetchMoreLanes: FetchMoreLanes = useCallback(
+    async (newOffset, newLimit) => {
+      if (hasMore) {
+        try {
+          const { data: moreData, networkStatus } = await fetchMore({
+            variables: {
+              offset: newOffset,
+              limit: newLimit,
+              laneIds: [],
+              skipViewedLane: !viewedLaneId || viewedLaneId.isDefault(),
+              viewedLaneId: viewedLaneId ? [viewedLaneId?.toString()] : undefined,
+            },
+          });
+          // ===  NetworkStatus.fetchMore
+          const loadingMore = networkStatus === 3;
+
+          if (!loadingMore && moreData.lanes) {
+            const newLanesModel = LanesModel.from({ data: moreData });
+            return {
+              lanesModel: newLanesModel,
+              loading: loadingMore,
+              hasMore: (moreData.lanes.list?.length ?? 0) >= newLimit,
+              nextOffset: newOffset + newLimit,
+            };
+          }
+          return {
+            lanesModel,
+            loading: loadingMore,
+            nextOffset: newOffset,
+            currentLimit: newLimit,
+          };
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+          return {};
+        }
+      }
+      return {
+        lanesModel,
+        loading: false,
+        hasMore: false,
+        nextOffset: newOffset,
+        currentLimit: newLimit,
+      };
+    },
+    [hasMore, viewedLaneId?.toString(), lanesModel]
+  );
 
   return {
-    ...rest,
-    ...(lanesContext || {}),
     loading,
     lanesModel,
+    fetchMoreLanes,
+    hasMore,
+    offset,
+    limit,
+  };
+};
+
+export const useSearchLanes: SearchLanes = (search, skip) => {
+  const { data: searchData, loading: loadingSearch } = useDataQuery<LanesQuery>(GET_LANES, {
+    variables: {
+      search,
+      skipViewedLane: true,
+    },
+    skip: skip || !search,
+    errorPolicy: 'all',
+    fetchPolicy: 'cache-and-network',
+  });
+
+  if (!search) {
+    return {};
+  }
+
+  return {
+    loading: loadingSearch,
+    lanesModel:
+      searchData &&
+      LanesModel.from({ data: { lanes: { ...searchData.lanes, current: undefined, default: undefined } } }),
+  };
+};
+
+export const useLanes: UseLanes = (targetLanes, skip, optionsFromProps, useContextFromProps = true, scope) => {
+  const context = useLanesContext() || {};
+  const options = optionsFromProps || context?.options;
+  const isSameOptions = isEqual(options, context?.options);
+  const useContext = useContextFromProps && !!context && isSameOptions;
+  const shouldSkip = skip || !!targetLanes || useContext;
+  const rootLanesData = useRootLanes(context?.lanesModel?.viewedLane?.id, shouldSkip, options, scope);
+  const searchResult = useSearchLanes(options?.search, shouldSkip);
+
+  if (targetLanes) {
+    return {
+      ...context,
+      ...rootLanesData,
+      lanesModel: targetLanes,
+      searchResult,
+    };
+  }
+  if (useContext) {
+    return {
+      ...context,
+      searchResult,
+    };
+  }
+  return {
+    ...context,
+    ...rootLanesData,
+    searchResult,
   };
-}
+};