Merge pull request #3 from riskers/0.0.3

0.0.3

README.md

@@ -1,30 +1,35 @@
-# github-plus-extension
+# GithubX
 
-> Chrome Extension enhance github
+> Chrome Extension enhance Github
 
 ## Download
 
-https://chrome.google.com/webstore/detail/github-plus/nmcddfeclkbhehidjoadbmkaajoppapo
+[Chrome WebStore](https://chrome.google.com/webstore/detail/githubx/nmcddfeclkbhehidjoadbmkaajoppapo)
 
 ## Organize Your Github Stars
 
 Tag and group your github stars:
 
 ![](https://i.imgur.com/dZlYXCi.png)
 
+Popup window when you star a repo:
+
+![](https://i.imgur.com/KOCn2xl.gif)
+
 ## Data is stored locally
 
 Can't sync data with multi drive.
 Only Storaged on Local drive.
 
 ## TODO
 
-* [0.0.2](https://github.com/riskers/github-plus-extension/projects/1)
 * [0.0.3](https://github.com/riskers/github-plus-extension/projects/3)
 
-## Thanks
+## Thanks OpenSource and Free Services
 
-* [hatchful](https://hatchful.shopify.com/): Create a Logo in Seconds
+* [hatchful](https://hatchful.shopify.com/): create a logo in a few seconds
 * [Dexie](https://dexie.org/): wondful IndexedDB lib
 * [MUI](https://mui.com/): my favorite React UI lib
+* [react-window](https://github.com/bvaughn/react-window): rendering large lists data
+* [octokit.js](https://github.com/octokit/octokit.js): GitHub API SDK
 * [react-chrome-boilerplate](https://github.com/riskers/react-chrome-boilerplate) I made for developing Chrome Extension in React

package.json

@@ -12,6 +12,7 @@
     "src/**/*.{ts,tsx}": "eslint"
   },
   "devDependencies": {
+    "@octokit/types": "^6.34.0",
     "@types/chrome": "^0.0.179",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
@@ -58,15 +59,17 @@
     "@mui/material": "^5.6.0",
     "@mui/styles": "^5.6.0",
     "@reduxjs/toolkit": "^1.8.0",
+    "ahooks": "^3.3.8",
     "classnames": "^2.3.1",
     "dexie": "^3.2.1",
     "dexie-relationships": "^1.2.11",
     "leancloud-storage": "^4.6.1",
+    "octokit": "^1.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^8.0.0",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^6.3.0",
     "react-treebeard": "^3.2.4",
     "react-use": "^17.2.1",
     "react-window": "^1.8.6",

src/background/network.ts

@@ -1,14 +1,15 @@
-import { getRepoInfo } from '@/common/api';
+import { getRepoInfo, IStar } from '@/common/api';
 import { getFullName } from '@/common/tools';
 import {
   INTERCEPT_GETSTARINFO_B2C,
   INTERCEPT_STARADD_C2B,
   ACTION_SHOW_OPTION_PAGE,
   IAction,
   INTERCEPT_STARADD_C2B_DONE,
+  INTERCEPT_INTO_PAGE,
 } from '@/content_script/hooks/oneway-message/message';
 import { getGroupList, IGroup } from '@/services/idb/group';
-import { addStar, delStar } from '@/services/idb/stars';
+import { addStar, delStar, getStarInfoByFullName } from '@/services/idb/stars';
 import { addSJT, deleteSJTBySid } from '@/services/idb/starsJTags';
 import { getTagsList, ITag } from '@/services/idb/tag';
 
@@ -69,6 +70,51 @@ chrome.webRequest.onCompleted.addListener(
   },
 );
 
+export interface IInterceptIntoPage {
+  star: IStar;
+}
+
+/**
+ * into repo page intercept for add buttons
+ */
+chrome.webRequest.onCompleted.addListener(
+  async (details) => {
+    if (details.url.match(/\?/gi)) {
+      return;
+    }
+
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+
+    // console.log(tab);
+    // console.log(details);
+
+    if (!tab) return;
+
+    const url = tab.url.replace('https://github.com/', '');
+    const star = await getStarInfoByFullName(url);
+    // console.log(star);
+
+    if (!star) return;
+
+    chrome.tabs.sendMessage<IAction<IInterceptIntoPage>>(tab.id, {
+      type: INTERCEPT_INTO_PAGE,
+      payload: {
+        star,
+      },
+    });
+  },
+  {
+    types: ['xmlhttprequest'],
+    urls: ['*://api.github.com/repos/*/*'],
+  },
+);
+
+/**
+ * message listener
+ */
 chrome.runtime.onMessage.addListener(async (request: IAction<any>) => {
   const { type } = request;
 

src/common/api.ts

@@ -1,42 +1,51 @@
-import { DEFAULT_GROUP, IGroup } from '@/services/idb/group';
-import { ITag } from '@/services/idb/tag';
+import { IItem } from '@/options/components/mid';
+import { IGist } from '@/services/idb/gist';
+import { DEFAULT_GROUP } from '@/services/idb/group';
+import { getToken } from '@/services/idb/settings';
 
-export interface IGithubStarResponse {
-  starred_at: string;
-  repo: IRepo;
-}
+import { Octokit } from 'octokit';
 
 export interface IRepo {
   id: number;
   full_name: string;
   html_url: string;
 }
 
-export interface IStar {
-  readonly id: number;
+export interface IStar extends IItem {
   fullName: string;
-  htmlUrl: string;
-  groupId: number;
-  createTime?: number;
-  updateTime?: number;
-  group?: IGroup;
-  tags?: ITag[];
 }
 
-export const getAllStarListFromGithub = async (username: string): Promise<IStar[]> => {
+export const getUserInfo = async () => {
+  const token = await getToken();
+  const octokit = new Octokit({ auth: token });
+  return await octokit.rest.users.getAuthenticated();
+};
+
+const getGistsList = async (page: number) => {
+  const token = await getToken();
+  const octokit = new Octokit({ auth: token });
+  // https://docs.github.com/cn/rest/reference/gists#list-gists-for-the-authenticated-user
+  const res = await octokit.request('GET /gists', {
+    page,
+    per_page: 20,
+  });
+  return res.data;
+};
+
+export const getAllGistFromGithub = async () => {
   let page = 1;
   let ending = false;
-  let res: IStar[] = [];
+  let res: IGist[] = [];
 
   while (!ending) {
-    const pres: IGithubStarResponse[] = await getStarListFromGithub(username, page);
+    const pres = await getGistsList(page);
 
-    const stars: IStar[] = pres.map((data) => {
+    const gists: IGist[] = pres.map((data) => {
       return {
-        id: data.repo.id,
-        fullName: data.repo.full_name,
-        htmlUrl: data.repo.html_url,
+        _id: data.id,
         groupId: DEFAULT_GROUP.id,
+        description: data.description,
+        htmlUrl: data.html_url,
         createTime: Date.now(),
         updateTime: Date.now(),
       };
@@ -47,23 +56,50 @@ export const getAllStarListFromGithub = async (username: string): Promise<IStar[
       ending = true;
     }
 
-    res = res.concat(...stars);
+    res = res.concat(...gists);
   }
 
   return res;
 };
 
-export const getStarListFromGithub = async (username: string, page: number): Promise<IGithubStarResponse[]> => {
-  const url = `https://api.github.com/users/${username}/starred`;
-  const response = await fetch(`${url}?page=${page}`, {
-    headers: {
-      Accept: 'application/vnd.github.v3.star+json',
-    },
+export const getStarListFromGithub = async (page: number): Promise<IRepo[]> => {
+  const token = await getToken();
+  const octokit = new Octokit({ auth: token });
+
+  const res = await octokit.request(`GET /user/starred`, {
+    page,
   });
+  return res.data;
+};
 
-  if (response.ok) {
-    return response.json();
+export const getAllStarListFromGithub = async (): Promise<IStar[]> => {
+  let page = 1;
+  let ending = false;
+  let res: IStar[] = [];
+
+  while (!ending) {
+    const pres = await getStarListFromGithub(page);
+
+    const stars: IStar[] = pres.map((data) => {
+      return {
+        id: data.id,
+        fullName: data.full_name,
+        htmlUrl: data.html_url,
+        groupId: DEFAULT_GROUP.id,
+        createTime: Date.now(),
+        updateTime: Date.now(),
+      };
+    });
+
+    page++;
+    if (pres.length === 0) {
+      ending = true;
+    }
+
+    res = res.concat(...stars);
   }
+
+  return res;
 };
 
 export const getRepoInfo = async (fullName: string): Promise<Omit<IStar, 'groupId'>> => {
@@ -92,15 +128,19 @@ export interface IReadmeResponse {
 }
 
 export const getRepoContent = async (fullname: string): Promise<IReadmeResponse> => {
-  const url = `https://api.github.com/repos/${fullname}/readme`;
-
-  const response = await fetch(`${url}`, {
-    headers: {
-      Accept: 'application/vnd.github.v3+json',
-    },
-  });
-
-  if (response.ok) {
-    return response.json();
-  }
+  const token = await getToken();
+  const octokit = new Octokit({ auth: token });
+  const res = await octokit.request(`GET /repos/${fullname}/readme`);
+  return res.data;
+  // const url = `https://api.github.com/repos/${fullname}/readme`;
+
+  // const response = await fetch(`${url}`, {
+  //   headers: {
+  //     Accept: 'application/vnd.github.v3+json',
+  //   },
+  // });
+
+  // if (response.ok) {
+  //   return response.json();
+  // }
 };