improvements on new structure

packages/client/src/pages/Home/InfoPanel/Body/handlers/propsHandler.js

@@ -0,0 +1,41 @@
+class PropsHandler {
+  constructor(props) {
+    this.props = props;
+  }
+
+  defaultProps() {
+    return {
+      t: this.props.t,
+      selectedItems: this.props.selectedItems,
+      personal: this.props.personal,
+      culture: this.props.culture,
+      isRootFolder: this.props.isRootFolder,
+      isRecycleBinFolder: this.props.isRecycleBinFolder,
+      isRecentFolder: this.props.isRecentFolder,
+      isFavoritesFolder: this.props.isFavoritesFolder,
+    };
+  }
+
+  filesProps() {
+    return {
+      selectedFolder: this.props.selectedFolder,
+      getFolderInfo: this.props.getFolderInfo,
+      getIcon: this.props.getIcon,
+      getFolderIcon: this.props.getFolderIcon,
+      getShareUsers: this.props.getShareUsers,
+      onSelectItem: this.props.onSelectItem,
+      setSharingPanelVisible: this.props.setSharingPanelVisible,
+      createThumbnail: this.props.createThumbnail,
+    };
+  }
+
+  galleryProps() {
+    return {
+      gallerySelected: this.props.gallerySelected,
+      personal: this.props.personal,
+      culture: this.props.culture,
+    };
+  }
+}
+
+export default PropsHandler;

packages/client/src/pages/Home/InfoPanel/Body/handlers/tableComponents.js

@@ -0,0 +1,21 @@
+import Link from "@docspace/components/link";
+import Text from "@docspace/components/text";
+
+const TableText = ({ t, text }) => (
+  <Text truncate className="property-content">
+    {t(text)}
+  </Text>
+);
+
+const TableLink = ({ t, text, href }) => (
+  <Link
+    isTextOverflow
+    className="property-content"
+    href={href}
+    isHovered={true}
+  >
+    {t(text)}
+  </Link>
+);
+
+export default { TableText, TableLink };

packages/client/src/pages/Home/InfoPanel/Body/index.js

@@ -1,19 +1,21 @@
-import { inject, observer } from "mobx-react";
 import React from "react";
-import { withTranslation } from "react-i18next";
 import { withRouter } from "react-router";
-import GalleryItem from "./views/Gallery/GalleryItem";
-import GalleryEmptyScreen from "./views/Gallery/GalleryEmptyScreen";
-import { StyledInfoRoomBody } from "./styles/styles.js";
+import { inject, observer } from "mobx-react";
+import { withTranslation } from "react-i18next";
+
 import { Base } from "@docspace/components/themes";
 import withLoader from "../../../../HOCs/withLoader";
 import Loaders from "@docspace/common/components/Loaders";
