├── .babelrc
├── .gitignore
├── Old-alarm-clock-sound.mp3
├── README.md
├── background.js
├── manifest.json
├── notification128.png
├── notification16.png
├── notification32.png
├── package-lock.json
├── package.json
├── public
    ├── delete.svg
    ├── dist
    │   ├── 0.bundle.js
    │   ├── bundle.js
    │   └── index.html
    └── template.html
├── src
    ├── Utils
    │   └── Logger.js
    ├── components
    │   ├── App.js
    │   ├── BottomNavigation.js
    │   ├── Button.js
    │   ├── Input.js
    │   ├── InputSelect.js
    │   ├── ScheduleAlarmContainer.js
    │   ├── Select.js
    │   └── TasksContainer.js
    ├── index.js
    └── style.scss
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["@babel/preset-env", "@babel/preset-react"],
3 |     "plugins": ["@babel/plugin-syntax-dynamic-import"]
4 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .history
2 | /node_modules


--------------------------------------------------------------------------------
/Old-alarm-clock-sound.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geekyarjun/task-alarm-chrome-extension/85ce12f3715d72c7bef549872ae7909a4cf8be4f/Old-alarm-clock-sound.mp3


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Task-alarm-chrome-extension
 2 | This is a simple chrome-extension, in which one can set alarm or reminder for tasks, and it will remind them of the task.
 3 | ## How to install
 4 | 1. First download or clone this repo.
 5 | 2. If you have downloaded please extract the code somewhere and run ```npm i```
 6 | 1. Now to install this you simply need to open Google Chrome Browser.
 7 | 2. Click on menu i.e three dots on the top right corner.
 8 | 3. Then click on ```More Tools``` and then you will see ```Extension``` option just click on it
 9 | 4. Now extension page should open, show from top right corner turn on the ```Developer Mode``` if not already turned on.
10 | 5. You should see an option ```Load Unpacked``` click on it, and choose folder you have extracted, in step 2.
11 | 6. Now the extension should appear on you broswer's extension bar.
12 | 7. Go and play around it.
13 | 
14 | Any suggestion and changes are welcome.
15 | 
16 | <img src="https://lh3.googleusercontent.com/JlmSgTa6pZ5LV3P13ILVNOoVi6oqAZcas6WXlbwWlusyzXf4_rjUUn-7wSVB8pdB6JkgPq_-x1LVgYicbd3SBk35DdqDUC7NIpWpzDzWdC3SSLuUe3_ZT9nHOpZUOex2wYF8dn9F=w482-h442-no" />
17 | 
18 | The extension look as this:
19 | 


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // listener for alarm, execute when an alarm has elasped
 3 | chrome.alarms.onAlarm.addListener((alarm) => {
 4 |     console.log("alarm", alarm);
 5 |     chrome.notifications.create({
 6 |         type: 'basic',
 7 |         iconUrl: 'notification32.png',
 8 |         title: 'Alarm',
 9 |         message: alarm.name,
10 |         buttons: [{
11 |             title: 'Keep it Flowing.'
12 |         }],
13 |         priority: 0
14 |     });
15 |     const audio = new Audio('./Old-alarm-clock-sound.mp3');
16 |     audio.play();
17 | })
18 | 
19 | // chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
20 | //     console.log('tabId, changeInfo, tab', tabId, changeInfo, tab);
21 | //     chrome.storage.sync.get('alarmData', (storage) => {
22 | //         console.log('storage', storage);
23 | 
24 | //         if (storage.alarmData.length) {
25 | 
26 | //         } else {
27 | 
28 | //         }
29 | //     });
30 | // })


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Task Alert",
 3 |     "description": "It is used for making notes/tasks with an alarm",
 4 |     "version": "0.0.1",
 5 |     "manifest_version": 2,
 6 |     "permissions": [
 7 |         "alarms",
 8 |         "notifications",
 9 |         "storage",
10 |         "tabs"
11 |     ],
12 |     "browser_action": {
13 |         "default_title": "Task Alarm",
14 |         "default_popup": "public/dist/index.html"
15 |     },
16 |     "background": {
17 |         "scripts": [
18 |             "background.js"
19 |         ],
20 |         "persistent": false
21 |     },
22 |     "icons": {
23 |         "16": "notification16.png",
24 |         "32": "notification32.png",
25 |         "128": "notification128.png"
26 |     },
27 |     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
28 | }


--------------------------------------------------------------------------------
/notification128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geekyarjun/task-alarm-chrome-extension/85ce12f3715d72c7bef549872ae7909a4cf8be4f/notification128.png


--------------------------------------------------------------------------------
/notification16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geekyarjun/task-alarm-chrome-extension/85ce12f3715d72c7bef549872ae7909a4cf8be4f/notification16.png


