Merge pull request #89 from bikingbadger/68-todoist-tasks

Integrate Todoist

src/app.js

@@ -6,20 +6,36 @@ import TimerView from './modules/timer/view.mjs';
 import TimerModel from './modules/timer/model.mjs';
 import TasksView from './modules/tasks/view.mjs';
 import TasksModel from './modules/tasks/model.mjs';
-import AlarmView from './modules/alarm/view.mjs'
+import AlarmView from './modules/alarm/view.mjs';
+import ProfileModel from './modules/profile/model.mjs';
+
+/**
+ * Add authorization
+ */
+AuthView.load();
+
+/**
+ * Use profile model and set task
+ */
+ProfileModel.load(PubSub);
+// If there are settings from the profile for todoist then add to the model
+if(ProfileModel.settings.todoistKey){
+    TasksModel.setTodistKey(ProfileModel.settings.todoistKey)
+};
 
 /**
  * Add the tasks view to the subscription of the pubSub
  * This will then receive the publications of the model each time a change is made
  */
 TasksView.load();
 PubSub.subscribe(TasksModel.subject, TasksView);
+
 /**
  * Setup the model to use the PubSub for publishing all changes
  * That way any subscribers will get the updates and make changes to the view
  */
-
 TasksModel.load(PubSub);
+
 /**
  * Add the timer view to the subscription of the pubSub
  * This will then receive the publications of the model each time a change is made
@@ -33,13 +49,8 @@ PubSub.subscribe(TimerModel.subject, TasksView);
  */
 TimerModel.load(PubSub);
 
-/**
- * Add authorization
- */
-AuthView.load();
-
 /**
  * Add alarm view
  */
 AlarmView.load();
-PubSub.subscribe(TimerModel.subject, AlarmView);
+PubSub.subscribe(TimerModel.subject, AlarmView);

src/functions/get-tasks.js

