#86 - add on/off toggle button

.env

@@ -1,4 +1,4 @@
-VITE_APP_APP_VERSION=10.0.11
+VITE_APP_APP_VERSION=10.0.12
 VITE_APP_TOKEN_CREATION_LINK=https://github.com/settings/tokens/new?scopes=repo&description=Github%20GLOC
 VITE_APP_APPLICATION_REPO=https://github.com/kas-elvirov/gloc
 VITE_APP_DEVELOPER_WEBSITE=https://kas-elvirov.com

.env.development

@@ -1,4 +1,4 @@
-VITE_APP_APP_VERSION=10.0.11
+VITE_APP_APP_VERSION=10.0.12
 VITE_APP_TOKEN_CREATION_LINK=https://github.com/settings/tokens/new?scopes=repo&description=Github%20GLOC
 VITE_APP_APPLICATION_REPO=https://github.com/kas-elvirov/gloc
 VITE_APP_DEVELOPER_WEBSITE=https://kas-elvirov.com

.env.production

@@ -1,4 +1,4 @@
-VITE_APP_APP_VERSION=10.0.11
+VITE_APP_APP_VERSION=10.0.12
 VITE_APP_TOKEN_CREATION_LINK=https://github.com/settings/tokens/new?scopes=repo&description=Github%20GLOC
 VITE_APP_APPLICATION_REPO=https://github.com/kas-elvirov/gloc
 VITE_APP_DEVELOPER_WEBSITE=https://kas-elvirov.com

manifest.json

@@ -4,7 +4,7 @@
     "short_name": "Gloc",
     "author": "Kas Elvirov",
     "description": "Github Gloc - counts locs on GitHub pages",
-    "version": "10.0.11",
+    "version": "10.0.12",
     "action": {
         "default_icon": {
             "16": "img/icon16.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloc",
-  "version": "10.0.11",
+  "version": "10.0.12",
   "engines": {
     "node": "16.19.0",
     "npm": "0.39.3"

src/_modules/Content/containers/LocIndicator/LocIndicator.tsx

@@ -1,6 +1,7 @@
 import { useGetRepoCodeFrequencyQuery } from 'src/_shared/api/github/endpoints';
+import { SYSTEM_DEFAULTS } from 'src/_shared/consts/defaults';
 
-import { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
@@ -22,11 +23,32 @@ export const LocIndicator: FC<LocIndicatorProps> = ({
   repository,
   token,
 }) => {
-  const response = useGetRepoCodeFrequencyQuery({
-    repoName: repository,
-    author: author,
-    token,
-  });
+  const [isAppEnabled, setAppStatus] = React.useState(
+    SYSTEM_DEFAULTS.STORAGE.APP_MODE.DEFAULT_VALUE,
+  );
+
+  useEffect(() => {
+    chrome?.storage?.sync?.get(
+      {
+        [SYSTEM_DEFAULTS.STORAGE.APP_MODE.KEY]:
+          SYSTEM_DEFAULTS.STORAGE.APP_MODE.DEFAULT_VALUE,
+      },
+      result => {
+        setAppStatus(result[SYSTEM_DEFAULTS.STORAGE.APP_MODE.KEY]);
+      },
+    );
+  }, []);
+
+  const response = useGetRepoCodeFrequencyQuery(
+    {
+      repoName: repository,
+      author: author,
+      token,
+    },
+    {
+      skip: isAppEnabled === false,
+    },
+  );
 
   const { data, error, isFetching, refetch } = response;
 
@@ -42,15 +64,15 @@ export const LocIndicator: FC<LocIndicatorProps> = ({
    * In order to prevent this error
    * - [Cannot refetch a query that has not been started yet](https://redux-toolkit.js.org/Errors?code=38)
    */
-  if (!isFetching && needsToRetry) {
+  if (isAppEnabled === true && !isFetching && needsToRetry) {
     refetch();
   }
 
   return (
     <Chip
       disabled={isFetching}
       color={isFetching ? undefined : isError ? 'error' : 'success'}
-      label={loc}
+      label={isAppEnabled ? loc : 'App is disabled'}
       avatar={
         isFetching ? (
           <CircularProgress size='16px' />

src/_modules/Popup/components/PopupPage/PopupPage.tsx

@@ -1,4 +1,6 @@
-import { FC } from 'react';
+import { SYSTEM_DEFAULTS } from 'src/_shared/consts/defaults';
+
+import React, { FC, useEffect } from 'react';
 
 import GitHubIcon from '@mui/icons-material/GitHub';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -8,6 +10,7 @@ import {
   IconButton,
   Paper,
   Stack,
+  Switch,
   Typography,
 } from '@mui/material';
 import { pink } from '@mui/material/colors';
@@ -24,6 +27,31 @@ import { useStyles } from './PopupPage.styles';
 export const PopupPage: FC = () => {
   const classes = useStyles();
 
+  const [isAppEnabled, setAppStatus] = React.useState(
+    SYSTEM_DEFAULTS.STORAGE.APP_MODE.DEFAULT_VALUE,
+  );
+
+  useEffect(() => {
+    chrome?.storage?.sync?.get(
+      {
+        [SYSTEM_DEFAULTS.STORAGE.APP_MODE.KEY]:
+          SYSTEM_DEFAULTS.STORAGE.APP_MODE.DEFAULT_VALUE,
+      },
+      result => {
+        setAppStatus(result[SYSTEM_DEFAULTS.STORAGE.APP_MODE.KEY]);
+      },
+    );
+  }, []);
+
+  const handleChangeAppMode = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setAppStatus(event.target.checked);
+
+    chrome.storage?.sync?.set?.(
+      { [SYSTEM_DEFAULTS.STORAGE.APP_MODE.KEY]: event.target.checked },
+      () => {},
+    );
+  };
+
   const onSettingsClick = () => {
     chrome.tabs.create({
       url:
@@ -65,6 +93,15 @@ export const PopupPage: FC = () => {
           </IconButton>
         </Stack>
 
+        <Switch
+          checked={isAppEnabled}
+          inputProps={{ 'aria-label': 'App mode' }}
+          defaultChecked
+          color='secondary'
+          onChange={handleChangeAppMode}
+          title={`App is ${isAppEnabled ? 'enabled' : 'disabled'}`}
+        />
+
         <Chip
           avatar={
             <Avatar>

src/_shared/consts/defaults.ts

@@ -1,5 +1,14 @@
 export const SYSTEM_DEFAULTS = {
   STORAGE: {
+    /**
+     * Is app working or not
+     * - true - yes
+     * - false - not yes
+     */
+    APP_MODE: {
+      KEY: 'x-app-mode',
+      DEFAULT_VALUE: false,
+    },
     GITHUB_TOKEN: {
       KEY: 'x-github-token',
       DEFAULT_VALUE: '',