v0.6.2

README.md

@@ -31,7 +31,9 @@ npm run deploy
   - [ ] use nested renderer to render multiple components
   - [ ] use `useRequestContext` to have conditional render
   - [ ] implement Swagger with API
-  - [ ] add "Browse API" in addition to "Browse GitHub repositories"
+  - [x] add "Browse API" in addition to "Browse GitHub repositories"
+  - [ ] fix UI on `Welcome`
+  - [x] get rid of `Error`
 - [ ] Define unit tests
 - [ ] Fix interfaces and type definitions
 - [ ] Setup GitHub Actions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "petithub",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": false,
   "description": "PetitHub - Explore obscure GitHub repositories",
   "author": {
@@ -30,14 +30,14 @@
     "deploy": "$npm_execpath run build && wrangler pages deploy"
   },
   "dependencies": {
-    "hono": "^4.4.10",
+    "hono": "^4.4.11",
     "octokit": "^4.0.2"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",
     "@hono/vite-cloudflare-pages": "^0.4.1",
     "@hono/vite-dev-server": "^0.12.2",
-    "vite": "^5.3.2",
+    "vite": "^5.3.3",
     "vitest": "^1.6.0",
     "wrangler": "^3.62.0"
   }

public/static/script.js

@@ -5,4 +5,11 @@ function getCookie(name) {
 const maxIdCookie = getCookie(`__Secure-max_id`);
 if (!maxIdCookie) {
   fetch("/id");
+} else {
+  const now = new Date().getTime();
+  const { timestamp } = JSON.parse(decodeURIComponent(maxIdCookie));
+  if (now > timestamp + 86400000) {
+    /* more than 1 day */
+    fetch("/id");
+  }
 }

public/static/style.css

@@ -65,6 +65,9 @@ body {
   cursor: pointer;
   filter: var(--svg-icon-color);
 }
+.header button {
+  margin: 0 1rem;
+}
 .header .title {
   font-size: 2rem;
   font-weight: 600;

src/index.tsx

@@ -2,17 +2,15 @@ import { Context, Hono } from "hono";
 import { Suspense } from "hono/jsx";
 import { logger } from "hono/logger";
 
-import { renderer, Loader, RepositoryContainer, Login } from "./utils/renderer";
-import { getOctokitInstance } from "./utils/octokit";
-import { handleMaxId, handleTokens } from "./utils/cookie";
-import { generateState, handleState } from "./utils/state";
+import { renderer, Loader, RepositoryContainer } from "./utils/renderer";
+import { getOctokitInstance, handleMaxId } from "./utils/octokit";
+import { handleTokens, refreshToken } from "./utils/tokens";
 
 import api from "./routes/api";
-import id from "./routes/id";
-import template from "./routes/template";
-import petithub from "./routes/petithub";
 import github from "./routes/github";
 import welcome from "./routes/welcome";
+import template from "./routes/template";
+import id from "./routes/id";
 
 /* TYPES */
 export type Bindings = {
@@ -22,10 +20,10 @@ export type Bindings = {
 };
 
 export type Variables = {
-  max_id: number;
+  max_id: { id: number; timestamp: number };
   access_token?: string;
   refresh_token?: string;
-  state?: string;
+  state: string;
 };
 
 /* APP */
@@ -34,42 +32,16 @@ const app = new Hono<{ Bindings: Bindings; Variables: Variables }>();
 /* MIDDLEWARES */
 app.use(logger());
 app.use(renderer);
-app.use(handleMaxId());
-app.use(handleTokens());
-app.use("/", async (c, next) => {
-  const { access_token, refresh_token } = c.var;
-  console.log(access_token, refresh_token);
-  if (!access_token) {
-    // TODO allow some use without access_token and only redirect when out of free API usage
-    if (!refresh_token) {
-      // return c.redirect("/login", 302);
-    } else {
-      return c.redirect(
-        `/github/access_token?refresh_token=${refresh_token}&callback_url=/`
-      );
-    }
-  }
-  await next();
-}); // TODO handle token verification
-app.use("/github/login", generateState());
-app.use("/github/callback", handleState());
+app.use("/", handleMaxId());
+app.use("/", handleTokens());
+app.use("/", refreshToken());
 
 /* ROUTES */
 app.route("/api", api);
-app.route("/id", id);
-app.route("/template", template);
-app.route("/petithub", petithub);
 app.route("/github", github);
 app.route("/welcome", welcome);
-
-app.get(
-  "/login",
-  (c: Context<{ Bindings: Bindings; Variables: Variables }>): Response => {
-    return c.render(<Login message="" />, {
-      title: "PetitHub - login",
-    });
-  }
-); // TODO suppress login route and add specific button to login
+app.route("/template", template);
+app.route("/id", id);
 
 /* ROOT */
 app.get(
@@ -81,7 +53,7 @@ app.get(
     const { max_id } = c.var;
     return c.render(
       <Suspense fallback={<Loader />}>
-        <RepositoryContainer octokit={octokit} maxId={max_id} />
+        <RepositoryContainer octokit={octokit} maxId={max_id.id} />
       </Suspense>,
       { title: "PetitHub" } // TODO change this title dynamically
     );

src/routes/api.tsx

@@ -4,44 +4,57 @@ import { prettyJSON } from "hono/pretty-json";
 import { cors } from "hono/cors";
 
 import { Bindings, Variables } from "..";
+import { handleMaxId } from "../utils/octokit";
+import { handleTokens, refreshToken } from "../utils/tokens";
 import {
   apiAuth,
   getOctokitInstance,
   getRandomRepository,
   getRepository,
 } from "../utils/octokit";
 
+/* APP */
 const app = new Hono<{ Bindings: Bindings; Variables: Variables }>();
 
 /* MIDDLEWARES */
+app.use(handleMaxId());
+app.use(handleTokens());
+app.use(refreshToken());
 app.use(apiAuth());
 app.use(poweredBy());
 app.use(prettyJSON());
 app.use(cors({ origin: "*", allowMethods: ["GET"], credentials: true }));
 
 /* ENDPOINTS */
 app.get(
-  "",
+  "/",
+  async (c: Context<{ Bindings: Bindings; Variables: Variables }>) => {
+    c.redirect("/api/random");
+  }
+); // TODO display Swagger
+
+app.get(
+  "/random",
   async (
     c: Context<{ Bindings: Bindings; Variables: Variables }>
   ): Promise<Response> => {
     const octokit = getOctokitInstance(c);
     const { max_id } = c.var;
     try {
-      const repository = await getRandomRepository(octokit, max_id);
+      const repository = await getRandomRepository(octokit, max_id.id);
       return c.json(repository);
     } catch (error: any) {
       return c.json({ error: "Failed to fetch repository data" }, 500);
     }
   }
-); // TODO fix request to "/api" that redirects to "/"
+);
 
 app.get(
   "/:id",
   async (
     c: Context<{ Bindings: Bindings; Variables: Variables }>
   ): Promise<Response> => {
-    const id = c.req.param("id");
+    const { id } = c.req.param();
     const octokit = getOctokitInstance(c);
     try {
       const repository = await getRepository(octokit, Number(id));