@@ -4,18 +4,18 @@ const allTaskURL = 'https://api.todoist.com/rest/v1/tasks?filter=today';
 
 /* export our lambda function as named "handler" export */
 exports.handler = async (event, context, callback) => {
+  // Check that an authorization token was sent
+  if (!event.headers.authorization) {
+    return callback(null, {
+      statusCode: 403,
+      body: JSON.stringify('Missing authorization token'),
+    });
+  }
   const response = await axios.get(allTaskURL, {
-    headers: { Authorization: `Bearer ${process.env.TODOIST_TOKEN}` },
+    headers: { Authorization: `${event.headers.authorization}` },
   });
   const tasks = await response.data;
-  console.log(tasks);
-
-  /* parse the string body into a useable JS object */
-  // console.log('======================================================');
-  // console.log(event);
-  // console.log(context);
-  // console.log('======================================================');
-
+
   return callback(null, {
     statusCode: 201,
     body: JSON.stringify(tasks),

src/index.html

@@ -22,12 +22,11 @@ <h1 class="text-2xl md:text-5xl font-bold pl-4 text-blue-500 ">Pompom</h1>
                 <i id="btn-logout" class="material-icons hidden">lock</i>
             </div>
         </header>
-        <div class="invisible static alarm" id="alarmClock"></div>
+        <div class="invisible absolute alarm" id="alarmClock"></div>
 
         <main class="grid grid-cols-1 md:grid-cols-2 gap-2 md:pt-2  ">
             <section class="grid col-span-2 text-center bg-gray-100 rounded py-2 md:py-4 mx-20 md:mx-64 shadow-xl mt-2 md:-mt-4 md:z-10 border-2 border-blue-500">
                 <div id="timer" class="text-2xl md:text-3xl font-bold"></div>
-                <!-- <div id="tasks-current" class="text-left w-7/8">Select task below</div> -->
                 <div id="pompoms"></div>
                 <div>
                     <button id="timer-go">Start</button>
@@ -37,7 +36,6 @@ <h1 class="text-2xl md:text-5xl font-bold pl-4 text-blue-500 ">Pompom</h1>
             <section class="grid col-span-2 md:col-span-1 content-start p-4 shadow-md relative md:rounded md:pt-8 md:-mt-4 md:shadow-xl">
                 <h2 class="md:text-xl font-bold uppercase">Todo List</h2>
                 <div id="tasks-todo"></div>
-
             </section>
             <section class="grid col-span-2 md:col-span-1 content-start p-4 shadow-md md:rounded md:pt-8 md:-mt-4 md:shadow-xl">
                 <h2 class="md:text-lg font-bold uppercase">Completed Tasks</h2>

src/modules/profile/controller.mjs

@@ -0,0 +1,13 @@
+'use strict';
+
+import ProfileModel from './model.mjs';
+
+const ProfileController = {
+  model: ProfileModel,
+  /** Save settings */
+  saveProfileSettings: function (setting) {
+    this.model.saveSetting(setting);
+  },
+};
+
+export default ProfileController;

src/modules/profile/model.mjs

@@ -0,0 +1,30 @@
+'use strict';
+
+const ProfileModel = {
+  settings: {},
+  storageID: 'settings',
+  pubSub: null,
+  subject: 'profile',
+  load: function (PubSub) {
+    this.settings = localStorage.getItem(this.storageID);
+    console.log(this.settings);
+    this.settings = this.settings
+      ? JSON.parse(this.settings)
+      : { todoistKey: '' };
+
+    // Add PubSub reference
+    this.pubSub = PubSub;
+    this.publish();
+  },
+  saveSetting: function (setting) {
+    console.log(setting);
+    localStorage.setItem(this.storageID, JSON.stringify(setting));
+  },
+  publish: function () {
+    this.pubSub.publish(this);
+    // Save the object back to localStorage
+    localStorage.setItem(this.storageID, JSON.stringify(this.settings));
+  },
+};
+
+export default ProfileModel;

src/modules/profile/view.mjs

@@ -0,0 +1,35 @@
+'use strict';
+import ProfileController from './controller.mjs';
+
+const saveButton = document.querySelector('#settings-save');
+const todoistInput = document.querySelector('#settings-todoist-token');
+
+const ProfileView = {
+  load: function () {
+    // Check that the todoist input exists
+    if (!todoistInput) {
+      throw Error('Todoist input is missing');
+    }
+    //Check that button for saving exists
+    if (!saveButton) {
+      throw Error('Save button is missing');
+    }
+
+    saveButton.addEventListener(
+      'click',
+      function () {
+        ProfileController.saveProfileSettings({todoistKey: todoistInput.value});
+      },
+      false,
+    );
+  },
+  render: function (profile) {
+      console.log(profile);
+    todoistInput.value = profile.settings.todoistKey;
+  },
+  notify: function (model) {
+    this.render(model);
+  },
+};
+
+export default ProfileView;

src/modules/tasks/model.mjs

@@ -1,28 +1,66 @@
 'use strict';
 
+// Use todoist API to fetch the current tasks,
+// those marked with today
+const importTodistTasks = async (todistKey) => {
+  const allTaskURL = 'https://api.todoist.com/rest/v1/tasks?filter=today';
+  console.log(todistKey);
+  const response = await fetch(allTaskURL, {
+    headers: { Authorization: `Bearer ${todistKey}` },
+  });
+  console.log(response);
+  return await response.json();
+};
+
 const TasksModel = {
   taskList: {},
   storageID: 'tasks',
   pubSub: null,
   subject: 'tasks',
+  todistKey: '',
   /**
    * Initialize the tasks and setup pubsub
    *
    * @param PubSub PubSub for publishing and subscribing to changes
    */
-  load: function (PubSub) {
+  load: async function (PubSub) {
     //Get the tasks stored in local storage
     this.taskList = localStorage.getItem(this.storageID);
     this.taskList = this.taskList ? JSON.parse(this.taskList) : [];
-
+    console.log(this.taskList);
+    // Check for todoist tasks
+    if (this.todistKey) {
+      const todoistTasks = await importTodistTasks(this.todistKey);
+      todoistTasks.forEach((task) => {
+        console.log(task);
+        this.taskList.push({
+          id: this.taskList.length,
+          description: task.content,
+          priority: task.priority,
+          time: 0,
+          isCurrent: false,
+          complete: false,
+          source: 'Todoist',
+          sourceId: task.id,
+        });
+      });
+    }
+    console.log(this.taskList);
     // Add PubSub reference
     this.pubSub = PubSub;
     this.publish();
   },
   publish: function () {
     this.pubSub.publish(this);
-    // Save the object back to localStorage
-    localStorage.setItem(this.storageID, JSON.stringify(this.taskList));
+    // Save the object back to localStorage but filter for local source tasks
+    // This prevents the other sources from creating duplicates
+    let taskList = this.taskList
+      // only show local tasks
+      .filter((task) => {
+        return task.source === 'Local';
+      });
+    console.log(taskList);
+    localStorage.setItem(this.storageID, JSON.stringify(taskList));
   },
   /**
    * Add a task to from the input
@@ -37,6 +75,8 @@ const TasksModel = {
       time: 0,
       isCurrent: false,
       complete: false,
+      source: 'Local',
+      sourceId: this.taskList.length,
     });
 
     this.publish();
@@ -105,6 +145,9 @@ const TasksModel = {
     // Publish change
     this.publish();
   },
+  setTodistKey: function (token) {
+    this.todistKey = token;
+  },
 };
 
 export default TasksModel;

src/profile.js

@@ -1,18 +1,17 @@
 ('use strict');
 
-const saveButton = document.querySelector('#settings-save');
-const storageID = 'settings';
-let settings = localStorage.getItem(storageID);
-settings = settings ? JSON.parse(settings) : { todoistKey: '' };
-const todoistInput = document.querySelector('#settings-todoist-token');
-todoistInput.value = settings.todoistKey;
-console.log(saveButton);
-saveButton.addEventListener(
-  'click',
-  function () {
-    settings = { todoistKey: todoistInput.value };
-    console.log(settings);
-    localStorage.setItem(storageID, JSON.stringify(settings));
-  },
-  false,
-);
+import PubSub from './modules/pubSub/pubSub.mjs';
+import ProfileView from './modules/profile/view.mjs';
+import ProfileModel from './modules/profile/model.mjs';
+
+/**
+ * Add the profile settings view to the subscription of the pubSub
+ * This will then receive the publications of the model each time a change is made
+ */
+ProfileView.load();
+PubSub.subscribe(ProfileModel.subject, ProfileView);
+/**
+ * Setup the model to use the PubSub for publishing all changes
+ * That way any subscribers will get the updates and make changes to the view
+ */
+ProfileModel.load(PubSub);