feature/#86 On/off button

package.json

@@ -62,6 +62,7 @@
     "pjax": "^0.2.8",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-switch": "^5.0.1",
     "styled-components": "^4.4.1"
   }
 }

src/inject.ts

@@ -15,21 +15,25 @@ import { getLinksFromDom } from './utils/getLinksFromDom';
  */
 
 let githubToken: string = '';
+let glocMode: boolean = false;
 
 /**
  * Main
  */
 (() => {
-	chrome.storage.sync.get({ 'x-github-token': '' }, result => {
+	chrome.storage.sync.get(['x-github-token', 'glocMode'], result => {
+		console.log('chrome.storage.sync.get', result);
 		if (result && result['x-github-token'] !== null) {
 			githubToken = result['x-github-token'];
 		}
 
-		gloc();
-
-		document.addEventListener('pjax:complete', () => {
+		if (result['glocMode']) {
 			gloc();
-		})
+
+			document.addEventListener('pjax:complete', () => {
+				gloc();
+			})
+		}
 	});
 })();
 

src/modules/Common/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,64 @@
+/*
+    Many thanks to Cole Bemis
+    for https://medium.com/@colebemis/building-a-checkbox-component-with-react-and-styled-components-8d3aa1d826dd
+*/
+import * as React from 'react';
+import styled from 'styled-components';
+
+const _CheckboxContainer = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const _Icon = styled.svg`
+  fill: none;
+  stroke: white;
+  stroke-width: 2px;
+`;
+// Hide checkbox visually but remain accessible to screen readers.
+// Source: https://polished.js.org/docs/#hidevisually
+const _HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clippath: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+
+const _StyledCheckbox = styled.div`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: ${(props: any) => (props.checked ? 'salmon' : 'papayawhip')};
+  border-radius: 3px;
+  transition: all 150ms;
+
+  ${_HiddenCheckbox}:focus + & {
+    box-shadow: 0 0 0 3px pink;
+  }
+
+  ${_Icon} {
+    visibility: ${(props: any) => (props.checked ? 'visible' : 'hidden')};
+  }
+` as any; // because of property CHECKED
+
+
+export default function ({ checked, onChange, ...props }:
+	{ checked: boolean, onChange: () => void }) {
+	return (
+		<_CheckboxContainer>
+			<_HiddenCheckbox checked={checked} onChange={onChange} {...props} />
+			<_StyledCheckbox checked={checked} >
+				<_Icon viewBox='0 0 24 24'>
+					<polyline points='20 6 9 17 4 12' />
+				</_Icon>
+			</_StyledCheckbox>
+		</_CheckboxContainer>
+	);
+}

src/modules/Common/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox';

src/modules/Popup/components/Body/Body.tsx

@@ -1,44 +1,44 @@
 import * as React from 'react';
-import styled from 'styled-components';
 
 import {
     Container,
     Row,
     Column,
 } from '../../../Common/components/Layout/index';
 import { Text } from '../../../Common/components/Text/index';
-import { TextList, Type } from '../../../Common/components/TextList/index';
+
 import { colors } from '../../../../theme/colors';
 
-const Wrapper = styled(Container)`
-    background-color: black;
-`;
+export default class Body extends React.PureComponent<any, { checked: boolean }> {
+    constructor(props: any) {
+        super(props);
 
-export default class Body extends React.PureComponent {
-	render() {
-        const headerMsg = chrome.i18n.getMessage('indexCountsFrom');
-        const list = [
-            chrome.i18n.getMessage('indexProjectPage'),
-            chrome.i18n.getMessage('indexUserPage'),
-            chrome.i18n.getMessage('indexSearchPage'),
-            chrome.i18n.getMessage('indexTrandingPage'),
-            chrome.i18n.getMessage('indexEtc'),
-        ];
+        this.state = { checked: false };
+    }
+
+    handleChange = () => {
+        this.setState({ checked: !this.state.checked }, () => {
+            chrome.storage.sync.set({ glocMode: !this.state.checked }, function() {
+                console.log('Value is set to something');
+            });
 
+            chrome.storage.sync.get(['x-github-token', 'glocMode'], result => {
+                console.log('chrome.storage.sync.get', result);
+            });
+        });
+    }
+
+	render() {
 		return (
             <Container color={colors.grey200}>
-                <Column>
-                    <Row>
-                        <Text>{headerMsg}</Text>
-                    </Row>
-
-                    <Row>
-                        <TextList
-                            type={Type.Ol}
-                            list={list}
-                        />
-                    </Row>
-                </Column>
+                <Row>
+                    <Column>
+                        <Text>On/Off Gloc</Text>
+                    </Column>
+                    <Column>
+                        <input type={'checkbox'} onChange={this.handleChange} checked={this.state.checked} />
+                    </Column>
+                </Row>
             </Container>
 		);
 	}

src/modules/Popup/index.tsx

@@ -9,7 +9,7 @@ export default class PopupPage extends React.PureComponent {
 		return (
 			<React.Fragment>
 				<Header />
-				{/* <Body /> */}
+				<Body />
 				<Footer />
 			</React.Fragment>
 		);

tsconfig.json

@@ -7,7 +7,7 @@
 		"baseUrl": "types",
 		"typeRoots": ["types"],
 		"allowJs": true,
-		"strict": true, 
+		"strict": true,
 		"types": ["chrome", "jquery", "node"],
 		"lib": ["es2015.core", "dom", "es6"],
 		"sourceMap": true,