fix search functionality

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-./node_modules/.bin/lint-staged
+npx pretty-quick --staged

package.json

@@ -15,58 +15,58 @@
     "schema": "src/prisma/schema.prisma"
   },
   "dependencies": {
-    "@alch/alchemy-web3": "^1.2.4",
+    "@alch/alchemy-web3": "^1.2.5",
     "@headlessui/react": "^1.5.0",
     "axios": "^0.26.0",
     "clsx": "^1.1.1",
     "cookie": "^0.4.2",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.10.8",
     "ethers": "^5.5.4",
     "flowbite": "^1.3.4",
     "jsonwebtoken": "^8.5.1",
     "next": "^12.1.0",
-    "prisma": "^3.9.2",
+    "prisma": "^3.10.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",
-    "react-query": "^3.34.15",
+    "react-query": "^3.34.16",
     "react-spinners": "^0.11.0",
-    "siwe": "^1.1.0",
-    "wagmi": "^0.2.12"
+    "siwe": "^1.1.2",
+    "wagmi": "^0.2.18"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@next/eslint-plugin-next": "^12.1.0",
-    "@prisma/client": "^3.9.2",
+    "@prisma/client": "^3.10.0",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/typography": "^0.5.2",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^12.1.4",
     "@types/cookie": "^0.4.1",
     "@types/jsonwebtoken": "^8.5.8",
-    "@types/node": "^17.0.18",
+    "@types/node": "^17.0.21",
     "@types/react": "^17.0.39",
-    "@types/tailwindcss": "^3.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
+    "@types/tailwindcss": "^3.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "autoprefixer": "^10.4.2",
-    "eslint": "^8.9.0",
+    "eslint": "^8.10.0",
     "eslint-config-next": "^12.1.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest-dom": "^4.0.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.3",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.5.1",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.8",
     "prettier": "^2.5.1",
-    "prettier-plugin-tailwindcss": "^0.1.7",
+    "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.2"
   }
 }

src/components/layouts/footer.tsx

