adding in search and router

.vscode/settings.json

@@ -6,7 +6,7 @@
   "editor.tabSize": 2,
   "workbench.iconTheme": "material-icon-theme",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "workbench.colorTheme": "Quiet Light",
+  "workbench.colorTheme": "Default Light+",
   "javascript.format.semicolons": "insert",
   "window.zoomLevel": 1
 

packages/desktop/src/providers/RouterProvider.tsx

@@ -0,0 +1,30 @@
+// make do router given absense of react router in desktop apps
+
+import React, { useState } from 'react';
+
+export enum EPage {
+  START_NEW_CONVERSATION = 'START_NEW_CONVERSATION',
+  FULL_PAGE_OMNI_SEARCH = 'FULL_PAGE_OMNI_SEARCH',
+  CONVERSATION_DETAILS = 'CONVERSATION_DETAILS',
+  PROFILE = 'PROFILE',
+  WELCOME = 'WELCOME',
+}
+
+interface IRouterContext {
+  page: EPage;
+  setPage?: React.Dispatch<React.SetStateAction<EPage>>;
+}
+
+const RouterContext = React.createContext<IRouterContext>({
+  page: EPage.START_NEW_CONVERSATION,
+});
+
+export function RouterProvider({ children }: { children: React.ReactNode }) {
+  const [page, setPage] = useState<EPage>(EPage.START_NEW_CONVERSATION);
+
+  return <RouterContext.Provider value={{ page, setPage }}>{children}</RouterContext.Provider>;
+}
+
+export default function useRouter() {
+  return React.useContext(RouterContext);
+}

packages/desktop/src/providers/SearchProvider.tsx

