From 5848a17dc5bbb0fa327c480c9f946df5b53b0026 Mon Sep 17 00:00:00 2001
From: Martina <martinalong10@gmail.com>
Date: Tue, 1 Sep 2020 11:46:36 -0700
Subject: [PATCH] minor fixes for search

---
 components/core/Profile.js        |  4 +--
 components/core/SearchDropdown.js | 58 ++++++++++++++++++++-----------
 components/core/SearchModal.js    |  9 +----
 scenes/SceneProfile.js            |  1 +
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/components/core/Profile.js b/components/core/Profile.js
index a1940ae9..8b25ca0a 100644
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@@ -62,9 +62,7 @@ export default class Profile extends React.Component {
                   >
                     <SlatePreviewBlock
                       slate={slate}
-                      editing={
-                        relation.slate.data.ownerId === this.props.viewer.id
-                      }
+                      editing={this.props.editing}
                     />
                   </div>
                 );
diff --git a/components/core/SearchDropdown.js b/components/core/SearchDropdown.js
index 81cbb6a7..deb65f92 100644
--- a/components/core/SearchDropdown.js
+++ b/components/core/SearchDropdown.js
@@ -3,6 +3,7 @@ import * as Constants from "~/common/constants";
 import * as SVG from "~/common/svg";
 
 import { css } from "@emotion/react";
+import { LoaderSpinner } from "~/components/system/components/Loaders";
 
 const STYLES_DROPDOWN_CONTAINER = css`
   box-sizing: border-box;
@@ -30,8 +31,9 @@ const STYLES_DROPDOWN_ITEM = css`
   padding: 8px;
   font-size: 0.8em;
   border-radius: 16px;
-  border: 1px solid ${Constants.system.white};
+  border: 1px solid transparent;
   cursor: pointer;
+  margin-bottom: -1px;
 
   :hover {
     border-color: ${Constants.system.border} !important;
@@ -73,6 +75,11 @@ const STYLES_INPUT = css`
   }
 `;
 
+const STYLES_LOADER = css`
+  display: flex;
+  justify-content: center;
+`;
+
 export class SearchDropdown extends React.Component {
   _input;
   _optionRoot;
@@ -87,13 +94,18 @@ export class SearchDropdown extends React.Component {
 
   componentDidMount = () => {
     window.addEventListener("keydown", this._handleDocumentKeydown);
-    this._input.focus();
   };
 
   componentWillUnmount = () => {
     window.removeEventListener("keydown", this._handleDocumentKeydown);
   };
 
+  componentDidUpdate = (prevProps) => {
+    if (prevProps.disabled && !this.props.disabled) {
+      this._input.focus();
+    }
+  };
+
   _handleChange = (e) => {
     if (this.state.selectedIndex !== -1) {
       this.setState({ selectedIndex: -1 });
@@ -150,23 +162,29 @@ export class SearchDropdown extends React.Component {
   render() {
     return (
       <div css={STYLES_DROPDOWN_CONTAINER} style={this.props.containerStyle}>
-        <div style={{ position: "relative" }}>
-          <input
-            css={STYLES_INPUT}
-            value={this.props.inputValue}
-            placeholder={this.props.placeholder}
-            style={this.props.inputStyle}
-            onChange={this._handleChange}
-            ref={(c) => {
-              this._input = c;
-            }}
-          />
-          <SVG.Search
-            height="20px"
-            style={{ position: "absolute", left: "12px", top: "10px" }}
-          />
-        </div>
-
+        {this.props.disabled ? (
+          <div css={STYLES_LOADER}>
+            <LoaderSpinner />
+          </div>
+        ) : (
+          <div style={{ position: "relative" }}>
+            <input
+              disabled={this.props.disabled}
+              css={STYLES_INPUT}
+              value={this.props.inputValue}
+              placeholder={this.props.placeholder}
+              style={this.props.inputStyle}
+              onChange={this._handleChange}
+              ref={(c) => {
+                this._input = c;
+              }}
+            />
+            <SVG.Search
+              height="20px"
+              style={{ position: "absolute", left: "12px", top: "10px" }}
+            />
+          </div>
+        )}
         <div
           data-menu
           ref={(c) => {
@@ -186,7 +204,7 @@ export class SearchDropdown extends React.Component {
                 borderColor:
                   this.state.selectedIndex === i
                     ? Constants.system.border
-                    : Constants.system.white,
+                    : "transparent",
                 ...this.props.itemStyle,
               }}
               onClick={() => this.props.onSelect(each.value)}
diff --git a/components/core/SearchModal.js b/components/core/SearchModal.js
index 849956c8..d96a627e 100644
--- a/components/core/SearchModal.js
+++ b/components/core/SearchModal.js
@@ -11,7 +11,6 @@ import { css } from "@emotion/react";
 import { SearchDropdown } from "~/components/core/SearchDropdown";
 import { dispatchCustomEvent } from "~/common/custom-events";
 import { SlatePreviewRow } from "~/components/core/SlatePreviewBlock";
-import { LoaderSpinner } from "~/components/system/components/Loaders";
 
 const STYLES_ICON_CIRCLE = css`
   height: 24px;
@@ -162,12 +161,6 @@ const FileEntry = ({ item }) => {
   );
 };
 
-const STYLES_LOADER = css`
-  position: absolute;
-  top: calc(50% - 22px);
-  left: calc(50% - 22px);
-`;
-
 export class SearchModal extends React.Component {
   state = {
     loading: true,
@@ -314,6 +307,7 @@ export class SearchModal extends React.Component {
     return (
       <div css={STYLES_MODAL}>
         <SearchDropdown
+          disabled={this.state.loading}
           placeholder="Search..."
           results={this.state.results}
           onSelect={this._handleSelect}
@@ -321,7 +315,6 @@ export class SearchModal extends React.Component {
           inputValue={this.state.inputValue}
           style={STYLES_SEARCH_DROPDOWN}
         />
-        {this.state.loading ? <LoaderSpinner css={STYLES_LOADER} /> : null}
       </div>
     );
   }
diff --git a/scenes/SceneProfile.js b/scenes/SceneProfile.js
index 89fd58e3..7f343f5a 100644
--- a/scenes/SceneProfile.js
+++ b/scenes/SceneProfile.js
@@ -191,6 +191,7 @@ export default class SceneProfile extends React.Component {
               ? null
               : buttons
           }
+          editing={this.props.viewer.username === this.props.data.username}
         />
       </ScenePage>
     );