--------------------------------------------------------------------------------
/notification32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geekyarjun/task-alarm-chrome-extension/85ce12f3715d72c7bef549872ae7909a4cf8be4f/notification32.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "task-alert",
 3 |   "version": "0.0.1",
 4 |   "description": "It is an chrome-extension that will usefull for making tasks with alarm",
 5 |   "main": "background.js",
 6 |   "scripts": {
 7 |     "start": "webpack --mode development --watch",
 8 |     "build": "webpack --mode production",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "keywords": [
12 |     "task",
13 |     "alert"
14 |   ],
15 |   "author": "Arjun Shrivastava",
16 |   "license": "ISC",
17 |   "dependencies": {},
18 |   "devDependencies": {
19 |     "@babel/core": "^7.3.4",
20 |     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
21 |     "@babel/preset-env": "^7.3.4",
22 |     "@babel/preset-react": "^7.0.0",
23 |     "babel-loader": "^8.0.5",
24 |     "css-loader": "^2.1.0",
25 |     "html-webpack-plugin": "^3.2.0",
26 |     "node-sass": "^4.11.0",
27 |     "react": "^16.8.3",
28 |     "react-dom": "^16.8.3",
29 |     "sass-loader": "^7.1.0",
30 |     "style-loader": "^0.23.1",
31 |     "webpack": "^4.29.5",
32 |     "webpack-cli": "^3.2.3"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/delete.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="348.333px" height="348.334px" viewBox="0 0 348.333 348.334" fill="#e85a4f" style="enable-background:new 0 0 348.333 348.334;"
 6 | 	 xml:space="preserve">
 7 | <g>
 8 | 	<path d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
 9 | 		c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
10 | 		c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
11 | 		l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
12 | 		L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z"/>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | </svg>
45 | 


--------------------------------------------------------------------------------
/public/dist/0.bundle.js:
--------------------------------------------------------------------------------
  1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
  2 | 
  3 | /***/ "./src/Utils/Logger.js":
  4 | /*!*****************************!*\
  5 |   !*** ./src/Utils/Logger.js ***!
  6 |   \*****************************/
  7 | /*! exports provided: default */
  8 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
  9 | 
 10 | "use strict";
 11 | eval("__webpack_require__.r(__webpack_exports__);\nvar logger = function logger(text, values) {\n  console.log(text, values);\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (logger);\n\n//# sourceURL=webpack:///./src/Utils/Logger.js?");
 12 | 
 13 | /***/ }),
 14 | 
 15 | /***/ "./src/components/App.js":
 16 | /*!*******************************!*\
 17 |   !*** ./src/components/App.js ***!
 18 |   \*******************************/
 19 | /*! exports provided: default */
 20 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 21 | 
 22 | "use strict";
 23 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _ScheduleAlarmContainer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ScheduleAlarmContainer */ \"./src/components/ScheduleAlarmContainer.js\");\n/* harmony import */ var _BottomNavigation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BottomNavigation */ \"./src/components/BottomNavigation.js\");\n/* harmony import */ var _TasksContainer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TasksContainer */ \"./src/components/TasksContainer.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\nvar App = function App() {\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('Set Alarm'),\n      _useState2 = _slicedToArray(_useState, 2),\n      showAlarmsList = _useState2[0],\n      setAlarmView = _useState2[1];\n\n  console.log('showAlarmsList', showAlarmsList);\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"container\"\n  }, showAlarmsList === 'Set Alarm' ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ScheduleAlarmContainer__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TasksContainer__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_BottomNavigation__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    links: ['Set Alarm', '|', 'Show Tasks'],\n    className: \"bottomNavigation\",\n    onClick: setAlarmView,\n    active: showAlarmsList\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"snackbar\"\n  }, \"Alarm set\"));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (App);\n\n//# sourceURL=webpack:///./src/components/App.js?");
 24 | 
 25 | /***/ }),
 26 | 
 27 | /***/ "./src/components/BottomNavigation.js":
 28 | /*!********************************************!*\
 29 |   !*** ./src/components/BottomNavigation.js ***!
 30 |   \********************************************/
 31 | /*! exports provided: default */
 32 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 33 | 
 34 | "use strict";
 35 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\nvar addPipeBetweenLinks = function addPipeBetweenLinks(links, _onClick, active) {\n  return links.map(function (link, index) {\n    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n      key: index,\n      onClick: function onClick(e) {\n        e.preventDefault();\n\n        _onClick(link === '|' ? active : link);\n      },\n      className: active === link ? 'activeBottomNav' : ''\n    }, link); // if (index === links.length - 1) return <span key={index} className={active === link ? 'activeBottomNav' : ''} onClick={(e) => {e.preventDefault(); onClick(link)}}>{link}</span>\n    // return <span key={index} onClick={(e) => {e.preventDefault(); onClick(link)}} className={active === link ? 'activeBottomNav' : ''}>{link}|</span>\n  });\n};\n\nvar BottomNavigation = function BottomNavigation(_ref) {\n  var links = _ref.links,\n      className = _ref.className,\n      onClick = _ref.onClick,\n      active = _ref.active;\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: className\n  }, addPipeBetweenLinks(links, onClick, active));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (BottomNavigation);\n\n//# sourceURL=webpack:///./src/components/BottomNavigation.js?");
 36 | 
 37 | /***/ }),
 38 | 
 39 | /***/ "./src/components/Button.js":
 40 | /*!**********************************!*\
 41 |   !*** ./src/components/Button.js ***!
 42 |   \**********************************/
 43 | /*! exports provided: default */
 44 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 45 | 
 46 | "use strict";
 47 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\nvar Button = function Button(_ref) {\n  var value = _ref.value,\n      onClick = _ref.onClick,\n      name = _ref.name,\n      className = _ref.className;\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n    onClick: onClick,\n    name: name,\n    className: className\n  }, value);\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Button);\n\n//# sourceURL=webpack:///./src/components/Button.js?");
 48 | 
 49 | /***/ }),
 50 | 
 51 | /***/ "./src/components/Input.js":
 52 | /*!*********************************!*\
 53 |   !*** ./src/components/Input.js ***!
 54 |   \*********************************/
 55 | /*! exports provided: default */
 56 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 57 | 
 58 | "use strict";
 59 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Input = react__WEBPACK_IMPORTED_MODULE_0___default.a.forwardRef(function (_ref, ref) {\n  var type = _ref.type,\n      placeholder = _ref.placeholder,\n      value = _ref.value,\n      _onChange = _ref.onChange,\n      name = _ref.name,\n      className = _ref.className;\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n    type: type,\n    placeholder: placeholder,\n    value: value,\n    onChange: function onChange(e) {\n      return _onChange(e.target.value);\n    },\n    name: name,\n    className: className,\n    ref: ref\n  });\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (Input);\n\n//# sourceURL=webpack:///./src/components/Input.js?");
 60 | 
 61 | /***/ }),
 62 | 
 63 | /***/ "./src/components/InputSelect.js":
 64 | /*!***************************************!*\
 65 |   !*** ./src/components/InputSelect.js ***!
 66 |   \***************************************/
 67 | /*! exports provided: default */
 68 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 69 | 
 70 | "use strict";
 71 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Input__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Input */ \"./src/components/Input.js\");\n/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Select */ \"./src/components/Select.js\");\n\n\n\nvar InputSelect = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"forwardRef\"])(function (_ref, ref) {\n  var inputPlaceHolder = _ref.inputPlaceHolder,\n      inputValue = _ref.inputValue,\n      inputOnchange = _ref.inputOnchange,\n      selectValue = _ref.selectValue,\n      selectOnchange = _ref.selectOnchange;\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"inputSelect\",\n    ref: ref\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Input__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"number\",\n    placeholder: inputPlaceHolder,\n    name: \"minsecTime\",\n    value: inputValue,\n    onChange: inputOnchange\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Select__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    name: \"minsec\",\n    options: [\"s\", \"m\"],\n    value: selectValue,\n    onChange: selectOnchange\n  }));\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (InputSelect);\n\n//# sourceURL=webpack:///./src/components/InputSelect.js?");
 72 | 
 73 | /***/ }),
 74 | 
 75 | /***/ "./src/components/ScheduleAlarmContainer.js":
 76 | /*!**************************************************!*\
 77 |   !*** ./src/components/ScheduleAlarmContainer.js ***!
 78 |   \**************************************************/
 79 | /*! exports provided: default */
 80 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 81 | 
 82 | "use strict";
 83 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Input__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Input */ \"./src/components/Input.js\");\n/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Select */ \"./src/components/Select.js\");\n/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Button */ \"./src/components/Button.js\");\n/* harmony import */ var _Utils_Logger__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Utils/Logger */ \"./src/Utils/Logger.js\");\n/* harmony import */ var _InputSelect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./InputSelect */ \"./src/components/InputSelect.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\nvar ScheduleAlarmContainer = function ScheduleAlarmContainer() {\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(''),\n      _useState2 = _slicedToArray(_useState, 2),\n      task = _useState2[0],\n      setTask = _useState2[1];\n\n  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('Today'),\n      _useState4 = _slicedToArray(_useState3, 2),\n      day = _useState4[0],\n      setDay = _useState4[1];\n\n  var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(''),\n      _useState6 = _slicedToArray(_useState5, 2),\n      time = _useState6[0],\n      setTime = _useState6[1];\n\n  var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(''),\n      _useState8 = _slicedToArray(_useState7, 2),\n      inputValue = _useState8[0],\n      inputOnchange = _useState8[1];\n\n  var _useState9 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('s'),\n      _useState10 = _slicedToArray(_useState9, 2),\n      selectValue = _useState10[0],\n      selectOnchange = _useState10[1];\n\n  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false),\n      _useState12 = _slicedToArray(_useState11, 2),\n      showWarning = _useState12[0],\n      setWarning = _useState12[1];\n\n  var taskFieldRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef();\n  var timeFieldRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef();\n  var refs = {\n    taskFieldRef: taskFieldRef,\n    timeFieldRef: timeFieldRef\n  };\n\n  var handleSetAlarmbutton = function handleSetAlarmbutton() {\n    console.log('inputValue, selectValue', inputValue, selectValue); // chrome.alarms.clearAll();\n\n    if (day === 'Today' || day === 'Tomorrow') {\n      if (!task || !time) {\n        var state = {\n          'taskFieldRef': task,\n          'timeFieldRef': time\n        };\n        Object.keys(state).map(function (key) {\n          if (!state[key]) {\n            var existingClasses = refs[key].current.className;\n            var classArray = existingClasses.split(' ');\n\n            if (classArray.indexOf('warning-vibration-animation') >= 0) {\n              classArray[classArray.indexOf('warning-vibration-animation')] = 'warning-vibration-animation-toggle'; // classArray.splice(classArray.indexOf('warning-vibration-animation'), 0, 'warning-vibration-animation-toggle');\n\n              Object(_Utils_Logger__WEBPACK_IMPORTED_MODULE_4__[\"default\"])('classArray', classArray);\n              refs[key].current.className = \"\".concat(classArray.join(' '));\n            } else if (classArray.indexOf('warning-vibration-animation-toggle') >= 0) {\n              classArray[classArray.indexOf('warning-vibration-animation-toggle')] = 'warning-vibration-animation'; // classArray.splice(classArray.indexOf('warning-vibration-animation-toggle'), 0, 'warning-vibration-animation');\n\n              Object(_Utils_Logger__WEBPACK_IMPORTED_MODULE_4__[\"default\"])('classArray', classArray);\n              refs[key].current.className = \"\".concat(classArray.join(' '));\n            } else {\n              refs[key].current.className = \"\".concat(classArray.join(' '), \" warning-vibration-animation\");\n            }\n          }\n        });\n        setTimeout(function () {\n          taskFieldRef.current.className = 'taskInputField';\n          timeFieldRef.current.className = 'inputTime';\n          console.log(\"Removed\");\n        }, 1000);\n        return;\n      } else if (day === 'Today') {\n        var stringNewDate = String(new Date()); // it will return date as e.g Tue Feb 27 2019 11:10:45 GMT+0530 (India Standard Time)\n        // to be made a function\n\n        stringNewDate = stringNewDate.slice(0, stringNewDate.indexOf(new Date().getFullYear()) + 5) + time + ':00' + ' ' + stringNewDate.slice(stringNewDate.indexOf('GMT'));\n        console.log('stringNewDate', stringNewDate);\n\n        if (new Date(stringNewDate).getTime() < new Date().getTime()) {\n          console.log(\"Dfdsfdsfdsfdsf\");\n          return;\n        }\n      }\n    } else if (day === 'Recurring') {\n      console.log(\"timeFieldRef.current\", timeFieldRef.current);\n\n      if (!task) {\n        taskFieldRef.current.className = 'taskInputField warning-vibration-animation';\n        setTimeout(function () {\n          taskFieldRef.current.className = 'taskInputField';\n          console.log(\"Removed\");\n        }, 1000);\n        return;\n      }\n\n      if (!inputValue) {\n        timeFieldRef.current.className = 'inputSelect warning-vibration-animation';\n        setTimeout(function () {\n          timeFieldRef.current.className = 'inputSelect';\n          console.log(\"Removed\");\n        }, 1000);\n        return;\n      }\n\n      if (inputValue < 5 && selectValue === 's') {\n        setWarning(true);\n        setTimeout(function () {\n          setWarning(false);\n        }, 2000);\n        return;\n      }\n    }\n\n    switch (day) {\n      case 'Today':\n        var _stringNewDate = String(new Date()); // it will return date as e.g Tue Feb 27 2019 11:10:45 GMT+0530 (India Standard Time)\n        // to be made a function\n\n\n        _stringNewDate = _stringNewDate.slice(0, _stringNewDate.indexOf(new Date().getFullYear()) + 5) + time + ':00' + ' ' + _stringNewDate.slice(_stringNewDate.indexOf('GMT'));\n        console.log('newDate', _stringNewDate);\n        chrome.alarms.create(task, {\n          when: new Date(_stringNewDate).getTime()\n        });\n        break;\n\n      case 'Tomorrow':\n        var stringNextDayDate = String(new Date(Date.now() + 86400000)); // it will return date as e.g Tue Feb 27 2019 11:10:45 GMT+0530 (India Standard Time)\n        // to be made a function\n\n        stringNextDayDate = stringNextDayDate.slice(0, stringNextDayDate.indexOf(new Date().getFullYear()) + 5) + time + ':00' + ' ' + stringNextDayDate.slice(stringNextDayDate.indexOf('GMT'));\n        console.log('nextDayDate', stringNextDayDate);\n        chrome.alarms.create(task, {\n          when: new Date(stringNextDayDate).getTime()\n        });\n        break;\n\n      case 'Recurring':\n        // console.log('selectValue', selectValue, inputValue, typeof inputValue);\n        if (selectValue === 'm') {\n          chrome.alarms.create(task, {\n            periodInMinutes: Number(inputValue)\n          });\n        } else {\n          chrome.alarms.create(task, {\n            periodInMinutes: inputValue / 60\n          });\n        }\n\n        break;\n\n      /*\n      case 'Everyday':\n          chrome.alarms.create({\n                   })\n      break; */\n    }\n\n    function showSnackBar() {\n      var x = document.getElementById(\"snackbar\");\n      x.className = \"show\";\n      setTimeout(function () {\n        x.className = x.className.replace(\"show\", \"\");\n      }, 3000);\n    }\n\n    showSnackBar();\n  };\n\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"scheduleAlarmContainer\"\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Input__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"text\",\n    placeholder: \"Task\",\n    name: \"task\",\n    value: task,\n    onChange: setTask,\n    ref: taskFieldRef,\n    className: \"taskInputField\"\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Select__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    name: \"day\",\n    options: [\"Today\", \"Tomorrow\", \"Recurring\"],\n    value: day,\n    onChange: setDay,\n    className: \"daySelect\"\n  }), day === 'Recurring' ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_InputSelect__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    inputValue: inputValue,\n    inputOnchange: inputOnchange,\n    inputPlaceHolder: \"Time\",\n    selectValue: selectValue,\n    selectOnchange: selectOnchange,\n    ref: timeFieldRef\n  }) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Input__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"time\",\n    name: \"time\",\n    value: time,\n    onChange: setTime,\n    className: \"inputTime\",\n    ref: timeFieldRef\n  }), showWarning ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"warningMessage\"\n  }, \"Time should be greater than 5 Seconds\") : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"warningMessage\"\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Button__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    name: \"setAlarmButton\",\n    value: \"Set Alarm\",\n    className: \"setAlarmButton\",\n    onClick: handleSetAlarmbutton\n  }));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (ScheduleAlarmContainer);\n\n//# sourceURL=webpack:///./src/components/ScheduleAlarmContainer.js?");
 84 | 
 85 | /***/ }),
 86 | 
 87 | /***/ "./src/components/Select.js":
 88 | /*!**********************************!*\
 89 |   !*** ./src/components/Select.js ***!
 90 |   \**********************************/
 91 | /*! exports provided: default */
 92 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 93 | 
 94 | "use strict";
 95 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\nvar Select = function Select(_ref) {\n  var name = _ref.name,\n      value = _ref.value,\n      _onChange = _ref.onChange,\n      options = _ref.options,\n      className = _ref.className;\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"select\", {\n    name: name,\n    value: value,\n    onChange: function onChange(e) {\n      return _onChange(e.target.value);\n    },\n    className: className\n  }, options.map(function (option, index) {\n    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"option\", {\n      value: option,\n      key: index\n    }, option);\n  }));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Select);\n\n//# sourceURL=webpack:///./src/components/Select.js?");
 96 | 
 97 | /***/ }),
 98 | 
 99 | /***/ "./src/components/TasksContainer.js":
