From 123e428161f079337f9fb3bb543f720cca624c6c Mon Sep 17 00:00:00 2001 From: cletqui Date: Fri, 5 Jul 2024 18:47:20 +0200 Subject: [PATCH] v0.6.4 working on refactoring --- README.md | 2 ++ package.json | 2 +- src/components/landing.tsx | 28 ++++++++++++++++++++++++++ src/components/loader.tsx | 10 ++++++++++ src/index.tsx | 3 ++- src/routes/template.tsx | 3 ++- src/routes/welcome.tsx | 2 +- src/utils/octokit.tsx | 31 ++++++++++++++--------------- src/utils/renderer.tsx | 40 +++----------------------------------- 9 files changed, 64 insertions(+), 57 deletions(-) create mode 100644 src/components/landing.tsx create mode 100644 src/components/loader.tsx diff --git a/README.md b/README.md index 0b8f37a..d8942ae 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 506fd52..d6d3b79 100644 --- a/package.json +++ b/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": { diff --git a/src/components/landing.tsx b/src/components/landing.tsx new file mode 100644 index 0000000..b839cda --- /dev/null +++ b/src/components/landing.tsx @@ -0,0 +1,28 @@ +import { JSX } from "hono/jsx/jsx-runtime"; + +export const Login = ({ message }: { message: string }): JSX.Element => { + return ( +
+
{"Login"}
+

{message}

+ +
+ ); +}; // TODO fix UI + +export const Welcome = ({}): JSX.Element => { + return ( +
+
{"Welcome to PetitHub"}
+

{"You are now connected"}

+ + +
+ ); +}; // TODO fix UI diff --git a/src/components/loader.tsx b/src/components/loader.tsx new file mode 100644 index 0000000..682462b --- /dev/null +++ b/src/components/loader.tsx @@ -0,0 +1,10 @@ +import { JSX } from "hono/jsx/jsx-runtime"; + +export const Loader = (): JSX.Element => { + return ( +
+
+
+
+ ); +}; diff --git a/src/index.tsx b/src/index.tsx index 70f7975..1ddcedc 100644 --- a/src/index.tsx +++ b/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"; diff --git a/src/routes/template.tsx b/src/routes/template.tsx index c510691..2c0fede 100644 --- a/src/routes/template.tsx +++ b/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 */ diff --git a/src/routes/welcome.tsx b/src/routes/welcome.tsx index 968eb00..450b34a 100644 --- a/src/routes/welcome.tsx +++ b/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 }>(); diff --git a/src/utils/octokit.tsx b/src/utils/octokit.tsx index 1570d0b..b7669ff 100644 --- a/src/utils/octokit.tsx +++ b/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} A promise that resolves after authenticating the request or returning an unauthorized response. + * @returns {Promise} 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 => { 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 => { 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>} A promise that resolves to the response containing an array of repositories. + * @returns {Promise} A promise that resolves to the response containing an array of repositories. */ const getRepositories = async ( octokit: Octokit, since: number -): Promise> => { +): Promise => { 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>} A promise that resolves to the response containing the repository information. + * @returns {Promise} A promise that resolves to the response containing the repository information. */ export const getRepos = async ( octokit: Octokit, owner: string, repo: string -): Promise> => { +): Promise => { 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 => { +): Promise => { 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 => { +): Promise => { 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, diff --git a/src/utils/renderer.tsx b/src/utils/renderer.tsx index 07ff6df..440eadb 100644 --- a/src/utils/renderer.tsx +++ b/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 ; } else { console.error(status, message); @@ -74,42 +76,6 @@ export const RepositoryContainer = async ({ } }; -export const Loader = (): JSX.Element => { - return ( -
-
-
-
- ); -}; - -const Login = ({ message }: { message: string }): JSX.Element => { - return ( -
-
{"Login"}
-

{message}

- -
- ); -}; // TODO fix UI - -export const Welcome = ({}): JSX.Element => { - return ( -
-
{"Welcome to PetitHub"}
-

{"You are now connected"}

- - -
- ); -}; // TODO fix UI - export const Container = ({ repository, }: {