Es6 cmp migration (#113)

* migrate Alert component

* convert Mainlist component

* add webpack watch task

* update build script for different manifests

* add types for api responses

* convert changeExtensionIcon

* convert inArray, getDomainParts, contains to ts

* convert changeExtensionTooltip

* convert changeExtensionState to ts

src/components/Alert.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Alert from './Alert';
+
+describe('Alert Component', () => {
+  it('should render with proper text on success type', () => {
+    const text = 'Test Text';
+    const { container } = render(<Alert text={text} type="success" />);
+    expect(screen.getByText(text)).toBeTruthy();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="alert alert-success"
+        >
+          Test Text
+        </div>
+      </div>
+    `);
+  });
+  it('should render wtih proper text on danger type', () => {
+    const text = 'Test Text';
+    const { container } = render(<Alert text={text} type="danger" />);
+    expect(screen.getByText(text)).toBeTruthy();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="alert alert-danger"
+        >
+          Test Text
+        </div>
+      </div>
+    `);
+  });
+});

src/components/Alert.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import { SuccessOrFailType } from '../config';
+interface AlertProps {
+  text: string;
+  type: SuccessOrFailType;
+}
+
+export default function Alert({ type, text }: AlertProps): JSX.Element {
+  return <div className={classNames('alert', `alert-${type}`)}>{text}</div>;
+}

src/components/MainList.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MainList from './MainList';
+
+type onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+describe('MainList', () => {
+  let disableLogging: onClick;
+  let enableLogging: onClick;
+  let loggedIn: boolean;
+  let loggingEnabled: boolean;
+  let logoutUser: onClick;
+  let totalTimeLoggedToday: string;
+  beforeEach(() => {
+    disableLogging = jest.fn();
+    enableLogging = jest.fn();
+    loggingEnabled = false;
+    loggedIn = false;
+    logoutUser = jest.fn();
+    totalTimeLoggedToday = '1/1/1999';
+  });
+  it('should render properly', () => {
+    const { container } = render(
+      <MainList
+        disableLogging={disableLogging}
+        enableLogging={enableLogging}
+        loggingEnabled={loggingEnabled}
+        loggedIn={loggedIn}
+        logoutUser={logoutUser}
+        totalTimeLoggedToday={totalTimeLoggedToday}
+      />,
+    );
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <div
+            class="list-group"
+          >
+            <a
+              class="list-group-item"
+              href="#"
+            >
+              <i
+                class="fa fa-fw fa-cogs"
+              />
+              Options
+            </a>
+            <a
+              class="list-group-item"
+              href="https://wakatime.com/login"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <i
+                class="fa fa-fw fa-sign-in"
+              />
+              Login
+            </a>
+          </div>
+        </div>
+      </div>
+    `);
+  });
+});

src/components/MainList.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { browser } from 'webextension-polyfill-ts';
+
+export interface MainListProps {
+  disableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  enableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  loggedIn: boolean;
+  loggingEnabled: boolean;
+  logoutUser: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  totalTimeLoggedToday?: string;
+}
+const openOptionsPage = async (): Promise<void> => {
+  await browser.runtime.openOptionsPage();
+};
+
+export default function MainList({
+  disableLogging,
+  enableLogging,
+  loggedIn,
+  loggingEnabled,
+  logoutUser,
+  totalTimeLoggedToday,
+}: MainListProps): JSX.Element {
+  return (
+    <div>
+      {loggedIn && (
+        <div className="row">
+          <div className="col-xs-12">
+            <blockquote>
+              <p>{totalTimeLoggedToday}</p>
+              <small>
+                <cite>TOTAL TIME LOGGED TODAY</cite>
+              </small>
+            </blockquote>
+          </div>
+        </div>
+      )}
+      {loggingEnabled && loggedIn && (
+        <div className="row">
+          <div className="col-xs-12">
+            <p>
+              <a href="#" onClick={disableLogging} className="btn btn-danger btn-block">
+                Disable logging
+              </a>
+            </p>
+          </div>
+        </div>
+      )}
+      {!loggingEnabled && loggedIn && (
+        <div className="row">
+          <div className="col-xs-12">
+            <p>
+              <a href="#" onClick={enableLogging} className="btn btn-success btn-block">
+                Enable logging
+              </a>
+            </p>
+          </div>
+        </div>
+      )}
+      <div className="list-group">
+        <a href="#" className="list-group-item" onClick={openOptionsPage}>
+          <i className="fa fa-fw fa-cogs"></i>
+          Options
+        </a>
+        {loggedIn && (
+          <div>
+            <a href="#" className="list-group-item" onClick={logoutUser}>
+              <i className="fa fa-fw fa-sign-out"></i>
+              Logout
+            </a>
+          </div>
+        )}
+        {!loggedIn && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://wakatime.com/login"
+            className="list-group-item"
+          >
+            <i className="fa fa-fw fa-sign-in"></i>
+            Login
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}