100 | /*!******************************************!*\
101 |   !*** ./src/components/TasksContainer.js ***!
102 |   \******************************************/
103 | /*! exports provided: default */
104 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
105 | 
106 | "use strict";
107 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nvar TasksContainer = function TasksContainer() {\n  // let alarms = [];\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])([]),\n      _useState2 = _slicedToArray(_useState, 2),\n      alarms = _useState2[0],\n      setAlarmsList = _useState2[1];\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(function () {\n    return console.log(\"IN COMPONENT DID MOUNT\");\n  });\n  chrome.alarms.getAll(function (alarmsList) {\n    console.log('lalarms', alarmsList); // alarms = alarmsList;\n\n    if (JSON.stringify(alarmsList) != JSON.stringify(alarms)) {\n      setAlarmsList(alarmsList);\n    }\n  });\n\n  var removeAlarm = function removeAlarm(name) {\n    if (alarms.length) {\n      setAlarmsList(alarms.filter(function (alarm) {\n        return alarm.name !== name;\n      }));\n      chrome.alarms.clear(name);\n    }\n  };\n\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"tasks-container\"\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ul\", null, alarms.length ? alarms.map(function (alarm, index) {\n    var scheduledTimeInMillS = alarm.scheduledTime;\n    var date = String(new Date(scheduledTimeInMillS));\n    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", {\n      key: index\n    }, alarm.name, \" at \", date.slice(date.indexOf(new Date().getFullYear()) + 5, date.indexOf('GMT') - 1), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n      src: \"../delete.svg\",\n      onClick: function onClick(e) {\n        e.preventDefault();\n        removeAlarm(alarm.name);\n      },\n      className: \"cross-button\"\n    })));\n  }) : ''));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (TasksContainer);\n\n//# sourceURL=webpack:///./src/components/TasksContainer.js?");
108 | 
109 | /***/ })
110 | 
111 | }]);
112 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiIwLmJ1bmRsZS5qcyIsInNvdXJjZVJvb3QiOiIifQ==


