feat: add search by name, close #75

client/src/components/Layout/Default/components/Header/index.tsx

@@ -4,21 +4,75 @@ import Input from '@components/ui/Input';
 import { useMe } from '@hooks/data/useMe';
 import Link from 'next/link';
 import Logo from '../Logo';
+import { User } from '@hooks/data/models/types';
+import { useSearch } from '@hooks/data/useSearch';
+import { useState } from 'react';
+import { useDebounce } from 'react-use';
+import { FaSearch } from 'react-icons/fa';
 
 const Header = () => {
+  const [search, setSearch] = useState<string>('');
+  const [debouncedValue, setDebouncedValue] = useState('');
   const { me } = useMe();
+  const { users } = useSearch(debouncedValue);
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
+
+  const [, cancel] = useDebounce(
+    () => {
+      setDebouncedValue(search);
+    },
+    1000,
+    [search],
+  );
+
+  // when click handleSearchClick go to search page
+  const handleSearchClick = () => {
+    cancel();
+    if (search) {
+      window.location.href = `/search?query=${search}`;
+    } else {
+      window.location.href = `/search`;
+    }
+  };
+
   return (
     <div className="sticky top-0 z-50 flex h-header w-full items-center justify-between gap-5 border-b bg-white px-8 md:px-4">
-      <div className="flex items-center ">
+      <div className="item-center flex">
         <Logo />
-        <div className="w-[440px] lg:w-[300px] md:w-[260px] sm:w-[140px] xs:w-[90px]">
-          <Input placeholder="Search..." />
+        <div className="relative">
+          <div className="w-[440px] lg:w-[300px] md:w-[260px] sm:w-[60px]">
+            <Input
+              className="sm:hidden"
+              placeholder="Search..."
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleSearch(e)}
+            />
+          </div>
+          {users?.length > 0 && (
+            <div className="absolute mt-1 flex w-[440px] flex-col rounded border shadow-lg bg-white lg:w-[300px] md:w-[260px] sm:hidden">
+              {users?.map((user: User) => (
+                <Avatar
+                  key={user.id}
+                  id={user.id}
+                  name={user.name}
+                  avatar={user.avatar}
+                  points={user.points}
+                />
+              ))}
+            </div>
+          )}
         </div>
       </div>
-      <div className="flex items-center">
+
+      <div className="flex items-center gap-2">
         {/* <ThemeToggle /> */}
+        <Button onClick={() => handleSearchClick()} className="hidden bg-primary-300 sm:block pl-3 pr-3">
+          <FaSearch />
+        </Button>
         {me ? (
-          <Avatar id={me.id} name={me.name} avatar={me.avatar} points={me.points} truncate />
+          <Avatar id={me.id} name={me.name} avatar={me.avatar} points={me.points} hideText />
         ) : (
           <>
             <Link href={'/login'}>

client/src/components/ui/Avatar/index.tsx

@@ -9,29 +9,22 @@ type AvatarProps = {
   points: number;
   avatar: string;
   className?: string;
-  truncate?: boolean;
+  hideText?: boolean;
 };
 
-const Avatar: FC<AvatarProps> = ({ id, name, avatar, points, truncate, className }) => {
+const Avatar: FC<AvatarProps> = ({ id, name, avatar, points, hideText, className }) => {
   return (
     <Link
       href={`/user/${id}`}
       className={cx(
-        'flex items-center gap-4 w-full hover:bg-gray-100 p-2 cursor-pointer rounded-md text-ellipsis overflow-hidden',
+        'flex w-full cursor-pointer items-center gap-4 overflow-hidden text-ellipsis rounded-md p-2 hover:bg-gray-100',
         className,
       )}
     >
       <Image alt="avatar" className="rounded-md" width={40} height={40} src={avatar} />
-      <div className="flex flex-col">
-        <div
-          className={cx(
-            'text-sm font-semibold whitespace-nowrap',
-            truncate ? 'truncate xs:w-[90px]' : '',
-          )}
-        >
-          {name}
-        </div>
-        <div className="text-xs text-secondary-100 truncate">{points} points</div>
+      <div className={cx('flex flex-col', hideText ? 'sm:hidden' : '')}>
+        <div className="whitespace-nowrap text-sm font-semibold">{name}</div>
+        <div className="truncate text-xs text-secondary-100">{points} points</div>
       </div>
     </Link>
   );

client/src/hooks/data/useSearch.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+import { User } from './models/types';
+
+export const useSearch = (search: string) => {
+  const { data, error, isLoading, mutate } = useSWR(search ? `/user/search/${search}` : null);
+
+  return {
+    error,
+    isLoading,
+    users: (data as User[]) ? data : [],
+    mutateUsers: mutate,
+  };
+};

client/src/modules/Search/index.tsx

@@ -0,0 +1,50 @@
+import Avatar from '@components/ui/Avatar';
+import Input from '@components/ui/Input';
+import { useSearch } from '@hooks/data/useSearch';
+import { useState } from 'react';
+import { useDebounce } from 'react-use';
+
+const Search = () => {
+  const [search, setSearch] = useState<string>('');
+  const [debouncedValue, setDebouncedValue] = useState('');
+  const { users } = useSearch(debouncedValue);
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
+
+  const [, cancel] = useDebounce(
+    () => {
+      setDebouncedValue(search);
+    },
+    1000,
+    [search],
+  );
+
+  return (
+    <div className="flex h-full w-full flex-col items-center">
+      <div className="flex items-center">
+        <Input
+          className="w-[440px] lg:w-[300px] md:w-[260px]"
+          placeholder="Search..."
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleSearch(e)}
+        />
+      </div>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center flex-col gap-4 w-[440px] lg:w-[300px] md:w-[260px] mt-2">
+          {users?.map((user: any) => (
+            <Avatar
+              key={user.id}
+              id={user.id}
+              name={user.name}
+              avatar={user.avatar}
+              points={user.points}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Search;

client/src/pages/search/index.tsx

@@ -0,0 +1,17 @@
+import Search from '@modules/Search';
+import Head from 'next/head';
+
+const SearchPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Codex | Search</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Search />
+    </>
+  );
+};
+
+export default SearchPage;

server/src/modules/user/user.controller.ts

@@ -58,4 +58,11 @@ export class UserController {
     }));
     return updatedUsers;
   }
+
+  @Get('/search/:name')
+  @UseGuards(JwtGuard)
+  async search(@Param('name') name: string) {
+    const users = await this.userService.search(name);
+    return users;
+  }
 }

server/src/modules/user/user.service.ts

@@ -43,4 +43,8 @@ export class UserService {
     }
     return this.dataService.users.find({}, filter);
   }
+
+  async search(name: string) {
+    return this.dataService.users.find({ name: { $like: `%${name}%` } });
+  }
 }