Todoist - MVP widget

.gitignore

@@ -10,8 +10,9 @@ package-lock.json
 /.idea/workspace.xml
 /.idea/tasks.xml
 /.idea/shelf
+*.code-workspace
 
 ### Misc ###
 
 *.log
-.DS_Store
+.DS_Store

app/package.json

@@ -38,7 +38,8 @@
     "redux-persist": "6.0.0",
     "redux-saga": "1.1.3",
     "redux-sagas-injector": "1.1.1",
-    "selectorator": "4.0.3"
+    "selectorator": "4.0.3",
+    "todoist-rest-api": "^1.3.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "5.3.18",

app/src/common/translations/en.json

@@ -47,15 +47,17 @@
       "add": "Add {{widget}} widget",
       "remove": "Remove {{widget}} widget",
       "configuration": "Configuration: {{widget}}",
-      "unconfigured": "Widget configuration required."
+      "unconfigured": "Widget configuration required.",
+      "noWidget": "No widget available"
     },
     "category": {
       "general": "General",
       "media": "Media",
       "knowledge": "Knowledge",
       "tools": "Tools",
       "tracking": "Tracking",
-      "monitoring": "Monitoring"
+      "monitoring": "Monitoring",
+      "productivity": "Productivity"
     },
 
     "counter": {
@@ -133,6 +135,13 @@
       "name": "Notes",
       "headline": ""
     },
+    "todoist": {
+      "name": "Todoist",
+      "headline": "Todoist",
+      "configuration" : {
+        "token": "Token"
+      }
+    },
     "totd-chemical-elements": {
       "name": "Chemical elements",
       "headline": ""

app/src/components/drawer/index.tsx

@@ -19,7 +19,7 @@ const Drawer: React.FC<Props> = ({ addWidgetToLayout }) => {
           <div className="p-2 text-center uppercase font-bold text-2">
             {t(`widget.category.${category}`)}
           </div>
-          {categoriesWithWidgets[category].map(
+          {categoriesWithWidgets[category] ? categoriesWithWidgets[category].map(
             ({ widgetType: widget }: WidgetProperties) => (
               <div key={widget} className="flex justify-between py-2">
                 {t(`widget.${widget}.name`)}
@@ -36,7 +36,9 @@ const Drawer: React.FC<Props> = ({ addWidgetToLayout }) => {
                 </Button>
               </div>
             )
-          )}
+          ) : 
+            <div className="flex justify-between py-2 italic">{t("widget.common.noWidget")}</div>
+        }
         </div>
       ))}
     </div>

app/src/widgets/categories.ts

@@ -4,11 +4,11 @@ enum WidgetCategory {
   Knowledge = "knowledge",
   Tools = "tools",
   Tracking = "tracking",
-  Monitoring = "monitoring"
+  Monitoring = "monitoring",
+  Productivity = "productivity"
 
   // Possible categories for future widgets
   // Charts = "charts",
-  // Productivity = "productivity",
   // Motivation = "motivation",
   // Fun = "fun",
   // Games = "games"
@@ -20,7 +20,8 @@ export const categories = [
   WidgetCategory.Knowledge,
   WidgetCategory.Tools,
   WidgetCategory.Tracking,
-  WidgetCategory.Monitoring
+  WidgetCategory.Monitoring,
+  WidgetCategory.Productivity
 ];
 
 export default WidgetCategory;

app/src/widgets/list.ts

@@ -75,6 +75,15 @@ export default {
     initialOptions: {},
     initialMeta: {}
   },
+  todoist: {
+    configurable: true,
+    widgetType: "todoist",
+    category: "productivity",
+    initialHeight: 3,
+    initialWidth: 4,
+    initialOptions: {},
+    initialMeta: { updateCycle: { hours: 24 } }
+  },
   "totd-chemical-elements": {
     configurable: false,
     widgetType: "totd-chemical-elements",

app/src/widgets/todoist/__stories__/index.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+
+import { connectedWidgetProps } from "common/utils/mock";
+import { Widget } from "components/widget";
+
+const Story = () => {
+  return (
+    <Widget
+      {...connectedWidgetProps}
+      id="todoist-mock-id"
+      type="todoist"
+      data={{
+        token: "xxxx"
+      }}
+    />
+  );
+};
+
+storiesOf("Widgets.Todoist", module).add("Variants", () => <Story />);

app/src/widgets/todoist/__tests__/index.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { shallow, ShallowWrapper } from "enzyme";
+
+import { widgetProps } from "common/utils/mock";
+
+import Todoist from "../index";
+
+describe("<Todoist />", () => {
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <Todoist
+        {...widgetProps}
+        id="todoist-mock-id"
+        token="xxxx"
+      />
+    );
+  });
+
+  it("renders without error", () => {
+    expect(wrapper.isEmptyRender()).toBe(false);
+  });
+});