--------------------------------------------------------------------------------
/public/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>Task Alert chrome extension</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
 9 |     <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
10 |     <!-- <script src="main.js"></script> -->
11 | </head>
12 | <body>
13 |     <div id="app-container">
14 | 
15 |     </div>
16 | <script type="text/javascript" src="./bundle.js"></script></body>
17 | </html>


--------------------------------------------------------------------------------
/public/template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>Task Alert chrome extension</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
 9 |     <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
10 |     <!-- <script src="main.js"></script> -->
11 | </head>
12 | <body>
13 |     <div id="app-container">
14 | 
15 |     </div>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/src/Utils/Logger.js:
--------------------------------------------------------------------------------
1 | const logger = (text, values) => {
2 |     console.log(text, values);
3 | }
4 | 
5 | export default logger;


--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react';
 2 | import ScheduleAlarmContainer from './ScheduleAlarmContainer';
 3 | import BottomNavigation from './BottomNavigation';
 4 | import TasksContainer from './TasksContainer';
 5 | 
 6 | const App = () => {
 7 |     const [showAlarmsList, setAlarmView] = useState('Set Alarm');
 8 |     console.log('showAlarmsList', showAlarmsList);
 9 | 
10 |     return (
11 |         <div className="container">
12 |             {
13 |                 showAlarmsList === 'Set Alarm'
14 |                     ?   
15 |                         <ScheduleAlarmContainer />
16 |                     :
17 |                         <TasksContainer />
18 |             }
19 |             <BottomNavigation 
20 |                 links={['Set Alarm', '|', 'Show Tasks']}
21 |                 className="bottomNavigation"
22 |                 onClick={setAlarmView}
23 |                 active={showAlarmsList}
24 |             />
25 |             <div id="snackbar">Alarm set</div>
26 |         </div>
27 |     );
28 | };
29 | 
30 | export default App;


