Add a search page

features/ReposPage/index.tsx

@@ -1,9 +1,13 @@
 import { RepositoryTable } from "../RepositoryTable";
 
-export default function ReposPage() {
+type ReposPageProps = {
+  search?: string;
+};
+
+export default function ReposPage(props: ReposPageProps | null) {
   return (
     <>
-      <RepositoryTable />
+      <RepositoryTable {...props} />
     </>
   );
 }

features/RepositoryTable/RepositoryTable.tsx

@@ -56,13 +56,17 @@ const defaultHiddenColumns = [
   "homepage",
 ];
 
-export default function RepositoryTable() {
+type RepositoryTableProps = {
+  search?: string;
+};
+
+export default function RepositoryTable(props: RepositoryTableProps | null) {
   const [filteringState, setFilteringState] = useState<Filter[]>([]);
   const [sortingState, setSortingState] = useState<Sorting[]>([]);
   const [searchState, setSearchState] = useState<string>("");
   const [columnVisibilityState, setColumnVisibilityState] =
     useState<string[]>(defaultHiddenColumns);
-  const [repositories] = useRepositories();
+  const [repositories] = useRepositories({ search: props.search });
 
   return (
     <Paper>

features/useRepositories/SearchRepositoryRows.tsx

@@ -0,0 +1,17 @@
+import { gql } from "@apollo/client";
+import REPOSITORY_ROW_FIELDS from "./RepositoryRowFields";
+
+export default gql`
+  ${REPOSITORY_ROW_FIELDS}
+  query GitHubRespositorySearchRow($endCursor: String, $search: String!) {
+    search(type: REPOSITORY, query: $search, first: 40, after: $endCursor) {
+      pageInfo {
+        endCursor
+      }
+      repositoryCount
+      nodes {
+        ...RepositoryRowFields
+      }
+    }
+  }
+`;

features/useRepositories/index.tsx

@@ -4,38 +4,59 @@ import { Repository } from "./Repository";
 import { isAuthorizedUseLogin } from "../UserLogin/useLogin";
 import loadViaApolloClient from "./loadViaApolloClient";
 
+type RecurseLoadParams = {
+  accessToken: string;
+  login: string;
+  repos: Repository[];
+  search?: string;
+};
+
 async function recurseLoad(
-  accessToken: string,
-  login: string,
-  repos: Repository[],
+  { accessToken, login, repos, search }: RecurseLoadParams,
   setRepositories: (r: Repository[]) => any,
   endCursor?: string
 ) {
   const [loadedRepos, totalCount, newEndCursor] = await loadViaApolloClient(
-    accessToken,
-    login,
+    {
+      accessToken,
+      login,
+      search,
+    },
     endCursor
   );
 
   const newRepos = [...repos, ...loadedRepos];
 
   if (newRepos.length < totalCount) {
-    recurseLoad(accessToken, login, newRepos, setRepositories, newEndCursor);
+    recurseLoad(
+      { accessToken, login, repos: newRepos, search },
+      setRepositories,
+      newEndCursor
+    );
   }
 
   setRepositories(newRepos);
 }
 
-export function useRepositories(): [Repository[], () => any] {
+type UseRepositoriesProps = {
+  search?: string;
+};
+
+export function useRepositories(
+  props: UseRepositoriesProps
+): [Repository[], () => any] {
   const login = useLogin();
   const [repositories, setRepositories] = useState<Repository[]>([]);
   useEffect(() => {
     (async () => {
       if (isAuthorizedUseLogin(login)) {
         recurseLoad(
-          login.accessToken,
-          login.user.login,
-          repositories,
+          {
+            accessToken: login.accessToken,
+            login: login.user.login,
+            repos: repositories,
+            search: props && props.search,
+          },
           setRepositories
         );
       }