refactor(search): making search components more compact

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@octokit/openapi-types": "^19.0.0",
     "@octokit/rest": "^20.0.2",
     "@octokit/types": "^12.0.0",
     "@tanstack/react-query": "^5.0.0",
@@ -39,7 +40,9 @@
     "next-auth": "^4.24.3",
     "node-mocks-http": "^1.13.0",
     "postcss": "^8",
+    "react-daisyui": "^4.1.2",
     "react-icons": "^4.11.0",
+    "react-test-renderer": "^18.2.0",
     "sharp": "^0.32.6",
     "tailwindcss": "^3",
     "typescript": "^5",

src/app/api/github/repo/route.ts

@@ -0,0 +1,8 @@
+import search from '@/pkg/github/api/search'
+import deleteRepo from '@/pkg/github/api/delete'
+import { patch } from '@/pkg/github/api/patch'
+export {
+  search as GET,
+  deleteRepo as DELETE,
+  patch as PATCH
+}

src/app/auth/layout.tsx

@@ -0,0 +1,10 @@
+import LayoutFull from '@/pkg/ui/views/LayoutFull';
+import { PropsWithChildren } from 'react';
+
+export default function Layout({children}: PropsWithChildren) {
+  return (
+    <LayoutFull>
+      {children}
+    </LayoutFull>
+  )
+}

src/app/dashboard/layout.tsx

@@ -0,0 +1,10 @@
+import LayoutDefault from '@/pkg/ui/views/LayoutDefault';
+import { PropsWithChildren } from 'react';
+
+export default function Layout({children}: PropsWithChildren) {
+  return (
+    <LayoutDefault>
+      {children}
+    </LayoutDefault>
+  )
+}

src/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
-import Dashboard from '@/pkg/github/components/Dashboard'
+import GitHubDashboard from '@/pkg/github/pages/DashboardPage'
 
 export default function DashboardPage() {
-  return <Dashboard/>
+  return GitHubDashboard()
 }
 

src/app/globals.css

@@ -2,3 +2,20 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .pagination > button {
+    @apply btn btn-xs;
+  }
+
+  .pagination > button.nav {
+    @apply bg-slate-950 text-white;
+  }
+
+  .pagination > button.number {
+    @apply btn-outline;
+  }
+
+  .pagination > button > svg {
+    @apply w-4 h-4;
+  }
+}

src/app/layout.tsx

@@ -2,11 +2,8 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import classNames from 'classnames'
-import ComposeProviders from '@/pkg/ui/ComposeProviders'
-import ThemeProvider from '@/pkg/ui/contexts/ThemeContext'
-import AuthProvider from '@/pkg/auth/context/AuthContext'
-import ToastProvider from '@/pkg/ui/contexts/ToastContext'
-import ReactQueryProvider from '@/pkg/ui/contexts/ReactQueryContext'
+import Layout from '@/pkg/ui/views/Layout'
+import Providers from '@/pkg/ui/Providers'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -27,14 +24,9 @@ export default function RootLayout({
           'bg-gray-200 min-h-screen': true
         })}
       >
-        <ComposeProviders components={[
-          ThemeProvider,
-          ToastProvider,
-          AuthProvider,
-          ReactQueryProvider
-        ]}>
+        <Providers>
           {children}
-        </ComposeProviders>
+        </Providers>
       </body>
     </html>
   )

src/pkg/github/GitHub.ts

@@ -0,0 +1,14 @@
+import { GitHubEnumSortOrder } from './types';
+
+export const GitHub = {
+  search: {
+    perPage: 6,
+    sort: 'updated',
+    order: GitHubEnumSortOrder.asc,
+    cacheKey: 'github_search_params',
+    queryKey: 'gitHubSearch'
+  },
+  fetch: {
+    queryKey: 'gitHubFetch'
+  }
+}

src/pkg/github/api/delete.ts

@@ -1,7 +1,7 @@
 import { createOctokit } from '../octokit';
 import { NextRequest, NextResponse } from 'next/server';
 
-export async function deleteRepo(req: NextRequest){
+export default async function deleteRepo(req: NextRequest){
   try{
     const octokit = await createOctokit(req)
     const params = await req.json()

src/pkg/github/api/search.spec.ts

@@ -9,11 +9,16 @@ describe('search()', ()=>{
 
   it('should returns search', async () => {
     const query = {
-      q: 'reflow',
+      owner: 'user:kilip'
     } as GitHubSearchParams
     const { req } = createMocks({
       url: '/api/search',
-      body: query
+      body: query,
+      nextUrl: {
+        searchParams: new URLSearchParams({
+          owner: 'user:kilip'
+        })
+      }
     })
     req.json = vi.fn().mockResolvedValue(query)
     const resp = {
@@ -25,7 +30,9 @@ describe('search()', ()=>{
 
     fetchMock.mock({
       url: 'https://api.github.com/search/repositories',
-      query
+      query: {
+        q: 'user:kilip'
+      }
     }, {
       status: 200,
       body: resp
@@ -37,5 +44,4 @@ describe('search()', ()=>{
     expect(response).toBeInstanceOf(NextResponse)
     expect(json.data).toEqual(resp)
   })
-
 })

src/pkg/github/api/search.ts

@@ -1,11 +1,53 @@
 import { createOctokit } from '../octokit'
 import { NextRequest, NextResponse } from 'next/server'
+import { GitHubEnumArchived, GitHubEnumVisibility, GitHubSearchParams } from '../types'
+import { Endpoints } from '@octokit/types'
+import { getGitHubProfile } from '../utils/service'
 
-export default async function search(req: NextRequest){
+type OctokitSearchParams = Endpoints['GET /search/repositories']['parameters']
+
+async function createSearchParams(params: GitHubSearchParams|any): Promise<OctokitSearchParams> {
+  // setting minimal q with "user:login"
+  if(params.owner == ''){
+    params.owner = 'user:' + (await getGitHubProfile()).login
+  }
+
+  const {
+    owner,
+    keyword,
+    sort,
+    order,
+    per_page,
+    page,
+    visibility,
+    archived
+  } = params
+
+  const queries: string[] = []
+
+  if('' !== keyword) queries.push(keyword)
+  if(GitHubEnumVisibility.undefined !== visibility) queries.push(visibility)
+  if(GitHubEnumArchived.undefined !== archived) queries.push(archived)
+  queries.push(owner)
+
+  return {
+    q: queries.join(' ').trim(),
+    sort,
+    order,
+    per_page,
+    page
+  }
+}
+
+export default async function search(
+  req: NextRequest
+){
   const octokit = await createOctokit(req)
-  const params = await req.json()
+  const params = Object.fromEntries(req.nextUrl.searchParams)
+  const searchParams = await createSearchParams(params)
+
   try{
-    const response = await octokit.search.repos(params)
+    const response = await octokit.search.repos(searchParams)
     return NextResponse.json(response)
   }catch(e: any){
     return NextResponse.json({error: e}, {