--------------------------------------------------------------------------------
/src/components/BottomNavigation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const addPipeBetweenLinks = (links, onClick, active) => {
 4 |     return links.map((link, index)=> {
 5 | 
 6 |         return (
 7 |             <span 
 8 |                 key={index} 
 9 |                 onClick={(e) => {
10 |                     e.preventDefault();
11 |                     onClick(link === '|' ? active : link);
12 |                 }} 
13 |                 className={active === link ? 'activeBottomNav' : ''}
14 |             >
15 |             { link }
16 |             </span>
17 |         )
18 | 
19 |         // if (index === links.length - 1) return <span key={index} className={active === link ? 'activeBottomNav' : ''} onClick={(e) => {e.preventDefault(); onClick(link)}}>{link}</span>
20 | 
21 |         // return <span key={index} onClick={(e) => {e.preventDefault(); onClick(link)}} className={active === link ? 'activeBottomNav' : ''}>{link}|</span>
22 |     })
23 | }
24 | 
25 | const BottomNavigation = ({ links, className, onClick, active }) => (
26 |     <div className={className}>
27 |         {
28 |             addPipeBetweenLinks(links, onClick, active)
29 |         }
30 |     </div>
31 | );
32 | 
33 | export default BottomNavigation;


--------------------------------------------------------------------------------
/src/components/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Button = ({ value, onClick, name, className }) => (
 4 |     <button 
 5 |         onClick={onClick}
 6 |         name={name}
 7 |         className={className}
 8 |     >{value}</button>
 9 | );
10 | 
11 | export default Button;


--------------------------------------------------------------------------------
/src/components/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Input = React.forwardRef(({ type, placeholder, value, onChange, name, className }, ref) => (
 4 |     <input 
 5 |         type={type}
 6 |         placeholder={placeholder}
 7 |         value={value}
 8 |         onChange={(e) => onChange(e.target.value)}
 9 |         name={name}
10 |         className={className}
11 |         ref={ref}
12 |     />
13 | ));
14 | 
15 | export default Input;


--------------------------------------------------------------------------------
/src/components/InputSelect.js:
--------------------------------------------------------------------------------
 1 | import React, {forwardRef} from 'react';
 2 | import Input from './Input';
 3 | import Select from './Select';
 4 | 
 5 | const InputSelect = forwardRef(({inputPlaceHolder, inputValue, inputOnchange, selectValue, selectOnchange }, ref) => (
 6 |     <div className="inputSelect" ref={ref}>
 7 |         <Input 
 8 |             type="number"
 9 |             placeholder={inputPlaceHolder}
10 |             name="minsecTime"
11 |             value={inputValue}
12 |             onChange={inputOnchange}
13 |         />
14 |         <Select 
15 |             name="minsec"
16 |             options={["s", "m"]}
17 |             value={selectValue}
18 |             onChange={selectOnchange}
19 |         />
20 |     </div>
21 | ));
22 | 
23 | export default InputSelect;


