From 92f14cef7ba6a23411d73d526f5e27851f47ba00 Mon Sep 17 00:00:00 2001
From: nounspaceryan <ryan@nounspace.com>
Date: Mon, 29 Jul 2024 15:27:16 -0500
Subject: [PATCH] User Search (#284)

---
 src/common/components/atoms/command.tsx       |   2 +-
 .../components/organisms/Navigation.tsx       | 205 +++++++++++++-----
 .../organisms/SearchAutocompleteInput.tsx     | 110 ++++++++++
 .../components/organisms/SearchModal.tsx      |  50 +++++
 src/common/lib/hooks/useSearchUsers.ts        |  83 +++++++
 src/pages/api/search/users.ts                 | 161 ++++++++++++++
 tailwind.config.js                            |  31 +++
 7 files changed, 592 insertions(+), 50 deletions(-)
 create mode 100644 src/common/components/organisms/SearchAutocompleteInput.tsx
 create mode 100644 src/common/components/organisms/SearchModal.tsx
 create mode 100644 src/common/lib/hooks/useSearchUsers.ts
 create mode 100644 src/pages/api/search/users.ts

diff --git a/src/common/components/atoms/command.tsx b/src/common/components/atoms/command.tsx
index bf0626d6..ba829dba 100644
--- a/src/common/components/atoms/command.tsx
+++ b/src/common/components/atoms/command.tsx
@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon className="mr-2 h-5 w-5 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={mergeClasses(
diff --git a/src/common/components/organisms/Navigation.tsx b/src/common/components/organisms/Navigation.tsx
index 82e19d1e..fff981c7 100644
--- a/src/common/components/organisms/Navigation.tsx
+++ b/src/common/components/organisms/Navigation.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { mergeClasses } from "@/common/lib/utils/mergeClasses";
 import BrandHeader from "../molecules/BrandHeader";
@@ -8,13 +8,11 @@ import Modal from "../molecules/Modal";
 import CreateCast from "@/fidgets/farcaster/components/CreateCast";
 import Link from "next/link";
 import { useFarcasterSigner } from "@/fidgets/farcaster";
-import { CgLogIn, CgLogOut, CgProfile } from "react-icons/cg";
+import { CgProfile } from "react-icons/cg";
 import { useLoadFarcasterUser } from "@/common/data/queries/farcaster";
 import { first } from "lodash";
-import { IoMdRocket } from "react-icons/io";
 import { Button } from "../atoms/button";
 import { FaPaintbrush, FaDiscord } from "react-icons/fa6";
-import { PiGlobeHemisphereEastBold } from "react-icons/pi";
 import { NOUNISH_LOWFI_URL } from "@/constants/nounishLowfi";
 import { UserTheme } from "@/common/lib/theme";
 import { useUserTheme } from "@/common/lib/theme/UserThemeProvider";
@@ -22,6 +20,7 @@ import {
   AnalyticsEvent,
   analytics,
 } from "@/common/providers/AnalyticsProvider";
+import SearchModal from "@/common/components/organisms/SearchModal";
 
 type NavItemProps = {
   label: string;
@@ -33,12 +32,15 @@ type NavItemProps = {
   onClick?: () => void;
 };
 
+type NavButtonProps = Omit<NavItemProps, "href" | "openInNewTab">;
+
 type NavProps = {
   isEditable: boolean;
   enterEditMode: () => void;
 };
 
 const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
+  const searchRef = useRef<HTMLInputElement>(null);
   const { setModalOpen, getIsLoggedIn, getIsInitializing } = useAppStore(
     (state) => ({
       setModalOpen: state.setup.setModalOpen,
@@ -107,6 +109,33 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
     );
   };
 
+  const NavButton: React.FC<NavButtonProps> = ({
+    label,
+    Icon,
+    onClick,
+    disable = false,
+  }) => {
+    return (
+      <li>
+        <button
+          disabled={disable}
+          className={mergeClasses(
+            "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
+          )}
+          onClick={onClick}
+        >
+          <Icon aria-hidden="true" />
+          <span className="ms-2">{label}</span>
+        </button>
+      </li>
+    );
+  };
+
+  const openSearchModal = useCallback(() => {
+    if (!searchRef?.current) return;
+    searchRef.current.focus();
+  }, [searchRef]);
+
   return (
     <aside
       id="logo-sidebar"
@@ -121,6 +150,7 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
       >
         <CreateCast />
       </Modal>
+      <SearchModal ref={searchRef} />
       <div className="pt-12 pb-12 h-full md:block hidden">
         <div className="flex flex-col h-full w-[270px] ml-auto">
           <BrandHeader />
@@ -128,20 +158,21 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
             <div className="flex-auto">
               <ul className="space-y-2">
                 <NavItem label="Homebase" Icon={HomeIcon} href="/homebase" />
+                <NavButton
+                  label="Search"
+                  Icon={SearchIcon}
+                  onClick={openSearchModal}
+                />
                 <NavItem
                   label="Fair Launch"
-                  Icon={IoMdRocket}
+                  Icon={RocketIcon}
                   href="https://space.nounspace.com/"
                   onClick={() =>
                     analytics.track(AnalyticsEvent.CLICK_SPACE_FAIR_LAUNCH)
                   }
                   openInNewTab
                 />
-                <NavItem
-                  label="Explore"
-                  Icon={PiGlobeHemisphereEastBold}
-                  href="/explore"
-                />
+                <NavItem label="Explore" Icon={ExploreIcon} href="/explore" />
                 {isLoggedIn && (
                   <NavItem
                     label={"My Space"}
@@ -149,47 +180,19 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
                     href={`/s/${username}`}
                   />
                 )}
-                {isLoggedIn ? (
-                  <button
-                    className={mergeClasses(
-                      "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                    )}
+                {isLoggedIn && (
+                  <NavButton
+                    label={"Logout"}
+                    Icon={LogoutIcon}
                     onClick={logout}
-                  >
-                    <CgLogOut className="w-6 h-6 text-gray-800 dark:text-white" />
-                    <span className="ms-2">Logout</span>
-                  </button>
-                ) : isInitializing ? (
-                  <>
-                    <button
-                      className={mergeClasses(
-                        "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                      )}
-                      onClick={logout}
-                    >
-                      <CgLogOut className="w-6 h-6 text-gray-800 dark:text-white" />
-                      <span className="ms-2">Logout</span>
-                    </button>
-                    <button
-                      className={mergeClasses(
-                        "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                      )}
-                      onClick={openModal}
-                    >
-                      <CgLogIn className="w-6 h-6 text-gray-800 dark:text-white" />
-                      <span className="ms-2">Complete Sign Up</span>
-                    </button>
-                  </>
-                ) : (
-                  <button
-                    className={mergeClasses(
-                      "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                    )}
+                  />
+                )}
+                {!isLoggedIn && (
+                  <NavButton
+                    label={isInitializing ? "Complete Signup" : "Login"}
+                    Icon={LoginIcon}
                     onClick={openModal}
-                  >
-                    <CgLogIn className="w-6 h-6 text-gray-800 dark:text-white" />
-                    <span className="ms-2">Login</span>
-                  </button>
+                  />
                 )}
               </ul>
             </div>
@@ -258,6 +261,110 @@ const HomeIcon = () => {
   );
 };
 
+const SearchIcon = () => (
+  <svg
+    className="w-6 h-6 text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="2"
+      d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+    />
+  </svg>
+);
+
+const RocketIcon = () => (
+  <svg
+    className="w-[24px] h-[24px] text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="m10.051 8.102-3.778.322-1.994 1.994a.94.94 0 0 0 .533 1.6l2.698.316m8.39 1.617-.322 3.78-1.994 1.994a.94.94 0 0 1-1.595-.533l-.4-2.652m8.166-11.174a1.366 1.366 0 0 0-1.12-1.12c-1.616-.279-4.906-.623-6.38.853-1.671 1.672-5.211 8.015-6.31 10.023a.932.932 0 0 0 .162 1.111l.828.835.833.832a.932.932 0 0 0 1.111.163c2.008-1.102 8.35-4.642 10.021-6.312 1.475-1.478 1.133-4.77.855-6.385Zm-2.961 3.722a1.88 1.88 0 1 1-3.76 0 1.88 1.88 0 0 1 3.76 0Z"
+    />
+  </svg>
+);
+
+const ExploreIcon = () => {
+  return (
+    <svg
+      className="w-6 h-6 text-gray-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="2"
+        d="M4.37 7.657c2.063.528 2.396 2.806 3.202 3.87 1.07 1.413 2.075 1.228 3.192 2.644 1.805 2.289 1.312 5.705 1.312 6.705M20 15h-1a4 4 0 0 0-4 4v1M8.587 3.992c0 .822.112 1.886 1.515 2.58 1.402.693 2.918.351 2.918 2.334 0 .276 0 2.008 1.972 2.008 2.026.031 2.026-1.678 2.026-2.008 0-.65.527-.9 1.177-.9H20M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+      />
+    </svg>
+  );
+};
+
+const LogoutIcon = () => {
+  return (
+    <svg
+      className="w-[24px] h-[24px] text-gray-800 dark:text-white scale-x-[-1] translate-x-[2px]"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M16 12H4m12 0-4 4m4-4-4-4m3-4h2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-2"
+      />
+    </svg>
+  );
+};
+
+const LoginIcon = () => {
+  return (
+    <svg
+      className="w-[24px] h-[24px] text-gray-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M16 12H4m12 0-4 4m4-4-4-4m3-4h2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-2"
+      />
+    </svg>
+  );
+};
+
 const _EditIcon = () => {
   return (
     <svg
diff --git a/src/common/components/organisms/SearchAutocompleteInput.tsx b/src/common/components/organisms/SearchAutocompleteInput.tsx
new file mode 100644
index 00000000..7676dcd1
--- /dev/null
+++ b/src/common/components/organisms/SearchAutocompleteInput.tsx
@@ -0,0 +1,110 @@
+import React, { useState, useCallback } from "react";
+import { useRouter } from "next/router";
+import useSearchUsers from "@/common/lib/hooks/useSearchUsers";
+import { User } from "@neynar/nodejs-sdk/build/neynar-api/v2";
+import { Avatar, AvatarImage } from "@/common/components/atoms/avatar";
+import {
+  Command,
+  CommandEmpty,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandInput,
+} from "@/common/components/atoms/command";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+
+type SearchAutocompleteInputProps = {
+  onSelect: () => void;
+};
+
+const SearchAutocompleteInput: React.FC<SearchAutocompleteInputProps> = ({
+  onSelect,
+}) => {
+  const router = useRouter();
+  const [isFocused, setIsFocused] = useState(false);
+  const [query, setQuery] = useState<string | null>(null);
+  const { users, loading } = useSearchUsers(query);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+  }, []);
+
+  const handlePreventBlur = useCallback((event: React.PointerEvent) => {
+    event?.preventDefault();
+  }, []);
+
+  const onSelectQuery = useCallback(() => {
+    router.push(`/search?q=${query}`);
+    onSelect && onSelect();
+  }, []);
+
+  const onSelectUser = useCallback((user: User) => {
+    router.push(`/s/${user.username}`);
+    onSelect && onSelect();
+  }, []);
+
+  return (
+    <Command className="rounded-md border" shouldFilter={false} loop={true}>
+      <div className={loading ? "animated-loading-bar" : ""}>
+        <CommandInput
+          placeholder="Search users"
+          onValueChange={setQuery}
+          value={query || ""}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className="h-11"
+        />
+      </div>
+      {isFocused && (
+        <CommandList
+          onPointerDown={handlePreventBlur}
+          className="max-h-[500px]"
+        >
+          {false && (
+            <CommandItem
+              onSelect={onSelectQuery}
+              className="rounded-none cursor-pointer border-b"
+              value="Search"
+            >
+              <div className="flex items-center py-1 px-1">
+                <MagnifyingGlassIcon className="mr-2 h-7 w-7 shrink-0 opacity-50" />
+                <div className="leading-[1.3] tracking-tight font-bold text-foreground/80">{`Search for "${query}"`}</div>
+              </div>
+            </CommandItem>
+          )}
+          {users?.length > 0 && (
+            <CommandGroup heading="Users">
+              {users.map((user: any, i: number) => (
+                <CommandItem
+                  key={i}
+                  onSelect={() => onSelectUser(user)}
+                  value={user.username}
+                  className="gap-x-2 cursor-pointer"
+                >
+                  <Avatar className="h-12 w-12">
+                    <AvatarImage src={user.pfp_url} alt={user.display_name} />
+                  </Avatar>
+                  <div className="leading-[1.3]">
+                    <p className="font-bold text-foreground/80">
+                      {user.display_name}
+                    </p>
+                    <p className="font-normal text-foreground/80">
+                      @{user.username}
+                    </p>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+          {query && !loading && <CommandEmpty>No results found</CommandEmpty>}
+        </CommandList>
+      )}
+    </Command>
+  );
+};
+
+export default SearchAutocompleteInput;
diff --git a/src/common/components/organisms/SearchModal.tsx b/src/common/components/organisms/SearchModal.tsx
new file mode 100644
index 00000000..c5b4d3a8
--- /dev/null
+++ b/src/common/components/organisms/SearchModal.tsx
@@ -0,0 +1,50 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useImperativeHandle,
+} from "react";
+import { Dialog, DialogContent } from "@/common/components/atoms/dialog";
+
+import SearchAutocompleteInput from "@/common/components/organisms/SearchAutocompleteInput";
+
+const SearchModal = React.forwardRef((props, ref) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    focus: handleFocus,
+  }));
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        setIsFocused((open) => !open);
+      }
+      if (e.key === "Escape") {
+        setIsFocused(false);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  return (
+    <Dialog open={isFocused} onOpenChange={setIsFocused}>
+      <DialogContent className="p-0 border-none">
+        <SearchAutocompleteInput onSelect={handleBlur} />
+      </DialogContent>
+    </Dialog>
+  );
+});
+
+SearchModal.displayName = "SearchModal";
+
+export default SearchModal;
diff --git a/src/common/lib/hooks/useSearchUsers.ts b/src/common/lib/hooks/useSearchUsers.ts
new file mode 100644
index 00000000..bf438758
--- /dev/null
+++ b/src/common/lib/hooks/useSearchUsers.ts
@@ -0,0 +1,83 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { debounce } from "lodash";
+import axios, { CancelTokenSource, isAxiosError } from "axios";
+import axiosBackend from "@/common/data/api/backend";
+import { NounspaceResponse } from "@/common/data/api/requestHandler";
+import { User } from "@neynar/nodejs-sdk/build/neynar-api/v2";
+
+type UserSearchResult = {
+  users: User[];
+  cursor?: string | null;
+};
+
+export type UserSearchReturnValue = {
+  users: User[];
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+};
+
+const useSearchUsers = (
+  query: string | null,
+  debounceMs: number = 300,
+): UserSearchReturnValue => {
+  const [results, setResults] = useState<UserSearchResult | null | undefined>(
+    null,
+  );
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const cancelRequest = useRef<CancelTokenSource | null>(null);
+
+  const fetchResults = useCallback(
+    debounce(async (q: string) => {
+      if (cancelRequest.current) {
+        cancelRequest.current.cancel("New search initiated");
+      }
+
+      cancelRequest.current = axios.CancelToken.source();
+
+      try {
+        const response = await axiosBackend.get<
+          NounspaceResponse<UserSearchResult>
+        >("/api/search/users", {
+          params: {
+            q,
+            limit: 5,
+          },
+          cancelToken: cancelRequest.current.token,
+        });
+        setResults(response.data.value);
+        setLoading(false);
+        setError(null);
+      } catch (err) {
+        if (axios.isCancel(err)) {
+          console.log("Search request cancelled");
+        } else {
+          const errMsg = isAxiosError(err)
+            ? err.response?.data?.error?.message
+            : null;
+          setError(errMsg || "An error occurred while searching");
+          setLoading(false);
+        }
+      }
+    }, debounceMs),
+    [],
+  );
+
+  useEffect(() => {
+    setError(null);
+    if (query) {
+      setLoading(true);
+      fetchResults(query);
+    }
+  }, [query]);
+
+  return {
+    users: (query && results?.users) || [],
+    loading: loading,
+    error: error,
+    hasMore: !!results?.cursor,
+  };
+};
+
+export default useSearchUsers;
diff --git a/src/pages/api/search/users.ts b/src/pages/api/search/users.ts
new file mode 100644
index 00000000..917f16ff
--- /dev/null
+++ b/src/pages/api/search/users.ts
@@ -0,0 +1,161 @@
+import { NextApiRequest, NextApiResponse } from "next/types";
+import { isAxiosError } from "axios";
+import { z, ZodSchema } from "zod";
+import requestHandler, {
+  NounspaceResponse,
+} from "@/common/data/api/requestHandler";
+import neynar from "@/common/data/api/neynar";
+import { User } from "@neynar/nodejs-sdk/build/neynar-api/v2";
+import { flatMap } from "lodash";
+
+const QuerySchema = z.object({
+  // q is a string of max length 20, or an address
+  q: z.string().max(20).or(z.string().startsWith("0x").length(42)),
+  limit: z.coerce.number().int().positive().max(10).default(10),
+  cursor: z.string().optional(),
+  viewerFid: z.coerce.number().int().optional(),
+});
+
+const _validateQueryParams = <T extends ZodSchema>(
+  req: NextApiRequest,
+  schema: T,
+): [z.infer<T> | null, string | null] => {
+  const parseResult = schema.safeParse(req.query);
+
+  if (parseResult.success) {
+    return [parseResult.data, null];
+  }
+
+  const error = parseResult.error.errors[0];
+  const errorMessage = `${error.message} (${error.path.join(".")})`;
+  return [null, errorMessage];
+};
+
+const _isMaybeFid = (q: string): boolean => {
+  return /^-?\d+$/.test(q);
+};
+
+const _isMaybeAddress = (q: string): boolean => {
+  return /^0x[a-fA-F0-9]{40}$/.test(q);
+};
+
+type UserSearchResult = {
+  users: User[];
+  cursor?: string | null;
+};
+
+const _fetchAndFormat = async (
+  _fetch: () => Promise<UserSearchResult>,
+): Promise<[statusCode: number, data: NounspaceResponse<UserSearchResult>]> => {
+  try {
+    const value = await _fetch();
+    return [
+      200,
+      {
+        result: "success",
+        value: value,
+      },
+    ];
+  } catch (e) {
+    const _isAxiosError = isAxiosError(e);
+    const status = (_isAxiosError && e.response!.data.status) || 500;
+    const message =
+      (_isAxiosError && e.response!.data.message) ||
+      "An unknown error occurred";
+    return [
+      status,
+      {
+        result: "error",
+        error: { message },
+      },
+    ];
+  }
+};
+
+const _searchUsersByUsername =
+  (params: z.infer<typeof QuerySchema>) =>
+  async (): Promise<UserSearchResult> => {
+    const response = await neynar.searchUser(params!.q, params!.viewerFid, {
+      limit: params!.limit,
+      cursor: params!.cursor,
+    });
+    return {
+      users: response.result.users,
+      cursor: response.result.next?.cursor,
+    };
+  };
+
+const _searchUsersByFids =
+  (params: z.infer<typeof QuerySchema>) =>
+  async (): Promise<UserSearchResult> => {
+    const fids = [Number.parseInt(params!.q)];
+    const response = await neynar.fetchBulkUsers(fids);
+    return {
+      users: response.users,
+      cursor: null,
+    };
+  };
+
+const _searchUsersByAddr =
+  (params: z.infer<typeof QuerySchema>) =>
+  async (): Promise<UserSearchResult> => {
+    const response = await neynar.fetchBulkUsersByEthereumAddress([params!.q]);
+    return {
+      users: flatMap(response, (x) => x),
+      cursor: null,
+    };
+  };
+
+const get = async (req: NextApiRequest, res: NextApiResponse) => {
+  const [params, errorMessage] = _validateQueryParams(req, QuerySchema);
+
+  if (errorMessage) {
+    return res.status(400).json({
+      result: "error",
+      error: { message: errorMessage },
+    });
+  }
+
+  const isFirstPage = !params!.cursor;
+  const shouldSearchFids = isFirstPage && _isMaybeFid(params!.q);
+  const shouldSearchAddr = isFirstPage && _isMaybeAddress(params!.q);
+
+  const searchQueries = [
+    !shouldSearchAddr && _searchUsersByUsername(params!),
+    shouldSearchFids && _searchUsersByFids(params!),
+    shouldSearchAddr && _searchUsersByAddr(params!),
+  ].filter((f) => f) as (() => Promise<UserSearchResult>)[];
+
+  const searchResponses = await Promise.all(
+    searchQueries.map((fn) => _fetchAndFormat(fn)),
+  );
+  const searchSuccessResponses = searchResponses.filter(
+    ([statusCode, result]) => statusCode === 200,
+  );
+  const searchErrorResponses = searchResponses.filter(
+    ([statusCode, result]) => statusCode !== 200,
+  );
+
+  if (searchSuccessResponses.length > 0) {
+    const combinedUserResults = flatMap(
+      searchSuccessResponses,
+      (r) => r[1].value!.users,
+    );
+    const cursor = searchSuccessResponses[0][1].value!.cursor || null;
+
+    return res.status(200).json({
+      result: "success",
+      value: {
+        users: combinedUserResults,
+        cursor: cursor,
+      },
+    });
+  } else {
+    const [errorStatus, errorData] = searchErrorResponses[0];
+    return res.status(errorStatus).json(errorData);
+  }
+};
+
+export default requestHandler({
+  get: get,
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index ab9a23eb..0ef88e06 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -75,17 +75,48 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        'gradient-x': {
+          '0%': {
+            'background-position': '200% 0',
+          },
+          '100%': {
+            'background-position': '-200% 0',
+          },
+        },
+      },
+      backgroundSize: {
+        'auto-200': '200% auto',
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "overlayShow": 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
         "contentShow": 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'gradient-x': 'gradient-x 3s linear infinite',
       },
     },
   },
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/typography"),
+    function({ addUtilities }) {
+      const newUtilities = {
+        '.animated-loading-bar': {
+          position: 'relative',
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            height: '2px',
+            backgroundImage: 'linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6)',
+            backgroundSize: '200% 100%',
+            animation: 'gradient-x 3s linear infinite',
+          },
+        },
+      }
+      addUtilities(newUtilities, ['responsive', 'hover'])
+    }
   ],
 }
\ No newline at end of file