can search for user by name from items page

src/app/UserItemsPage.js

@@ -1,10 +1,29 @@
 import React from "react";
 import { css } from "emotion";
-import { Badge, Box, Center, Wrap, VStack } from "@chakra-ui/core";
+import {
-import { CheckIcon, EmailIcon, StarIcon } from "@chakra-ui/icons";
+  Badge,
+  Box,
+  Center,
+  Flex,
+  IconButton,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  Wrap,
+  VStack,
+  useToast,
+} from "@chakra-ui/core";
+import {
+  ArrowForwardIcon,
+  CheckIcon,
+  EmailIcon,
+  SearchIcon,
+  StarIcon,
+} from "@chakra-ui/icons";
 import gql from "graphql-tag";
-import { useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
-import { useQuery } from "@apollo/client";
+import { useQuery, useLazyQuery } from "@apollo/client";
 import SimpleMarkdown from "simple-markdown";
 import DOMPurify from "dompurify";
 
@@ -117,11 +136,8 @@ function UserItemsPage() {
 
   return (
     <Box>
-      {isCurrentUser && (
+      <Flex align="center" wrap="wrap-reverse">
-        <Box float="right">
+        <Box>
-          <WIPCallout details="These lists are read-only for now. To edit, head back to Classic DTI!" />
-        </Box>
-      )}
           <Heading1>
             {isCurrentUser ? "Your items" : `${data.user.username}'s items`}
           </Heading1>
@@ -182,7 +198,20 @@ function UserItemsPage() {
               </Badge>
             )}
           </Wrap>
-      <Heading2 id="owned-items" marginTop="4" marginBottom="2">
+        </Box>
+        <Box flex="1 0 auto" width="2" />
+        <Box marginBottom="1">
+          <UserSearchForm />
+        </Box>
+      </Flex>
+
+      <Box marginTop="4">
+        {isCurrentUser && (
+          <Box float="right">
+            <WIPCallout details="These lists are read-only for now. To edit, head back to Classic DTI!" />
+          </Box>
+        )}
+        <Heading2 id="owned-items" marginBottom="2">
           {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
         </Heading2>
         <VStack spacing="8" alignItems="stretch">
@@ -195,6 +224,7 @@ function UserItemsPage() {
             />
           ))}
         </VStack>
+      </Box>
 
       <Heading2 id="wanted-items" marginTop="10" marginBottom="2">
         {isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
@@ -213,6 +243,85 @@ function UserItemsPage() {
   );
 }
 
+function UserSearchForm() {
+  const [query, setQuery] = React.useState("");
+  const history = useHistory();
+  const toast = useToast();
+
+  const [loadUserSearch, { loading }] = useLazyQuery(
+    gql`
+      query UserSearchForm($name: String!) {
+        userByName(name: $name) {
+          id
+          # Consider preloading UserItemsPage fields here, too?
+        }
+      }
+    `,
+    {
+      onCompleted: (data) => {
+        const user = data.userByName;
+        if (!user) {
+          toast({
+            status: "warning",
+            title: "We couldn't find that user!",
+            description: "Check the spelling and try again?",
+          });
+          return;
+        }
+
+        history.push(`/user/${user.id}/items`);
+      },
+      onError: (error) => {
+        console.error(error);
+        toast({
+          status: "error",
+          title: "Error loading user!",
+          description: "Check your connection and try again?",
+        });
+      },
+    }
+  );
+
+  return (
+    <Box
+      as="form"
+      onSubmit={(e) => {
+        loadUserSearch({ variables: { name: query } });
+        e.preventDefault();
+      }}
+    >
+      <InputGroup size="sm">
+        <InputLeftElement pointerEvents="none">
+          <SearchIcon color="gray.400" />
+        </InputLeftElement>
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search for another user…"
+          borderRadius="full"
+        />
+        <InputRightElement>
+          <IconButton
+            type="submit"
+            variant="ghost"
+            icon={<ArrowForwardIcon />}
+            aria-label="Search"
+            isLoading={loading}
+            minWidth="1.5rem"
+            minHeight="1.5rem"
+            width="1.5rem"
+            height="1.5rem"
+            borderRadius="full"
+            opacity={query ? 1 : 0}
+            transition="opacity 0.2s"
+            aria-hidden={query ? "false" : "true"}
+          />
+        </InputRightElement>
+      </InputGroup>
+    </Box>
+  );
+}
+
 function ClosetList({ closetList, isCurrentUser, showHeading }) {
   const hasYouWantThisBadge = (item) =>
     !isCurrentUser &&

src/server/loaders.js

@@ -759,6 +759,21 @@ const buildUserLoader = (db) =>
     );
   });
 
+const buildUserByNameLoader = (db) =>
+  new DataLoader(async (names) => {
+    const qs = names.map((_) => "?").join(",");
+    const [rows, _] = await db.execute(
+      `SELECT * FROM users WHERE name IN (${qs})`,
+      names
+    );
+
+    const entities = rows.map(normalizeRow);
+
+    return names.map((name) =>
+      entities.find((e) => e.name.toLowerCase() === name.toLowerCase())
+    );
+  });
+
 const buildUserClosetHangersLoader = (db) =>
   new DataLoader(async (userIds) => {
     const qs = userIds.map((_) => "?").join(",");
@@ -891,6 +906,7 @@ function buildLoaders(db) {
   loaders.speciesLoader = buildSpeciesLoader(db);
   loaders.speciesTranslationLoader = buildSpeciesTranslationLoader(db);
   loaders.userLoader = buildUserLoader(db);
+  loaders.userByNameLoader = buildUserByNameLoader(db);
   loaders.userClosetHangersLoader = buildUserClosetHangersLoader(db);
   loaders.userClosetListsLoader = buildUserClosetListsLoader(db);
   loaders.zoneLoader = buildZoneLoader(db);

src/server/types/User.js

@@ -40,6 +40,7 @@ const typeDefs = gql`
 
   extend type Query {
     user(id: ID!): User
+    userByName(name: String!): User
     currentUser: User
   }
 `;
@@ -213,6 +214,16 @@ const resolvers = {
 
       return { id };
     },
+
+    userByName: async (_, { name }, { userByNameLoader }) => {
+      const user = await userByNameLoader.load(name);
+      if (!user) {
+        return null;
+      }
+
+      return { id: user.id };
+    },
+
     currentUser: async (_, __, { currentUserId, userLoader }) => {
       if (currentUserId == null) {
         return null;