--------------------------------------------------------------------------------
/src/components/ScheduleAlarmContainer.js:
--------------------------------------------------------------------------------
  1 | import React, {useState} from 'react';
  2 | import Input from './Input';
  3 | import Select from './Select';
  4 | import Button from './Button';
  5 | import Logger from '../Utils/Logger';
  6 | import InputSelect from './InputSelect';
  7 | 
  8 | const ScheduleAlarmContainer = () => {
  9 |     const [task, setTask] = useState('');
 10 |     const [day, setDay] = useState('Today');
 11 |     const [time, setTime] = useState('');
 12 |     const [inputValue, inputOnchange] = useState('');
 13 |     const [selectValue, selectOnchange] = useState('s');
 14 |     const [showWarning, setWarning] = useState(false);
 15 | 
 16 |     const taskFieldRef = React.createRef();
 17 |     const timeFieldRef = React.createRef();
 18 | 
 19 |     const refs = {
 20 |         taskFieldRef,
 21 |         timeFieldRef
 22 |     };
 23 | 
 24 |     const handleSetAlarmbutton = () => {
 25 |         console.log('inputValue, selectValue', inputValue, selectValue);
 26 |         // chrome.alarms.clearAll();
 27 |         if (day === 'Today' || day === 'Tomorrow') {
 28 |             if (!task || !time) {
 29 |                 const state = {
 30 |                     'taskFieldRef': task,
 31 |                     'timeFieldRef': time
 32 |                 };
 33 |     
 34 |                 Object.keys(state).map(key => {
 35 |                     if (!state[key]) {
 36 |                         let existingClasses = refs[key].current.className;
 37 |                         const classArray = existingClasses.split(' ');
 38 |                         if (classArray.indexOf('warning-vibration-animation') >= 0) {
 39 |                             classArray[classArray.indexOf('warning-vibration-animation')] = 'warning-vibration-animation-toggle';
 40 |                             // classArray.splice(classArray.indexOf('warning-vibration-animation'), 0, 'warning-vibration-animation-toggle');
 41 |                             Logger('classArray', classArray);
 42 |                             refs[key].current.className = `${classArray.join(' ')}`;
 43 |                         } else if (classArray.indexOf('warning-vibration-animation-toggle') >= 0) {
 44 |                             classArray[classArray.indexOf('warning-vibration-animation-toggle')] = 'warning-vibration-animation';
 45 |                             // classArray.splice(classArray.indexOf('warning-vibration-animation-toggle'), 0, 'warning-vibration-animation');
 46 |                             Logger('classArray', classArray);
 47 |                             refs[key].current.className = `${classArray.join(' ')}`;
 48 |                         } else {
 49 |                             refs[key].current.className = `${classArray.join(' ')} warning-vibration-animation`;
 50 |                         }
 51 |                     }
 52 |                 })
 53 |                 setTimeout(() => {
 54 |                     taskFieldRef.current.className = 'taskInputField';
 55 |                     timeFieldRef.current.className = 'inputTime';
 56 |                     console.log("Removed");
 57 |                 }, 1000);
 58 |                 return;
 59 |             } else if(day === 'Today') {
 60 |                 let stringNewDate = String(new Date()); // it will return date as e.g Tue Feb 27 2019 11:10:45 GMT+0530 (India Standard Time)
 61 | 
 62 |                 // to be made a function
 63 |                 stringNewDate = stringNewDate.slice(0, stringNewDate.indexOf(new Date().getFullYear()) + 5) + time + ':00' + ' ' + stringNewDate.slice(stringNewDate.indexOf('GMT'));
 64 |                 console.log('stringNewDate', stringNewDate);
 65 |                 if(new Date(stringNewDate).getTime() < new Date().getTime()) {
 66 |                     console.log("Dfdsfdsfdsfdsf");
 67 |                     return;
 68 |                 }
 69 |             }
 70 |         } else if (day === 'Recurring') {
 71 |             console.log("timeFieldRef.current", timeFieldRef.current);
 72 |             if (!task) {
 73 |                 taskFieldRef.current.className = 'taskInputField warning-vibration-animation';
 74 |                 setTimeout(() => {
 75 |                     taskFieldRef.current.className = 'taskInputField';
 76 |                     console.log("Removed");
 77 |                 }, 1000);
 78 |                 return;
 79 |             }
 80 | 
 81 |             if (!inputValue) {
 82 |                 timeFieldRef.current.className = 'inputSelect warning-vibration-animation';
 83 |                 setTimeout(() => {
 84 |                     timeFieldRef.current.className = 'inputSelect';
 85 |                     console.log("Removed");
 86 |                 }, 1000);
 87 |                 return;
 88 |             }
 89 | 
 90 |             if (inputValue < 5 && selectValue === 's') {
 91 |                 setWarning(true);
 92 | 
 93 |                 setTimeout(() => {
 94 |                     setWarning(false);
 95 |                 }, 2000);
 96 | 
 97 |                 return;
 98 |             }
 99 | 
100 |         }
101 | 
102 |         switch (day) {
103 | 
104 |             case 'Today':
105 | 
106 |                 let stringNewDate = String(new Date()); // it will return date as e.g Tue Feb 27 2019 11:10:45 GMT+0530 (India Standard Time)
107 | 
108 |                 // to be made a function
109 |                 stringNewDate = stringNewDate.slice(0, stringNewDate.indexOf(new Date().getFullYear()) + 5) + time + ':00' + ' ' + stringNewDate.slice(stringNewDate.indexOf('GMT'));
110 | 
111 |                 console.log('newDate', stringNewDate);
112 | 
113 |                 chrome.alarms.create(task, {
114 |                     when: new Date(stringNewDate).getTime()
115 |                 })
116 |                 break;
117 | 
118 |             case 'Tomorrow':
119 |                 let stringNextDayDate = String(new Date(Date.now() + 86400000)); // it will return date as e.g Tue Feb 27 2019 11:10:45 GMT+0530 (India Standard Time)
120 | 
121 |                 // to be made a function
122 |                 stringNextDayDate = stringNextDayDate.slice(0, stringNextDayDate.indexOf(new Date().getFullYear()) + 5) + time + ':00' + ' ' + stringNextDayDate.slice(stringNextDayDate.indexOf('GMT'));
123 | 
124 |                 console.log('nextDayDate', stringNextDayDate);
125 |                 chrome.alarms.create(task, {
126 |                     when: new Date(stringNextDayDate).getTime()
127 |                 })
128 |                 break;
129 | 
130 |             case 'Recurring':
131 |                 // console.log('selectValue', selectValue, inputValue, typeof inputValue);
132 |                 if (selectValue === 'm') {
133 |                     chrome.alarms.create(task, {
134 |                         periodInMinutes: Number(inputValue)
135 |                     })
136 |                 } else {
137 |                     chrome.alarms.create(task, {
138 |                         periodInMinutes: inputValue/60
139 |                     })
140 |                 }
141 | 
142 |                 break;
143 | 
144 |                 /*
145 |                 case 'Everyday':
146 |                     chrome.alarms.create({
147 |         
148 |                     })
149 |                 break; */
150 | 
151 |         }
152 |         function showSnackBar() {
153 |             var x = document.getElementById("snackbar");
154 |             x.className = "show";
155 |             setTimeout(function () {
156 |                 x.className = x.className.replace("show", "");
157 |             }, 3000);
158 |         }
159 | 
160 |         showSnackBar();
161 |     }
162 | 
163 |     return (
164 |         <div className="scheduleAlarmContainer">
165 |             <Input 
166 |                 type="text"
167 |                 placeholder="Task"
168 |                 name="task"
169 |                 value={task}
170 |                 onChange={setTask}
171 |                 ref={taskFieldRef}
172 |                 className="taskInputField"
173 |             />
174 |             <Select 
175 |                 name="day"
176 |                 options={["Today", "Tomorrow", "Recurring"]}
177 |                 value={day}
178 |                 onChange={setDay}
179 |                 className="daySelect"
180 |             />
181 |             {
182 |                 day === 'Recurring'
183 |                     ?
184 |                         <InputSelect 
185 |                             inputValue={inputValue}
186 |                             inputOnchange={inputOnchange} 
187 |                             inputPlaceHolder="Time"
188 |                             selectValue={selectValue}
189 |                             selectOnchange={selectOnchange}
190 |                             ref={timeFieldRef}
191 |                         />
192 |                     :
193 |                         <Input 
194 |                             type="time"
195 |                             name="time"
196 |                             value={time}
197 |                             onChange={setTime}
198 |                             className="inputTime"
199 |                             ref={timeFieldRef}
200 |                         />
201 |             }
202 |             {
203 |                 showWarning 
204 |                     ?  
205 |                         <div className="warningMessage">Time should be greater than 5 Seconds</div>
206 |                     : 
207 |                         <div className="warningMessage"></div>
208 |             }
209 |             <Button 
210 |                 name="setAlarmButton"
211 |                 value="Set Alarm"
212 |                 className="setAlarmButton"
213 |                 onClick={handleSetAlarmbutton}
214 |             />
215 |         </div>
216 |     )
217 | }
218 | 
219 | export default ScheduleAlarmContainer;