-import Members from "./views/Members";
-import History from "./views/History";
-import Details from "./views/Details";
+
+import { StyledInfoPanelBody } from "./styles/styles.js";
+
+import Gallery from "./views/Gallery";
+import Room from "./views/Room";
+import Info from "./views/Info";
 
 const InfoPanelBodyContent = ({
   t,
+  isRooms,
   selfId,
   selectedFolder,
   selectedItems,
@@ -24,11 +26,9 @@ const InfoPanelBodyContent = ({
   onSelectItem,
   setSharingPanelVisible,
   isRootFolder,
-  isRecycleBinFolder,
-  isRecentFolder,
   isFavoritesFolder,
-  isShareFolder,
-  isCommonFolder,
+  isRecentFolder,
+  isRecycleBinFolder,
   isGallery,
   gallerySelected,
   personal,
@@ -45,11 +45,9 @@ const InfoPanelBodyContent = ({
     isRecycleBinFolder,
     isRecentFolder,
     isFavoritesFolder,
-    isShareFolder,
-    isCommonFolder,
   };
 
-  const filesProps = {
+  const detailsProps = {
     selectedFolder,
     getFolderInfo,
     getIcon,
@@ -60,45 +58,35 @@ const InfoPanelBodyContent = ({
     createThumbnail,
   };
 
-  const virtualRoomProps = {
+  const roomProps = {
+    selectedItems,
+    selectedFolder,
     roomState,
+    defaultProps,
+    membersProps: {
+      selfId,
+      getShareUsers,
+    },
+    historyProps: {
+      personal,
+      culture,
+    },
+    detailsProps,
   };
-  return isGallery ? (
-    !gallerySelected ? (
-      <GalleryEmptyScreen />
-    ) : (
-      <StyledInfoRoomBody>
-        <GalleryItem
-          selectedItem={gallerySelected}
-          personal={personal}
-          culture={culture}
-        />
-      </StyledInfoRoomBody>
-    )
-  ) : (
-    <StyledInfoRoomBody>
-      {roomState === "members" ? (
-        <Members t={t} selfId={selfId} />
-      ) : roomState === "history" ? (
-        <History t={t} personal={personal} culture={culture} />
-      ) : (
-        <Details {...defaultProps} {...filesProps} />
-      )}
-      {/* {isPrivacyFolder ? (
-        <>
-          {roomState === "members" ? (
-            <Members t={t} selfId={selfId} />
-          ) : roomState === "history" ? (
-            <History t={t} personal={personal} culture={culture} />
-          ) : (
-            <Details {...defaultProps} {...filesProps} />
-          )}
-        </>
-      ) : (
-        <Details {...defaultProps} {...filesProps} />
-      )} */}
-    </StyledInfoRoomBody>
-  );
+
+  const galleryProps = {
+    gallerySelected,
+    personal,
+    culture,
+  };
+
+  const getInfoPanelBodyContent = () => {
+    if (isGallery) return <Gallery {...galleryProps} />;
+    else if (isRooms) return <Room {...roomProps} />;
+    else return <Info {...defaultProps} {...detailsProps} />;
+  };
+
+  return <StyledInfoPanelBody>{getInfoPanelBodyContent()}</StyledInfoPanelBody>;
 };
 
 InfoPanelBodyContent.defaultProps = { theme: Base };
@@ -126,19 +114,17 @@ export default inject(
       createThumbnail,
     } = filesStore;
 
-    const { getIcon, getFolderIcon } = settingsStore;
-    const { onSelectItem } = filesActionsStore;
-    const { setSharingPanelVisible } = dialogsStore;
-    const { isRootFolder } = selectedFolderStore;
-
     const {
       isRecycleBinFolder,
       isRecentFolder,
       isFavoritesFolder,
-      isShareFolder,
-      isCommonFolder,
     } = treeFoldersStore;
 
+    const { getIcon, getFolderIcon } = settingsStore;
+    const { onSelectItem } = filesActionsStore;
+    const { setSharingPanelVisible } = dialogsStore;
+    const { isRootFolder } = selectedFolderStore;
+
     const selectedItems =
       selection?.length > 0
         ? [...selection]
@@ -146,6 +132,9 @@ export default inject(
         ? [bufferSelection]
         : [];
 
+    console.log(selectedItems);
+    console.log({ ...selectedFolderStore });
+
     return {
       selfId,
       selectedFolder: { ...selectedFolderStore },
@@ -159,11 +148,9 @@ export default inject(
       setSharingPanelVisible,
 
       isRootFolder,
-      isRecycleBinFolder,
-      isRecentFolder,
       isFavoritesFolder,
-      isShareFolder,
-      isCommonFolder,
+      isRecentFolder,
+      isRecycleBinFolder,
 
       gallerySelected,
       personal,

packages/client/src/pages/Home/InfoPanel/Body/styles/styles.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { Base } from "@docspace/components/themes";
 import { mobile } from "@docspace/components/utils/device";
 
-const StyledInfoRoomBody = styled.div`
+const StyledInfoPanelBody = styled.div`
   padding: 0 3px 0 20px;
   @media ${mobile} {
     padding: 0 8px 0 16px;
@@ -252,7 +252,7 @@ const StyledOpenSharingPanel = styled.div`
   text-decoration: underline;
   text-decoration-style: dashed;
 `;
-StyledInfoRoomBody.defaultProps = { theme: Base };
+StyledInfoPanelBody.defaultProps = { theme: Base };
 StyledTitle.defaultProps = { theme: Base };
 StyledThumbnail.defaultProps = { theme: Base };
 StyledAccess.defaultProps = { theme: Base };
@@ -260,7 +260,7 @@ StyledAccessItem.defaultProps = { theme: Base };
 StyledOpenSharingPanel.defaultProps = { theme: Base };
 
 export {
-  StyledInfoRoomBody,
+  StyledInfoPanelBody,
   StyledTitle,
   StyledThumbnail,
   StyledSubtitle,

packages/client/src/pages/Home/InfoPanel/Body/views/Gallery/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyledInfoPanelBody } from "../../styles/styles";
+import GalleryEmptyScreen from "./GalleryEmptyScreen";
+import GalleryItem from "./GalleryItem";
+
+const Gallery = ({ gallerySelected, personal, culture }) => {
+  return !gallerySelected ? (
+    <GalleryEmptyScreen />
+  ) : (
+    <GalleryItem
+      selectedItem={gallerySelected}
+      personal={personal}
+      culture={culture}
+    />
+  );
+};
+
+export default Gallery;

packages/client/src/pages/Home/InfoPanel/Body/views/Info/SingleItem.js

@@ -1,9 +1,14 @@
 import React, { useEffect, useState } from "react";
+
 import { FileType } from "@docspace/common/constants";
 import { LANGUAGE } from "@docspace/common/constants";
+
+import getCorrectDate from "@docspace/components/utils/getCorrectDate";
+
 import Link from "@docspace/components/link";
 import Text from "@docspace/components/text";
 import Tooltip from "@docspace/components/tooltip";
+
 import {
   StyledAccess,
   StyledAccessItem,
@@ -13,7 +18,6 @@ import {
   StyledThumbnail,
   StyledTitle,
 } from "../../styles/styles.js";
-import getCorrectDate from "@docspace/components/utils/getCorrectDate";
 
 const SingleItem = (props) => {
   const {
@@ -21,7 +25,6 @@ const SingleItem = (props) => {
     selectedItem,
     onSelectItem,
     setSharingPanelVisible,
-    //getFolderInfo,
     getIcon,
     getFolderIcon,
     getShareUsers,
@@ -277,6 +280,8 @@ const SingleItem = (props) => {
         [selectedItem.id]
       );
 
+      console.log(accesses);
+
       const result = {
         owner: {},
         others: [],

packages/client/src/pages/Home/InfoPanel/Body/views/Info/index.js

@@ -3,7 +3,7 @@ import EmptyScreen from "./EmptyScreen";
 import SeveralItems from "./SeveralItems";
 import SingleItem from "./SingleItem";
 
-const Details = ({
+const Info = ({
   t,
 
   selectedItems,
@@ -24,9 +24,6 @@ const Details = ({
   isRecycleBinFolder,
   isRecentFolder,
   isFavoritesFolder,
-  isShareFolder,
-  isCommonFolder,
-  isPrivacyFolder,
 }) => {
   const singleItem = (item) => {
     const dontShowLocation = isRootFolder;
@@ -64,11 +61,7 @@ const Details = ({
       {selectedItems.length === 0 ? (
         // Can get future changes, currently only "My documents" displays its info
         isRootFolder &&
-        (isRecycleBinFolder ||
-          isRecentFolder ||
-          isFavoritesFolder ||
-          isShareFolder ||
-          isCommonFolder) ? (
+        (isRecycleBinFolder || isRecentFolder || isFavoritesFolder) ? (
           <EmptyScreen />
         ) : (
           singleItem({
@@ -85,4 +78,4 @@ const Details = ({
   );
 };
 
-export default Details;
+export default Info;

packages/client/src/pages/Home/InfoPanel/Body/views/Room/Details/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Details = () => {
+  return <></>;
+};
+
+export default Details;

packages/client/src/pages/Home/InfoPanel/Body/views/Room/History/historyBlockContent.js

@@ -3,7 +3,7 @@ import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
 import IconButton from "@docspace/components/icon-button";
 import { ReactSVG } from "react-svg";
-import { StyledUserNameLink } from "../../styles/VirtualRoom/history";
+import { StyledUserNameLink } from "../../../styles/VirtualRoom/history";
 
 const HistoryBlockContent = ({ t, action, details }) => {
   return (

packages/client/src/pages/Home/InfoPanel/Body/views/Room/History/index.js

@@ -2,12 +2,12 @@ import Avatar from "@docspace/components/avatar";
 import ContextMenuButton from "@docspace/components/context-menu-button";
 import Text from "@docspace/components/text";
 import React from "react";
-import { StyledTitle } from "../../styles/styles";
+import { StyledTitle } from "../../../styles/styles";
 import {
   StyledHistoryBlock,
   StyledHistoryList,
-} from "../../styles/VirtualRoom/history";
-import { fillingFormsVR } from "../mock_data";
+} from "../../../styles/VirtualRoom/history";
+import { fillingFormsVR } from "../../mock_data";
 import getCorrectDate from "@docspace/components/utils/getCorrectDate";
 import HistoryBlockContent from "./historyBlockContent";
 

packages/client/src/pages/Home/InfoPanel/Body/views/Room/Members/User.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { StyledUser } from "../../styles/VirtualRoom/members";
+import { StyledUser } from "../../../styles/VirtualRoom/members";
 import Avatar from "@docspace/components/avatar";
 import LinkWithDropdown from "@docspace/components/link-with-dropdown";
 
@@ -37,7 +37,7 @@ const User = ({ t, user, selfId, isExpect }) => {
           fontWeight={600}
           hasScroll={true}
           withBackdrop={false}
-          dropdownType="apparDashedAfterHover"
+          dropdownType="appearDashedAfterHover"
           isDisabled={user.role === "Owner"}
           data={[
             {

packages/client/src/pages/Home/InfoPanel/Body/views/Room/Members/UserList.js

@@ -2,17 +2,17 @@ import React from "react";
 import PropTypes from "prop-types";
 import User from "./User";
 
-import { StyledUserList } from "../../styles/VirtualRoom/members";
+import { StyledUserList } from "../../../styles/VirtualRoom/members";
 
 const UserList = ({ t, users, selfId, isExpect }) => {
   return (
     <StyledUserList>
-      {users.map((user) => (
+      {Object.values(users).map((user) => (
         <User
           t={t}
-          key={user.id}
+          key={user.sharedTo.id}
           selfId={selfId}
-          user={user}
+          user={user.sharedTo}
           isExpect={isExpect}
         />
       ))}

packages/client/src/pages/Home/InfoPanel/Body/views/Room/Members/index.js

@@ -1,26 +1,35 @@
+import React, { useState, useEffect } from "react";
+
 import ContextMenuButton from "@docspace/components/context-menu-button";
 import IconButton from "@docspace/components/icon-button";
 import Text from "@docspace/components/text";
-import React from "react";
-import { StyledTitle } from "../../styles/styles";
-import { StyledUserTypeHeader } from "../../styles/VirtualRoom/members";
-import { fillingFormsVR } from "../mock_data";
+import { StyledTitle } from "../../../styles/styles";
+import { StyledUserTypeHeader } from "../../../styles/VirtualRoom/members";
 import UserList from "./UserList";
 
-const Members = ({ t, selfId }) => {
-  const data = fillingFormsVR;
+const Members = ({ t, selfId, selectedItem, getShareUsers }) => {
+  const [members, setMembers] = useState([]);
+
+  useEffect(async () => {
+    const fetchedMembers = await getShareUsers(
+      [selectedItem.parentId],
+      [selectedItem.id]
+    );
+    setMembers(fetchedMembers);
+    console.log("members", fetchedMembers);
+  }, []);
 
   return (
     <>
       <StyledTitle withBottomBorder>
-        <img className="icon" src={data.icon} alt="thumbnail-icon" />
-        <Text className="text">{data.title}</Text>
+        <img className="icon" src={selectedItem.icon} alt="thumbnail-icon" />
+        <Text className="text">{selectedItem.title}</Text>
         <ContextMenuButton getData={() => {}} className="context-menu-button" />
       </StyledTitle>
 
       <StyledUserTypeHeader>
         <Text className="title">
-          {t("Users in room")} : {data.members.inRoom.length}
+          {t("Users in room")} : {members.length}
         </Text>
         <IconButton
           className={"icon"}
@@ -33,9 +42,9 @@ const Members = ({ t, selfId }) => {
         />
       </StyledUserTypeHeader>
 
-      <UserList t={t} users={data.members.inRoom} selfId={selfId} />
+      <UserList t={t} users={members} selfId={selfId} />
 
-      <StyledUserTypeHeader>
+      {/* <StyledUserTypeHeader>
         <Text className="title">{`${t("Expect people")}:`}</Text>
         <IconButton
           className={"icon"}
@@ -48,7 +57,7 @@ const Members = ({ t, selfId }) => {
         />
       </StyledUserTypeHeader>
 
-      <UserList t={t} users={data.members.expect} isExpect />
+      <UserList t={t} users={data.members.expect} isExpect /> */}
     </>
   );
 };

packages/client/src/pages/Home/InfoPanel/Body/views/Room/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import Details from "./Details";
+import History from "./History";
+import Members from "./Members";
+
+const Room = ({
+  selectedItems,
+  selectedFolder,
+  roomState,
+  defaultProps,
+  membersProps,
+  historyProps,
+  detailsProps,
+}) => {
+  const selectedItem =
+    selectedItems.length === 0
+      ? selectedFolder
+      : selectedItems.length === 1
+      ? selectedItems[0]
+      : selectedItems;
+
+  return <></>;
+
+  // if (selectedItems.length === 0)
+  //   return <Details {...defaultProps} {...detailsProps} />;
+  // else return <Details {...defaultProps} {...detailsProps} />;
+};
+
+export default Room;

packages/client/src/pages/Home/InfoPanel/Header/index.js

@@ -20,17 +20,43 @@ import {
 const InfoPanelHeaderContent = ({
   t,
   setIsVisible,
+  roomState,
   setRoomState,
   isGallery,
-  isRoom,
+  isRooms,
 }) => {
   const closeInfoPanel = () => setIsVisible(false);
 
+  const submenuData = [
+    {
+      id: "members",
+      name: "Members",
+      onClick: () => setRoomState("members"),
+      content: null,
+    },
+    {
+      id: "history",
+      name: "History",
+      onClick: () => setRoomState("history"),
+      content: null,
+    },
+    {
+      id: "details",
+      name: "Details",
+      onClick: () => setRoomState("details"),
+      content: null,
+    },
+  ];
+
+  const [submenuStartSelect] = submenuData.filter(
+    (submenuItem) => submenuItem.id === roomState
+  );
+
   return (
-    <StyledInfoPanelHeader isRoom={isRoom}>
+    <StyledInfoPanelHeader isRooms={isRooms}>
       <div className="main">
         <Text className="header-text" fontSize="21px" fontWeight="700">
-          {isRoom
+          {isRooms
             ? t("Room")
             : isGallery
             ? t("FormGallery:FormTemplateInfo")
@@ -54,30 +80,12 @@ const InfoPanelHeaderContent = ({
         </StyledInfoPanelToggleWrapper>
       </div>
 
-      {isRoom && (
+      {isRooms && (
         <div className="submenu">
           <Submenu
             style={{ width: "100%" }}
-            data={[
-              {
-                content: null,
-                onClick: () => setRoomState("members"),
-                id: "Members",
-                name: "Members",
-              },
-              {
-                content: null,
-                onClick: () => setRoomState("history"),
-                id: "History",
-                name: "History",
-              },
-              {
-                content: null,
-                onClick: () => setRoomState("details"),
-                id: "Details",
-                name: "Details",
-              },
-            ]}
+            data={submenuData}
+            startSelect={submenuStartSelect}
           />
         </div>
       )}
@@ -86,8 +94,8 @@ const InfoPanelHeaderContent = ({
 };
 
 export default inject(({ auth }) => {
-  const { setIsVisible, setRoomState } = auth.infoPanelStore;
-  return { setIsVisible, setRoomState };
+  const { setIsVisible, roomState, setRoomState } = auth.infoPanelStore;
+  return { setIsVisible, roomState, setRoomState };
 })(
   withTranslation(["Common", "FormGallery"])(
     withLoader(observer(InfoPanelHeaderContent))(

packages/client/src/pages/Home/InfoPanel/Header/styles/styles.js

@@ -5,15 +5,15 @@ import { tablet } from "@docspace/components/utils/device";
 const StyledInfoPanelHeader = styled.div`
   width: 100%;
   max-width: 100%;
-  height: ${(props) => (props.isRoom ? "85px" : "52px")};
-  min-height: ${(props) => (props.isRoom ? "85px" : "52px")};
+  height: ${(props) => (props.isRooms ? "85px" : "52px")};
+  min-height: ${(props) => (props.isRooms ? "85px" : "52px")};
   display: flex;
   flex-direction: column;
   border-bottom: ${(props) =>
-    props.isRoom ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
+    props.isRooms ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
   .main {
-    height: ${(props) => (props.isRoom ? "53px" : "52px")};
-    min-height: ${(props) => (props.isRoom ? "53px" : "52px")};
+    height: ${(props) => (props.isRooms ? "53px" : "52px")};
+    min-height: ${(props) => (props.isRooms ? "53px" : "52px")};
     display: flex;
     flex-direction: row;
     align-items: center;