Filter results by stars/license, sort by date.

phyllisstein · Feb 10, 2024 · a8ca706 · a8ca706
1 parent dcad43b
commit a8ca706
Show file tree

Hide file tree

Showing 4 changed files with 295 additions and 974 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "exenv": "^1.2.2",
-    "next": "14.1.0",
+    "next": "^14.1.1-canary.45",
     "p-wait-for": "^5.0.2",
     "react": "18.3.0-canary-ba5e6a832-20240208",
     "react-dom": "18.3.0-canary-ba5e6a832-20240208",
@@ -64,5 +64,9 @@
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
+  },
+  "resolutions": {
+    "react": "18.3.0-canary-ba5e6a832-20240208",
+    "react-dom": "18.3.0-canary-ba5e6a832-20240208"
   }
 }
diff --git a/src/app/actions.ts b/src/app/actions.ts
@@ -28,17 +28,28 @@ export const fetchRepos = async (
   _previousState: FormState,
   formData: FormData,
 ): Promise<FetchResult> => {
-  'use server'
+  const owner = formData?.get('owner')
+  const stars = formData?.get('stars') as string
+  const sort = formData?.get('sort') as string
+  const order = formData?.get('order') as string
+  const license = formData?.get('license') as string
 
-  const query = formData?.get('query')
-
-  if (typeof query !== 'string') {
+  if (typeof owner !== 'string') {
     return {
       error: 'Invalid query',
       success: false,
     }
   }
 
+  const searchString = [
+    `user:${owner}`,
+    stars && `stars:>=${stars}`,
+    sort && `sort:${sort}-${order}`,
+    license && `license:${license}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
   const response = await axios.request<Response>({
     method: 'GET',
     url: 'https://api.github.com/search/repositories',
@@ -47,7 +58,7 @@ export const fetchRepos = async (
       'X-GitHub-Api-Version': '2022-11-28',
     },
     params: {
-      q: query,
+      q: searchString,
     },
   })
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { useFormState } from 'react-dom'
 
 import { Repo, RepoList } from 'components/repo-list'
+
 import { fetchRepos, type FetchResult } from './actions'
 
 function Home() {
@@ -14,19 +15,75 @@ function Home() {
   return (
     <div>
       <main className='p-4'>
-        <form
-          action={dispatch}
-          className='flex flex-row justify-evenly w-full h-12'>
-          <input
-            className='rounded-md border-zinc-200 border-2 items-stretch grow m-1 hover:border-sky-300 focus:outline-none focus:border-sky-400 outline-none px-2 py-1'
-            name='query'
-            type='search'
-          />
-          <button
-            className='basis-4 rounded-md m-1 bg-sky-500 px-2 py-1 text-neutral-50 hover:bg-sky-600 active:bg-sky-700 focus:outline-none focus:ring-sky-300'
-            type='submit'>
-            Search
-          </button>
+        <form action={dispatch} className='flex flex-col'>
+          <div className='flex flex-row justify-center w-full h-12 my-1'>
+            <label className='relative block'>
+              <span className='absolute inset-y-0 left-0 flex items-center pl-2'>
+                @
+              </span>
+              <input
+                className='rounded-md border-zinc-200 border-2 items-stretch grow m-1 hover:border-sky-300 focus:outline-none focus:border-sky-400 outline-none placeholder:neutral-500 py-2 pl-5 pr-3 leading-none'
+                name='owner'
+                type='search'
+                placeholder='octocat'
+              />
+            </label>
+            <button
+              className='basis-4 rounded-md m-1 bg-sky-500 px-2 py-1 text-neutral-50 hover:bg-sky-600 active:bg-sky-700 focus:outline-none focus:ring-sky-300'
+              type='submit'>
+              Search
+            </button>
+          </div>
+          <details className='flex md:block my-2'>
+            <summary>
+              <span className='text-neutral-500'>Advanced</span>
+            </summary>
+            <label className='inline-flex items-center p-2'>
+              <span className='text-neutral-500 basis-2/12 md:basis-auto mr-1'>
+                Sort by
+              </span>
+              <select
+                className='rounded-md border-zinc-200 border-2 items-stretch grow m-1 hover:border-sky-300 focus:outline-none focus:border-sky-400 outline-none px-2 py-1'
+                name='sort'>
+                <option value=''>Best match</option>
+                <option value='updated'>Last Updated</option>
+              </select>
+            </label>
+            <label className='inline-flex items-center p-2'>
+              <span className='text-neutral-500 basis-2/12 md:basis-auto mr-1'>
+                Order
+              </span>
+              <select
+                className='rounded-md border-zinc-200 border-2 items-stretch grow m-1 hover:border-sky-300 focus:outline-none focus:border-sky-400 outline-none px-2 py-1'
+                name='order'>
+                <option value='desc'>Descending</option>
+                <option value='asc'>Ascending</option>
+              </select>
+            </label>
+            <label className='inline-flex items-center p-2'>
+              <span className='text-neutral-500 basis-2/12 md:basis-auto mr-1'>
+                Minimum Stars
+              </span>
+              <input
+                className='rounded-md border-zinc-200 border-2 items-stretch grow m-1 hover:border-sky-300 focus:outline-none focus:border-sky-400 outline-none px-2 py-1'
+                name='stars'
+                type='number'
+              />
+            </label>
+            <label className='inline-flex items-center p-2'>
+              <span className='text-neutral-500 basis-2/12 md:basis-auto mr-1'>
+                License
+              </span>
+              <select
+                className='rounded-md border-zinc-200 border-2 items-stretch grow m-1 hover:border-sky-300 focus:outline-none focus:border-sky-400 outline-none px-2 py-1'
+                name='license'>
+                <option value=''>Any</option>
+                <option value='apache'>Apache 2.0</option>
+                <option value='gpl'>GPL</option>
+                <option value='mit'>MIT</option>
+              </select>
+            </label>
+          </details>
         </form>
         {state?.success && (
           <RepoList>