--------------------------------------------------------------------------------
/src/components/Select.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Select = ({ name, value, onChange, options, className}) => (
 4 |     <select name={name} value={value} onChange={(e) => onChange(e.target.value)} className={className}>
 5 |         {
 6 |             options.map((option, index)=> <option value={option} key={index}>{option}</option>)
 7 |         }
 8 |     </select>
 9 | );
10 | 
11 | export default Select;


--------------------------------------------------------------------------------
/src/components/TasksContainer.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | const TasksContainer = () => {
 4 |     // let alarms = [];
 5 | 
 6 |     const [alarms, setAlarmsList] = useState([]);
 7 | 
 8 |     useEffect(() => console.log("IN COMPONENT DID MOUNT"));
 9 | 
10 |     chrome.alarms.getAll((alarmsList) => {
11 |         console.log('lalarms', alarmsList);
12 |         // alarms = alarmsList;
13 | 
14 |         if (JSON.stringify(alarmsList) != JSON.stringify(alarms)) {
15 |             setAlarmsList(alarmsList);
16 |         }
17 |     })
18 | 
19 |     const removeAlarm = (name) => {
20 |         if (alarms.length) {
21 |             setAlarmsList(alarms.filter(alarm => alarm.name !== name));
22 |             chrome.alarms.clear(name);
23 |         }
24 |     }
25 | 
26 |     return (
27 |         <div className="tasks-container">
28 |             <ul>
29 |                {
30 |                     alarms.length
31 |                         ?
32 |                             alarms.map((alarm, index) => {
33 |                                 let scheduledTimeInMillS = alarm.scheduledTime;
34 |                                 let date = String(new Date(scheduledTimeInMillS));
35 | 
36 |                                 return (
37 |                                     <>
38 |                                         <li key={index}>
39 |                                             {alarm.name} at {date.slice(date.indexOf(new Date().getFullYear()) + 5, date.indexOf('GMT') - 1)}
40 |                                             <img src="../delete.svg" onClick={(e) => {e.preventDefault(); removeAlarm(alarm.name)}} className="cross-button"/>
41 |                                             {/* <span onClick={(e) => {e.preventDefault(); removeAlarm(alarm.name)}} className="cross-button">X</span> */}
42 |                                         </li>
43 |                                     </>
44 |                                 )
45 |                             })
46 |                         :
47 |                             ''
48 |                } 
49 |             </ul>
50 |         </div>
51 |     );
52 | };
53 | 
54 | export default TasksContainer;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Suspense } from 'react';
 2 | import ReactDOM from "react-dom";
 3 | import './style.scss';
 4 | // import App from './components/App';
 5 | const App = React.lazy(() => import('./components/App'));
 6 | 
 7 | 
 8 | ReactDOM.render(
 9 |     <Suspense fallback={<div>Loading...</div>}>
10 |         <App /> 
11 |     </Suspense>,
12 | document.getElementById('app-container'));


