BRAVO68WEB · BRAVO68WEB · Jun 15, 2024 · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024
@@ -3,4 +3,6 @@ pkgs/*
 db/*
 !db/.gitkeep
 target/
-*.db
+*.db
+node_modules
+.turbo
@@ -0,0 +1,6 @@
+schema: 'graphql/schema.graphql'
+documents: 'packages/**/*.{ts,tsx,js,jsx,graphql}'
+extensions:
+  languageService:
+    cacheSchemaFileForLookup: true
+    enableValidation: false
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-synthesis: none;
+}
+
+.react-dropdown-select-item  {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+.react-dropdown-select-item:hover {
+  color: var(--background);
+  background: var(--foreground);
+}
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {/* <QueryClientProvider client={queryClient}> */}
+          {children}
+        {/* </QueryClientProvider> */}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,31 @@
+import NameContext from "@/components/NameContext";
+import PackageList from "@/components/PackageList";
+import Pagination from "@/components/Pagination";
+import RepoList from "@/components/RepoList";
+import SearchBar from "@/components/SearchBar";
+
+export default function Home() {
+    return (
+        <NameContext>
+            <div className="font-sans min-h-screen p-8 pb-20 gap-16 sm:p-20">
+                <div className="flex gap-16 flex-row sm:flex-row">
+                    <div className="flex border-2 border-sky-500 flex-col items-center justify-items-center">
+                        <h1 className="items-center justify-items-center text-2xl pt-2">
+                            Repo List
+                        </h1>
+                        <RepoList />
+                    </div>
+                    <div className="flex gap-4 flex-col border-sky-500 border-2">
+                        <div 
+                            className="flex justify-between items-center p-2"
+                        >
+                          <SearchBar />
+                          <Pagination />
+                        </div>
+                        <PackageList />
+                    </div>
+                </div>
+            </div>
+        </NameContext>
+    );
+}
@@ -0,0 +1,64 @@
+"use client";
+
+import React, { createContext, useContext, useState, } from "react";
+
+interface IRepoNameContextType {
+    name: string | null;
+    setName: (name: string | null) => void;
+    searchPkgName: string | null;
+    setSearchPkgName: (searchPkgName: string | null) => void;
+    perPage: number;
+    setPerPage: (perPage: number) => void;
+    pageNumber: number;
+    setPageNumber: (pageNumber: number) => void;
+    totalPackages: number;
+    setTotalPackages: (totalPackages: number) => void;
+}
+const repoNameContext = createContext<IRepoNameContextType>({
+    name: null,
+    setName: () => {}, 
+    searchPkgName: null, 
+    setSearchPkgName: () => {}, 
+    pageNumber: 1, 
+    setPageNumber: () => {}, 
+    perPage: 25, 
+    setPerPage: () => {},
+    totalPackages: 0,
+    setTotalPackages: () => {}
+});
+
+interface NameContextProps {
+    children: React.ReactNode;
+}
+function NameContext({ children }: Readonly<NameContextProps>) {
+    const [name, setName] = useState<string | null>(null);
+    const [searchPkgName, setSearchPkgName] = useState<string | null>(null);
+    const [perPage, setPerPage] = useState<number>(25);
+    const [pageNumber, setPageNumber] = useState<number>(1);
+    const [totalPackages, setTotalPackages] = useState<number>(0);
+
+    return (
+        <repoNameContext.Provider 
+            value={{ 
+                name, 
+                setName, 
+                searchPkgName, 
+                setSearchPkgName, 
+                perPage, 
+                setPerPage, 
+                pageNumber, 
+                setPageNumber,
+                totalPackages,
+                setTotalPackages
+            }}
+        >
+            {children}
+        </repoNameContext.Provider>
+    );
+}
+
+export default NameContext;
+
+export const useRepoName = () => {
+    return useContext(repoNameContext);
+};
@@ -0,0 +1,31 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import PackageRender from "./PackagesRender";
+import getRepoPackages from "@/libs/get_packages";
+import { useRepoName } from "./NameContext";
+
+interface IData {
+    packages: [{ name: string; version: string; description: string; repo: string }];
+}
+
+function PackageList() {
+    const [data, setData] = useState<IData | null>(null);
+    const { name: repo_name, searchPkgName, pageNumber, perPage, setTotalPackages } = useRepoName();
+
+    useEffect(() => {
+        async function fetchData() {
+          const newData = await getRepoPackages(repo_name, searchPkgName, {
+            perPage,
+            pageNumber,
+          });
+          setData(newData);
+          setTotalPackages(newData.packages_aggregate.aggregate.count);
+        }
+        fetchData();
+    }, [repo_name, searchPkgName, pageNumber, perPage]);
+
+    return <>{data && <PackageRender data={data} />}</>;
+}
+
+export default PackageList;
@@ -0,0 +1,78 @@
+'use client'
+import React from 'react'
+import { 
+    createColumnHelper,
+    flexRender,
+    getCoreRowModel, 
+    useReactTable 
+} from '@tanstack/react-table';
+
+function PackageRender({ data }: Readonly<{ data: { packages: [{ name: string, version: string, description: string, repo: string }] } }>) {
+    const columnHelper = createColumnHelper<{name: string, version: string, description: string, repo: string}>()
+    const columns = [
+        columnHelper.accessor('name', {
+            cell: info => info.getValue(),
+            footer: info => info.column.id,
+        }),
+        columnHelper.accessor('version', {
+            cell: info => info.getValue(),
+            footer: info => info.column.id,
+        }),
+        columnHelper.accessor('description', {
+            cell: info => info.getValue(),
+            footer: info => info.column.id,
+        }),
+        columnHelper.accessor('repo', {
+            cell: info => info.getValue(),
+            footer: info => info.column.id,
+        }),
+    ];
+
+    const table = useReactTable({
+        data: data.packages,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="flex flex-col p-2">
+            <table 
+                className='table-auto border-collapse border border-blue-400 p-5'
+            >
+                <thead>
+                  {table.getHeaderGroups().map(headerGroup => (
+                    <tr key={headerGroup.id}>
+                      {headerGroup.headers.map(header => (
+                        <th key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </th>
+                      ))}
+                    </tr>
+                  ))}
+                </thead>
+                <tbody 
+                  className='border-collapse border border-blue-400 p-5'
+                >
+                  {table.getRowModel().rows.map(row => (
+                    <tr key={row.id} 
+                        className='border-collapse border border-blue-400 p-5'
+                    >
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export default PackageRender