Merge pull request #2144 from daostack/feature/CW-2099-last-space-nav…

…igation

Mobile - navigate to the last space upon clicking My spaces #2099

src/pages/commonFeed/BaseCommonFeedPage.tsx

@@ -10,6 +10,7 @@ const BaseCommonFeedPage: FC<
   Pick<
     CommonFeedProps,
     | "renderContentWrapper"
+    | "renderLoadingHeader"
     | "onActiveItemDataChange"
     | "feedLayoutOuterStyles"
     | "feedLayoutSettings"

src/pages/commonFeed/CommonFeed.tsx

@@ -29,6 +29,7 @@ import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
 import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases";
 import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import { RightArrowThinIcon } from "@/shared/icons";
 import {
   checkIsFeedItemFollowLayoutItem,
@@ -46,6 +47,7 @@ import {
 } from "@/shared/utils";
 import {
   commonActions,
+  commonLayoutActions,
   selectCommonAction,
   selectRecentStreamId,
   selectSharedFeedItem,
@@ -74,6 +76,7 @@ export type RenderCommonFeedContentWrapper = (data: {
 export interface CommonFeedProps {
   commonId: string;
   renderContentWrapper: RenderCommonFeedContentWrapper;
+  renderLoadingHeader?: (() => ReactNode) | null;
   feedLayoutOuterStyles?: FeedLayoutOuterStyles;
   feedLayoutSettings?: FeedLayoutSettings;
   onActiveItemDataChange?: (data: FeedLayoutItemChangeDataWithType) => void;
@@ -83,11 +86,13 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   const {
     commonId,
     renderContentWrapper: outerContentWrapperRenderer,
+    renderLoadingHeader,
     feedLayoutOuterStyles,
     feedLayoutSettings,
     onActiveItemDataChange,
   } = props;
   const { getCommonPagePath, getProfilePagePath } = useRoutesContext();
+  const isTabletView = useIsTabletView();
   const queryParams = useQueryParams();
   const dispatch = useDispatch();
   const history = useHistory();
@@ -106,6 +111,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   const commonAction = useSelector(selectCommonAction);
   const {
     data: commonData,
+    stateRef,
     fetched: isCommonDataFetched,
     fetchCommonData,
   } = useCommonData(userId);
@@ -397,13 +403,47 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     }
   }, [rootCommonMember?.id]);
 
+  useEffect(() => {
+    return () => {
+      const common = stateRef.current?.data?.common;
+
+      dispatch(
+        commonLayoutActions.setLastCommonFromFeed({
+          id: commonId,
+          data: common
+            ? {
+                name: common.name,
+                image: common.image,
+                isProject: checkIsProject(common),
+                memberCount: common.memberCount,
+              }
+            : null,
+        }),
+      );
+    };
+  }, [commonId]);
+
   if (!isDataFetched) {
+    const headerEl = renderLoadingHeader ? (
+      renderLoadingHeader()
+    ) : (
+      <PureCommonTopNavigation
+        className={styles.pureCommonTopNavigation}
+        iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+      />
+    );
+
     return (
-      <div className={styles.centerWrapper}>
-        <Loader delay={LOADER_APPEARANCE_DELAY} />
-      </div>
+      <>
+        {headerEl}
+        <div className={styles.centerWrapper}>
+          <Loader delay={isTabletView ? 0 : LOADER_APPEARANCE_DELAY} />
+        </div>
+        <CommonSidenavLayoutTabs className={styles.tabs} />
+      </>
     );
   }
+
   if (!commonData) {
     return (
       <>

src/pages/commonFeed/CommonFeedPage.module.scss

@@ -11,3 +11,17 @@
 .desktopRightPane {
   top: var(--split-view-top);
 }
+
+.headerContentWrapper {
+  display: none;
+
+  @include tablet {
+    height: 3.25rem;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 0.0625rem solid $c-light-gray;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}

src/pages/commonFeed/CommonFeedPage.tsx

@@ -6,6 +6,7 @@ import { MainRoutesProvider } from "@/shared/contexts";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
 import {
   multipleSpacesLayoutActions,
+  selectCommonLayoutLastCommonFromFeed,
   selectMultipleSpacesLayoutMainWidth,
 } from "@/store/states";
 import BaseCommonFeedPage, {
@@ -16,6 +17,8 @@ import {
   FeedLayoutOuterStyles,
   FeedLayoutSettings,
   HeaderContent,
+  HeaderCommonContent,
+  HeaderContentWrapper,
 } from "./components";
 import { useActiveItemDataChange } from "./hooks";
 import { generateSplitViewMaxSizeGetter } from "./utils";
@@ -56,6 +59,7 @@ const CommonFeedPage: FC = () => {
   const { id: commonId } = useParams<CommonFeedPageRouterParams>();
   const dispatch = useDispatch();
   const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
+  const lastCommonFromFeed = useSelector(selectCommonLayoutLastCommonFromFeed);
   const onActiveItemDataChange = useActiveItemDataChange();
   const feedLayoutSettings = useMemo<FeedLayoutSettings>(
     () => ({
@@ -64,6 +68,21 @@ const CommonFeedPage: FC = () => {
     }),
     [layoutMainWidth],
   );
+  const lastCommonFromFeedData = lastCommonFromFeed?.data;
+
+  const renderLoadingHeader = lastCommonFromFeedData
+    ? () => (
+        <HeaderContentWrapper className={styles.headerContentWrapper}>
+          <HeaderCommonContent
+            commonId={lastCommonFromFeed.id}
+            commonName={lastCommonFromFeedData.name}
+            commonImage={lastCommonFromFeedData.image}
+            isProject={lastCommonFromFeedData.isProject}
+            memberCount={lastCommonFromFeedData.memberCount}
+          />
+        </HeaderContentWrapper>
+      )
+    : null;
 
   useEffect(() => {
     dispatch(
@@ -84,6 +103,7 @@ const CommonFeedPage: FC = () => {
     <MainRoutesProvider>
       <BaseCommonFeedPage
         renderContentWrapper={renderContentWrapper}
+        renderLoadingHeader={renderLoadingHeader}
         onActiveItemDataChange={onActiveItemDataChange}
         feedLayoutOuterStyles={FEED_LAYOUT_OUTER_STYLES}
         feedLayoutSettings={feedLayoutSettings}

src/pages/commonFeed/components/HeaderContent/HeaderContent.module.scss

@@ -1,120 +1,6 @@
 @import "../../../../constants";
 @import "../../../../styles/sizes";
 
-.container {
-  padding-right: 1.5rem;
-  display: flex;
-  justify-content: space-between;
-
-  @include tablet {
-    padding-left: 1rem;
-    padding-right: 1.375rem;
-  }
-}
-
-.openSidenavButton {
-  display: none;
-
-  @include tablet {
-    display: flex;
-  }
-}
-
-.commonContent {
-  display: flex;
-  overflow: hidden;
-}
-
-.commonLink {
-  padding: 0 1.5rem 0 1.375rem;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  &:hover {
-    .commonName {
-      color: $c-pink-primary;
-      text-decoration: underline;
-    }
-  }
-
-  @include tablet {
-    padding-left: 0;
-    padding-right: 0.5rem;
-  }
-}
-
-.openSidenavIcon {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-right: 0.625rem;
-  transform: rotate(180deg);
-  color: $c-neutrals-600;
-}
-
-.image {
-  width: 2.125rem;
-  height: 2.125rem;
-  margin-right: 0.75rem;
-  object-fit: cover;
-  box-sizing: border-box;
-
-  @include tablet {
-    width: 2rem;
-    height: 2rem;
-    margin-right: 0.625rem;
-  }
-}
-.imageNonRounded {
-  border-radius: 0.375rem;
-}
-.imageRounded {
-  border-radius: 50%;
-}
-
-.commonInfoWrapper {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.commonMainInfoWrapper {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-}
-
-.commonName {
-  margin: 0;
-  font-family: PoppinsSans, sans-serif;
-  font-weight: 500;
-  font-size: $moderate-small;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  @include tablet {
-    font-size: $moderate-xsmall;
-  }
-}
-
-.commonMembersAmount {
-  margin: 0;
-  font-size: $mobile-title;
-  letter-spacing: 0.02em;
-  color: $c-gray-40;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  @include tablet {
-    font-family: PoppinsSans, sans-serif;
-    font-size: $xxsmall-2;
-  }
-}
-
 .actionButtonsWrapper {
   display: flex;
   align-items: center;

src/pages/commonFeed/components/HeaderContent/HeaderContent.tsx

@@ -1,19 +1,19 @@
 import React, { FC } from "react";
-import { NavLink } from "react-router-dom";
-import classNames from "classnames";
-import { useRoutesContext } from "@/shared/contexts";
 import { useCommonFollow } from "@/shared/hooks/useCases";
 import { useIsTabletView } from "@/shared/hooks/viewport";
-import { RightArrowThinIcon, StarIcon } from "@/shared/icons";
 import {
   CirclesPermissions,
   Common,
   CommonMember,
   Governance,
 } from "@/shared/models";
-import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit";
-import { checkIsProject, getPluralEnding } from "@/shared/utils";
-import { ActionsButton, NewStreamButton } from "./components";
+import { checkIsProject } from "@/shared/utils";
+import {
+  ActionsButton,
+  HeaderCommonContent,
+  HeaderContentWrapper,
+  NewStreamButton,
+} from "./components";
 import styles from "./HeaderContent.module.scss";
 
 interface HeaderContentProps {
@@ -25,45 +25,22 @@ interface HeaderContentProps {
 
 const HeaderContent: FC<HeaderContentProps> = (props) => {
   const { className, common, commonMember, governance } = props;
-  const { getCommonPageAboutTabPath } = useRoutesContext();
   const isMobileVersion = useIsTabletView();
   const commonFollow = useCommonFollow(common.id, commonMember);
-  const isProject = checkIsProject(common);
   const showFollowIcon = commonFollow.isFollowInProgress
     ? !commonMember?.isFollowing
     : commonMember?.isFollowing;
 
   return (
-    <div className={classNames(styles.container, className)}>
-      <div className={styles.commonContent}>
-        <TopNavigationOpenSidenavButton
-          className={styles.openSidenavButton}
-          iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
-        />
-        <NavLink
-          className={styles.commonLink}
-          to={getCommonPageAboutTabPath(common.id)}
-        >
-          <CommonAvatar
-            name={common.name}
-            src={common.image}
-            className={classNames(styles.image, {
-              [styles.imageNonRounded]: !isProject,
-              [styles.imageRounded]: isProject,
-            })}
-          />
-
-          <div className={styles.commonInfoWrapper}>
-            <div className={styles.commonMainInfoWrapper}>
-              <h1 className={styles.commonName}>{common.name}</h1>
-              {showFollowIcon && <StarIcon stroke="currentColor" />}
-            </div>
-            <p className={styles.commonMembersAmount}>
-              {common.memberCount} member{getPluralEnding(common.memberCount)}
-            </p>
-          </div>
-        </NavLink>
-      </div>
+    <HeaderContentWrapper className={className}>
+      <HeaderCommonContent
+        commonId={common.id}
+        commonName={common.name}
+        commonImage={common.image}
+        isProject={checkIsProject(common)}
+        memberCount={common.memberCount}
+        showFollowIcon={showFollowIcon}
+      />
       <div className={styles.actionButtonsWrapper}>
         <NewStreamButton
           commonId={common.id}
@@ -78,7 +55,7 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
           isMobileVersion={isMobileVersion}
         />
       </div>
-    </div>
+    </HeaderContentWrapper>
   );
 };