--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
  1 | $containerWidth: 40rem;
  2 | $containerHeight: 40rem;
  3 | $primaryColor: #eae7dc;
  4 | $secondaryColor: #e85a4f;
  5 | $border-radius: .5rem;
  6 | $border: 2px solid $secondaryColor;
  7 | 
  8 | * {
  9 |     margin: 0;
 10 |     padding: 0;
 11 |     box-sizing: border-box;
 12 |     font-family: 'Nunito' !important;
 13 | }
 14 | 
 15 | html {
 16 |     font-size: 62.5%;
 17 | }
 18 | 
 19 | .container {
 20 |     width: $containerWidth;
 21 |     height: $containerHeight;
 22 |     background-color: rgba($primaryColor, .7);
 23 |     padding: 1.6rem;
 24 |  
 25 |     .scheduleAlarmContainer {
 26 |         display: grid;
 27 |         grid-template-columns: repeat(8, 1fr);
 28 |         grid-gap: 3rem;
 29 | 
 30 |         .taskInputField {
 31 |             width: 100%;
 32 |             padding: .6rem;
 33 |             border: $border;
 34 |             outline: none;
 35 |             border-radius: $border-radius;
 36 |             font-size: 2rem;
 37 |             grid-column: 1 / -1;
 38 |         }
 39 | 
 40 |         .daySelect {
 41 |             outline: none;
 42 |             border: $border;
 43 |             padding: .5rem;
 44 |             border-radius: $border-radius;
 45 |             background-color: white;
 46 |             font-size: 1.7rem;
 47 | 
 48 |             grid-column: 1 / 5;
 49 |         }
 50 | 
 51 |         .inputTime {
 52 |             border: $border;
 53 |             border-radius: $border-radius;
 54 |             outline: none;
 55 |             padding: .6rem;
 56 |             font-size: 2rem;
 57 | 
 58 |             grid-column: 5 / -1;
 59 |         }
 60 | 
 61 |         .setAlarmButton {
 62 |             grid-column: 1 / -1;
 63 |             border: none;
 64 |             outline: none;
 65 |             border-radius: $border-radius;
 66 |             background-color: #e85a4f;
 67 |             color: white;
 68 |             margin-top: 11rem;
 69 |             font-size: 1.7rem;
 70 |             padding: .7rem;
 71 | 
 72 |             transition: .2s linear;
 73 | 
 74 |             &:hover {
 75 |                 transform: translateY(-.5rem);
 76 |             }
 77 |         }
 78 | 
 79 |     }
 80 | }
 81 | 
 82 | .warningMessage {
 83 |     font-size: 1.5rem;
 84 |     color: #e85a4f;
 85 | 
 86 |     grid-column: 1 / -1;
 87 | 
 88 | }
 89 | 
 90 | .bottomNavigation {
 91 |     grid-column: 3 / 7;
 92 |     font-size: 1.2rem;
 93 |     justify-self: center;
 94 |     text-align: center;
 95 |     margin-top: 2rem;
 96 | 
 97 |     span {
 98 |         margin-right: .5rem;
 99 |         cursor: pointer;
100 |     }
101 | 
102 |     .activeBottomNav {
103 |         color: $secondaryColor;
104 |     }
105 | }
106 | 
107 | .inputSelect {
108 |     grid-column: 5 / -1;
109 |     border: 2px solid #e85a4f;
110 |     border-radius: .5rem;
111 |     position: relative;
112 | 
113 |     input {
114 |         width: 75%;
115 |         border: none;
116 |         outline: none;
117 |         padding: .6rem;
118 |         font-size: 2rem;
119 |     }
120 | 
121 |     select {
122 |         width: 25%;
123 |         height: 100%;
124 |         border: none;
125 |         outline: none;
126 |         padding: .3rem;
127 |         font-size: 1.7rem;
128 |         position: absolute;
129 |         background-color: white;
130 |     }
131 | }
132 | 
133 | .tasks-container {
134 |     height: 88.5%;
135 |     overflow: auto;
136 |     word-break: break-all;
137 | 
138 |     ul {
139 |         list-style-type: upper-roman;
140 |         padding: 1rem;
141 | 
142 |         li {
143 |             font-size: 2rem;
144 |             .cross-button {
145 |                 color: $secondaryColor;
146 |                 cursor: pointer;
147 |                 width: 1.5rem;
148 |                 height: 1.5rem;
149 |                 margin-left: 1rem;
150 |                 
151 |                 transition: .2s linear;
152 | 
153 |                 &:hover {
154 |                     // color: white;
155 |                     transform: scale(1.5);
156 |                 }
157 |             }
158 |         }
159 | 
160 |     }
161 | 
162 | }
163 | 
164 | #snackbar {
165 |     visibility: hidden;
166 |     min-width: 250px;
167 |     margin-left: -125px;
168 |     background-color: #fff;
169 |     color: $secondaryColor;
170 |     text-align: center;
171 |     border-radius: 2px;
172 |     padding: 16px;
173 |     position: fixed;
174 |     z-index: 1;
175 |     left: 50%;
176 |     // bottom: 30px;
177 |     top: 10px;
178 |     font-size: 17px;
179 |     box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, .2);
180 | }
181 | 
182 | #snackbar.show {
183 |     visibility: visible;
184 |     animation: fadein 0.5s, fadeout 0.5s 2.5s;
185 | }
186 | 
187 | 
188 | 
189 | .warning-vibration-animation {
190 |     animation: warning-vibration-animation .3s linear;
191 | }
192 | 
193 | .warning-vibration-animation-toggle {
194 |     animation: warning-vibration-animation .3s linear;
195 | }
196 | 
197 | @keyframes warning-vibration-animation {
198 |     0% { 
199 |         transform: translateX(8px) 
200 |     }
201 |     25% {
202 |         transform: translateX(-8px) 
203 |     }
204 |     50% {
205 |         transform: translateX(8px)
206 |     }
207 |     75% {
208 |         transform: translateX(-8px)
209 |     }
210 |     100% {
211 |         transform: translateX(0px)
212 |     }
213 | }
214 | 
215 | 
216 | @keyframes fadein {
217 |   from {top: 0; opacity: 0;}
218 |   to {top: 10px; opacity: 1;}
219 | }
220 | 
221 | @keyframes fadeout {
222 |   from {top: 10px; opacity: 1;}
223 |   to {top: 0; opacity: 0;}
224 | }
225 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 2 | const webpack = require('webpack');
 3 | const path = require('path');
 4 | 
 5 | console.log('path.join(__dirname, public/dist', path.join(__dirname, 'public/dist'));
 6 | 
 7 | module.exports = {
 8 |     entry: './src/index.js',
 9 |     output: {
10 |         filename: 'bundle.js',
11 |         path: path.join(__dirname, 'public/dist'),
12 |         publicPath: './'
13 |     },
14 |     module: {
15 |         rules: [{
16 |             test: /\.(js|jsx)$/,
17 |             exclude: /node_modules/,
18 |             use: {
19 |                 loader: "babel-loader"
20 |             }
21 |         }, 
22 |         {
23 |             test: /\.scss$/,
24 |             use: [{
25 |                     loader: "style-loader"
26 |                 },
27 |                 {
28 |                     loader: "css-loader"
29 |                 },
30 |                 {
31 |                     loader: "sass-loader"
32 |                 }
33 |             ]
34 |         }]
35 |     },
36 |     plugins: [
37 |         new HtmlWebpackPlugin({
38 |             template: path.join(__dirname,'public/', 'template.html')
39 |         }),
40 |         new webpack.SourceMapDevToolPlugin({})
41 |     ]
42 | };


--------------------------------------------------------------------------------