From f4ae857e8c2d8a06ad63643f324d5db6d0e96360 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Mon, 17 Apr 2023 02:07:06 +0100
Subject: [PATCH] Complex user search component
---
.../src/components/form/UserSearch.tsx | 99 ++++++++++++-------
1 file changed, 64 insertions(+), 35 deletions(-)
diff --git a/daily-thought-frontend/src/components/form/UserSearch.tsx b/daily-thought-frontend/src/components/form/UserSearch.tsx
index bc6edbdb..4659dbc5 100644
--- a/daily-thought-frontend/src/components/form/UserSearch.tsx
+++ b/daily-thought-frontend/src/components/form/UserSearch.tsx
@@ -1,28 +1,28 @@
import useDebounce from "@/hooks/useDebounce";
import { useFriends } from "@/hooks/useFriends";
-import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { UserCircleIcon, UserPlusIcon } from "@heroicons/react/24/outline";
import { FC, PropsWithChildren, useEffect, useState } from "react";
+import UserAvatar from "../user/UserAvatar";
import BasicField from "./BasicField";
type UserSearchProps = {
- limit?: number
+ limit?: number;
+ friends: Map<string, any> | undefined;
}
const UserSearch:FC<PropsWithChildren<UserSearchProps>> = ({
- limit = 6
+ limit = 6,
+ friends
}) => {
const [searchQuery, setSearchQuery] = useState<string>("");
const debouncedSearchQuery = useDebounce<string>(searchQuery, 500)
- const [searchResults, setSearchResults] = useState<any[]>([]);
+ const [searchResults, setSearchResults] = useState<Map<[key: string], any>>(new Map([]));
const [loading, setLoading] = useState<boolean>(false);
- const friends = useFriends();
-
- console.log(friends)
useEffect(() => {
setLoading(true)
if(searchQuery.length === 0){
- setSearchResults([])
+ setSearchResults(new Map([]))
}
}, [searchQuery, setSearchResults])
@@ -32,52 +32,81 @@ const UserSearch:FC<PropsWithChildren<UserSearchProps>> = ({
fetch(endpoint).then(async (result) => {
const data = await result.json();
setLoading(false)
- setSearchResults(data.result)
+ setSearchResults(new Map(data.result))
});
}
}, [debouncedSearchQuery])
-
return (
<div>
<BasicField name="search" placeholder="Search users" onChange={setSearchQuery}/>
<div className="border-t pt-2 flex item-center flex-col">
{!searchQuery &&
- <div className='flex items-center justify-center'>
+ <div className='flex items-center justify-center mb-2'>
<p className='text-xs text-gray-500'>
- Enter a search query to add friends
+ Enter a search query to find friends
</p>
</div>
}
- {searchQuery && !loading && searchResults.map((result, index) => {
- if(index < limit){
- return (
- <div className='flex items-center hover:bg-gray-100 rounded-md p-1' key={index}>
- <div className="">
- <UserCircleIcon className='h-12 w-12 rounded-full text-gray-300 flex items-center justify-center' />
- </div>
- <div className='text-sm ml-1 text-gray-900'>
- {result.firstName && <div>{`${result.firstName} ${result.lastName || null}`}</div>}
- <p className='text-sm text-gray-500 font-normal'>@{result.username}</p>
- </div>
+ <div className="border-b">
+ {searchQuery && !loading && Array.from(searchResults.values()).map((result, index) => {
+ if(index < limit && !friends?.has(result[0])){
+ console.log(result)
+ return (
+ <div className="flex justify-between hover:bg-gray-100 rounded-md mb-2" key={index}>
+ <UserAvatar key={result[0]} username={result.username} firstName={result.firstName} lastName={result.lastName} />
+ <button
+ type="button"
+ className="ml-auto mr-1 flex-shrink-1 rounded-full text-c-pink p-1 hover:text-gray-200 focus:outline-none "
+ >
+ <span className="sr-only">View notifications</span>
+ <UserPlusIcon className="h-6 w-6" aria-hidden="true" />
+ </button>
</div>
- )
- }
- })}
- {searchQuery && loading &&
- <div className="flex justify-center">
- <div
- className="h-6 w-6 animate-spin text-gray-300 rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
- role="status">
- </div>
- </div>}
- {searchQuery && !loading && searchResults.length === 0 &&
+ )
+ }
+ })}
+
+ {searchQuery && loading &&
+ <div className="flex justify-center mb-2">
+ <div
+ className="h-6 w-6 animate-spin text-gray-300 rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+ role="status">
+ </div>
+ </div>}
+
+ {searchQuery && !loading && searchResults.size === 0 &&
<div>
- <p className='text-xs text-gray-500 flex justify-center'>
+ <p className='text-xs text-gray-500 flex justify-center mb-2'>
No results found
</p>
</div>
}
+
+
+ </div>
+
+
+
+ <div className="w-full pt-2 text-xs text-gray-500">
+ Friends
+ </div>
+ {friends && searchQuery && !loading && Array.from(friends.values()).map((result, index) => {
+ if(friends?.has(result[0])){
+ return (
+ <div className="flex justify-between hover:bg-gray-100 rounded-md" key={index}>
+ <UserAvatar key={index} username={result[1].username} firstName={result[1].firstName} lastName={result[1].lastName} />
+ <button
+ type="button"
+ className="ml-auto mr-1 flex-shrink-1 rounded-full text-c-pink p-1 hover:text-gray-200 focus:outline-none "
+ >
+ <span className="sr-only">View notifications</span>
+ <UserPlusIcon className="h-6 w-6" aria-hidden="true" />
+ </button>
+ </div>
+ )
+ }
+ })}
</div>
</div>
)
--
GitLab