@teambit/lanes.hooks.use-lanes 0.0.38 → 0.0.39

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { LanesContext } from './lanes-context';
+export { LanesContext, LanesContextModel, useLanesContext } from './lanes-context';
 export { LanesProvider } from './lanes-provider';
 export { useLanes } from './use-lanes';

package/dist/index.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLanes = exports.LanesProvider = exports.LanesContext = void 0;
+exports.useLanes = exports.LanesProvider = exports.useLanesContext = exports.LanesContext = void 0;
 var lanes_context_1 = require("./lanes-context");
 Object.defineProperty(exports, "LanesContext", { enumerable: true, get: function () { return lanes_context_1.LanesContext; } });
+Object.defineProperty(exports, "useLanesContext", { enumerable: true, get: function () { return lanes_context_1.useLanesContext; } });
 var lanes_provider_1 = require("./lanes-provider");
 Object.defineProperty(exports, "LanesProvider", { enumerable: true, get: function () { return lanes_provider_1.LanesProvider; } });
 var use_lanes_1 = require("./use-lanes");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAAmF;AAA1E,6GAAA,YAAY,OAAA;AAAqB,gHAAA,eAAe,OAAA;AACzD,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA"}

package/dist/lanes-context.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
-import { LanesModel } from '@teambit/lanes.ui.models';
-export declare const LanesContext: React.Context<LanesModel | undefined>;
-export declare const useLanesContext: () => LanesModel | undefined;
+import { LaneId } from '@teambit/lane-id';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+export declare type LanesContextModel = {
+    lanesModel?: LanesModel;
+    updateLanesModel?: (updatedLanes?: LanesModel) => void;
+    updateViewedLane?: (viewedLaneId?: LaneId) => void;
+};
+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":";;;AAAA,iCAAkD;AAGrC,QAAA,YAAY,GAA0C,IAAA,qBAAa,EAAyB,SAAS,CAAC,CAAC;AAC7G,MAAM,eAAe,GAAiC,GAAG,EAAE;IAChE,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;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"}

package/dist/lanes-provider.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { LaneId } from '@teambit/lane-id';
 export declare type LanesProviderProps = {
     children: ReactNode;
-    viewedLaneId?: string;
+    viewedLaneId?: LaneId;
+    targetLanes?: LanesModel;
 };
-export declare function LanesProvider({ children, viewedLaneId }: LanesProviderProps): JSX.Element;
+export declare function LanesProvider({ children, viewedLaneId, targetLanes }: LanesProviderProps): JSX.Element;

package/dist/lanes-provider.js

