\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{ this.renderNavigation() }\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{ this.renderMonths() }\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t);\n\t}\n\n\trenderNavigation() {\n\t\tlet year = this.props.viewDate.year();\n\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{ this.renderNavigation() }\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{ this.renderYears() }\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t);\n\t}\n\n\trenderNavigation() {\n\t\tconst viewYear = this.getViewYear();\n\t\treturn (\n\t\t\t:
\n\t\t\t\t);\n\t\t\t}\n\n\t\t\titems.push( this.renderCounter(c, timeParts[c]) );\n\t\t});\n\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{ this.renderHeader() }\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t
\n\t\t);\n\t}\n\n\trenderCounter( type, value ) {\n\t\tif ( type === 'hours' && this.isAMPM() ) {\n\t\t\tvalue = ( value - 1 ) % 12 + 1;\n\n\t\t\tif ( value === 0 ) {\n\t\t\t\tvalue = 12;\n\t\t\t}\n\t\t}\n\n\t\tif ( type === 'ampm' ) {\n\t\t\tif ( this.props.timeFormat.indexOf(' A') !== -1 ) {\n\t\t\t\tvalue = this.props.viewDate.format('A');\n\t\t\t}\n\t\t\telse {\n\t\t\t\tvalue = this.props.viewDate.format('a');\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t| \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t{ items }\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t | \n\t\t\t\t\t\t
\n\t\t\t\t this.onStartClicking( e, 'increase', type)}>â–²\n\t\t\t\t
\n\t\t);\n\t}\n\n\trenderHeader() {\n\t\tif ( !this.props.dateFormat ) return;\n\n\t\tconst date = this.props.selectedDate || this.props.viewDate;\n\n\t\treturn (\n\t\t\t\n\t\t\t\t{ value }
\n\t\t\t\t this.onStartClicking( e, 'decrease', type)}>â–¼\n\t\t\t\n\t\t\t\t\t{ this.renderView() }\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t{ this.props.renderInput( finalInputProps, this._openCalendar, this._closeCalendar ) }\n\t\t\t\t
\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t\n\t\t);\n\t}\n\n\trenderView() {\n\t\treturn this.props.renderView( this.state.currentView, this._renderCalendar );\n\t}\n\n\t_renderCalendar = () => {\n\t\tconst props = this.props;\n\t\tconst state = this.state;\n\n\t\tlet viewProps = {\n\t\t\tviewDate: state.viewDate.clone(),\n\t\t\tselectedDate: this.getSelectedDate(),\n\t\t\tisValidDate: props.isValidDate,\n\t\t\tupdateDate: this._updateDate,\n\t\t\tnavigate: this._viewNavigate,\n\t\t\tmoment: moment,\n\t\t\tshowView: this._showView\n\t\t};\n\n\t\t// Probably updateOn, updateSelectedDate and setDate can be merged in the same method\n\t\t// that would update viewDate or selectedDate depending on the view and the dateFormat\n\t\tswitch ( state.currentView ) {\n\t\t\tcase viewModes.YEARS:\n\t\t\t\t// Used viewProps\n\t\t\t\t// { viewDate, selectedDate, renderYear, isValidDate, navigate, showView, updateDate }\n\t\t\t\tviewProps.renderYear = props.renderYear;\n\t\t\t\treturn \n\t\t\t\t{ this.props.children }\n\t\t\t
\n\t\t);\n\t}\n\thandleClickOutside(e) {\n\t\tthis.props.onClickOut( e );\n\t}\n\n\tsetClickOutsideRef() {\n\t\treturn this.container.current;\n\t}\n}\n\nconst ClickableWrapper = onClickOutside( ClickOutBase );\n","/**\n * @license React\n * react-dom.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n Modernizr 3.0.0pre (Custom Build) | MIT\n*/\n'use strict';var aa=require(\"react\"),ca=require(\"scheduler\");function p(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;c\n
\n Task Manager
\n \n \n
\n\n\n \n \n \n
\n \n )\n }\n\nexport default AddDeadline;\n","import React, { useState } from 'react';\n\nfunction TimeInput({ onClose, onUpdateStatus, setDurationValue, setOpenModal }) {\n const [selectedHour, setSelectedHour] = useState(null);\n const [selectedMinute, setSelectedMinute] = useState(null);\n\n const handleHourChange = (event) => {\n setSelectedHour(event.target.value);\n };\n\n const handleMinuteChange = (event) => {\n setSelectedMinute(event.target.value);\n };\n\n const handleSaveClick = () => {\n if (selectedHour !== null && selectedMinute !== null) {\n const formattedTime = `${selectedHour}:${selectedMinute}`;\n onUpdateStatus(formattedTime);\n setDurationValue(formattedTime);\n }\n setOpenModal(false);\n };\n\n return (\n \n
\n );\n}\n\nexport default TimeInput;\n","import React, { useState } from 'react';\n\nconst AddPriority = ({ onUpdateStatus, onClose, setOpenModal, setSelectedAddPriority }) => {\n const [selectedPriority, setSelectedPriority] = useState('');\n\n const handleButton = (priorityValue) => {\n setSelectedPriority(priorityValue);\n };\n\n const saveHandler = () => {\n if (selectedPriority) {\n onUpdateStatus(selectedPriority);\n setSelectedAddPriority(selectedPriority);\n setOpenModal(false);\n setSelectedPriority('');\n }\n };\n\n return (\n <>\n \n
\n \n
\n Select time:
\n\n \n \n :\n \n
\n \n \n \n
\n \n handleButton('!')}\n >\n !\n \n\n handleButton('!!')}\n >\n !!\n \n\n handleButton('!!!')}\n >\n !!!\n \n
\n \n \n \n
\n \n );\n};\n\nexport default AddPriority;\n","import React from 'react';\nimport AddDeadline from './AddDeadline';\nimport AddDuration from './AddDuration';\nimport AddPriority from './AddPriority';\n\n\n\nconst Modal = ({ open, onClose, activeComponent, onModalValueChange, onUpdateStatus, setOpenModal, task, deadline, onDateSelected, setSaveClicked, setDurationValue, setSelectedAddPriority }) => {\n\n\n\n if (!open) return null;\n return (\n <>\n \n
\n \n )\n}\n\nexport default Modal;","var _path, _line;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgFlag(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n className: \"feather feather-flag\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"\n })), _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n x1: 4,\n y1: 22,\n x2: 4,\n y2: 15\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgFlag);\nexport default __webpack_public_path__ + \"static/media/flag.661b73f210343a267921723a8ac31b8e.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState, useEffect } from 'react';\nimport check from './images/assets/check.svg';\n\nconst AddListChecked = ({ value, task, onUpdateStatus, inputs }) => {\n const { id, title, status, edited_at, newTitle, newStatus } = task;\n const [statusInput, setStatusInput] = useState(status);\n const [inputSubtask, setInputSubtask] = useState(value);\n\n const checkedInputHandler = () => {\n const newStatus = statusInput === 'To Do' ? 'Done' : 'To Do';\n setStatusInput(newStatus);\n\n const updatedTask = { ...task, newStatus: statusInput };\n onUpdateStatus(updatedTask);\n };\n\n\n\n return (\n <>\n \n\n {activeComponent === 'deadline' ? (\n \n ) : activeComponent === 'duration' ? (\n
\n \n
\n \n );\n};\n\nexport default AddListChecked;\n","import React, { useState, useRef, useEffect } from 'react';\nimport AddListChecked from './AddListChecked';\nimport check from './images/assets/check.svg';\n\nconst AddList = ({task, onUpdateStatus}) => {\n const { id, title, status, edited_at, newTitle, newStatus } = task;\n const [listInput, setListInput] = useState('');\n const inputRef = useRef(null);\n const [inputs, setInputs] = useState(newTitle);\n const [statusInput, setStatusInput] = useState(status);\n\n const checkboxHandler = () => {\n const newStatus = statusInput === 'To Do' ? 'Done' : 'To Do';\n setStatusInput(newStatus);\n \n\n const updatedTask = { ...task, newStatus: statusInput };\n onUpdateStatus(updatedTask);\n };\n\n const handleKeyDown = (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n const updatedInputs = [...inputs, listInput];\n setInputs(updatedInputs);\n\n const updatedTask = { ...task, newTitle: inputs};\n onUpdateStatus(updatedTask);\n\n setListInput('');\n }\n };\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }, []);\n\n return (\n <>\n \n \n
\n \n setInputSubtask(e.target.vaue)}\n />\n
\n \n {inputs.map((value, index) => (\n \n ))}\n
\n \n \n setListInput(e.target.value)}\n ref={inputRef}\n onKeyDown={handleKeyDown}\n autoComplete=\"off\"\n className='input_list'\n statusInput={statusInput}\n setStatusInput={setStatusInput}\n style={{ textDecoration: statusInput === 'Done' ? 'line-through' : 'none' }}\n />\n
\n \n );\n};\n\nexport default AddList;\n","import React, { useState, useEffect } from 'react';\nimport check from './images/assets/check.svg';\nimport x from './images/assets/x.svg';\nimport listimage from './images/assets/listimage.svg';\nimport clock from './images/assets/clock.svg';\nimport calendarimage from './images/assets/calendarimage.svg';\nimport Modal from './Modal';\nimport flag from './images/assets/flag.svg';\nimport moment from 'moment';\nimport AddList from './AddList';\n\n\nconst TaskItem = ({ task, onDeleteTask, onUpdateStatus}) => {\n const { id, title, description, status, newTitle, priority, duration, deadline, created_at, edited_at } = task;\n const [editedTitle, setEditedTitle] = useState(task.title);\n const [anotherImage, setAnotherImage] = useState(false);\n const [isDescription, setIsDescription] = useState(task.description);\n const [openModal, setOpenModal] = useState(false);\n const [modalValue, setModalValue] = useState(new Date());\n const [activeComponent, setActiveComponent] = useState('');\n const [showIcons, setShowIcons] = useState(false);\n const [visibleDescription, setVisibleDescription] = useState(false);\n const [selectedDeadline, setSelectedDeadline] = useState(null);\n const [chosenDate, setChosenDate] = useState(deadline);\n const [saveClicked, setSaveClicked] = useState(false);\n const [durationValue, setDurationValue] = useState('');\n const [selectedAddPriority, setSelectedAddPriority] = useState('');\n const [visibleAddList, setVisibleAddList] = useState(false);\n\n\n const handleDateSelected = (date) => {\n setChosenDate(date);\n };\n \n\n\n const handleMouseOver = () => {\n setShowIcons(true);\n setVisibleDescription(true);\n };\n\n \n\n const handleMouseOut = () => {\n setShowIcons(false);\n\n if (description === '') {\n setVisibleDescription(false);\n } else {\n setVisibleDescription(true);\n }\n\n };\n\n const handleDelete = () => {\n onDeleteTask(task.id);\n };\n\n const handleUpdateStatus = () => {\n const updatedStatus = { ...task, status: status === 'To Do' ? 'Done' : 'To Do', edited_at: Date.now() };\n onUpdateStatus(updatedStatus);\n};\n\nconst handleModalValueChange = (newValue) => {\n setModalValue(newValue);\n setSelectedDeadline(newValue); // Update the selected date\n const updatedStatus = { ...task, deadline: newValue };\n onUpdateStatus(updatedStatus);\n};\n\n\n useEffect(() => {\n if (openModal) {\n\n setModalValue(new Date());\n }\n }, [openModal]);\n\n const handleModal = (selectedComponent) => {\n setActiveComponent(selectedComponent);\n setOpenModal(true);\n };\n\n const handleSetDescription = (event) => {\n setIsDescription(event.target.value);\n\n}\n\nuseEffect(() => {\n const updatedStatus = { ...task, title: editedTitle };\n onUpdateStatus(updatedStatus);\n}, [editedTitle]);\nuseEffect(() => {\n const updatedStatus = { ...task, description: isDescription };\n onUpdateStatus(updatedStatus);\n}, [isDescription]);\n\n\nconst addListHandler = () => {\n setVisibleAddList(true);\n}\nuseEffect(() => {\n if(newTitle.length > 0) { \n setVisibleAddList(true);\n }\n}, [newTitle]);\n\n\n\n return (\n \n
\n );\n};\n\nexport default TaskItem;\n","var _polyline;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgDownIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"#393939\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n className: \"feather feather-chevron-down\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _polyline || (_polyline = /*#__PURE__*/React.createElement(\"polyline\", {\n points: \"6 9 12 15 18 9\"\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgDownIcon);\nexport default __webpack_public_path__ + \"static/media/downIcon.b6ab46dde19351f6155ac05d5b05a212.svg\";\nexport { ForwardRef as ReactComponent };","import React,{useState, useEffect} from 'react';\nimport check from './images/assets/check.svg';\nimport moment from \"moment\";\n\n\nconst TaskItemChecked = ({ task, onUpdateStatus }) => {\n const { id, title, status, edited_at } = task;\n const [timeAgo, setTimeAgo] = useState(moment(edited_at).fromNow());\n\n useEffect(() => {\n const intervalId = setInterval(() => {\n setTimeAgo(moment(edited_at).fromNow());\n }, 60000);\n\n return () => clearInterval(intervalId);\n }, [edited_at]);\n\n const handleUpdateStatus = () => {\n const updatedStatus = { ...task, status: status === 'To Do' ? 'Done' : 'To Do' };\n onUpdateStatus(updatedStatus);\n };\n\n\n return (\n \n
\n\n\n \n
\n \n \n \n setEditedTitle(e.target.value)}\n />\n
\n \n {showIcons && 
}\n
\n \n 
\n ![]()
handleModal('priority')} className={selectedAddPriority === '' ? 'image_icon' : 'controllers-btn'} src={flag} alt=\"Flag\" />\n { selectedAddPriority !== '' &&\n ![]()
handleModal('duration')} className={durationValue === '' ? 'image_icon' : 'controllers-btn'} src={clock} alt=\"Clock\" />\n { durationValue !== '' && ![]()
handleModal('deadline')} className={deadline === '' ? 'image_icon' : 'controllers-btn'}src={calendarimage} alt=\"Calendar\" />\n {deadline !== '' &&
\n {selectedAddPriority}
}\n {durationValue}
}\n {moment(chosenDate).fromNow()}
}\n \n setOpenModal(false)} onModalValueChange={handleModalValueChange} \n setOpenModal={setOpenModal} task={task} onDateSelected={handleDateSelected} setSaveClicked={setSaveClicked} setDurationValue={setDurationValue} setSelectedAddPriority={setSelectedAddPriority}\n />\n
\n \n\n
\n \n
\n \n
\n );\n};\n\n\nexport default TaskItemChecked;","import React, {useState} from 'react';\nimport TaskItem from './TaskItem';\nimport downIcon from './images/assets/downIcon.svg';\nimport TaskItemChecked from './TaskItemChecked';\n\n\nconst TaskList = ({tasks, onDeleteTask, onUpdateStatus}) => {\n const [accordionOpen, setAccordionOpen] = useState(false);\n\n const handleDeleteTask = (taskId) => {\n onDeleteTask(taskId);\n };\n\n const tasksToDo = tasks.filter(task => task.status === \"To Do\");\n const tasksDone = tasks\n .filter(task => task.status === \"Done\")\n .sort((a, b) => new Date(b.edited_at) - new Date(a.edited_at));\n\n //const handleUpdateTask = (updatedStatus) => {\n // onUpdateStatus(updatedStatus);\n //};\n\n const handleOpenToDo = () => {\n setAccordionOpen(false);\n };\n const handleOpenDone = () => {\n setAccordionOpen(true);\n };\n\n return (\n <>\n \n
\n \n \n
\n \n
\n \n {title}\n
\n \n Completed {timeAgo}\n
\n \n
\n {!accordionOpen && (\n \n
\n \n Tasks {tasksToDo.length > 0 && ` (${tasksToDo.length})` } \n
\n \n {!accordionOpen && 
}\n
\n \n {tasksToDo.map((task) => (\n
\n )}\n\n \n
\n {accordionOpen && (\n \n
\n \n Completed {tasksDone.length > 0 && ` (${tasksDone.length})` }\n
\n \n {accordionOpen && }\n
\n \n {tasksDone.map((task) => (\n
\n )}\n \n \n )\n}\n\nexport default TaskList;","import React, {useEffect, useState} from 'react';\nimport AddTask from '../components/AddTask';\nimport TaskList from '../components/TaskList';\n\n\n\n\nconst TaskManager = ({handleClickButton, anotherImage}) => {\n const [tasks, setTasks] = useState(JSON.parse(localStorage.getItem(\"tasks\")) || []);\n \n \n useEffect(() => {\n localStorage.setItem(\"tasks\", JSON.stringify(tasks));\n\n }, [tasks]);\n\n\n const handleAddTask = (newTask) => {\n setTasks([...tasks, newTask]);\n\n }\n\n const handleDeleteTask = (taskId) => {\n const updatedTasks = tasks.filter((task) => task.id !== taskId);\n setTasks(updatedTasks);\n };\n\n const handleUpdateStatus = (updatedTask) => {\n const updatedStatus = tasks.map((task) =>\n task.id === updatedTask.id ? updatedTask : task\n );\n setTasks(updatedStatus);\n };\n\n\n return (\n <>\n