@@ -35,8 +35,8 @@ export function Footer() {
   return (
     <footer
       className={clsx(
-        `bottom-0 left-0 m-0 box-border flex h-14 w-full items-center justify-center border-t border-solid border-gray-700 p-4 text-gray-700 fixed`,
-        `border-gray-600 dark:bg-[#14141b] dark:text-gray-300`
+        `fixed bottom-0 left-0 m-0 box-border flex h-10 w-full items-center justify-center p-4 text-gray-700`,
+        ` dark:bg-[#14141b] dark:text-gray-300`
       )}>
       <div className={clsx(`flex gap-x-10 rounded-lg bg-gray-100 p-2.5`, `dark:bg-transparent`)}>
         {socialLinks.map(item => (

src/components/layouts/header.tsx

@@ -46,9 +46,9 @@ export const Header = () => {
         <>
           <div className="px-2 mx-auto max-w-8xl md:px-0">
             <div className="relative flex items-center h-20 md:border-opacity-25 md:px-6">
-              <div className="flex items-center px-2 md:px-0">
+              <div className="flex items-center md:px-0">
                 <Link shallow={true} href="/">
-                  <a className="flex-shrink-0">
+                  <a className="flex-shrink-0 hidden sm:block">
                     <img className="block w-8 invert" src="/images/bird.png" alt="Workflow" />
                   </a>
                 </Link>

src/components/layouts/layout.tsx

@@ -5,9 +5,9 @@ import { Footer } from './footer';
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="dark m-auto flex h-full min-h-screen max-w-screen-2xl flex-col bg-[#1a1c26] text-center">
+    <div className="dark m-auto flex max-h-full min-h-screen max-w-screen-2xl flex-col bg-[#1d1e2a] text-center">
       <Header />
-      <div className="flex flex-col h-full pt-5 pb-16 rounded-4xl">{children}</div>
+      <div className="flex h-full max-h-full flex-col rounded-t-[1rem] pt-4 pb-10">{children}</div>
       <Footer />
       <Toaster />
     </div>

src/components/search-bar.tsx

@@ -10,7 +10,7 @@ import { useInjectedProvider, useUser } from '@/hooks';
 import { passEnsRegex, passAddressRegex } from '@/utils';
 
 const InvalidEnsToast = () => (
-  <p className="w-full leading-normal text-md">
+  <p className="text-md w-full leading-normal">
     Unable to verify ENS name.{'\n'}Check here:{' '}
     <a href="https://app.ens.domains/" className="underline hover:font-bold">
       app.ens.domains
@@ -39,6 +39,8 @@ const toastEm = ({ content = 'Invalid input' }: { content: string | JSX.Element
   });
 };
 
+const possibleKeys = ['Enter', 'Return'];
+
 export const SearchBar = () => {
   const router = useRouter();
 
@@ -49,12 +51,10 @@ export const SearchBar = () => {
   const searchText = React.useRef<HTMLInputElement>(null);
 
   const onEnter = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key !== 'Enter' || status !== 'success') return;
+    if (!possibleKeys.includes(event.key) || status !== 'success') return;
     event.preventDefault();
     const search = searchText?.current?.value.trim().toLowerCase();
-
     if (!search) return;
-
     const directToRoute = (input: string) =>
       authenticated
         ? router.push(`/user/${input}`, undefined, { shallow: true })
@@ -88,14 +88,14 @@ export const SearchBar = () => {
         Search
       </label>
       <div className="relative text-gray-300 focus-within:text-gray-600">
-        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
           <SearchIcon />
         </div>
         <input
           ref={searchText}
           onKeyPress={onEnter}
           id="search"
-          className="block h-12 w-full rounded-md border border-transparent bg-[#212330] py-2 pl-10 pr-3 text-lg leading-5 tracking-wider text-gray-200 placeholder-gray-500 placeholder:text-[#b9bbc2] focus:border-[#373b50] focus:placeholder-transparent focus:outline-none focus:ring-transparent focus:ring-offset-[0.3px]"
+          className="block h-12 w-full rounded-md border border-transparent bg-[#212330] py-2 pl-10 pr-3 text-sm lowercase leading-5 tracking-wider text-gray-200 placeholder-gray-500 placeholder:normal-case placeholder:text-[#b9bbc2] focus:border-[#373b50] focus:placeholder-transparent focus:outline-none focus:ring-transparent focus:ring-offset-[0.3px] sm:text-lg"
           placeholder="Quick ENS / Address Search"
           type="search"
           name="search"

src/hooks/use-user.ts

@@ -15,12 +15,22 @@ export const useUser = ({ redirectTo, redirectIfFound }: UserHookRedirects = {})
   const isMounted = useIsMounted();
 
   // TODO: only fetch when wallet is connected
-  const { data, error, isIdle, isFetched, isError, isLoading, isStale, isSuccess, isFetching } =
-    useQuery(['user'], fetchUser, {
-      retry: 0,
+  const {
+    data,
+    error,
+    isIdle,
+    isFetched,
+    isError,
+    isLoading,
+    isStale,
+    isSuccess,
+    isFetching,
+    refetch,
+  } = useQuery(['user'], fetchUser, {
+    retry: 0,
 
-      enabled: isMounted,
-    });
+    enabled: isMounted,
+  });
 
   const user = data?.user;
   const authenticated = data?.authenticated ?? false;
@@ -35,6 +45,7 @@ export const useUser = ({ redirectTo, redirectIfFound }: UserHookRedirects = {})
   return {
     authenticated,
     user,
+    refetch,
     error,
     isFetching,
     isLoading,

src/pages/feed.tsx

@@ -12,7 +12,7 @@ import type {
   InfuraWebSocketProvider,
 } from '@ethersproject/providers';
 import dayjs from 'dayjs';
-import { useWebSocketProvider } from 'wagmi';
+import { useWebSocketProvider, } from 'wagmi';
 import { useMutation, useQuery } from 'react-query';
 import { valueExists } from '@/utils';
 import { TIME } from '@/constants';

src/pages/index.tsx

@@ -7,15 +7,15 @@ const Index: NextPage = () => {
   useUser({ redirectTo: '/login' });
 
   return (
-    <main className="flex flex-col items-center px-4 mt-40 text-center align-middle">
+    <main className="mt-20 flex flex-col items-center px-4 text-center align-middle md:mt-40">
       <p
         className={clsx(
           `text-7xl sm:text-8xl md:text-9xl`,
           `inline-block bg-gradient-to-r from-red-400 to-blue-500 bg-clip-text text-center font-extrabold leading-[1.1] tracking-tight text-transparent selection:bg-slate-300 selection:text-[#14141b]`
         )}>
         Social Realms.
       </p>
-      <section className="flex flex-col items-center w-8/12 max-w-xs mt-10 text-center gap-y-8 px-9"></section>
+      <section className="mt-10 flex w-8/12 max-w-xs flex-col items-center gap-y-8 px-9 text-center"></section>
     </main>
   );
 };

src/pages/login.tsx

@@ -51,6 +51,7 @@ const Signin: NextPage = () => {
 
   const {
     authenticated,
+    refetch,
     status: authFetchStatus,
     isLoading,
   } = useUser({
@@ -113,6 +114,7 @@ const Signin: NextPage = () => {
       });
       if (auth.success) {
         dispatch({ type: status.CONNECTED });
+        refetch();
         return router.push('/');
       } else {
         throw new Error(auth.message);
@@ -137,11 +139,11 @@ const Signin: NextPage = () => {
     state.status === status.ERROR ? `${state.errorMessage}` : 'Login to access all features';
 
   return (
-    <main className="flex flex-col items-center justify-center w-full max-w-2xl mx-auto mt-8 space-y-10 gap-x-8 md:mt-48">
+    <main className="mx-auto mt-16 flex w-full max-w-2xl flex-col items-center justify-center gap-x-8 space-y-10 md:mt-32">
       <div>
         <p className="mx-10 text-[1.65rem] font-bold">{text}</p>
       </div>
-      <section className="w-full max-w-sm p-4 bg-transparent rounded-lg sm:p-6 lg:p-4">
+      <section className="w-full max-w-sm rounded-lg bg-transparent p-4 sm:p-6 lg:p-4">
         <SignInWithEthereum
           onButtonClick={toggleModal}
           disabled={authenticated}
@@ -175,7 +177,10 @@ const Web3ConnectButton = ({
       disabled={!connector.ready}
       key={connector.name}
       className="flex w-full flex-col items-center justify-end gap-y-2 pt-3 pb-4 font-normal tracking-wide antialiased hover:cursor-pointer hover:bg-[rgb(31,32,53)] hover:text-white focus:outline-none md:text-xl"
-      onClick={async () => await onButtonClick(connector)}>
+      onClick={async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        return await onButtonClick(connector);
+      }}>
       <WalletIcon name={connector.name} />
       {['metamask', 'injected'].includes(connector.name) ? 'MetaMask' : connector.name}
     </button>

src/styles/globals.css

@@ -7,6 +7,20 @@
   scroll-behavior: smooth;
 }
 
+/* Add accessible line-height,
+  5. Improve text rendering */
+* {
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
 /**
 * CSS variables have to be defined in the global css file.
 * define your variables here then use them anywhere in the project.
@@ -35,3 +49,100 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+
+/* keep scrollbar but hide it since it's ugly */
+#liaddshapes::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Create a root stacking context */
+#root,
+#__next {
+  height: 100%;
+  isolation: isolate;
+}
+
+/* Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Remove built-in form typography styles */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+::-moz-selection {
+  /* Code for Firefox */
+  color: #14141b;
+  background: #353535;
+}
+
+::selection {
+  color: #d7dcff;
+  background: #383546;
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}