app/src/widgets/todoist/configuration.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { ConfigurationProps } from "widgets/index";
+import Input from "components/forms/input";
+
+const Configuration = ({
+  id,
+  options,
+  setOptions,
+  save
+}: ConfigurationProps) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Input
+        label={t("widget.todoist.configuration.token")}
+        className="mb-6"
+        value={options.token}
+        setValue={value => setOptions({ token: value })}
+      ></Input>
+    </>
+  );
+};
+
+export default Configuration;

app/src/widgets/todoist/index.tsx

@@ -0,0 +1,36 @@
+import React, { memo } from "react";
+
+import useTriggerUpdate from "common/hooks/useTriggerUpdate";
+
+import { WidgetProps } from "../index";
+
+export { saga } from "./sagas";
+
+const Todoist: React.FC<Props> = memo(
+  ({
+    id,
+    token,
+    meta, 
+    setData,
+    triggerUpdate
+  }) => {
+    useTriggerUpdate({ id, params: { token }, meta, triggerUpdate }, [
+      token
+    ]);
+
+    return (
+      <div className="flex flex-col items-center text-center">
+        <div className="text-4 font-semibold">
+          <span className="center"> Todoist </span> 
+          <span className="text-2 uppercase">{token}</span>
+        </div>
+      </div>
+    );
+  }
+);
+
+interface Props extends WidgetProps {
+  token: string;
+}
+
+export default Todoist;

app/src/widgets/todoist/properties.ts

@@ -0,0 +1,12 @@
+import WidgetCategory from "../categories";
+
+export const widgetType = "todoist";
+export const category = WidgetCategory.Productivity;
+export const initialHeight = 2;
+export const initialWidth = 3;
+export const initialOptions = {
+  token: "xxxxx"
+};
+export const initialMeta = {
+  updateCycle: { minutes: 15 }
+};

app/src/widgets/todoist/sagas.ts

@@ -0,0 +1,42 @@
+import { put, call, takeEvery } from "@redux-saga/core/effects";
+import { PayloadAction } from "@reduxjs/toolkit";
+
+import log from "common/log";
+import api, { CRYPTOCURRENCIES_PRICE } from "common/api";
+import {
+  setData,
+  triggerUpdate,
+  updatePending,
+  updateError,
+  updateSuccess,
+  TriggerUpdateAction
+} from "components/widget/duck";
+
+import { widgetType } from "./properties";
+
+const fetchCryptocurrencyPrice = async (params: { [key: string]: any }) => {
+  const response = await api.get(CRYPTOCURRENCIES_PRICE, { params });
+  return response.data;
+};
+
+function* onTriggerUpdate(action: PayloadAction<TriggerUpdateAction>) {
+  const { id, params } = action.payload;
+  yield put(updatePending(id));
+  try {
+    const data = yield call(fetchCryptocurrencyPrice, params);
+    yield put(
+      setData({
+        id,
+        values: data
+      })
+    );
+    yield put(updateSuccess(id));
+  } catch (error) {
+    log.error(error);
+    yield put(updateError(id));
+  }
+}
+
+export function* saga() {
+  yield takeEvery(triggerUpdate(widgetType).toString(), onTriggerUpdate);
+}