@@ -1,15 +1,69 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanesProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const lanes_hooks_use_lanes_1 = require("@teambit/lanes.hooks.use-lanes");
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
+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 }) {
-    const { lanesModel } = (0, lanes_hooks_use_lanes_1.useLanes)(() => viewedLaneId);
-    return react_1.default.createElement(lanes_context_1.LanesContext.Provider, { value: lanesModel }, children);
+function LanesProvider({ children, viewedLaneId, targetLanes }) {
+    const { lanesModel, loading } = (0, lanes_hooks_use_lanes_1.useLanes)(targetLanes);
+    const [lanesState, setLanesState] = (0, react_1.useState)(lanesModel);
+    const location = (0, base_react_navigation_link_1.useLocation)();
+    const query = (0, ui_foundation_ui_react_router_use_query_1.useQuery)();
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        const onHomeRoute = (location === null || location === void 0 ? void 0 : location.pathname) === '/';
+        const viewedLaneFromUrl = ((location === null || location === void 0 ? void 0 : location.pathname) && lanes_ui_models_lanes_model_1.LanesModel.getLaneIdFromPathname(location === null || location === void 0 ? void 0 : location.pathname, query)) || undefined;
+        const viewedLaneIdToSet = viewedLaneId ||
+            viewedLaneFromUrl ||
+            ((_a = lanesState === null || lanesState === void 0 ? void 0 : lanesState.viewedLane) === null || _a === void 0 ? void 0 : _a.id) ||
+            (onHomeRoute && ((_b = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.currentLane) === null || _b === void 0 ? void 0 : _b.id)) ||
+            ((_c = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.lanes.find((lane) => lane.id.isDefault())) === null || _c === void 0 ? void 0 : _c.id);
+        lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.setViewedLane(viewedLaneIdToSet);
+        setLanesState(lanesModel);
+    }, [loading, location === null || location === void 0 ? void 0 : location.pathname, targetLanes]);
+    const updateLanesModel = (updatedLanes) => {
+        setLanesState(new lanes_ui_models_lanes_model_1.LanesModel({
+            lanes: updatedLanes === null || updatedLanes === void 0 ? void 0 : updatedLanes.lanes,
+            viewedLane: updatedLanes === null || updatedLanes === void 0 ? void 0 : updatedLanes.viewedLane,
+            currentLane: updatedLanes === null || updatedLanes === void 0 ? void 0 : updatedLanes.currentLane,
+        }));
+    };
+    const updateViewedLane = (_viewedLaneId) => {
+        lanesState === null || lanesState === void 0 ? void 0 : lanesState.setViewedLane(_viewedLaneId);
+        setLanesState(new lanes_ui_models_lanes_model_1.LanesModel({
+            lanes: lanesState === null || lanesState === void 0 ? void 0 : lanesState.lanes,
+            viewedLane: lanesState === null || lanesState === void 0 ? void 0 : lanesState.viewedLane,
+            currentLane: lanesState === null || lanesState === void 0 ? void 0 : lanesState.currentLane,
+        }));
+    };
+    const lanesContextModel = {
+        lanesModel: lanesState,
+        updateLanesModel,
+        updateViewedLane,
+    };
+    return react_1.default.createElement(lanes_context_1.LanesContext.Provider, { value: lanesContextModel }, children);
 }
 exports.LanesProvider = LanesProvider;
 //# sourceMappingURL=lanes-provider.js.map

