v0.6.4 working on refactoring

README.md

@@ -34,6 +34,8 @@ npm run deploy
   - [ ] implement Swagger with API
   - [x] add "Browse API" in addition to "Browse GitHub repositories"
   - [ ] fix UI on `Welcome`
+  - [ ] add profile name + icon when connected
+  - [ ] allow starring repo when connected
 - [ ] Redirect to "/:id" from "/" and check by referrer (redirect to "/" if referrer is not "/" or if repository is not PetitHub friendly)
 - [ ] Define unit tests
 - [ ] Fix interfaces and type definitions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "petithub",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "private": false,
   "description": "PetitHub - Explore obscure GitHub repositories",
   "author": {

src/components/landing.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "hono/jsx/jsx-runtime";
+
+export const Login = ({ message }: { message: string }): JSX.Element => {
+  return (
+    <div class="container">
+      <div class="container-title">{"Login"}</div>
+      <p>{message}</p>
+      <button>
+        <a href={"/github/login"}>{"Login with Github"}</a>
+      </button>
+    </div>
+  );
+}; // TODO fix UI
+
+export const Welcome = ({}): JSX.Element => {
+  return (
+    <div class="container">
+      <div class="container-title">{"Welcome to PetitHub"}</div>
+      <p>{"You are now connected"}</p>
+      <button>
+        <a href="/">{"Browse random GitHub repositories"}</a>
+      </button>
+      <button>
+        <a href="/api">{"Browse API"}</a>
+      </button>
+    </div>
+  );
+}; // TODO fix UI

src/components/loader.tsx

@@ -0,0 +1,10 @@
+import { JSX } from "hono/jsx/jsx-runtime";
+
+export const Loader = (): JSX.Element => {
+  return (
+    <div class="lds-ripple">
+      <div />
+      <div />
+    </div>
+  );
+};

src/index.tsx

@@ -3,7 +3,8 @@ import { Suspense } from "hono/jsx";
 import { logger } from "hono/logger";
 import { Octokit } from "octokit";
 
-import { renderer, Loader, RepositoryContainer } from "./utils/renderer";
+import { renderer, RepositoryContainer } from "./utils/renderer";
+import { Loader } from "./components/loader";
 import { handleMaxId } from "./utils/octokit";
 import { handleTokens } from "./utils/tokens";
 

src/routes/template.tsx

@@ -3,7 +3,8 @@ import { Suspense } from "hono/jsx";
 
 import { Bindings, Variables } from "..";
 import { handleTokens } from "../utils/tokens";
-import { Loader, Container } from "../utils/renderer";
+import { Loader } from "../components/loader";
+import { Container } from "../utils/renderer";
 import { getRepos } from "../utils/octokit";
 
 /* APP */

src/routes/welcome.tsx

@@ -1,7 +1,7 @@
 import { Context, Hono } from "hono";
 
 import { Bindings, Variables } from "..";
-import { Welcome } from "../utils/renderer";
+import { Welcome } from "../components/landing";
 
 /* APP */
 const app = new Hono<{ Bindings: Bindings; Variables: Variables }>();

src/utils/octokit.tsx

@@ -2,9 +2,9 @@ import { Context, Next } from "hono";
 import { getCookie } from "hono/cookie";
 import { createMiddleware } from "hono/factory";
 import { Octokit } from "octokit";
-import { OctokitResponse } from "@octokit/types";
+import { RestEndpointMethodTypes } from "@octokit/plugin-rest-endpoint-methods";
 
-import { Repository } from "./renderer";
+import { version } from "../../package.json";
 import { Bindings, Variables } from "..";
 
 /**
@@ -32,13 +32,13 @@ const verifyToken = async (
  * @async @function apiAuth
  * @param {Context<{ Bindings: Bindings; Variables: Variables }>} c - The Context object.
  * @param {Next} next - The callback function to proceed to the next middleware.
- * @returns {Promise<void>} A promise that resolves after authenticating the request or returning an unauthorized response.
+ * @returns {Promise<void | Response>} A promise that resolves after authenticating the request or returning an unauthorized response.
  */
 export const apiAuth = createMiddleware(
   async (
     c: Context<{ Bindings: Bindings; Variables: Variables }>,
     next: Next
-  ) => {
+  ): Promise<void | Response> => {
     const { access_token } = c.var;
     const accessToken = access_token || c.req.header("Authorization");
     if (accessToken && (await verifyToken(accessToken, c))) {
@@ -59,7 +59,7 @@ export const handleOctokit = createMiddleware(
   async (
     c: Context<{ Bindings: Bindings; Variables: Variables }>,
     next: Next
-  ) => {
+  ): Promise<void> => {
     const octokit = getOctokitInstance(c);
     c.set("octokit", octokit);
     await next();
@@ -85,6 +85,7 @@ const getOctokitInstance = (
       accept: "application/vnd.github+json",
       "X-GitHub-Api-Version": "2022-11-28",
     },
+    userAgent: `PetitHub/${version}`,
   });
 };
 
@@ -93,14 +94,14 @@ const getOctokitInstance = (
  * @async @function getRepositories
  * @param {Octokit} octokit - The Octokit instance for GitHub API.
  * @param {number} since - The ID to start fetching repositories from.
- * @returns {Promise<OctokitResponse<Repository[]>>} A promise that resolves to the response containing an array of repositories.
+ * @returns {Promise<RestEndpointMethodTypes["repos"]["listPublic"]["response"]>} A promise that resolves to the response containing an array of repositories.
  */
 const getRepositories = async (
   octokit: Octokit,
   since: number
-): Promise<OctokitResponse<Repository[]>> => {
+): Promise<RestEndpointMethodTypes["repos"]["listPublic"]["response"]> => {
   try {
-    return await octokit.request("GET /repositories", { since });
+    return await octokit.rest.repos.listPublic({ since }); // octokit.request("GET /repositories", { since });
   } catch (error: any) {
     throw error;
   }
@@ -112,15 +113,15 @@ const getRepositories = async (
  * @param {Octokit} octokit - The Octokit instance for GitHub API.
  * @param {string} owner - The owner of the repository.
  * @param {string} repo - The name of the repository.
- * @returns {Promise<OctokitResponse<any>>} A promise that resolves to the response containing the repository information.
+ * @returns {Promise<RestEndpointMethodTypes["repos"]["get"]["response"]>} A promise that resolves to the response containing the repository information.
  */
 export const getRepos = async (
   octokit: Octokit,
   owner: string,
   repo: string
-): Promise<OctokitResponse<any>> => {
+): Promise<RestEndpointMethodTypes["repos"]["get"]["response"]> => {
   try {
-    return await octokit.request("GET /repos/{owner}/{repo}", { owner, repo });
+    return await octokit.rest.repos.get({ owner, repo }); // octokit.request("GET /repos/{owner}/{repo}", { owner, repo });
   } catch (error: any) {
     throw error;
   }
@@ -136,7 +137,7 @@ export const getRepos = async (
 export const getRepository = async (
   octokit: Octokit,
   id: number
-): Promise<Repository> => {
+): Promise<RestEndpointMethodTypes["repos"]["get"]["response"]["data"]> => {
   try {
     const { data, status, url } = await getRepositories(
       octokit,
@@ -172,15 +173,13 @@ export const getRepository = async (
 export const getRandomRepository = async (
   octokit: Octokit,
   maxId: number
-): Promise<Repository> => {
+): Promise<RestEndpointMethodTypes["repos"]["get"]["response"]["data"]> => {
   try {
     const maxIterations = 10; // max iterations
     for (let loop = 0; loop < maxIterations; loop++) {
       const since = Math.floor(Math.random() * maxId);
       const { data: repositories } = await getRepositories(octokit, since);
-      const originalRepositories = repositories.filter(
-        (repo: Repository) => !repo.fork
-      );
+      const originalRepositories = repositories.filter((repo) => !repo.fork);
       for (const repo of originalRepositories) {
         const {
           name,

src/utils/renderer.tsx

@@ -4,6 +4,8 @@ import { JSX } from "hono/jsx/jsx-runtime";
 import { HtmlEscapedString } from "hono/utils/html";
 import { Octokit } from "octokit";
 
+import { Loader } from "../components/loader";
+import { Login } from "../components/landing";
 import { getRandomRepository } from "./octokit";
 import { timeAgo } from "./time";
 
@@ -65,7 +67,7 @@ export const RepositoryContainer = async ({
         data: { message },
       },
     } = (error as OctokitErrorResponse) || {};
-    if (status && status === 403) {
+    if (status && status === 403) { // TODO https://docs.github.com/en/rest/guides/scripting-with-the-rest-api-and-javascript?apiVersion=2022-11-28#handling-rate-limit-errors
       return <Login message={message} />;
     } else {
       console.error(status, message);
@@ -74,42 +76,6 @@ export const RepositoryContainer = async ({
   }
 };
 
-export const Loader = (): JSX.Element => {
-  return (
-    <div class="lds-ripple">
-      <div />
-      <div />
-    </div>
-  );
-};
-
-const Login = ({ message }: { message: string }): JSX.Element => {
-  return (
-    <div class="container">
-      <div class="container-title">{"Login"}</div>
-      <p>{message}</p>
-      <button>
-        <a href={"/github/login"}>{"Login with Github"}</a>
-      </button>
-    </div>
-  );
-}; // TODO fix UI
-
-export const Welcome = ({}): JSX.Element => {
-  return (
-    <div class="container">
-      <div class="container-title">{"Welcome to PetitHub"}</div>
-      <p>{"You are now connected"}</p>
-      <button>
-        <a href="/">{"Browse random GitHub repositories"}</a>
-      </button>
-      <button>
-        <a href="/api">{"Browse API"}</a>
-      </button>
-    </div>
-  );
-}; // TODO fix UI
-
 export const Container = ({
   repository,
 }: {