Join common from a space #2076

src/pages/Login/containers/LoginContainer/LoginContainer.tsx

@@ -15,6 +15,7 @@ import {
   ErrorCode,
   ScreenSize,
   QueryParamKey,
+  ROUTE_PATHS,
 } from "@/shared/constants";
 import { useQueryParams, useRemoveQueryParams } from "@/shared/hooks";
 import { ModalProps, ModalType } from "@/shared/interfaces";
@@ -24,6 +25,7 @@ import {
   emptyFunction,
   getInboxPagePath,
   isGeneralError,
+  matchOneOfRoutes,
 } from "@/shared/utils";
 import { isFirebaseError } from "@/shared/utils/firebase";
 import { LoginModalType } from "../../../Auth/interface";
@@ -104,9 +106,24 @@ const LoginContainer: FC = () => {
       } else {
         handleClose();
       }
-      history.push(getInboxPagePath());
+      if (
+        !matchOneOfRoutes(
+          history.location.pathname,
+          [ROUTE_PATHS.COMMON, ROUTE_PATHS.V04_COMMON],
+          {
+            exact: false,
+          },
+        )
+      ) {
+        history.push(getInboxPagePath());
+      }
     },
-    [removeQueryParams, handleClose, shouldShowUserDetailsAfterSignUp],
+    [
+      removeQueryParams,
+      handleClose,
+      shouldShowUserDetailsAfterSignUp,
+      history.location.pathname,
+    ],
   );
 
   const handleAuthButtonClick = useCallback(

src/pages/common/BaseCommon.tsx

@@ -42,16 +42,19 @@ const BaseCommon: FC<CommonProps> = (props) => {
     fetched: isCommonDataFetched,
     fetchCommonData,
   } = useFullCommonData();
+  const rootCommonId = commonData?.common.rootCommonId;
   const parentCommonId = commonData?.common.directParent?.commonId;
   const parentCircleId = commonData?.common.directParent?.circleId;
   const {
     fetched: isGlobalDataFetched,
     fetchUserRelatedData,
+    fetchRootCommonMemberData,
     fetchParentCommonMemberData,
-    data: { commonMember, parentCommonMember, isJoinPending },
+    data: { commonMember, rootCommonMember, parentCommonMember, isJoinPending },
     setIsJoinPending,
   } = useGlobalCommonData({
     commonId,
+    rootCommonId,
     parentCommonId,
     parentCircleId,
     governanceCircles: commonData?.governance.circles,
@@ -86,6 +89,7 @@ const BaseCommon: FC<CommonProps> = (props) => {
 
   useEffect(() => {
     if (isCommonDataFetched) {
+      fetchRootCommonMemberData();
       fetchParentCommonMemberData();
     }
   }, [userId, parentCommonId, parentCircleId, isCommonDataFetched]);
@@ -116,6 +120,7 @@ const BaseCommon: FC<CommonProps> = (props) => {
       settings={settings}
       defaultTab={defaultTab}
       common={commonData.common}
+      rootCommon={commonData.rootCommon}
       parentCommon={commonData.parentCommon}
       governance={commonData.governance}
       parentCommons={commonData.parentCommons}
@@ -124,6 +129,7 @@ const BaseCommon: FC<CommonProps> = (props) => {
       supportersData={commonData.supportersData}
       isGlobalDataFetched={isGlobalDataFetched}
       commonMember={commonMember}
+      rootCommonMember={rootCommonMember}
       parentCommonMember={parentCommonMember}
       isJoinPending={isJoinPending}
       setIsJoinPending={setIsJoinPending}

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -64,22 +64,6 @@
   align-items: flex-end;
 }
 
-.loaderWrapper {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.permissionsText {
-  font-size: $mobile-title;
-  color: var(--primary-fill);
-  margin-right: 0.3125rem;
-  width: 100%;
-  text-align: center;
-  cursor: pointer;
-}
-
 .messageInput {
   width: 100%;
   min-height: 2.625rem;

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -89,8 +89,7 @@ interface ChatComponentInterface {
   isHidden: boolean;
   onMessagesAmountChange?: (newMessagesAmount: number) => void;
   directParent?: DirectParent | null;
-  isJoinPending?: boolean;
-  onJoinCommon?: () => void;
+  renderChatInput?: () => ReactNode;
   onUserClick?: (userId: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
@@ -131,8 +130,7 @@ export default function ChatComponent({
   isCommonMemberFetched,
   onMessagesAmountChange,
   directParent,
-  isJoinPending = false,
-  onJoinCommon,
+  renderChatInput: renderChatInputOuter,
   onUserClick,
   onFeedItemClick,
   onInternalLinkClick,
@@ -569,19 +567,74 @@ export default function ChatComponent({
     }
   }, [discussionMessages.length]);
 
-  const renderJoinCommonContent = (): ReactNode => {
-    if (isJoinPending) {
-      return (
-        <div className={styles.loaderWrapper}>
-          <Loader />
-        </div>
-      );
+  const renderChatInput = (): ReactNode => {
+    const shouldHideChatInput = !isChatChannel && (!hasAccess || isHidden);
+
+    if (shouldHideChatInput) {
+      return null;
+    }
+    if (!isChatChannel) {
+      const chatInputEl = renderChatInputOuter?.();
+
+      if (chatInputEl || chatInputEl === null) {
+        return chatInputEl;
+      }
+    }
+    if (!isAuthorized) {
+      return null;
     }
 
     return (
-      <span className={styles.permissionsText} onClick={onJoinCommon}>
-        Join
-      </span>
+      <>
+        <ButtonIcon
+          className={styles.addFilesIcon}
+          onClick={() => {
+            document.getElementById("file")?.click();
+          }}
+        >
+          <PlusIcon />
+        </ButtonIcon>
+        <input
+          id="file"
+          type="file"
+          onChange={uploadFiles}
+          style={{ display: "none" }}
+          multiple
+          accept={ACCEPTED_EXTENSIONS}
+        />
+        <BaseTextEditor
+          inputContainerRef={inputContainerRef}
+          emojiContainerClassName={classNames({
+            [styles.emojiContainer]: isMultiLineInput,
+          })}
+          size={TextEditorSize.Auto}
+          editorRef={editorRef}
+          className={classNames(styles.messageInput, {
+            [styles.messageInputEmpty]: checkIsTextEditorValueEmpty(message),
+          })}
+          classNameRtl={styles.messageInputRtl}
+          elementStyles={{
+            emoji: classNames({
+              [styles.singleEmojiText]: emojiCount.isSingleEmoji,
+              [styles.multipleEmojiText]: emojiCount.isMultipleEmoji,
+            }),
+          }}
+          value={message}
+          onChange={setMessage}
+          placeholder="What do you think?"
+          onKeyDown={onEnterKeyDown}
+          users={users}
+          shouldReinitializeEditor={shouldReinitializeEditor}
+          onClearFinished={onClearFinished}
+        />
+        <button
+          className={styles.sendIcon}
+          onClick={sendChatMessage}
+          disabled={!canSendMessage}
+        >
+          <SendIcon />
+        </button>
+      </>
     );
   };
 
@@ -618,73 +671,17 @@ export default function ChatComponent({
           onInternalLinkClick={onInternalLinkClick}
         />
       </div>
-      {isAuthorized && (
-        <div className={styles.bottomChatContainer}>
-          <MessageReply users={users} />
-          <ChatFilePreview />
-          <div
-            className={classNames(styles.chatInputWrapper, {
-              [styles.chatInputWrapperMultiLine]: isMultiLineInput,
-            })}
-          >
-            {!isChatChannel && (!commonMember || !hasAccess || isHidden) ? (
-              renderJoinCommonContent()
-            ) : (
-              <>
-                <ButtonIcon
-                  className={styles.addFilesIcon}
-                  onClick={() => {
-                    document.getElementById("file")?.click();
-                  }}
-                >
-                  <PlusIcon />
-                </ButtonIcon>
-                <input
-                  id="file"
-                  type="file"
-                  onChange={uploadFiles}
-                  style={{ display: "none" }}
-                  multiple
-                  accept={ACCEPTED_EXTENSIONS}
-                />
-                <BaseTextEditor
-                  inputContainerRef={inputContainerRef}
-                  emojiContainerClassName={classNames({
-                    [styles.emojiContainer]: isMultiLineInput,
-                  })}
-                  size={TextEditorSize.Auto}
-                  editorRef={editorRef}
-                  className={classNames(styles.messageInput, {
-                    [styles.messageInputEmpty]:
-                      checkIsTextEditorValueEmpty(message),
-                  })}
-                  classNameRtl={styles.messageInputRtl}
-                  elementStyles={{
-                    emoji: classNames({
-                      [styles.singleEmojiText]: emojiCount.isSingleEmoji,
-                      [styles.multipleEmojiText]: emojiCount.isMultipleEmoji,
-                    }),
-                  }}
-                  value={message}
-                  onChange={setMessage}
-                  placeholder="What do you think?"
-                  onKeyDown={onEnterKeyDown}
-                  users={users}
-                  shouldReinitializeEditor={shouldReinitializeEditor}
-                  onClearFinished={onClearFinished}
-                />
-                <button
-                  className={styles.sendIcon}
-                  onClick={sendChatMessage}
-                  disabled={!canSendMessage}
-                >
-                  <SendIcon />
-                </button>
-              </>
-            )}
-          </div>
+      <div className={styles.bottomChatContainer}>
+        <MessageReply users={users} />
+        <ChatFilePreview />
+        <div
+          className={classNames(styles.chatInputWrapper, {
+            [styles.chatInputWrapperMultiLine]: isMultiLineInput,
+          })}
+        >
+          {renderChatInput()}
         </div>
-      )}
+      </div>
     </div>
   );
 }

src/pages/common/components/CommonContent/CommonContent.tsx

@@ -28,6 +28,7 @@ interface CommonContentProps {
   settings: CommonPageSettings;
   defaultTab: string;
   common: Common;
+  rootCommon: Common | null;
   parentCommon?: Common;
   governance: Governance;
   parentCommons: Common[];
@@ -36,6 +37,7 @@ interface CommonContentProps {
   supportersData: SupportersData | null;
   isGlobalDataFetched: boolean;
   commonMember: (CommonMember & CirclesPermissions) | null;
+  rootCommonMember: CommonMember | null;
   parentCommonMember: CommonMember | null;
   isJoinPending: boolean;
   setIsJoinPending: (isJoinPending: boolean) => void;
@@ -51,6 +53,8 @@ const CommonContent: FC<CommonContentProps> = (props) => {
     subCommons,
     isGlobalDataFetched,
     commonMember,
+    rootCommon,
+    rootCommonMember,
     parentCommonMember,
     parentCommon,
     parentCommonSubCommons,
@@ -99,9 +103,11 @@ const CommonContent: FC<CommonContentProps> = (props) => {
     <CommonDataProvider
       settings={settings}
       common={common}
+      rootCommon={rootCommon}
       parentCommon={parentCommon}
       governance={governance}
       commonMember={commonMember}
+      rootCommonMember={rootCommonMember}
       parentCommonMember={parentCommonMember}
       isGlobalDataFetched={isGlobalDataFetched}
       parentCommons={parentCommons}