🛠 Search fixes 3 (#2292)

* fix access to media

* search fixes

* search fixes

twake/frontend/src/app/components/search-popup/parts/channels-and-contacts.tsx

@@ -0,0 +1,45 @@
+import Search from 'features/global/services/search-service';
+import ChannelsResult from 'components/search-popup/parts/channels-result';
+import UsersResult from 'components/search-popup/parts/users-result';
+import React from 'react';
+import { ChannelType } from 'app/features/channels/types/channel';
+import { UserType } from 'features/users/types/user';
+
+type PropsType = {
+  channels: ChannelType[];
+  users: UserType[];
+};
+
+export default ({ channels, users }: PropsType): JSX.Element => {
+  return (
+    <div>
+      <div className="results-group-title ">Channels and contacts</div>
+
+      {(channels && channels.length && (
+        <div className="result-items">
+          {channels.map(channel => (
+            <ChannelsResult
+              channel={channel}
+              key={channel.id}
+              highlight={Search.value}
+              onClick={() => Search.close()}
+            />
+          ))}
+        </div>
+      )) || <div />}
+
+      {(users && users.length && (
+        <div className="result-items">
+          {users.map(user => (
+            <UsersResult
+              user={user}
+              key={user.id}
+              highlight={Search.value}
+              onClick={() => Search.close()}
+            />
+          ))}
+        </div>
+      )) || <div />}
+    </div>
+  );
+};

twake/frontend/src/app/components/search-popup/parts/channels-result.tsx

@@ -4,10 +4,11 @@ import '../search-popup.scss';
 import { ChannelType } from 'app/features/channels/types/channel';
 import { useWorkspace } from 'features/workspaces/hooks/use-workspaces';
 import assert from 'assert';
-import Emojione from 'components/emojione/emojione';
 import RouterServices from 'features/router/services/router-service';
 import { highlightText } from 'components/search-popup/parts/common';
 import ChannelAvatar from 'components/channel-avatar/channel-avatar';
+import { WorkspaceType } from 'features/workspaces/types/workspace';
+
 const emoji = require('emoji-name-map');
 
 type PropsType = {
@@ -17,11 +18,23 @@ type PropsType = {
 };
 
 export default ({ channel, highlight, onClick }: PropsType): JSX.Element => {
-  assert(channel.workspace_id, 'No workspace_id in channel object');
-  assert(channel.name, 'No name in channel object');
+  const info = {
+    workspace: { name: '' } as WorkspaceType,
+  };
+
+  try {
+    assert(channel.workspace_id, 'No workspace_id in channel object');
+    assert(channel.name, 'No name in channel object');
+    const { workspace } = useWorkspace(channel.workspace_id);
+    assert(workspace);
+    info.workspace = workspace as WorkspaceType;
+    const thumbnail = emoji.get(channel.icon);
+  } catch (e) {
+    console.log(channel);
+    console.error(e);
+    return <div />;
+  }
   // assert(channel.icon, 'No icon in channel object');
-  const { workspace } = useWorkspace(channel.workspace_id);
-  const thumbnail = emoji.get(channel.icon);
 
   const onItemClick = async () => {
     assert(channel.company_id);
@@ -44,7 +57,7 @@ export default ({ channel, highlight, onClick }: PropsType): JSX.Element => {
           className="channel-title"
           dangerouslySetInnerHTML={{ __html: highlightText(channel.name, highlight) }}
         />
-        <div className="channel-description">{workspace?.name}</div>
+        <div className="channel-description">{info.workspace.name}</div>
       </div>
       <div className="result-item-postfix"></div>
     </div>

twake/frontend/src/app/components/search-popup/parts/common.tsx

@@ -5,9 +5,12 @@ import DriveService from 'deprecated/Apps/Drive/Drive';
 import FileUploadService from 'features/files/services/file-upload-service';
 
 export const highlightText = (text?: string, highlight?: string) => {
-  if (!text || !highlight) {
+  if (!text) {
     return '';
   }
+  if (!highlight) {
+    return text;
+  }
   const reg = new RegExp('(' + Strings.removeAccents(highlight) + ')', 'ig');
   return Strings.removeAccents(text).replace(reg, "<span class='highlight'>$1</span>");
 };

twake/frontend/src/app/components/search-popup/parts/discussions.tsx

@@ -0,0 +1,32 @@
+import Search from 'features/global/services/search-service';
+import React from 'react';
+import MessagesResult from 'components/search-popup/parts/messages-result';
+import { MessageExtended } from 'features/messages/types/message';
+
+type PropsType = {
+  title: string;
+  messages: MessageExtended[];
+  limit: number;
+};
+
+export default ({ title, messages, limit }: PropsType): JSX.Element => {
+  if (!messages) {
+    return <div />;
+  }
+
+  return (
+    <div>
+      <div className="results-group-title ">{title}</div>
+      <div className="result-items">
+        {messages.slice(0, limit).map(message => (
+          <MessagesResult
+            key={message.id}
+            message={message}
+            highlight={Search.value}
+            onClick={() => Search.close()}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

twake/frontend/src/app/components/search-popup/parts/files.tsx

@@ -0,0 +1,42 @@
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import FilesResult from 'components/search-popup/parts/recent/files-result';
+import { onFileDownloadClick, onFilePreviewClick } from 'components/search-popup/parts/common';
+import React from 'react';
+import { FileSearchResult } from 'features/messages/types/message';
+
+type PropsType = {
+  title: string;
+  files: FileSearchResult[];
+  limit: number;
+};
+
+export default ({ files, title, limit }: PropsType): JSX.Element => {
+  if (!files || !files.length) {
+    return <div />;
+  }
+
+  return (
+    <div className="results-group">
+      <div className="results-group-title">{title}</div>
+
+      <PerfectScrollbar
+        options={{ suppressScrollX: true }}
+        component="div"
+        className="result-items-files"
+      >
+        {files.slice(0, limit).map(file => (
+          <FilesResult
+            fileSearchResult={file}
+            key={file.id}
+            onPreviewClick={() => {
+              onFilePreviewClick(file);
+            }}
+            onDownloadClick={() => {
+              onFileDownloadClick(file);
+            }}
+          />
+        ))}
+      </PerfectScrollbar>
+    </div>
+  );
+};

twake/frontend/src/app/components/search-popup/parts/media.tsx

@@ -0,0 +1,39 @@
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import { onFilePreviewClick } from 'components/search-popup/parts/common';
+import React from 'react';
+import MediaResult from 'components/search-popup/parts/recent/media-result';
+import { FileSearchResult } from 'features/messages/types/message';
+
+type PropsType = {
+  title: string;
+  files: FileSearchResult[];
+  limit: number;
+};
+
+export default ({ title, files, limit }: PropsType): JSX.Element => {
+  if (!files || !files.length) {
+    return <div />;
+  }
+
+  return (
+    <div className="results-group">
+      <div className="results-group-title">{title}</div>
+
+      <PerfectScrollbar
+        options={{ suppressScrollY: true }}
+        component="div"
+        className="result-items-media"
+      >
+        {files.slice(0, limit).map(file => (
+          <MediaResult
+            fileSearchResult={file}
+            key={file.id}
+            onClick={() => {
+              onFilePreviewClick(file);
+            }}
+          />
+        ))}
+      </PerfectScrollbar>
+    </div>
+  );
+};

twake/frontend/src/app/components/search-popup/parts/messages-filter.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import {
   ObjectModalFormTitle,

twake/frontend/src/app/components/search-popup/parts/messages-result.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import '../search-popup.scss';
-import { useChannel } from 'features/channels/hooks/use-channel';
 import { useUser } from 'features/users/hooks/use-user';
 import { Tooltip } from 'antd';
 import User from 'features/users/services/current-user-service';
 import { useWorkspace } from 'features/workspaces/hooks/use-workspaces';
 import RouterServices from 'features/router/services/router-service';
-import Strings from 'features/global/utils/strings';
 import { highlightText } from './common';
 import { MessageExtended } from 'features/messages/types/message';
 import ChannelAvatar from 'components/channel-avatar/channel-avatar';

twake/frontend/src/app/components/search-popup/parts/quick-result.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import '../search-popup.scss';
 
 import Emojione from 'components/emojione/emojione';

twake/frontend/src/app/components/search-popup/parts/recent/files-result.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
-import { ChannelType } from 'features/channels/types/channel';
-import { FileType } from 'features/files/types/file';
 import FileUploadAPIClient from 'features/files/api/file-upload-api-client';
-import { includes } from 'lodash';
 import { FileSearchResult } from 'features/messages/types/message';
-import Logger from 'features/global/framework/logger-service';
 
 const locale = navigator.languages[0];
 
@@ -21,22 +17,20 @@ const iconFileByMime = (mimetype: string) => {
 };
 
 export default ({ fileSearchResult, onDownloadClick, onPreviewClick }: PropsType): JSX.Element => {
-  let file: FileType;
-  try {
-    // @ts-ignore
-    file = fileSearchResult.message.files[0];
-  } catch (e) {
-    Logger.getLogger('SearchPopup:FilesResult').error(e);
-    console.error(fileSearchResult);
-    return <div />;
-  }
+  const info = {
+    mime: fileSearchResult.metadata?.mime || '',
+    size: fileSearchResult.metadata?.size,
+    created_at: fileSearchResult.created_at,
+    filename: fileSearchResult.metadata?.name,
+    username: fileSearchResult.user.full_name,
+  };
 
-  const icon = iconFileByMime(file.metadata.mime);
+  const icon = iconFileByMime(info.mime);
 
   let sizeStr = '';
 
-  if (file.upload_data?.size) {
-    let size = file.upload_data.size;
+  if (info.size) {
+    let size = info.size;
     let pos = 0;
     while (size > 1024) {
       size = size / 1024;
@@ -45,7 +39,7 @@ export default ({ fileSearchResult, onDownloadClick, onPreviewClick }: PropsType
     sizeStr = size.toFixed(2) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB', 'PB'][pos];
   }
 
-  let date = file.created_at
+  let date = info.created_at
     ? new Intl.DateTimeFormat(locale, {
         year: 'numeric',
         month: 'numeric',
@@ -55,7 +49,7 @@ export default ({ fileSearchResult, onDownloadClick, onPreviewClick }: PropsType
         second: 'numeric',
         weekday: 'short',
         hour12: false,
-      }).format(new Date(file.created_at))
+      }).format(new Date(info.created_at))
     : '';
 
   return (
@@ -64,11 +58,11 @@ export default ({ fileSearchResult, onDownloadClick, onPreviewClick }: PropsType
         <img src={icon} />
       </div>
       <div className="result-item-info">
-        <div className="filename">{file.metadata.name}</div>
+        <div className="filename">{info.filename}</div>
         <div className="details">
           {sizeStr} {date && <span>•</span>} {date}
         </div>
-        <div className="sender">{file.user?.full_name}</div>
+        <div className="sender">{info.username}</div>
       </div>
       <div className="result-item-actions">
         <div className="result-item-icon" onClick={onDownloadClick}>

twake/frontend/src/app/components/search-popup/parts/recent/media-result.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { FileType } from 'features/files/types/file';
 import { FileSearchResult } from 'features/messages/types/message';
 import Logger from 'features/global/framework/logger-service';
-import {
-  getFileMessageDownloadRoute,
-} from 'components/search-popup/parts/common';
+import { getFileMessageDownloadRoute } from 'components/search-popup/parts/common';
 import assert from 'assert';
 
 type PropsType = {

twake/frontend/src/app/components/search-popup/parts/users-result.tsx

@@ -15,6 +15,8 @@ type PropsType = {
 export default ({ user, highlight, onClick }: PropsType): JSX.Element => {
   const { openDiscussion } = useDirectChannels();
 
+  console.log(user.full_name);
+
   const thumbnail =
     User.getThumbnail(user) ||
     'data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCA1NyA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjguOTk2MSIgY3k9IjI4IiByPSIyOCIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzk1Ml82ODM4NSkiLz4KPGNpcmNsZSBjeD0iMjguOTk2MSIgY3k9IjI4IiByPSIyNy43NSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDgiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfOTUyXzY4Mzg1IiB4MT0iMjguOTk2MSIgeTE9IjAiIHgyPSIyOC45OTYxIiB5Mj0iNTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzZFRDFGQiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyNkE0RjgiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K';

twake/frontend/src/app/components/search-popup/search-popup.js

@@ -30,19 +30,11 @@ export default class SearchPopup extends React.Component {
 
     const tabs = [
       { key: 'all', title: 'All' },
+      { key: 'chats', title: 'Chats' },
       { key: 'media', title: 'Media' },
       { key: 'files', title: 'Files' },
     ];
 
-    const experimentalTabs = ['Chats'];
-
-    for (let tabName of experimentalTabs) {
-      const tabNameLC = tabName.toLowerCase();
-      if (localStorage.getItem(`search-tabs-${tabNameLC}`)) {
-        tabs.push({ key: tabNameLC, title: tabName });
-      }
-    }
-
     this.tabs = tabs;
   }
   componentDidMount() {