diff --git a/.eslintignore b/.eslintignore index d8b83df9..86e980b0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ package-lock.json +src/ \ No newline at end of file diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 00000000..31354ec1 --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/notes.txt b/notes.txt new file mode 100644 index 00000000..61c6bcdc --- /dev/null +++ b/notes.txt @@ -0,0 +1 @@ +X element: ✖ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5a546dc7..b3fbc4bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2315,6 +2315,15 @@ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.169.tgz", "integrity": "sha512-DvmZHoHTFJ8zhVYwCLWbQ7uAbYQEk52Ev2/ZiQ7Y7gQGeV9pjBqjnQpECMHfKS1rCYAhMI7LHVxwyZLZinJgdw==" }, + "@types/mdast": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", + "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==", + "dev": true, + "requires": { + "@types/unist": "*" + } + }, "@types/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", @@ -2425,6 +2434,12 @@ "source-map": "^0.6.1" } }, + "@types/unist": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", + "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==", + "dev": true + }, "@types/webpack": { "version": "4.41.28", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.28.tgz", @@ -3053,11 +3068,6 @@ "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==" }, - "async-limiter": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", - "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" - }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -3566,12 +3576,6 @@ "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" }, - "bail": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", - "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==", - "dev": true - }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -4312,12 +4316,6 @@ } } }, - "collapse-white-space": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", - "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==", - "dev": true - }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -5574,9 +5572,9 @@ "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=" }, "dns-packet": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz", - "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz", + "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==", "requires": { "ip": "^1.1.0", "safe-buffer": "^5.0.1" @@ -6538,13 +6536,12 @@ } }, "eslint-plugin-markdown": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.1.0.tgz", - "integrity": "sha512-Rqw7tosArdlzXcR/xJGW3Er9gRiF7iE+QEMEm7hZZ/feZjUf8xCaGQJgB1nzs9yVhJnUeiAcj5TXLLfKMbp3DQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz", + "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==", "dev": true, "requires": { - "remark-parse": "^7.0.0", - "unified": "^6.1.2" + "mdast-util-from-markdown": "^0.8.5" } }, "eslint-plugin-node": { @@ -8856,23 +8853,11 @@ "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==" }, - "is-whitespace-character": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz", - "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==", - "dev": true - }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==" }, - "is-word-character": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz", - "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==", - "dev": true - }, "is-wsl": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", @@ -10493,12 +10478,6 @@ "object-visit": "^1.0.0" } }, - "markdown-escapes": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz", - "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==", - "dev": true - }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -10509,6 +10488,25 @@ "safe-buffer": "^5.1.2" } }, + "mdast-util-from-markdown": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", + "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==", + "dev": true, + "requires": { + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^2.0.0", + "micromark": "~2.11.0", + "parse-entities": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + } + }, + "mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", + "dev": true + }, "mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -10582,6 +10580,16 @@ "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz", "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==" }, + "micromark": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz", + "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==", + "dev": true, + "requires": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + }, "micromatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", @@ -11447,9 +11455,9 @@ } }, "parse-entities": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz", - "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", + "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", "dev": true, "requires": { "character-entities": "^1.0.0", @@ -11533,9 +11541,9 @@ "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=" }, "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-starts-with": { "version": "1.0.0", @@ -11766,9 +11774,9 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "version": "7.0.36", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", + "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", "requires": { "chalk": "^2.4.2", "source-map": "^0.6.1", @@ -13348,11 +13356,11 @@ "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, "react-router": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", - "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", "requires": { - "@babel/runtime": "^7.1.2", + "@babel/runtime": "^7.12.13", "history": "^4.9.0", "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", @@ -13372,15 +13380,15 @@ } }, "react-router-dom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", - "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz", + "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==", "requires": { - "@babel/runtime": "^7.1.2", + "@babel/runtime": "^7.12.13", "history": "^4.9.0", "loose-envify": "^1.3.1", "prop-types": "^15.6.2", - "react-router": "5.2.0", + "react-router": "5.2.1", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" } @@ -13760,29 +13768,6 @@ "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=" }, - "remark-parse": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-7.0.2.tgz", - "integrity": "sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==", - "dev": true, - "requires": { - "collapse-white-space": "^1.0.2", - "is-alphabetical": "^1.0.0", - "is-decimal": "^1.0.0", - "is-whitespace-character": "^1.0.0", - "is-word-character": "^1.0.0", - "markdown-escapes": "^1.0.0", - "parse-entities": "^1.1.0", - "repeat-string": "^1.5.4", - "state-toggle": "^1.0.0", - "trim": "0.0.1", - "trim-trailing-lines": "^1.0.0", - "unherit": "^1.0.4", - "unist-util-remove-position": "^1.0.0", - "vfile-location": "^2.0.0", - "xtend": "^4.0.1" - } - }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", @@ -13825,12 +13810,6 @@ "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" }, - "replace-ext": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz", - "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=", - "dev": true - }, "request": { "version": "2.88.2", "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz", @@ -13971,9 +13950,9 @@ "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=" }, "resolve-url-loader": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.3.tgz", - "integrity": "sha512-WbDSNFiKPPLem1ln+EVTE+bFUBdTTytfQZWbmghroaFNFaAVmGq0Saqw6F/306CwgPXsGwXVxbODE+3xAo/YbA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz", + "integrity": "sha512-D3sQ04o0eeQEySLrcz4DsX3saHfsr8/N6tfhblxgZKXxMT2Louargg12oGNfoTRLV09GXhVUe5/qgA5vdgNigg==", "requires": { "adjust-sourcemap-loader": "3.0.0", "camelcase": "5.3.1", @@ -13981,68 +13960,22 @@ "convert-source-map": "1.7.0", "es6-iterator": "2.0.3", "loader-utils": "1.2.3", - "postcss": "7.0.21", + "postcss": "7.0.36", "rework": "1.0.1", "rework-visit": "1.0.0", "source-map": "0.6.1" }, "dependencies": { - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "requires": { - "color-convert": "^1.9.0" - } - }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, "emojis-list": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" - }, "json5": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", @@ -14060,24 +13993,6 @@ "emojis-list": "^2.0.0", "json5": "^1.0.1" } - }, - "postcss": { - "version": "7.0.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz", - "integrity": "sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==", - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -15193,12 +15108,6 @@ } } }, - "state-toggle": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz", - "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==", - "dev": true - }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -15635,9 +15544,9 @@ "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==" }, "tar": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz", - "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==", + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", + "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==", "requires": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", @@ -15982,24 +15891,6 @@ "punycode": "^2.1.1" } }, - "trim": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", - "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", - "dev": true - }, - "trim-trailing-lines": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz", - "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==", - "dev": true - }, - "trough": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz", - "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==", - "dev": true - }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", @@ -16124,16 +16015,6 @@ "which-boxed-primitive": "^1.0.2" } }, - "unherit": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz", - "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==", - "dev": true, - "requires": { - "inherits": "^2.0.0", - "xtend": "^4.0.0" - } - }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -16158,20 +16039,6 @@ "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz", "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==" }, - "unified": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz", - "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==", - "dev": true, - "requires": { - "bail": "^1.0.0", - "extend": "^3.0.0", - "is-plain-obj": "^1.1.0", - "trough": "^1.0.0", - "vfile": "^2.0.0", - "x-is-string": "^0.1.0" - } - }, "union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", @@ -16217,43 +16084,13 @@ "crypto-random-string": "^1.0.0" } }, - "unist-util-is": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz", - "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==", - "dev": true - }, - "unist-util-remove-position": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz", - "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==", - "dev": true, - "requires": { - "unist-util-visit": "^1.1.0" - } - }, "unist-util-stringify-position": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz", - "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==", - "dev": true - }, - "unist-util-visit": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", - "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", - "dev": true, - "requires": { - "unist-util-visit-parents": "^2.0.0" - } - }, - "unist-util-visit-parents": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", - "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", + "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==", "dev": true, "requires": { - "unist-util-is": "^3.0.0" + "@types/unist": "^2.0.2" } }, "universalify": { @@ -16379,9 +16216,9 @@ } }, "url-parse": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz", - "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "requires": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" @@ -16494,33 +16331,6 @@ "extsprintf": "^1.2.0" } }, - "vfile": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz", - "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==", - "dev": true, - "requires": { - "is-buffer": "^1.1.4", - "replace-ext": "1.0.0", - "unist-util-stringify-position": "^1.0.0", - "vfile-message": "^1.0.0" - } - }, - "vfile-location": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz", - "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==", - "dev": true - }, - "vfile-message": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz", - "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==", - "dev": true, - "requires": { - "unist-util-stringify-position": "^1.1.1" - } - }, "vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", @@ -17569,11 +17379,18 @@ } }, "ws": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", - "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", + "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", "requires": { "async-limiter": "~1.0.0" + }, + "dependencies": { + "async-limiter": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", + "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" + } } }, "yargs": { @@ -17983,15 +17800,9 @@ } }, "ws": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" - }, - "x-is-string": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz", - "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=", - "dev": true + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz", + "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==" }, "xml-name-validator": { "version": "3.0.0", diff --git a/package.json b/package.json index 18a1117b..b73679c8 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.3", - "react-router-dom": "^5.2.0", + "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "redux": "^4.0.5", "redux-thunk": "^2.3.0", @@ -57,7 +57,7 @@ "eslint-plugin-import": "^2.22.1", "eslint-plugin-jest": "^24.3.5", "eslint-plugin-jsx-a11y": "^6.4.1", - "eslint-plugin-markdown": "^2.0.1", + "eslint-plugin-markdown": "^2.2.1", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.23.2", diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777cc..00000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 00000000..338e31cd --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index aa069f27..ccb5edb9 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + - React App + To-do App - Antonio & Carlos diff --git a/src/App.js b/src/App.js index de524524..080e9203 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,230 @@ import React from "react"; +import Background from "./components/Background"; +import ChangeMode from "./components/ChangeMode"; +import TodoList from "./components/TodoList"; +import Menu from "./components/Menu"; +import Toast from "./components/Toast"; +import classNames from "classnames"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import "./App.scss"; -function App() { - return ( -
-
-
-

Hola mundo

-
-
-
- ); +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + todos: JSON.parse(localStorage.getItem("todos")) + ? JSON.parse(localStorage.getItem("todos")) + : [], + isDarkMode: false, + }; + + this.handleAddTodo = this.handleAddTodo.bind(this); + this.handleDelete = this.handleDelete.bind(this); + this.handleCheckbox = this.handleCheckbox.bind(this); + this.handleEdit = this.handleEdit.bind(this); + this.handleEditName = this.handleEditName.bind(this); + this.handleClearAll = this.handleClearAll.bind(this); + this.handleTheme = this.handleTheme.bind(this) + } + + handleTheme() { + let theme = !this.state.isDarkMode + this.setState({ isDarkMode: theme }) + } + + handleCheckbox(todo) { + let test = this.state.todos.find((stateTodo) => { + return stateTodo.id === todo.id; + }); + test.completed = !test.completed; + + let newTodoList = this.state.todos.map((prevTodo) => { + return prevTodo.id === todo.id ? test : prevTodo; + }); + this.setState({ todos: newTodoList }); + } + + handleEdit(id) { + let test = this.state.todos.find((stateTodo) => { + return stateTodo.id === id; + }); + test.isEditing = !test.isEditing; + + let newTodoList = this.state.todos.map((prevTodo) => { + return prevTodo.id === id ? test : prevTodo; + }); + this.setState({ todos: newTodoList }); + } + + handleEditName(id, newTask) { + let test = this.state.todos.find((stateTodo) => { + return stateTodo.id === id; + }); + test.task = newTask; + + let newTodoList = this.state.todos.map((prevTodo) => { + return prevTodo.id === id ? test : prevTodo; + }); + this.setState({ todos: newTodoList }); + } + + handleDelete(id) { + const newTodoList = this.state.todos.filter((todo) => { + if (todo.id !== id) { + return todo; + } + }); + this.setState({ todos: newTodoList }); + } + + handleEmptyInput() { + var toastLiveExample = document.getElementById("liveToast"); + toastLiveExample.style.opacity = "1"; + setTimeout(() => { + toastLiveExample.style.opacity = "0"; + }, 2000); + } + + handleAddTodo(event) { + let task; + if (event.key === "Enter") { + if (event.target.value == "") { + this.handleEmptyInput(); + return; + } + task = event.target.value; + let newToDo = { + id: new Date().getTime(), + task: task, + completed: false, + isEditing: false, + }; + + this.setState((prevState) => ({ + todos: [...prevState.todos, newToDo], + })); + + event.target.value = null; + } + } + + handleClearAll() { + let pendingTodos = this.state.todos.filter((completedTodo) => { + return completedTodo.completed == false; + }); + this.setState({ todos: pendingTodos }); + } + + componentDidMount() { + let todos = JSON.parse(localStorage.getItem("todos")); + let isDarkMode = JSON.parse(localStorage.getItem("theme")); + + if (todos != null) { + this.setState({todos}); + } + + if (isDarkMode != null) { + this.setState({isDarkMode}); + } + } + + componentDidUpdate() { + localStorage.setItem("todos", JSON.stringify(this.state.todos)); + localStorage.setItem("theme", JSON.stringify(this.state.isDarkMode)); + } + + render() { + const { todos } = this.state; + const activeTodos = todos.filter((todo) => todo.completed === false); + const completedTodos = todos.filter((todo) => todo.completed === true); + + const isDarkMode = this.state.isDarkMode + const inputClass = classNames({ "bg-dark text-light": isDarkMode }) + + return ( + <> + + +
+
+
+
+

TODO

+ +
+
+ + {todos.length > 0 ? ( +
+ + + + + + + + + + + + + + +
+ ) : ( +
+

+ Create a new task please +

+
+ )} +
+
+
+ +
+ + + ); + } } export default App; diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 00000000..b379877a --- /dev/null +++ b/src/App.scss @@ -0,0 +1,22 @@ +@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap'); + +body { + font-family: 'Dosis', sans-serif; + font-size: 1.5rem; +} + +h1 { + font-family: 'Lato', sans-serif; + color: #FFFEFF; + letter-spacing: 1rem; + margin-bottom: 0; +} + +.main-width { + max-width: 40rem; +} + +.list-container { + border-radius: 5px; +} \ No newline at end of file diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 00000000..465ac3ca --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg new file mode 100644 index 00000000..0aa94a32 --- /dev/null +++ b/src/assets/icons/moon.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/sun.svg b/src/assets/icons/sun.svg new file mode 100644 index 00000000..dd5eceb1 --- /dev/null +++ b/src/assets/icons/sun.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/1036-4608x3072.jpg b/src/assets/img/1036-4608x3072.jpg new file mode 100644 index 00000000..1aae1c6d Binary files /dev/null and b/src/assets/img/1036-4608x3072.jpg differ diff --git a/src/assets/img/1040-4496x3000.jpg b/src/assets/img/1040-4496x3000.jpg new file mode 100644 index 00000000..7aea7304 Binary files /dev/null and b/src/assets/img/1040-4496x3000.jpg differ diff --git a/src/assets/img/1041-5184x2916.jpg b/src/assets/img/1041-5184x2916.jpg new file mode 100644 index 00000000..64d8281b Binary files /dev/null and b/src/assets/img/1041-5184x2916.jpg differ diff --git a/src/assets/img/1051-4928x3264.jpg b/src/assets/img/1051-4928x3264.jpg new file mode 100644 index 00000000..736be3de Binary files /dev/null and b/src/assets/img/1051-4928x3264.jpg differ diff --git a/src/assets/img/106-2592x1728.jpg b/src/assets/img/106-2592x1728.jpg new file mode 100644 index 00000000..b360221e Binary files /dev/null and b/src/assets/img/106-2592x1728.jpg differ diff --git a/src/assets/img/1078-3000x2000.jpg b/src/assets/img/1078-3000x2000.jpg new file mode 100644 index 00000000..f6c6c2ed Binary files /dev/null and b/src/assets/img/1078-3000x2000.jpg differ diff --git a/src/components/Background/Background.jsx b/src/components/Background/Background.jsx new file mode 100644 index 00000000..712a340e --- /dev/null +++ b/src/components/Background/Background.jsx @@ -0,0 +1,20 @@ +import classNames from "classnames"; +import React from "react"; +import "./Background.scss"; + +export default class Background extends React.Component { + constructor(props) { + super(props); + } + render() { + const { isDarkMode } = this.props + const backgroundClass = classNames({ "bg-dark": isDarkMode }, { "bg-light": !isDarkMode }) + const backgroundImgClass = classNames({ "background-img-dark": isDarkMode }) + + return ( +
+
+
+ ); + } +} \ No newline at end of file diff --git a/src/components/Background/Background.scss b/src/components/Background/Background.scss new file mode 100644 index 00000000..4d98bfd0 --- /dev/null +++ b/src/components/Background/Background.scss @@ -0,0 +1,15 @@ +.background { + z-index: -1; +} + +.background-img { + background-image: linear-gradient(90deg, rgba(184, 100, 240, 0.7) 0%, rgba(131, 156, 249, 0.7) 100%), url("../../assets/img/1051-4928x3264.jpg") ; + width: 100%; + height: 35%; + background-size: cover; + background-position: center; +} + +.background-img-dark { + background-image: linear-gradient(90deg, rgba(93, 30, 136, 0.7) 0%, rgba(48, 70, 151, 0.7) 100%), url("../../assets/img/1051-4928x3264.jpg") ; +} \ No newline at end of file diff --git a/src/components/Background/index.js b/src/components/Background/index.js new file mode 100644 index 00000000..ab936295 --- /dev/null +++ b/src/components/Background/index.js @@ -0,0 +1 @@ +export { default } from "./Background"; diff --git a/src/components/ChangeMode/ChangeMode.jsx b/src/components/ChangeMode/ChangeMode.jsx new file mode 100644 index 00000000..0e82ddcc --- /dev/null +++ b/src/components/ChangeMode/ChangeMode.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import moonIcon from "../../assets/icons/moon.svg"; +import sunIcon from "../../assets/icons/sun.svg"; +import "./ChangeMode.scss" + +class ChangeMode extends React.Component { + constructor(props) { + super(props); + } + + render() { + const { handleTheme, isDarkMode } = this.props + return ( + change theme mode + ); + } +} + +export default ChangeMode; diff --git a/src/components/ChangeMode/ChangeMode.scss b/src/components/ChangeMode/ChangeMode.scss new file mode 100644 index 00000000..81bd3433 --- /dev/null +++ b/src/components/ChangeMode/ChangeMode.scss @@ -0,0 +1,4 @@ +.change-mode { + height: 2rem; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/ChangeMode/index.js b/src/components/ChangeMode/index.js new file mode 100644 index 00000000..f980a474 --- /dev/null +++ b/src/components/ChangeMode/index.js @@ -0,0 +1 @@ +export { default } from "./ChangeMode"; diff --git a/src/components/Menu/Menu.jsx b/src/components/Menu/Menu.jsx new file mode 100644 index 00000000..51663059 --- /dev/null +++ b/src/components/Menu/Menu.jsx @@ -0,0 +1,27 @@ +import classNames from "classnames"; +import React from "react" +import { Link } from "react-router-dom"; +import "./Menu.scss" + +export default class Menu extends React.Component { + constructor (props) { + super(props) + } + + render() { + const { handleClearAll, isDarkMode } = this.props + let totalPendingTasks = this.props.todos.filter(todo => !todo.completed).length + let menuClass = classNames({ "bg-dark text-white": isDarkMode }) + return ( + + ) + } +} \ No newline at end of file diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss new file mode 100644 index 00000000..d048eba3 --- /dev/null +++ b/src/components/Menu/Menu.scss @@ -0,0 +1,10 @@ +.menu-container { + font-size: 0.85rem; + height: 3rem; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.clear-all { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js new file mode 100644 index 00000000..cb50e07a --- /dev/null +++ b/src/components/Menu/index.js @@ -0,0 +1 @@ +export { default } from "./Menu" \ No newline at end of file diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx new file mode 100644 index 00000000..d926ef86 --- /dev/null +++ b/src/components/Toast/Toast.jsx @@ -0,0 +1,22 @@ +import React from "react" + +export default class Toast extends React.Component { + constructor (props) { + super(props) + } + + render() { + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/components/Toast/Toast.scss b/src/components/Toast/Toast.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Toast/index.js b/src/components/Toast/index.js new file mode 100644 index 00000000..6fb26b01 --- /dev/null +++ b/src/components/Toast/index.js @@ -0,0 +1 @@ +export { default } from "./Toast" \ No newline at end of file diff --git a/src/components/TodoItem/TodoItem.jsx b/src/components/TodoItem/TodoItem.jsx new file mode 100644 index 00000000..0e09a786 --- /dev/null +++ b/src/components/TodoItem/TodoItem.jsx @@ -0,0 +1,60 @@ +import React from "react" + +import checkImg from "../../assets/icons/check.svg" + +import "./TodoItem.scss" +import classNames from "classnames" + +export default class TodoItem extends React.Component { + constructor(props) { + super(props) + + this.handleDeleteTask = this.handleDeleteTask.bind(this); + this.handleCheckboxTask = this.handleCheckboxTask.bind(this); + this.handleEditTask = this.handleEditTask.bind(this) + } + + handleDeleteTask() { + const { handleDelete} = this.props + const {id} = this.props.todo + handleDelete(id); + } + + handleEditTask() { + const { handleEdit } = this.props + const {id} = this.props.todo + handleEdit(id); + } + + handleCheckboxTask() { + const {todo, handleCheckbox} = this.props; + handleCheckbox(todo); + } + + render() { + const { id, task, completed } = this.props.todo + const { isDarkMode } = this.props + + let taskClass = classNames({ "task-completed": completed }, { "task-pending": !completed }, { "text-light": isDarkMode }) + + let labelClass = "label "; + labelClass += classNames(completed ? "label-active" : "") + + let iconClass = classNames({ "text-light": isDarkMode }) + + return ( +
  • +
    + + +

    {task}

    +
    + +
    +
    ✎
    +
    ✖
    +
    +
    • + ) + } +} \ No newline at end of file diff --git a/src/components/TodoItem/TodoItem.scss b/src/components/TodoItem/TodoItem.scss new file mode 100644 index 00000000..4ed21148 --- /dev/null +++ b/src/components/TodoItem/TodoItem.scss @@ -0,0 +1,42 @@ +.task-button { + visibility: hidden; + cursor: pointer; +} + +.list-element:hover .task-button { + visibility: visible; +} + +.new-todo { + border-width: 0px; + border: none; + border-radius: 5px; + outline: none; + padding-left: 3rem; +} + +.task-completed { + text-decoration: line-through; + color: lightgrey; +} + +.label { + width: 1.5rem; + height: 1.5rem; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid lightgrey; + border-radius: 50%; + cursor: pointer; + + &-active { + border: 1px solid transparent; + background: linear-gradient(90deg, rgba(184, 100, 240, 0.7) 0%, rgba(131, 156, 249, 0.7) 100%); + } +} + +.check-image { + width: 60%; +} \ No newline at end of file diff --git a/src/components/TodoItem/index.js b/src/components/TodoItem/index.js new file mode 100644 index 00000000..03d9ad6a --- /dev/null +++ b/src/components/TodoItem/index.js @@ -0,0 +1 @@ +export { default } from "./TodoItem" \ No newline at end of file diff --git a/src/components/TodoItemEditing/TodoItemEditing.jsx b/src/components/TodoItemEditing/TodoItemEditing.jsx new file mode 100644 index 00000000..9ce5be18 --- /dev/null +++ b/src/components/TodoItemEditing/TodoItemEditing.jsx @@ -0,0 +1,41 @@ +import classNames from "classnames" +import React from "react" +import "./TodoItemEditing.scss" + +export default class TodoItemEditing extends React.Component { + constructor(props) { + super(props) + this.handleInput = this.handleInput.bind(this) + this.handleEditTask = this.handleEditTask.bind(this) + } + + handleInput(event) { + if (event.key === "Enter") { + const { handleEditName } = this.props + let id = this.props.todo.id + let newTask = event.target.value + handleEditName(id, newTask) + this.handleEditTask() + } + } + + handleEditTask() { + const { handleEdit } = this.props + const {id} = this.props.todo + handleEdit(id); + } + + render() { + const { task } = this.props.todo + const { isDarkMode } = this.props + const inputClass = classNames({ "bg-secondary text-light": isDarkMode }) + const adviceClass = classNames({ "text-light": isDarkMode }) + return ( +
  • +
    + Press enter to save +
    +
    • + ) + } +} \ No newline at end of file diff --git a/src/components/TodoItemEditing/TodoItemEditing.scss b/src/components/TodoItemEditing/TodoItemEditing.scss new file mode 100644 index 00000000..076e089f --- /dev/null +++ b/src/components/TodoItemEditing/TodoItemEditing.scss @@ -0,0 +1,10 @@ +.edit-todo { + width: 30rem; + overflow: hidden; +} + +.advice-edit-todo { + margin-left: 1rem; + font-size: 0.75rem; + text-align: end; +} \ No newline at end of file diff --git a/src/components/TodoItemEditing/index.js b/src/components/TodoItemEditing/index.js new file mode 100644 index 00000000..ad34883d --- /dev/null +++ b/src/components/TodoItemEditing/index.js @@ -0,0 +1 @@ +export { default } from "./TodoItemEditing" \ No newline at end of file diff --git a/src/components/TodoList/TodoList.jsx b/src/components/TodoList/TodoList.jsx new file mode 100644 index 00000000..f4e43ece --- /dev/null +++ b/src/components/TodoList/TodoList.jsx @@ -0,0 +1,27 @@ +import React from "react" +import TodoItem from "../TodoItem" +import TodoItemEditing from "../TodoItemEditing" +import classNames from "classnames"; +import "./TodoList.scss" + +export default class TodoList extends React.Component { + constructor(props) { + super(props); + + } + + + + render() { + const { todos, handleDelete, handleCheckbox, handleEdit, handleEditName, isDarkMode } = this.props + let todoListClasses = classNames({ "bg-dark": isDarkMode }, { "bg-white": !isDarkMode }) + return ( + + ) + } +} \ No newline at end of file diff --git a/src/components/TodoList/TodoList.scss b/src/components/TodoList/TodoList.scss new file mode 100644 index 00000000..9e8193e2 --- /dev/null +++ b/src/components/TodoList/TodoList.scss @@ -0,0 +1,26 @@ +.todo-list { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + padding: 0; + margin: 0; + height: 18rem; + overflow: scroll; + overflow-x: hidden; + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-thumb { + background: linear-gradient(90deg, rgba(184, 100, 240, 0.7) 0%, rgba(131, 156, 249, 0.7) 100%); + border-radius: 4px; + } +} + +.todo-list li { + height: 3rem; + list-style-type: none; + border-bottom: 1px solid lightgray; + padding: 0 1rem; + margin: 0; +} \ No newline at end of file diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js new file mode 100644 index 00000000..fb8f0132 --- /dev/null +++ b/src/components/TodoList/index.js @@ -0,0 +1 @@ +export { default } from "./TodoList" \ No newline at end of file