cabinpkg · ken-matsui · Dec 26, 2023 · Dec 26, 2023 · Dec 26, 2023
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 
 public/robots.txt
 public/sitemap*.xml
+
+graphql.schema.json
+graphql/graphql.ts
diff --git a/biome.json b/biome.json
@@ -1,7 +1,7 @@
 {
     "$schema": "https://biomejs.dev/schemas/1.4.0/schema.json",
     "files": {
-        "ignore": ["./.next/*"]
+        "ignore": ["./.next/*", "./graphql/*"]
     },
     "linter": {
         "enabled": true,

diff --git a/codegen.ts b/codegen.ts
@@ -0,0 +1,27 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+    schema: "https://poac.hasura.app/v1/graphql",
+    documents: ["./graphql/**/*.graphql"],
+    overwrite: true,
+    generates: {
+        "./graphql/graphql.ts": {
+            plugins: [
+                "typescript",
+                "typescript-operations",
+                "typescript-graphql-request",
+            ],
+            config: {
+                skipTypename: false,
+                withHooks: true,
+                withHOC: false,
+                withComponent: false,
+            },
+        },
+        "./graphql.schema.json": {
+            plugins: ["introspection"],
+        },
+    },
+};
+
+export default config;
diff --git a/components/InfoColumn.tsx b/components/InfoColumn.tsx
@@ -21,7 +21,6 @@ import { useEffect, useState } from "react";
 import { format } from "timeago.js";
 import InfoColumnItem from "~/components/InfoColumnItem";
 import { Link } from "~/components/Link";
-import { BASE_API_URL } from "~/utils/constants";
 import { Package, User } from "~/utils/types";
 
 interface Props {
@@ -78,24 +77,24 @@ export default function InfoColumn(props: Props): JSX.Element {
     const { hasCopied, onCopy } = useClipboard(installSnippet);
     const [owners, setOwners] = useState<User[]>([]);
 
-    useEffect(() => {
-        fetch(`${BASE_API_URL}/packages/${props.package.name}/owners`)
-            .then((res) => {
-                res.json().then((data) => {
-                    const users: User[] = [];
-                    for (const rawUser of data.data) {
-                        users.push({
-                            id: rawUser.id,
-                            name: rawUser.name,
-                            user_name: rawUser.user_name,
-                            avatar_url: rawUser.avatar_url,
-                        });
-                    }
-                    setOwners(users);
-                });
-            })
-            .catch((err) => console.error(err));
-    }, [props.package.name]);
+    // useEffect(() => {
+    //     fetch(`${BASE_API_URL}/packages/${props.package.name}/owners`)
+    //         .then((res) => {
+    //             res.json().then((data) => {
+    //                 const users: User[] = [];
+    //                 for (const rawUser of data.data) {
+    //                     users.push({
+    //                         id: rawUser.id,
+    //                         name: rawUser.name,
+    //                         user_name: rawUser.user_name,
+    //                         avatar_url: rawUser.avatar_url,
+    //                     });
+    //                 }
+    //                 setOwners(users);
+    //             });
+    //         })
+    //         .catch((err) => console.error(err));
+    // }, [props.package.name]);
 
     return (
         <VStack spacing={5} maxWidth={300} divider={<StackDivider />}>

diff --git a/components/PackageDetails.tsx b/components/PackageDetails.tsx
@@ -31,8 +31,7 @@ import type { Package } from "~/utils/types";
 
 interface InfoMainProps {
     package: Package;
-    versions: string[];
-    dependents: Package[];
+    numVersions: number;
 }
 
 function InfoMain(props: InfoMainProps): JSX.Element {
@@ -48,7 +47,7 @@ function InfoMain(props: InfoMainProps): JSX.Element {
                 <Tab>
                     <HStack spacing={1}>
                         <FontAwesomeIcon icon={faTags} width={18} />
-                        <Code>{props.versions.length}</Code>
+                        <Code>{props.numVersions}</Code>
                         <Text>Versions</Text>
                     </HStack>
                 </Tab>
@@ -76,7 +75,6 @@ function InfoMain(props: InfoMainProps): JSX.Element {
                 <Tab>
                     <HStack spacing={1}>
                         <FontAwesomeIcon icon={faLink} width={20} />
-                        <Code>{props.dependents.length}</Code>
                         <Text>Dependents</Text>
                     </HStack>
                 </Tab>
@@ -100,15 +98,15 @@ function InfoMain(props: InfoMainProps): JSX.Element {
                 </TabPanel>
                 <TabPanel>
                     <UnorderedList>
-                        {props.versions.map((v) => (
+                        {/* {props.versions.map((v) => (
                             <ListItem key={v}>
                                 <Link
                                     href={`/packages/${props.package.name}/${v}`}
                                 >
                                     {v}
                                 </Link>
                             </ListItem>
-                        ))}
+                        ))} */}
                     </UnorderedList>
                 </TabPanel>
                 <TabPanel>
@@ -128,7 +126,7 @@ function InfoMain(props: InfoMainProps): JSX.Element {
                         <Text>This package has no dependencies.</Text>
                     )}
                 </TabPanel>
-                <TabPanel>
+                {/* <TabPanel>
                     {props.dependents && props.dependents.length > 0 ? (
                         <UnorderedList>
                             {props.dependents.map((d) => (
@@ -142,7 +140,7 @@ function InfoMain(props: InfoMainProps): JSX.Element {
                             This package is not used as a dependency yet.
                         </Text>
                     )}
-                </TabPanel>
+                </TabPanel> */}
             </TabPanels>
         </Tabs>
     );
@@ -167,8 +165,7 @@ function PackageHeading(props: PackageHeadingProps): JSX.Element {
 
 interface PackageDetailsProps {
     package: Package;
-    versions: string[];
-    dependents: Package[];
+    numVersions: number;
 }
 
 export default function PackageDetails(
@@ -180,8 +177,7 @@ export default function PackageDetails(
             <HStack spacing={5} alignItems="start">
                 <InfoMain
                     package={props.package}
-                    versions={props.versions}
-                    dependents={props.dependents}
+                    numVersions={props.numVersions}
                 />
                 <InfoColumn package={props.package} />
             </HStack>

diff --git a/components/SearchPagination.tsx b/components/SearchPagination.tsx
@@ -19,7 +19,6 @@ interface SearchPaginationProps {
     query?: Record<string, unknown>;
     setCurrentPos: Dispatch<SetStateAction<Position>>;
     perPage: number;
-    sort?: string;
     page: number;
     totalCount: number;
 }
@@ -43,35 +42,17 @@ export default function SearchPagination(
         },
     });
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intended
     useEffect(() => {
-        if (props.sort) {
-            router.push({
-                pathname: props.pathname,
-                query: {
-                    page: currentPage,
-                    perPage: pageSize,
-                    sort: props.sort,
-                    ...props.query,
-                },
-            });
-        } else {
-            router.push({
-                pathname: props.pathname,
-                query: {
-                    page: currentPage,
-                    perPage: pageSize,
-                    ...props.query,
-                },
-            });
-        }
-    }, [
-        currentPage,
-        pageSize,
-        props.sort,
-        props.pathname,
-        props.query,
-        router,
-    ]);
+        router.push({
+            pathname: props.pathname,
+            query: {
+                page: currentPage,
+                perPage: pageSize,
+                ...props.query,
+            },
+        });
+    }, [currentPage]);
 
     useEffect(() => {
         const currentLast = currentPage * pageSize;

diff --git a/components/SearchResult.tsx b/components/SearchResult.tsx
@@ -1,45 +1,14 @@
 import { Center, HStack, Select, Spacer, Text, VStack } from "@chakra-ui/react";
-import { faListOl, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faListOl } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import humanizeString from "humanize-string";
-import { useRouter } from "next/router";
-import type { ChangeEvent, Dispatch, SetStateAction } from "react";
+import type { ChangeEvent } from "react";
 import { useCallback, useState } from "react";
 
 import Package from "~/components/Package";
 import SearchPagination from "~/components/SearchPagination";
 import type { PackageOverview, Position } from "~/utils/types";
 
 const perPageSelections = [5, 10, 30, 50, 100] as const;
-const sortSelections = ["relevance", "newlyPublished"] as const;
-export type Sort = (typeof sortSelections)[number];
-
-interface SortSelectionProps {
-    sort: Sort;
-    setSort: Dispatch<SetStateAction<Sort>>;
-}
-
-function SortSelection(props: SortSelectionProps): JSX.Element {
-    const handleSortChange = useCallback(
-        (event: ChangeEvent<HTMLSelectElement>) => {
-            props.setSort(event.target.value as Sort);
-        },
-        [props],
-    );
-
-    return (
-        <>
-            <FontAwesomeIcon icon={faSort} width={10} />
-            <Select width={200} value={props.sort} onChange={handleSortChange}>
-                {sortSelections.map((v) => (
-                    <option key={v} value={v}>
-                        {humanizeString(v)}
-                    </option>
-                ))}
-            </Select>
-        </>
-    );
-}
 
 interface SearchResultProps {
     packages: PackageOverview[];
@@ -51,14 +20,11 @@ interface SearchResultProps {
 }
 
 export default function SearchResult(props: SearchResultProps): JSX.Element {
-    const router = useRouter();
-
     const [currentPos, setCurrentPos] = useState<Position>({
         first: 0,
         last: 0,
     });
     const [perPage, setPerPage] = useState<number>(props.perPage);
-    const [sort, setSort] = useState<Sort>("relevance");
 
     const handlePerPageChange = useCallback(
         (event: ChangeEvent<HTMLSelectElement>) => {
@@ -96,9 +62,6 @@ export default function SearchResult(props: SearchResultProps): JSX.Element {
                             </option>
                         ))}
                     </Select>
-                    {router.pathname === "/search" && (
-                        <SortSelection sort={sort} setSort={setSort} />
-                    )}
                 </HStack>
                 <VStack spacing={5}>
                     {props.packages.map((p) => (
@@ -110,7 +73,6 @@ export default function SearchResult(props: SearchResultProps): JSX.Element {
                     query={props.query ? { query: props.query } : undefined}
                     setCurrentPos={setCurrentPos}
                     perPage={perPage}
-                    sort={router.pathname === "/search" ? sort : undefined}
                     page={props.page}
                     totalCount={props.totalCount}
                 />

diff --git a/graphql/getPackageByNameAndVersion.graphql b/graphql/getPackageByNameAndVersion.graphql
@@ -0,0 +1,21 @@
+query getPackageByNameAndVersion($name: String!, $version: String!) @cached(ttl: 600) {
+  packages(where: {name: {_eq: $name}, version: {_eq: $version}}) {
+    authors
+    description
+    edition
+    id
+    license
+    metadata
+    name
+    published_at
+    readme
+    repository
+    sha256sum
+    version
+  }
+  packages_aggregate(where: {name: {_eq: $name}}) {
+    aggregate {
+      count
+    }
+  }
+}
diff --git a/graphql/getPackagesByName.graphql b/graphql/getPackagesByName.graphql
@@ -0,0 +1,16 @@
+query getPackagesByName($name: String!) @cached(ttl: 600) {
+  packages(where: {name: {_eq: $name}}) {
+    authors
+    description
+    edition
+    id
+    license
+    metadata
+    name
+    published_at
+    readme
+    repository
+    sha256sum
+    version
+  }
+}
diff --git a/graphql/searchPackages.graphql b/graphql/searchPackages.graphql
@@ -0,0 +1,15 @@
+query searchPackages($name: String!, $limit: Int!, $offset: Int!) @cached(ttl: 600) {
+  packages(where: {name: {_like: $name}}, limit: $limit, offset: $offset, distinct_on: name) {
+    description
+    edition
+    id
+    name
+    published_at
+    version
+  }
+  packages_aggregate(where: {name: {_like: $name}}) {
+    aggregate {
+      count(distinct: true)
+    }
+  }
+}