From fbbb5a34ef1277f9b24b22c308ac0f913458ded7 Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Mon, 12 Apr 2021 18:40:27 +0300
Subject: [PATCH] Web: Files: added view saving to localStorage, refactoring

---
 .../pages/Home/Section/Body/FilesContent.js      | 12 ++++++------
 .../Body/FilesTile/sub-components/TileContent.js | 16 +++++++++-------
 .../Home/Section/Body/sub-components/Badges.js   |  2 +-
 .../ASC.Files/Client/src/store/FilesStore.js     |  3 ++-
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
index a50a7daa4b..1a13209268 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
@@ -591,7 +591,7 @@ class FilesContent extends React.Component {
             />
           </div>
 
-          {viewAs !== "tile" && (
+          {viewAs !== "tile" ? (
             <Text
               containerMinWidth="120px"
               containerWidth="15%"
@@ -605,8 +605,8 @@ class FilesContent extends React.Component {
             >
               {fileOwner}
             </Text>
-          )}
-          {viewAs !== "tile" && (
+          ) : null}
+          {viewAs !== "tile" ? (
             <Text
               containerMinWidth="200px"
               containerWidth="15%"
@@ -618,8 +618,8 @@ class FilesContent extends React.Component {
             >
               {(fileExst || !providerKey) && updatedDate && updatedDate}
             </Text>
-          )}
-          {viewAs !== "tile" && (
+          ) : null}
+          {viewAs !== "tile" ? (
             <Text
               containerMinWidth="90px"
               containerWidth="10%"
@@ -639,7 +639,7 @@ class FilesContent extends React.Component {
                   )}: ${foldersCount}`
                 : ""}
             </Text>
-          )}
+          ) : null}
         </Content>
       </>
     );
diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/TileContent.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/TileContent.js
index 01335fde02..68da321a63 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/TileContent.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/TileContent.js
@@ -109,12 +109,14 @@ const getSideInfo = (content) => {
   const lastIndex = content.length - 1;
 
   content.forEach((element, index) => {
-    const delimiter = index === lastIndex ? "" : " | ";
-    if (index > 1) {
-      info +=
-        element.props && element.props.children
-          ? element.props.children + delimiter
-          : "";
+    if (element) {
+      const delimiter = index === lastIndex ? "" : " | ";
+      if (index > 1) {
+        info +=
+          element.props && element.props.children
+            ? element.props.children + delimiter
+            : "";
+      }
     }
   });
 
@@ -158,7 +160,7 @@ const TileContent = (props) => {
         <MainIcons className="mainIcons">{children[1]}</MainIcons>
       </MainContainerWrapper>
       {children.map((element, index) => {
-        if (index > 1) {
+        if (index > 1 && element) {
           return (
             <SideContainerWrapper
               disableSideInfo={disableSideInfo}
diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
index a14b9d6e3a..0957699b77 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
@@ -45,7 +45,7 @@ const Badges = (props) => {
     onShowVersionHistory,
     onBadgeClick,
   } = props;
-  const { id, locked, fileStatus, versionGroup, access, title } = item;
+  const { id, locked, fileStatus, versionGroup, title } = item;
   const { fileExst } = item;
 
   const showNew = !!newItems;
diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js
index 5751e2962d..f75e1a8720 100644
--- a/products/ASC.Files/Client/src/store/FilesStore.js
+++ b/products/ASC.Files/Client/src/store/FilesStore.js
@@ -26,7 +26,7 @@ class FilesStore {
 
   isLoaded = false;
   isLoading = false;
-  viewAs = "row";
+  viewAs = localStorage.getItem("viewAs") || "row";
   dragging = false;
   privacyInstructions = "https://www.onlyoffice.com/private-rooms.aspx";
   isInit = false;
@@ -71,6 +71,7 @@ class FilesStore {
 
   setViewAs = (viewAs) => {
     this.viewAs = viewAs;
+    localStorage.setItem("viewAs", viewAs);
   };
 
   setDragging = (dragging) => {