Merge pull request #55 from FrostCord/FROS-Search-Impl

Filtering server/dm lists

Author: multimokia

components/home/DMessageList.tsx

@@ -2,6 +2,8 @@ import { Channel, DMChannelWithRecipient } from '@/types/dbtypes';
 import UserIcon from '../icons/UserIcon';
 import styles from '@/styles/Chat.module.css';
 import { useDMChannels, useSetChannel } from '@/lib/store';
+import { SearchBar } from '@/components/forms/Styles';
+import { useState } from 'react';
 
 function mapToComponentArray(
   _map: Map<string, DMChannelWithRecipient>,
@@ -36,7 +38,7 @@ function mapToComponentArray(
 export default function DMessageList() {
   const setChannel = useSetChannel();
   const dmChannels = useDMChannels();
-  console.table(dmChannels);
+  const [ filteredDMs, setFilteredDMs ] = useState(dmChannels);
 
   return (
     <>
@@ -48,7 +50,29 @@ export default function DMessageList() {
         </div>
       </div>
       <div className="border-t-2 mx-5 border-grey-700 flex flex-col pt-3">
-        { mapToComponentArray(dmChannels, setChannel) }
+        <div className="pt-4 pb-4">
+          <input
+            type="text"
+            className={`${SearchBar()}`}
+            placeholder="Search"
+            onKeyUp={(e) => {
+              const value = (e.target as HTMLInputElement).value;
+
+              // Filter DMs
+
+              setFilteredDMs(
+                new Map(
+                  [...dmChannels].filter(([_, dmChannel]) => {
+                    return dmChannel.recipient.username
+                      .toLowerCase()
+                      .includes(value.toLowerCase());
+                  })
+                )
+              );
+            }}
+          />
+        </div>
+        { mapToComponentArray(filteredDMs, setChannel) }
       </div>
     </>
   );

components/home/ServerList.tsx

@@ -3,7 +3,6 @@ import { SearchBar } from '@/components/forms/Styles';
 import { useEffect, useState } from 'react';
 import Server from '@/components/home/Server';
 import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
-import styles from '@/styles/Servers.module.css';
 import AddServerModal from '@/components/home/AddServerModal';
 import AddChannelModal from '@/components/home/AddChannelModal';
 import {
@@ -14,7 +13,7 @@ import {
 } from '@/lib/store';
 import { Tooltip } from 'react-tooltip';
 import PlusIcon from '@/components/icons/PlusIcon';
-import { ChannelPermissions, ServerPermissions } from '@/types/permissions';
+import { ServerPermissions } from '@/types/permissions';
 
 export default function ServerList() {
   //TODO: Display default page (when user belongs to and has no servers)
@@ -27,6 +26,7 @@ export default function ServerList() {
   const supabase = useSupabaseClient();
 
   const servers = useServers();
+  const [ filteredServers, setFilteredServers ] = useState(servers);
   const getServers = useGetServers();
 
   const getUserServerPerms = useGetUserPermsForServer();
@@ -87,12 +87,22 @@ export default function ServerList() {
           type="text"
           className={`${SearchBar()}`}
           placeholder="Search"
-        ></input>
+          onKeyUp={(e) => {
+            const value = (e.target as HTMLInputElement).value;
+
+            // Filter servers
+            const filteredServers = servers.filter((server) => {
+              return server.servers.name.toLowerCase().includes(value.toLowerCase());
+            });
+
+            setFilteredServers(filteredServers);
+          }}
+        />
       </div>
 
       <div className="overflow-y-auto ">
-        {servers &&
-          servers
+        {filteredServers &&
+          filteredServers
             .sort(function (a, b) {
               var textA = a.servers.name.toUpperCase();
               var textB = b.servers.name.toUpperCase();