From da754bbbe375c65a28cba6f114585699f6bc4337 Mon Sep 17 00:00:00 2001
From: Devin Halladay <devin@devinhalladay.com>
Date: Fri, 11 Mar 2022 02:03:41 -0500
Subject: [PATCH] first pass at swapping downshift for blueprint suggest

---
 next.config.js                                |  2 -
 public/styles/style.scss                      | 30 +++++++++------
 src/components/Canvas/index.tsx               |  2 +-
 .../Header/components/Navigator.tsx           | 38 ++++++++++++++-----
 src/context/selection-context.tsx             |  2 +-
 5 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/next.config.js b/next.config.js
index 8d3c65a..1a1b245 100644
--- a/next.config.js
+++ b/next.config.js
@@ -18,8 +18,6 @@ module.exports = {
       process.env.NODE_ENV === 'production' ? false : true,
   },
 
-  reactStrictMode: true,
-
   typescript: {
     ignoreBuildErrors: true,
   },
diff --git a/public/styles/style.scss b/public/styles/style.scss
index ceeea89..eae047d 100644
--- a/public/styles/style.scss
+++ b/public/styles/style.scss
@@ -184,18 +184,26 @@ header {
       }
     }
 
-    input {
-      border: 0;
+    .bp4-popover-target {
+      flex-grow: 1;
+    }
+
+    .bp4-input-group {
       height: 100%;
-      font-size: 100%;
-      padding: 0;
-      padding-left: 15px;
-      flex: 1;
-      outline: none;
-      -webkit-appearance: none;
-      border-radius: 0 10px 10px 0;
-      background-color: $light-gray4;
-      color: $pt-text-color;
+
+      input {
+        border: 0;
+        height: 100%;
+        font-size: 100%;
+        padding: 0;
+        padding-left: 15px;
+        flex: 1;
+        outline: none;
+        -webkit-appearance: none;
+        border-radius: 0 10px 10px 0;
+        background-color: $light-gray4;
+        color: $pt-text-color;
+      }
     }
   }
 }
diff --git a/src/components/Canvas/index.tsx b/src/components/Canvas/index.tsx
index b1b7907..1ac43f1 100644
--- a/src/components/Canvas/index.tsx
+++ b/src/components/Canvas/index.tsx
@@ -130,7 +130,7 @@ export default withApollo(({ blocks }: ICanvas) => {
         },
         mousewheel: {
           enabled: true,
-          modifiers: 'meta',
+          modifiers: 'cmd',
         },
         resizing: {
           enabled: true,
diff --git a/src/components/Header/components/Navigator.tsx b/src/components/Header/components/Navigator.tsx
index 40fe57e..d1a43e5 100644
--- a/src/components/Header/components/Navigator.tsx
+++ b/src/components/Header/components/Navigator.tsx
@@ -1,3 +1,5 @@
+import { MenuItem } from '@blueprintjs/core';
+import { Select, Suggest } from '@blueprintjs/select';
 import { useSelection } from '@context/selection-context';
 import { useUser } from '@context/user-context';
 import Downshift from 'downshift';
@@ -5,18 +7,20 @@ import { useRouter } from 'next/router';
 import React, { useRef, useState } from 'react';
 import { GlobalHotKeys } from 'react-hotkeys';
 import KeyMaps from '~/src/constants/KeyMaps';
+import { Ervell } from '~/src/types';
 
 const GrovesNavigator = ({ initialSelection }) => {
   const router = useRouter();
 
   const { channels, index } = useUser();
-  const { selectedChannel, setSelectedChannel } = useSelection();
+  const { selectedChannel, setSelectedChannel, channelID } = useSelection();
 
   const allUserChannels = index.flatMap((channelSet) =>
     channelSet.channels.flatMap((c) => c),
   );
 
-  const [inputItems, setInputItems] = useState(allUserChannels);
+  const [inputItems, setInputItems] =
+    useState<Ervell.ChannelMetadata[]>(allUserChannels);
 
   const inputRef = useRef(null);
 
@@ -27,14 +31,28 @@ const GrovesNavigator = ({ initialSelection }) => {
 
   const keyHandlers = { FOCUS_NAVIGATOR: (e) => handleFocusInput(e) };
 
-  const selectInputContents = () => {
-    inputRef.current && inputRef.current.select();
-  };
-
   return (
-    <>
+    <div className="grove-navigation">
       <GlobalHotKeys handlers={keyHandlers} keyMap={KeyMaps} />
-      <Downshift
+      <Suggest
+        className="flex"
+        popoverProps={{
+          fill: true,
+          minimal: true,
+          popoverClassName: 'max-h-72 overflow-scroll',
+        }}
+        fill={true}
+        noResults={<MenuItem disabled={true} text="No results." />}
+        items={inputItems}
+        itemRenderer={(item) => <MenuItem text={item.title} key={item.id} />}
+        onItemSelect={(item) => {
+          console.log(item);
+        }}
+        defaultSelectedItem={
+          inputItems.filter((item) => item.id === channelID)[0]
+        }
+      />
+      {/* <Downshift
         onInputValueChange={(inputValue) => {
           setInputItems(
             allUserChannels.filter((item) =>
@@ -125,8 +143,8 @@ const GrovesNavigator = ({ initialSelection }) => {
             </div>
           </>
         )}
-      </Downshift>
-    </>
+      </Downshift> */}
+    </div>
   );
 };
 
diff --git a/src/context/selection-context.tsx b/src/context/selection-context.tsx
index a00405c..90990b9 100644
--- a/src/context/selection-context.tsx
+++ b/src/context/selection-context.tsx
@@ -32,7 +32,7 @@ export const SelectionProvider = withApollo((props): any => {
 
   const channelID = getChannelID();
 
-  let initialSelection = null;
+  let initialSelection = selectedChannel;
 
   return (
     <SelectionContext.Provider