Add some more detail to the search results

Author: GregBrimble

README.md

@@ -31,6 +31,8 @@ The code can be found in `./src`. It uses [React Router](https://reactrouter.com
 
 This project is enhanced as a [FAB](https://fab.dev/), which allows us to sprinkle in some server-side functionality. These plugins can be found in the `./api` folder. Right now, there's just a mock GraphQL server, but in the future, we could use this for user authorization etc.
 
+To run the full FAB build (which is as close to production as you can get), `npm run build:fab && npx fab serve`
+
 ## Testing
 
 Pretty minimal at this point, but CRA comes with [Jest](https://jestjs.io/) built-in and there's one example in `./src/App.test.tsx`.

src/components/SearchResults.tsx

@@ -1,5 +1,32 @@
 import { QueryResult } from "@apollo/client";
-import { Search } from "../pages/__generated__/Search";
+import {
+  Search,
+  Search_search_documents_edges_node,
+} from "../pages/__generated__/Search";
+
+const SearchResult = ({
+  node,
+}: {
+  node: Search_search_documents_edges_node;
+}) => (
+  <li className="py-4" key={node.id}>
+    <a className="text-lg leading-6 font-medium text-gray-500" href={node.url}>
+      {node.name}
+    </a>
+    <p className="mt-1 text-sm text-gray-500">{node.description}</p>
+    <p className="text-xs text-gray-500 text-right">
+      Sourced from{" "}
+      <a
+        className="font-medium"
+        href={node.externalSource.url}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {node.externalSource.name}
+      </a>
+    </p>
+  </li>
+);
 
 export const SearchResults = ({
   loading,
@@ -9,11 +36,12 @@ export const SearchResults = ({
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {JSON.stringify(error)}</div>;
 
+  const documentEdges = data?.search.documents.edges || [];
   return (
     <ul className="divide-y divide-gray-200">
-      {data?.search.documents.edges?.map(edge => (
-        <li className="py-4">{edge?.node?.name}</li>
-      ))}
+      {documentEdges.map(
+        edge => edge?.node && <SearchResult node={edge.node} />
+      )}
     </ul>
   );
 };

src/pages/Home.tsx

@@ -13,9 +13,16 @@ const SEARCH = gql`
       documents {
         edges {
           node {
+            id
             name
             description
             url
+            externalSource {
+              id
+              name
+              description
+              url
+            }
           }
         }
       }