@@ -0,0 +1,147 @@
+import React, { useCallback, useContext, useState } from 'react';
+
+import Conversation from '@nirvana/core/models/conversation.model';
+import { ConversationMap } from '../util/types';
+import User from '@nirvana/core/models/user.model';
+import useAuth from './AuthProvider';
+import { useDebounce } from 'react-use';
+
+interface ISearchContext {
+  searchUsers?: (searchQuery: string) => void;
+  omniSearch?: (searchQuery: string) => void;
+  searchConversations?: (searchQuery: string) => void;
+
+  conversationResults: Conversation[];
+  userResults: User[];
+
+  isSearching: boolean;
+
+  // transparency into what our search is searching for
+  searchQuery: string;
+  clearSearch?: () => void;
+}
+
+const SearchContext = React.createContext<ISearchContext>({
+  isSearching: false,
+  conversationResults: [],
+  userResults: [],
+  searchQuery: '',
+});
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const { user } = useAuth();
+  // const { conversationMap } = useConversations();
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const [userResults, setUserResultsResults] = useState<User[]>([]);
+  const [conversationResults, setConversationResultsResults] = useState<Conversation[]>([]);
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
+  // debounce user search and any other async ones
+  const [, cancel] = useDebounce(
+    async () => {
+      if (searchQuery) {
+        // let results = await firestoreSearchUsers(searchQuery);
+        // results = results.filter((userResult) => userResult. user._id);
+
+        const results = [];
+        setUserResultsResults(results);
+
+        console.warn('searched users', results);
+      }
+
+      setIsSearching(false);
+    },
+    1000,
+    [searchQuery, setUserResultsResults, user, setIsSearching],
+  );
+
+  // any view will hit this when they want and start the debounce process
+  const searchUsers = useCallback(
+    (searchQuery: string) => {
+      setSearchQuery(searchQuery);
+      setIsSearching(true);
+    },
+    [setSearchQuery, setIsSearching],
+  );
+
+  /**
+   *
+   * @param searchQuery
+   * given a search query, finds conversations
+   */
+
+  const searchRelevantConversations = useCallback(
+    async (searchQuery: string): Promise<Conversation[]> => {
+      const relevantConversations: Conversation[] = [];
+
+      // Object.values(conversationMap).forEach((conversation) => {
+      //   for (const cachedConversationUser of conversation.userCache) {
+      //     if (
+      //       cachedConversationUser.email
+      //         .toLocaleLowerCase()
+      //         .includes(searchQuery.toLocaleLowerCase())
+      //     ) {
+      //       relevantConversations.push(conversation);
+      //       return;
+      //     }
+
+      //     if (
+      //       cachedConversationUser.displayName
+      //         .toLocaleLowerCase()
+      //         .includes(searchQuery.toLocaleLowerCase())
+      //     ) {
+      //       relevantConversations.push(conversation);
+      //       return;
+      //     }
+      //   }
+
+      //   if (conversation.name?.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase())) {
+      //     relevantConversations.push(conversation);
+      //     return;
+      //   }
+      // });
+
+      return relevantConversations;
+    },
+    [],
+  );
+
+  const omniSearch = useCallback(
+    async (searchQuery: string) => {
+      searchQuery = searchQuery.replace('/', '');
+      setSearchQuery(searchQuery);
+
+      // user search
+      setIsSearching(true);
+
+      // client side conversation search
+      const relevantConversations = await searchRelevantConversations(searchQuery);
+      setConversationResultsResults(relevantConversations);
+    },
+    [setIsSearching, setSearchQuery, setConversationResultsResults, searchRelevantConversations],
+  );
+
+  const clearSearch = useCallback(() => setSearchQuery(''), [setSearchQuery]);
+
+  return (
+    <SearchContext.Provider
+      value={{
+        isSearching,
+        omniSearch,
+        searchUsers,
+        userResults,
+        conversationResults,
+        searchQuery,
+        clearSearch,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+}
+
+export default function useSearch() {
+  return useContext(SearchContext);
+}

packages/desktop/src/tree/Navbar.tsx

@@ -7,10 +7,11 @@ import KeyboardShortcutLabel from '../subcomponents/KeyboardShortcutLabel';
 import { KeyboardShortcuts } from '../util/keyboard';
 import NirvanaLogo from '../subcomponents/NirvanaLogo';
 import { blueGrey } from '@mui/material/colors';
+import useSearch from '../providers/SearchProvider';
 import useTerminal from './Terminal';
 
 const Navbar = () => {
-  const [searchQuery, setSearchQuery] = useState<string>('');
+  const { searchQuery, omniSearch, conversationResults, userResults, isSearching } = useSearch();
 
   const searchRef = useRef<HTMLInputElement>(null);
   const onSearchFocus = useCallback(() => {
@@ -21,9 +22,9 @@ const Navbar = () => {
 
   const handleSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchQuery(e.target.value);
+      omniSearch(e.target.value);
     },
-    [setSearchQuery],
+    [omniSearch],
   );
 
   const rendersCount = useRendersCount();
@@ -68,7 +69,7 @@ const Navbar = () => {
           inputRef={searchRef}
         />
 
-        {/* {isSearching && <CircularProgress size={20} />} */}
+        {isSearching && <CircularProgress size={20} />}
 
         {searchQuery ? (
           <KeyboardShortcutLabel label={KeyboardShortcuts.escape.label} />

packages/desktop/src/tree/NewConversationDialog.tsx

@@ -0,0 +1,193 @@
+import {
+  Autocomplete,
+  AutocompleteChangeReason,
+  AutocompleteRenderOptionState,
+  Button,
+  Container,
+  Dialog,
+  FormControl,
+  IconButton,
+  InputBase,
+  InputLabel,
+  ListItem,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+  styled,
+} from '@mui/material';
+import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
+import { useDebounce, useKeyPressEvent, useToggle } from 'react-use';
+import useRouter, { EPage } from '../providers/RouterProvider';
+
+import CircularProgress from '@mui/material/CircularProgress';
+import { FiX } from 'react-icons/fi';
+import { NirvanaRules } from '../util/rules';
+import User from '@nirvana/core/models/user.model';
+import UserDetailRow from '../subcomponents/UserDetailRow';
+import { blueGrey } from '@mui/material/colors';
+import toast from 'react-hot-toast';
+import useAuth from '../providers/AuthProvider';
+import useSearch from '../providers/SearchProvider';
+
+export default function NewConversationDialog() {
+  const { page, setPage } = useRouter();
+
+  const { user } = useAuth();
+
+  const { userResults, searchQuery, searchUsers, isSearching } = useSearch();
+
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+
+  const handleChangeSelections = useCallback(
+    (e: React.SyntheticEvent<Element, Event>, value: User[], reason: AutocompleteChangeReason) => {
+      setSelectedUsers(value);
+    },
+    [],
+  );
+
+  const handleChangeSearchInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => {
+      searchUsers(newValue);
+    },
+    [searchUsers],
+  );
+
+  const renderOption = useCallback(
+    (props: HTMLAttributes<HTMLLIElement>, option: User, state: AutocompleteRenderOptionState) => (
+      <ListItem {...props}>
+        <UserDetailRow user={option} />
+      </ListItem>
+    ),
+    [],
+  );
+
+  const [conversationName, setConversationName] = useState<string>('');
+
+  useEffect(() => {
+    if (selectedUsers.length < 2) {
+      setConversationName('');
+    }
+  }, [selectedUsers, setConversationName]);
+
+  const handleChangeName = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setConversationName(e.target.value);
+    },
+    [setConversationName],
+  );
+
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const handleSubmitLocal = useCallback(async () => {
+    if (selectedUsers.length === 0) {
+      toast.error('Must select a person!');
+      return;
+    }
+
+    if (selectedUsers.length + 1 >= NirvanaRules.maxMembersPerConversation) {
+      toast.error('A group can only have 8 people including you!');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    // await handleSubmit(selectedUsers, conversationName);
+    toast('submitting');
+
+    // clear form for next time
+    setSelectedUsers([]);
+    setConversationName('');
+
+    setIsSubmitting(false);
+  }, [selectedUsers, setConversationName, conversationName, setSelectedUsers, setIsSubmitting]);
+
+  const handleClose = useCallback(() => {
+    setPage(EPage.WELCOME);
+  }, [setPage]);
+
+  return (
+    <Dialog fullScreen open={page === EPage.START_NEW_CONVERSATION} onClose={handleClose}>
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: blueGrey[50],
+          position: 'relative',
+        }}
+      >
+        <IconButton sx={{ position: 'absolute', top: 10, right: 10 }} onClick={handleClose}>
+          <FiX />
+        </IconButton>
+
+        <Container
+          maxWidth="sm"
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 5,
+          }}
+        >
+          <Typography variant="h4">Start a Conversation</Typography>
+
+          <Autocomplete
+            multiple
+            loading={isSearching}
+            includeInputInList
+            id="tags-outlined"
+            autoHighlight
+            onInputChange={handleChangeSearchInput}
+            options={userResults}
+            renderOption={renderOption}
+            getOptionLabel={(option) => (typeof option === 'string' ? option : option.name)}
+            value={selectedUsers}
+            onChange={handleChangeSelections}
+            filterSelectedOptions
+            isOptionEqualToValue={(optionUser, valueUser) => optionUser._id.equals(valueUser._id)}
+            filterOptions={(options) => options}
+            inputValue={searchQuery}
+            renderInput={(params) => (
+              <TextField
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus
+                fullWidth
+                label="People"
+                {...params}
+                placeholder="Search by name or email"
+              />
+            )}
+          />
+
+          {selectedUsers.length > 1 && (
+            <TextField
+              value={conversationName}
+              onChange={handleChangeName}
+              fullWidth
+              label="Name (optional)"
+              placeholder="Channel, subject line, whatever..."
+            />
+          )}
+
+          <Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
+            <Button onClick={handleClose} variant={'text'}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSubmitLocal}
+              disabled={selectedUsers.length === 0 || isSubmitting}
+              variant={'contained'}
+              color="primary"
+            >
+              {isSubmitting ? <CircularProgress /> : 'Connect'}
+            </Button>
+          </Stack>
+        </Container>
+      </Container>
+    </Dialog>
+  );
+}

