refactor: popup

Author: numandev1

README.md

@@ -18,44 +18,18 @@
 
 </div>
 
-## Shortcut key
-
-Macbook: `Cmd + '` or `ctrl + '`
-
-Window: `ctrl + '`
-
 ## Made with
 
 - <img src="https://img.icons8.com/?size=2x&id=t5K2CR8feVdX&format=png" width="18" height="18"/> Made with **[React 18](https://reactjs.org)**
 - <img src="https://img.icons8.com/?size=2x&id=uJM6fQYqDaZK&format=png" width="18" height="18"/> Made with [TypeScript](https://www.typescriptlang.org/) Support!
 - 🛠️ [Devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/) supported
 - <img src="https://img.icons8.com/?size=2x&id=nvw4LO3DfcyI&format=png" width="18" height="18"/> Using **[Webpack](https://webpack.js.org/)**
 
-### Would you like to support me?
-
-<div align="center">
-<a href="https://github.com/numandev1?tab=followers">
-    <img src="https://img.shields.io/github/followers/numandev1?label=Follow%20%40numandev1&style=social" height="36" />
-</a>
-<a href="https://twitter.com/numandev1/">
-    <img src="https://img.shields.io/twitter/follow/numandev1?label=Follow%20%40numandev1&style=social" height="36" />
-</a>
-<a href="https://www.youtube.com/@numandev?sub_confirmation=1"><img src="https://img.shields.io/youtube/channel/subscribers/UCYCUspfN7ZevgCj3W5GlFAw?style=social" height="36" /><a/>
-</br>
-<a href="https://www.buymeacoffee.com/numan.dev" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
-</div>
-
-## Consider supporting with a ⭐️ [Star on GitHub](https://github.com/numandev1/github-emojis-extension/stargazers)
-
-## ⏳ Installation Instructions
-
-### Chrome
-
-#### Chrome Web Store
+## ⏳ Installation
 
-Go to the [Chrome Web Store page for _Github Emoji_](https://chrome.google.com/webstore/detail/ecldoejhjmekemajgjjalfgkhgmfjgcl) and install normally.
+##### Install from Chrome Web Store
 
-After installing, make sure to reload your Github URL or restart Chrome!
+[![Chrome Web Store](https://img.shields.io/static/v1?style=for-the-badge&message=Install+From+Chrome+Web+Store&color=4285F4&logo=Google+Chrome&logoColor=FFFFFF&label=)](https://chrome.google.com/webstore/detail/ecldoejhjmekemajgjjalfgkhgmfjgcl)
 
 #### Manual/Development
 
@@ -69,6 +43,30 @@ After installing, make sure to reload your Github URL or restart Chrome!
    3. Click on `Load unpacked extension`
    4. Select the `build` folder.
 
+## Shortcut key
+
+Macbook: `Cmd + '` or `ctrl + '`
+
+Window: `ctrl + '`
+
+### Would you like to support me?
+
+<div align="center">
+<a href="https://github.com/numandev1?tab=followers">
+    <img src="https://img.shields.io/github/followers/numandev1?label=Follow%20%40numandev1&style=social" height="36" />
+</a>
+</br>
+<a href="https://twitter.com/numandev1/">
+    <img src="https://img.shields.io/twitter/follow/numandev1?label=Follow%20%40numandev1&style=social" height="36" />
+</a>
+</br>
+<a href="https://www.youtube.com/@numandev?sub_confirmation=1"><img src="https://img.shields.io/youtube/channel/subscribers/UCYCUspfN7ZevgCj3W5GlFAw?style=social" height="36" /><a/>
+</br>
+<a href="https://www.buymeacoffee.com/numan.dev" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
+</div>
+
+#### Consider supporting with a ⭐️ [Star on GitHub](https://github.com/numandev1/github-emojis-extension/stargazers)
+
 ## Contribution Guide
 
 1. Follow [Manual/Development](#manualdevelopment) steps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-emoji-extension",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Use emojis in github Issues/PR",
   "license": "MIT",
   "repository": {
@@ -11,7 +11,7 @@
     "build": "node utils/build.js",
     "start": "node utils/webserver.js",
     "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "prepare:prod": "NODE_ENV=production npm run build"
+    "zip": "NODE_ENV=production ./node_modules/.bin/webpack --config ./utils/build.js --mode production"
   },
   "dependencies": {
     "arrive": "^2.4.1",
@@ -61,5 +61,20 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
     "zip-webpack-plugin": "^4.0.1"
-  }
+  },
+  "keywords": [
+    "github",
+    "react",
+    "javascript",
+    "emoji",
+    "chrome",
+    "extension",
+    "reactjs",
+    "browser-extension",
+    "google-browser-extension",
+    "emojis",
+    "webstore",
+    "extension-chrome",
+    "cli"
+  ]
 }

src/pages/Content/hooks/useDebouncedCallback.ts

@@ -1,4 +1,5 @@
-import {useRef, useEffect, useMemo} from 'react';
+// @ts-nocheck
+import { useRef, useEffect, useMemo } from 'react';
 
 export interface CallOptions {
   leading?: boolean;
@@ -87,12 +88,12 @@ export interface DebouncedState<T extends (...args: any[]) => ReturnType<T>>
  * const status = debounced.pending() ? "Pending..." : "Ready"
  */
 export default function useDebouncedCallback<
-  T extends (...args: any[]) => ReturnType<T>,
+  T extends (...args: any[]) => ReturnType<T>
 >(func: T, wait?: number, options?: Options): DebouncedState<T> {
-  const lastCallTime = useRef(null);
+  const lastCallTime = useRef<any>(null);
   const lastInvokeTime = useRef(0);
-  const timerId = useRef(null);
-  const lastArgs = useRef<unknown[]>([]);
+  const timerId = useRef<any>(null);
+  const lastArgs = useRef<any>([]);
   const lastThis = useRef<unknown>();
   const result = useRef<ReturnType<T>>();
   const funcRef = useRef(func);
@@ -107,13 +108,13 @@ export default function useDebouncedCallback<
     throw new TypeError('Expected a function');
   }
 
-  wait = +wait || 0;
+  wait = +(wait || 0);
   options = options || {};
 
   const leading = !!options.leading;
   const trailing = 'trailing' in options ? !!options.trailing : true; // `true` by default
   const maxing = 'maxWait' in options;
-  const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : null;
+  const maxWait: any = maxing ? Math.max(+options.maxWait || 0, wait) : null;
 
   useEffect(() => {
     mounted.current = true;

src/pages/Popup/Popup.css

@@ -46,5 +46,11 @@
 }
 
 .mt-20 {
+  margin-top: 20px;
+}
+
+h4 {
+  margin: 0;
   margin-top: 10px;
+  margin-bottom: 10px;
 }

src/pages/Popup/Popup.tsx

@@ -9,31 +9,28 @@ const Popup = () => {
         <img src={logo} className="App-logo" alt="logo" />
         <a
           className="App-link"
-          href="https://github.com/numandev1/github-emojis-extension/stargazers"
+          href="https://chrome.google.com/webstore/detail/ecldoejhjmekemajgjjalfgkhgmfjgcl"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h4>Consider supporting with a Star ⭐️</h4>
+          <img src="https://img.shields.io/static/v1?style=for-the-badge&message=Review+On+WebStore&color=4285F4&logo=Google+Chrome&logoColor=FFFFFF&label=" />
         </a>
         <a
-          href="https://github.com/numandev1/github-emoji-extension/stargazers"
+          className="App-link"
+          href="https://github.com/numandev1/github-emojis-extension/stargazers"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img
-            src="https://img.shields.io/github/stars/numandev1/github-emoji-extension?style=for-the-badge&logo=github"
-            height="20"
-          />
+          <h4>support with a Star on Github ⭐️</h4>
         </a>
         <a
-          className="mt-20"
           href="https://github.com/numandev1?tab=followers"
           target="_blank"
           rel="noopener noreferrer"
         >
           <img
             src="https://img.shields.io/github/followers/numandev1?label=Follow%20%40numandev1&style=social"
-            height="20"
+            height="25"
           />
         </a>
         <a

utils/build.js

@@ -3,8 +3,7 @@ process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 process.env.ASSET_PATH = '/';
 
-var webpack = require('webpack'),
-  path = require('path'),
+var path = require('path'),
   fs = require('fs'),
   config = require('../webpack.config'),
   ZipPlugin = require('zip-webpack-plugin');
@@ -22,6 +21,4 @@ config.plugins = (config.plugins || []).concat(
   })
 );
 
-webpack(config, function (err) {
-  if (err) throw err;
-});
+module.exports = config;