package/dist/lanes-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"lanes-provider.js","sourceRoot":"","sources":["../lanes-provider.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyC;AACzC,0EAA0D;AAC1D,mDAA+C;AAO/C,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAsB;IAC1E,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,gCAAQ,EAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IACpD,OAAO,8BAAC,4BAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,IAAG,QAAQ,CAAyB,CAAC;AACtF,CAAC;AAHD,sCAGC"}
+{"version":3,"file":"lanes-provider.js","sourceRoot":"","sources":["../lanes-provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,0EAA0D;AAC1D,sFAAkE;AAClE,8GAA4E;AAC5E,oFAAkE;AAElE,mDAAkE;AAQlE,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAsB;IACvF,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAA,gCAAQ,EAAC,WAAW,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAyB,UAAU,CAAC,CAAC;IACjF,MAAM,QAAQ,GAAG,IAAA,wCAAW,GAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,IAAA,kDAAQ,GAAE,CAAC;IAEzB,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,WAAW,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,MAAK,GAAG,CAAC;QAC/C,MAAM,iBAAiB,GACrB,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,wCAAU,CAAC,qBAAqB,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC;QACnG,MAAM,iBAAiB,GACrB,YAAY;YACZ,iBAAiB;aACjB,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,EAAE,CAAA;YAC1B,CAAC,WAAW,KAAI,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,0CAAE,EAAE,CAAA,CAAC;aAC5C,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,0CAAE,EAAE,CAAA,CAAC;QAE5D,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC7C,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/C,MAAM,gBAAgB,GAAG,CAAC,YAAyB,EAAE,EAAE;QACrD,aAAa,CACX,IAAI,wCAAU,CAAC;YACb,KAAK,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK;YAC1B,UAAU,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU;YACpC,WAAW,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW;SACvC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,aAAsB,EAAE,EAAE;QAClD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QACzC,aAAa,CACX,IAAI,wCAAU,CAAC;YACb,KAAK,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK;YACxB,UAAU,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU;YAClC,WAAW,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW;SACrC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAsB;QAC3C,UAAU,EAAE,UAAU;QACtB,gBAAgB;QAChB,gBAAgB;KACjB,CAAC;IAEF,OAAO,8BAAC,4BAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAyB,CAAC;AAC7F,CAAC;AAjDD,sCAiDC"}

package/dist/use-lanes.d.ts

@@ -1,5 +1,8 @@
-import { LanesModel, LanesQuery } from '@teambit/lanes.ui.models';
+import { LanesModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
 import { QueryResult } from '@apollo/client';
-export declare function useLanes(getViewedLaneId?: () => string | undefined): {
-    lanesModel?: LanesModel;
-} & Omit<QueryResult<LanesQuery>, 'data'>;
+import { LanesContextModel } from './lanes-context';
+export declare function useLanes(targetLanes?: LanesModel): LanesContextModel & Omit<QueryResult<LanesQuery & {
+    getHost: {
+        id: string;
+    };
+}>, 'data'>;

package/dist/use-lanes.js

@@ -12,10 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLanes = void 0;
-const scope_ui_hooks_use_scope_1 = require("@teambit/scope.ui.hooks.use-scope");
-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_1 = require("@teambit/lanes.ui.models");
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
 const client_1 = require("@apollo/client");
 const lanes_context_1 = require("./lanes-context");
 const GET_LANES = (0, client_1.gql) `
@@ -23,9 +21,11 @@ const GET_LANES = (0, client_1.gql) `
     lanes {
       id
       list {
-        id
-        remote
-        isMerged
+        id {
+          name
+          scope
+        }
+        hash
         readmeComponent {
           id {
             name
@@ -42,7 +42,10 @@ const GET_LANES = (0, client_1.gql) `
         }
       }
       current {
-        id
+        id {
+          name
+          scope
+        }
       }
     }
     getHost(id: $extensionId) {
@@ -50,24 +53,20 @@ const GET_LANES = (0, client_1.gql) `
     }
   }
 `;
-function useLanes(getViewedLaneId) {
+function useLanes(targetLanes) {
     var _a;
     const lanesContext = (0, lanes_context_1.useLanesContext)();
-    const skip = !!lanesContext;
-    const _b = (0, ui_foundation_ui_hooks_use_data_query_1.useDataQuery)(GET_LANES, { skip }), { data } = _b, rest = __rest(_b, ["data"]);
-    const { scope, loading } = (0, scope_ui_hooks_use_scope_1.useScopeQuery)(skip);
+    const shouldSkip = !!targetLanes || !!lanesContext;
+    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 = lanesContext.lanesModel;
     else
-        lanesModel = data && lanes_ui_models_1.LanesModel.from({ data, host: (_a = data === null || data === void 0 ? void 0 : data.getHost) === null || _a === void 0 ? void 0 : _a.id, scope, viewedLaneId: getViewedLaneId === null || getViewedLaneId === void 0 ? void 0 : getViewedLaneId() });
-    (0, react_1.useEffect)(() => {
-        if (getViewedLaneId) {
-            const viewedLaneId = getViewedLaneId();
-            lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.setViewedLane(viewedLaneId);
-        }
-    }, [lanesModel, getViewedLaneId]);
-    return Object.assign(Object.assign({}, rest), { loading: rest.loading || !!loading, lanesModel });
+        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 });
 }
 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,gFAAkE;AAClE,iCAAkC;AAClC,0GAA8E;AAC9E,8DAAkE;AAClE,2CAAkD;AAClD,mDAAkD;AAElD,MAAM,SAAS,GAAG,IAAA,YAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BpB,CAAC;AAEF,SAAgB,QAAQ,CACtB,eAA0C;;IAE1C,MAAM,YAAY,GAAG,IAAA,+BAAe,GAAE,CAAC;IACvC,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,CAAC;IAE5B,MAAM,KAAoB,IAAA,oDAAY,EAAC,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,EAArD,EAAE,IAAI,OAA+C,EAA1C,IAAI,cAAf,QAAiB,CAAoC,CAAC;IAC5D,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAA,wCAAa,EAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,UAAsB,CAAC;IAC3B,IAAI,YAAY;QAAE,UAAU,GAAG,YAAY,CAAC;;QAE1C,UAAU,GAAG,IAAI,IAAI,4BAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,EAAI,EAAE,CAAC,CAAC;IAEpH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,eAAe,EAAE;YACnB,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;YACvC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;SACzC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAElC,uCACK,IAAI,KACP,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,EAClC,UAAU,IACV;AACJ,CAAC;AA1BD,4BA0BC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCpB,CAAC;AAEF,SAAgB,QAAQ,CACtB,WAAwB;;IAExB,MAAM,YAAY,GAAG,IAAA,+BAAe,GAAE,CAAC;IACvC,MAAM,UAAU,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY,CAAC;IAEnD,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;AApBD,4BAoBC"}

package/index.ts

@@ -1,3 +1,3 @@
-export { LanesContext } from './lanes-context';
+export { LanesContext, LanesContextModel, useLanesContext } from './lanes-context';
 export { LanesProvider } from './lanes-provider';
 export { useLanes } from './use-lanes';

package/lanes-context.ts

@@ -1,8 +1,18 @@
+import { LaneId } from '@teambit/lane-id';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { createContext, useContext } from 'react';
-import { LanesModel } from '@teambit/lanes.ui.models';
 
-export const LanesContext: React.Context<LanesModel | undefined> = createContext<LanesModel | undefined>(undefined);
-export const useLanesContext: () => LanesModel | undefined = () => {
+export type LanesContextModel = {
+  lanesModel?: LanesModel;
+  updateLanesModel?: (updatedLanes?: LanesModel) => void;
+  updateViewedLane?: (viewedLaneId?: LaneId) => void;
+};
+
+export const LanesContext: React.Context<LanesContextModel | undefined> = createContext<LanesContextModel | undefined>(
+  undefined
+);
+
+export const useLanesContext: () => LanesContextModel | undefined = () => {
   const lanesContext = useContext(LanesContext);
   return lanesContext;
 };

package/lanes-provider.tsx

@@ -1,13 +1,64 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState, useEffect } from 'react';
 import { useLanes } from '@teambit/lanes.hooks.use-lanes';
-import { LanesContext } from './lanes-context';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
+import { useLocation } from '@teambit/base-react.navigation.link';
+import { LaneId } from '@teambit/lane-id';
+import { LanesContext, LanesContextModel } from './lanes-context';
 
 export type LanesProviderProps = {
   children: ReactNode;
-  viewedLaneId?: string;
+  viewedLaneId?: LaneId;
+  targetLanes?: LanesModel;
 };
 
-export function LanesProvider({ children, viewedLaneId }: LanesProviderProps) {
-  const { lanesModel } = useLanes(() => viewedLaneId);
-  return <LanesContext.Provider value={lanesModel}>{children}</LanesContext.Provider>;
+export function LanesProvider({ children, viewedLaneId, targetLanes }: LanesProviderProps) {
+  const { lanesModel, loading } = useLanes(targetLanes);
+  const [lanesState, setLanesState] = useState<LanesModel | undefined>(lanesModel);
+  const location = useLocation();
+  const query = useQuery();
+
+  useEffect(() => {
+    const onHomeRoute = location?.pathname === '/';
+    const viewedLaneFromUrl =
+      (location?.pathname && LanesModel.getLaneIdFromPathname(location?.pathname, query)) || undefined;
+    const viewedLaneIdToSet =
+      viewedLaneId ||
+      viewedLaneFromUrl ||
+      lanesState?.viewedLane?.id ||
+      (onHomeRoute && lanesModel?.currentLane?.id) ||
+      lanesModel?.lanes.find((lane) => lane.id.isDefault())?.id;
+
+    lanesModel?.setViewedLane(viewedLaneIdToSet);
+    setLanesState(lanesModel);
+  }, [loading, location?.pathname, targetLanes]);
+
+  const updateLanesModel = (updatedLanes?: LanesModel) => {
+    setLanesState(
+      new LanesModel({
+        lanes: updatedLanes?.lanes,
+        viewedLane: updatedLanes?.viewedLane,
+        currentLane: updatedLanes?.currentLane,
+      })
+    );
+  };
+
+  const updateViewedLane = (_viewedLaneId?: LaneId) => {
+    lanesState?.setViewedLane(_viewedLaneId);
+    setLanesState(
+      new LanesModel({
+        lanes: lanesState?.lanes,
+        viewedLane: lanesState?.viewedLane,
+        currentLane: lanesState?.currentLane,
+      })
+    );
+  };
+
+  const lanesContextModel: LanesContextModel = {
+    lanesModel: lanesState,
+    updateLanesModel,
+    updateViewedLane,
+  };
+
+  return <LanesContext.Provider value={lanesContextModel}>{children}</LanesContext.Provider>;
 }

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@teambit/lanes.hooks.use-lanes",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "homepage": "https://bit.dev/teambit/lanes/hooks/use-lanes",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.lanes",
     "name": "hooks/use-lanes",
-    "version": "0.0.38"
+    "version": "0.0.39"
   },
   "dependencies": {
     "core-js": "^3.0.0",
-    "@teambit/lanes.ui.models": "0.0.36",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.240",
+    "@teambit/base-react.navigation.link": "2.0.27",
+    "@teambit/lane-id": "0.0.97",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.1",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.493",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.496"
   },
   "devDependencies": {

package/use-lanes.tsx

@@ -1,18 +1,18 @@
-import { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';
-import { useEffect } from 'react';
 import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { LanesModel, LanesQuery } from '@teambit/lanes.ui.models';
+import { LanesModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
 import { gql, QueryResult } from '@apollo/client';
-import { useLanesContext } from './lanes-context';
+import { LanesContextModel, useLanesContext } from './lanes-context';
 
 const GET_LANES = gql`
   query Lanes($extensionId: String) {
     lanes {
       id
       list {
-        id
-        remote
-        isMerged
+        id {
+          name
+          scope
+        }
+        hash
         readmeComponent {
           id {
             name
@@ -29,7 +29,10 @@ const GET_LANES = gql`
         }
       }
       current {
-        id
+        id {
+          name
+          scope
+        }
       }
     }
     getHost(id: $extensionId) {
@@ -39,29 +42,23 @@ const GET_LANES = gql`
 `;
 
 export function useLanes(
-  getViewedLaneId?: () => string | undefined
-): { lanesModel?: LanesModel } & Omit<QueryResult<LanesQuery>, 'data'> {
+  targetLanes?: LanesModel
+): LanesContextModel & Omit<QueryResult<LanesQuery & { getHost: { id: string } }>, 'data'> {
   const lanesContext = useLanesContext();
-  const skip = !!lanesContext;
+  const shouldSkip = !!targetLanes || !!lanesContext;
 
-  const { data, ...rest } = useDataQuery(GET_LANES, { skip });
-  const { scope, loading } = useScopeQuery(skip);
+  const { data, loading, ...rest } = useDataQuery<LanesQuery & { getHost: { id: string } }>(GET_LANES, {
+    skip: shouldSkip,
+  });
 
-  let lanesModel: LanesModel;
-  if (lanesContext) lanesModel = lanesContext;
-  else
-    lanesModel = data && LanesModel.from({ data, host: data?.getHost?.id, scope, viewedLaneId: getViewedLaneId?.() });
-
-  useEffect(() => {
-    if (getViewedLaneId) {
-      const viewedLaneId = getViewedLaneId();
-      lanesModel?.setViewedLane(viewedLaneId);
-    }
-  }, [lanesModel, getViewedLaneId]);
+  let lanesModel: LanesModel | undefined;
+  if (lanesContext) lanesModel = lanesContext.lanesModel;
+  else lanesModel = (data && LanesModel.from({ data, host: data?.getHost?.id })) || targetLanes;
 
   return {
     ...rest,
-    loading: rest.loading || !!loading,
+    ...(lanesContext || {}),
+    loading,
     lanesModel,
   };
 }