packages/desktop/src/tree/Terminal.tsx

@@ -1,10 +1,15 @@
 import { Box, Container, Grid } from '@mui/material';
 
+import { EPage } from '../providers/RouterProvider';
 import Navbar from './Navbar';
+import NewConversationDialog from './NewConversationDialog';
 import React from 'react';
 import { blueGrey } from '@mui/material/colors';
+import useRouter from '../providers/RouterProvider';
 
 export default function Terminal() {
+  const { page } = useRouter();
+
   return (
     <Container
       maxWidth={false}
@@ -47,6 +52,9 @@ export default function Terminal() {
       >
         This is the footer controls
       </Box>
+
+      {/* create chat dialog */}
+      <NewConversationDialog />
     </Container>
   );
 }

packages/desktop/src/tree/electronApp.tsx

@@ -3,6 +3,8 @@ import { ElectronProvider } from '../providers/ElectronProvider';
 import { NirvanaTheme } from '../mui/NirvanaTheme';
 import ProtectedRoute from './ProtectedRoute';
 import React from 'react';
+import { RouterProvider } from '../providers/RouterProvider';
+import { SearchProvider } from '../providers/SearchProvider';
 import { SocketProvider } from '../providers/SocketProvider';
 import { StabilityProvider } from '../providers/StabilityProvider';
 import Terminal from './Terminal';
@@ -19,7 +21,11 @@ export default function ElectronApp() {
             <ProtectedRoute>
               <ZenProvider>
                 <SocketProvider>
-                  <Terminal />
+                  <SearchProvider>
+                    <RouterProvider>
+                      <Terminal />
+                    </RouterProvider>
+                  </SearchProvider>
                 </SocketProvider>
               </ZenProvider>
             </ProtectedRoute>