From 7590e1a8c85ac0a58d778471155eeb164d072d1a Mon Sep 17 00:00:00 2001 From: Johanna Leonsson Date: Wed, 19 Apr 2023 23:26:49 +0200 Subject: [PATCH 01/19] started with project and some styling --- code/.gitignore | 23 - code/package-lock.json | 463 ++++++++++++++++++++- code/package.json | 5 +- code/src/App.js | 21 +- code/src/components/AddNote.js | 36 ++ code/src/components/Header.js | 14 + code/src/components/NoteList.js | 20 + code/src/components/Styling/GlobalStyle.js | 69 +++ code/src/index.css | 38 +- code/src/reducers/reminders.js | 33 ++ 10 files changed, 673 insertions(+), 49 deletions(-) delete mode 100644 code/.gitignore create mode 100644 code/src/components/AddNote.js create mode 100644 code/src/components/Header.js create mode 100644 code/src/components/NoteList.js create mode 100644 code/src/components/Styling/GlobalStyle.js create mode 100644 code/src/reducers/reminders.js diff --git a/code/.gitignore b/code/.gitignore deleted file mode 100644 index 4d29575de..000000000 --- a/code/.gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..c8e1f62e0 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@reduxjs/toolkit": "^1.9.5", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -16,7 +17,9 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-redux": "^8.0.5", + "styled-components": "^5.3.9" }, "devDependencies": { "react-scripts": "5.0.1" @@ -129,7 +132,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -2153,6 +2155,29 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -3124,6 +3149,29 @@ } } }, + "node_modules/@reduxjs/toolkit": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz", + "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==", + "dependencies": { + "immer": "^9.0.21", + "redux": "^4.2.1", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.8" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3621,6 +3669,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -3695,6 +3752,11 @@ "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -3713,6 +3775,16 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "node_modules/@types/react": { + "version": "18.0.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.37.tgz", + "integrity": "sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3728,6 +3800,11 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -3768,6 +3845,11 @@ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", "dev": true }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -4867,6 +4949,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", + "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5204,6 +5306,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5691,6 +5801,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz", @@ -5899,6 +6017,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -6095,6 +6223,11 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -8515,6 +8648,14 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -8800,10 +8941,9 @@ } }, "node_modules/immer": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", - "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==", - "dev": true, + "version": "9.0.21", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", + "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/immer" @@ -11695,8 +11835,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -13940,8 +14079,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -14375,6 +14513,49 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-redux": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", + "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "node_modules/react-redux/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14531,6 +14712,22 @@ "node": "*" } }, + "node_modules/redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, + "node_modules/redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -14686,6 +14883,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -15206,6 +15408,11 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "dev": true }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15615,6 +15822,35 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", + "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -16340,6 +16576,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -17460,7 +17704,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -18792,6 +19035,29 @@ "dev": true, "requires": {} }, + "@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "requires": { + "@emotion/memoize": "^0.8.0" + } + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -19509,6 +19775,17 @@ "source-map": "^0.7.3" } }, + "@reduxjs/toolkit": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz", + "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==", + "requires": { + "immer": "^9.0.21", + "redux": "^4.2.1", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.8" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19876,6 +20153,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -19950,6 +20236,11 @@ "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -19968,6 +20259,16 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "@types/react": { + "version": "18.0.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.37.tgz", + "integrity": "sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19983,6 +20284,11 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -20023,6 +20329,11 @@ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", "dev": true }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -20831,6 +21142,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.2" } }, + "babel-plugin-styled-components": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", + "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -21099,6 +21427,11 @@ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", "dev": true }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -21471,6 +21804,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz", @@ -21601,6 +21939,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -21748,6 +22096,11 @@ } } }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -23521,6 +23874,14 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -23739,10 +24100,9 @@ "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==" }, "immer": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", - "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==", - "dev": true + "version": "9.0.21", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", + "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==" }, "import-fresh": { "version": "3.3.0", @@ -25874,8 +26234,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.debounce": { "version": "4.0.8", @@ -27349,8 +27708,7 @@ "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "prelude-ls": { "version": "1.2.1", @@ -27678,6 +28036,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-redux": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", + "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -27800,6 +28178,20 @@ } } }, + "redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -27924,6 +28316,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -28306,6 +28703,11 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "dev": true }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -28620,6 +29022,23 @@ "dev": true, "requires": {} }, + "styled-components": { + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", + "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -29163,6 +29582,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/code/package.json b/code/package.json index 7aad26ebc..8ac5975e0 100644 --- a/code/package.json +++ b/code/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@reduxjs/toolkit": "^1.9.5", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -11,7 +12,9 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-redux": "^8.0.5", + "styled-components": "^5.3.9" }, "scripts": { "start": "react-scripts start", diff --git a/code/src/App.js b/code/src/App.js index f2007d229..2655e7f71 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,24 @@ import React from 'react'; +import { Provider } from 'react-redux'; +import { configureStore, combineReducers } from '@reduxjs/toolkit'; +import { NoteList } from 'components/NoteList'; +import { AddNote } from 'components/AddNote'; +import { notereminder } from 'reducers/reminders' +import { Header } from 'components/Header'; +import { MainBox } from './components/Styling/GlobalStyle' export const App = () => { + const reducer = combineReducers({ + notes: notereminder.reducer + }); + const store = configureStore({ reducer }); return ( -
- Find me in src/app.js! -
+ + +
+ + + + ); } diff --git a/code/src/components/AddNote.js b/code/src/components/AddNote.js new file mode 100644 index 000000000..77216e2f0 --- /dev/null +++ b/code/src/components/AddNote.js @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { notereminder } from 'reducers/reminders'; +import { AddBtn } from './Styling/GlobalStyle' + +export const AddNote = () => { + const [inputValue, setInputValue] = useState(''); + const dispatch = useDispatch(); + const capitalizeFirstLetter = (str) => { + return str.charAt(0).toUpperCase() + str.slice(1); + } + + const onFormSubmit = (event) => { + event.preventDefault(); + const newNote = { + id: Date.now().toString(), + name: capitalizeFirstLetter(inputValue), + isDone: false + } + dispatch(notereminder.actions.addNote(newNote)) + setInputValue(''); + } + return ( +
+
+ + + +
+
+ ) +} + +// https://random.org for finding id thats random enough +// white space   \ No newline at end of file diff --git a/code/src/components/Header.js b/code/src/components/Header.js new file mode 100644 index 000000000..1c3a6dfbf --- /dev/null +++ b/code/src/components/Header.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { HeaderH1, Paragraph } from './Styling/GlobalStyle' + +export const Header = () => { + return ( +
+ Get it done... + + Need to remember what do to next?
+ Add your task below. + +
+ ); +} diff --git a/code/src/components/NoteList.js b/code/src/components/NoteList.js new file mode 100644 index 000000000..dbceb1bf1 --- /dev/null +++ b/code/src/components/NoteList.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { TaskBox } from './Styling/GlobalStyle' + +export const NoteList = () => { + const noteList = useSelector((store) => store.notes.items) + return ( +
+
    + {noteList.map((singleNote) => { + return ( + +
  • {singleNote.name}
    • +     + ) + })} +
+
+ ) +} \ No newline at end of file diff --git a/code/src/components/Styling/GlobalStyle.js b/code/src/components/Styling/GlobalStyle.js new file mode 100644 index 000000000..e5b1e3965 --- /dev/null +++ b/code/src/components/Styling/GlobalStyle.js @@ -0,0 +1,69 @@ +import styled, { createGlobalStyle } from 'styled-components'; + +const GlobalStyles = createGlobalStyle` +*, +body { + margin: 0; + padding: 0; +} +` + +export const MainBox = styled.div` + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--main-color); + width: 90vw; + height: 100%; + border-radius: 25px; + margin: auto; + margin-top: 20px; + padding-bottom: 20px; + + @media (max-width: 667px) { + +} +` +export const HeaderH1 = styled.h1` + font-size: 38px; + font-weight: 900; + margin: 20px 0; + padding-top: 30px; +`; + +export const Paragraph = styled.p` + font-size: 14px; + font-weight: 300; + margin: 0; + padding-top: 10px; +`; + +export const AddBtn = styled.button` + background-color: var(--box-color); + border: none; + font-family: 'Lato', sans-serif; + font-size: 25px; + font-weight: 700; + color: var( --text-color); + border-radius: 5px; + margin-left: 4px; + margin-top: 10px; + padding: 3px 10px; + cursor: pointer; + &:hover { + color: var(--hover-color); + } +`; + +export const TaskBox = styled.div` + display: flex; + flex-direction: column; + align-items: left; + background-color: var(--box-color); + width: 230px; + height: 100%; + padding: 20px; + border-radius: 10px; + margin-top: 20px; + ` +export default GlobalStyles; \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..228de4bf0 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -1,13 +1,45 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,700;0,900;1,100;1,400&display=swap'); + +:root { + --bg-color: #323030; + --text-color: #fff; + --hover-color: #E7FF86; + + --main-color: #656464; + --box-color: #312F2F; + } + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: var(--bg-color); + color: var(--text-color); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +input { + border: none; + border-radius: 3px; + font-size: 16px; + height: 22px; + padding: 5px 8px; + width: 58vw; + margin-top: 10px; +} + +li { + list-style: none; + margin: 0; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/code/src/reducers/reminders.js b/code/src/reducers/reminders.js new file mode 100644 index 000000000..086ffb84d --- /dev/null +++ b/code/src/reducers/reminders.js @@ -0,0 +1,33 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const initialState = { + items: [ + { + id: '238uskfhslkjdfh98', + name: 'Bobsebulbus', + isCaught: false + }, + { + id: '238uskfhslkjdfh99', + name: 'Jigglypuff', + isCaught: true + }, + { + id: '238uskfhslkjdfh100', + name: 'BonBon', + isCaught: false + } + ] +} + +export const notereminder = createSlice({ + name: 'notereminder', + initialState, + reducers: { + addNote: (store, action) => { + // Make it immutable(assign it a new value) by giving it a spread operator ... + // can also be used to add a property to an object + store.items = [...store.items, action.payload]; + } + } +}) \ No newline at end of file From c17901e8d45408876cf770905ecd33c6c84e4bc6 Mon Sep 17 00:00:00 2001 From: Johanna Leonsson Date: Thu, 20 Apr 2023 18:31:20 +0200 Subject: [PATCH 02/19] added footer, continued styling and trying to override default style --- code/package-lock.json | 11 ++++++ code/package.json | 1 + code/public/index.html | 1 + code/src/App.js | 2 ++ code/src/components/AddNote.js | 4 ++- code/src/components/Footer.js | 29 +++++++++++++++ code/src/components/Styling/GlobalStyle.js | 42 +++++++++++++++------- code/src/index.css | 34 ++++++++++++++++-- 8 files changed, 108 insertions(+), 16 deletions(-) create mode 100644 code/src/components/Footer.js diff --git a/code/package-lock.json b/code/package-lock.json index c8e1f62e0..accf12f1f 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -16,6 +16,7 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "normalize.css": "^8.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", @@ -12257,6 +12258,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -26559,6 +26565,11 @@ "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==", "dev": true }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", diff --git a/code/package.json b/code/package.json index 8ac5975e0..acc7db3ed 100644 --- a/code/package.json +++ b/code/package.json @@ -11,6 +11,7 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "normalize.css": "^8.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..c31286907 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -4,6 +4,7 @@ + - Technigo React App + Get it done - week 11 diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js index 93dbe5d09..7823dee2d 100644 --- a/code/src/components/Footer.js +++ b/code/src/components/Footer.js @@ -21,7 +21,7 @@ export const Footer = () => { rel="noopener noreferrer"> - Designed and created by
+ Created by
Johanna Leonsson diff --git a/code/src/components/NoteList.js b/code/src/components/NoteList.js index bdc1fe7f3..c8be279b8 100644 --- a/code/src/components/NoteList.js +++ b/code/src/components/NoteList.js @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { notereminder } from 'reducers/reminders'; -import { TaskBox, TrashBtn, DeleteBox } from './Styling/GlobalStyle' +import { TaskBox, TrashBtn, DeleteBox, RemoveBtn, TaskParagraph } from './Styling/GlobalStyle' export const NoteList = () => { const noteList = useSelector((store) => store.notes.items); @@ -18,46 +18,35 @@ export const NoteList = () => { } return (
- {noteList.map((singleNote) => { return ( - ) })} - Delete all - - - + Remove all tasks +
) diff --git a/code/src/components/Styling/GlobalStyle.js b/code/src/components/Styling/GlobalStyle.js index cab091914..3783cb9ee 100644 --- a/code/src/components/Styling/GlobalStyle.js +++ b/code/src/components/Styling/GlobalStyle.js @@ -69,15 +69,19 @@ export const TaskBox = styled.div` padding: 20px; margin-top: 10px; border-radius: 10px; - ` +export const TaskParagraph = styled.p` + font-size: 14px; + font-weight: 300; + margin: 0; +`; export const TrashBtn = styled.button` background-color: transparent; border: none; cursor: pointer; i { - font-size: 20px; + font-size: 18px; color: var(--main-color); padding: 0; &:hover { @@ -87,26 +91,25 @@ export const TrashBtn = styled.button` ` export const DeleteBox = styled.div` display: flex; - justify-content: space-between; + justify-content: center; align-items: center; background-color: var(--box-color); - width: 70vw; - max-width: 300px; + max-width: 118px; height: 18px; - padding: 10px 20px; - margin-top: 10px; + padding: 10px 10px; + margin: 10px auto; border-radius: 10px; - font-size: 13px; - font-weight: 700; - color: var(--main-color); - i { - font-size: 15px; - color: var(--main-color); - padding-bottom: 6px; - &:hover { - color: var(--hover-color); - } - } +` +export const RemoveBtn = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + color: var(--main-color); + font-size: 13px; + font-weight: 700; + &:hover { + color: var(--hover-color); + } ` export const Foot = styled.div` @@ -119,7 +122,7 @@ export const Foot = styled.div` i { font-size: 20px; color: var(--text-color); - padding: 0 18px 0 18px; + padding: 0 18px 0 15px; &:hover { color: var(--hover-color); } diff --git a/code/src/icon/check-solid.svg b/code/src/icon/check-solid.svg new file mode 100644 index 000000000..ba7a20b70 --- /dev/null +++ b/code/src/icon/check-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 9686fe29e..74c5fc52c 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,6 +5,8 @@ --bg-color: #212121; --text-color: #fff; --hover-color: #E7FF86; + --fun-color: #ccff00; + --main-color: #4d4c4c; --box-color: #312F2F; @@ -30,11 +32,6 @@ form { margin: 10px 5px; } -.input-checkbox { - width: 30px; - margin: 0; -} - .input-text { border: none; border-radius: 3px; @@ -58,14 +55,9 @@ i:hover { color: var(--hover-color); } -li { +li, ul { list-style: none; margin: 0; -} - -ul { - list-style-type: none; - margin: 0; padding: 0; } @@ -77,4 +69,63 @@ a { a:hover{ color: var(--hover-color); +} + +[type="checkbox"] { + opacity: 0; +} + +[type="checkbox"] + label { + position: relative; + padding-left: 30px; + cursor: pointer; + display: inline-block; + color:var(--text-color); + line-height: 12px; +} + +[type="checkbox"] + label::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 12px; + height: 12px; + outline: 1px solid var(--text-color); + background: var(--main-color); + border-radius: 50%; +} + +[type="checkbox"]:checked + label::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 12px; + height: 12px; + outline: 1px solid var(--hover-color); + background: var(--fun-color); + border-radius: 50%; +} + +[type="checkbox"]:checked + label::after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 12px; + height: 12px; + background-size: contain; + transform: scale(1); + opacity: 1; +} + +[type="checkbox"]:not(:checked) + label::after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 12px; + height: 12px; + opacity: 0; } \ No newline at end of file diff --git a/code/src/reducers/reminders.js b/code/src/reducers/reminders.js index abef4c21b..49a542523 100644 --- a/code/src/reducers/reminders.js +++ b/code/src/reducers/reminders.js @@ -4,17 +4,17 @@ const initialState = { items: [ { id: '238uskfhslkjdfh98', - todo: 'Bobsebulbus', + todo: 'Buy a turtle', isDone: false }, { id: '238uskfhslkjdfh99', - todo: 'Jigglypuff', + todo: 'Run a marathon', isDone: false }, { id: '238uskfhslkjdfh100', - todo: 'BonBon', + todo: 'Plan the vacation 🏝️', isDone: false } ] From 6c74d67b730309e3baa2b69092d4fb2a798b714a Mon Sep 17 00:00:00 2001 From: Johanna Leonsson Date: Sat, 22 Apr 2023 14:56:06 +0200 Subject: [PATCH 12/19] updated the input with styling for linebreak and added max character --- code/public/index.html | 2 +- code/src/components/AddNote.js | 20 ++++++++++++++------ code/src/components/Styling/GlobalStyle.js | 5 +++++ code/src/index.css | 2 +- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/code/public/index.html b/code/public/index.html index f1304d1ba..4262107c0 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -3,7 +3,7 @@ - + diff --git a/code/src/components/AddNote.js b/code/src/components/AddNote.js index b7cf52e11..4ee76efb4 100644 --- a/code/src/components/AddNote.js +++ b/code/src/components/AddNote.js @@ -1,15 +1,22 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { notereminder } from 'reducers/reminders'; -import { AddBtn } from './Styling/GlobalStyle' +import { AddBtn } from './Styling/GlobalStyle'; export const AddNote = () => { const [inputValue, setInputValue] = useState(''); + const [charCount, setCharCount] = useState(0); const dispatch = useDispatch(); + const capitalizeFirstLetter = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); } + const onInputChange = (event) => { + setInputValue(event.target.value); + setCharCount(event.target.value.length); + } + const onFormSubmit = (event) => { event.preventDefault(); const newNote = { @@ -19,7 +26,9 @@ export const AddNote = () => { } dispatch(notereminder.actions.addNote(newNote)) setInputValue(''); + setCharCount(0); } + return (
@@ -27,18 +36,17 @@ export const AddNote = () => { setInputValue(event.target.value)} + onChange={onInputChange} id="addNoteInput" type="text" - placeholder="Add task here..." /> + placeholder="Add task here..." + maxLength={100} /> + {100 - charCount} / 100
) } - -// https://random.org for finding id thats random enough -// white space   \ No newline at end of file diff --git a/code/src/components/Styling/GlobalStyle.js b/code/src/components/Styling/GlobalStyle.js index 3783cb9ee..91646c9ad 100644 --- a/code/src/components/Styling/GlobalStyle.js +++ b/code/src/components/Styling/GlobalStyle.js @@ -73,7 +73,12 @@ export const TaskBox = styled.div` export const TaskParagraph = styled.p` font-size: 14px; font-weight: 300; + width: 50vw; margin: 0; + overflow-wrap: break-word; + @media (min-width: 500px) { + width: 230px; + } `; export const TrashBtn = styled.button` diff --git a/code/src/index.css b/code/src/index.css index 74c5fc52c..ae20bec3f 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -76,7 +76,7 @@ a:hover{ } [type="checkbox"] + label { - position: relative; + position: absolute; padding-left: 30px; cursor: pointer; display: inline-block; From cda0210eb52651cab9f70de4436a478bf84a5782 Mon Sep 17 00:00:00 2001 From: Johanna Leonsson Date: Sun, 23 Apr 2023 12:23:20 +0200 Subject: [PATCH 13/19] some tiny details --- code/src/components/AddNote.js | 6 ++-- code/src/components/Styling/GlobalStyle.js | 34 +++++++++++++++------- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/code/src/components/AddNote.js b/code/src/components/AddNote.js index 4ee76efb4..dfd7becc1 100644 --- a/code/src/components/AddNote.js +++ b/code/src/components/AddNote.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { notereminder } from 'reducers/reminders'; -import { AddBtn } from './Styling/GlobalStyle'; +import { AddBtn, CounterP } from './Styling/GlobalStyle'; export const AddNote = () => { const [inputValue, setInputValue] = useState(''); @@ -46,7 +46,9 @@ export const AddNote = () => { - {100 - charCount} / 100 + + {100 - charCount} / 100 + ) } diff --git a/code/src/components/Styling/GlobalStyle.js b/code/src/components/Styling/GlobalStyle.js index 91646c9ad..1a2cceec0 100644 --- a/code/src/components/Styling/GlobalStyle.js +++ b/code/src/components/Styling/GlobalStyle.js @@ -6,7 +6,7 @@ body { margin: 0; padding: 0; } -` +`; export const MainBox = styled.div` display: flex; @@ -20,7 +20,8 @@ export const MainBox = styled.div` margin: auto; margin-top: 20px; padding-bottom: 20px; -` +`; + export const HeaderH1 = styled.h1` font-size: 38px; font-weight: 900; @@ -38,6 +39,7 @@ export const Paragraph = styled.p` export const AddBtn = styled.button` background-color: transparent; border: none; + margin-top: 1px; cursor: pointer; &:hover { color: var(--hover-color); @@ -56,7 +58,14 @@ export const CounterBox = styled.div` font-size: 13px; font-weight: 700; color: var(--text-color); -` +`; + +export const CounterP = styled.p` + font-size: 11px; + font-weight: 300; + margin: 0; + padding-left: 10px; +`; export const TaskBox = styled.div` display: flex; @@ -69,7 +78,8 @@ export const TaskBox = styled.div` padding: 20px; margin-top: 10px; border-radius: 10px; -` +`; + export const TaskParagraph = styled.p` font-size: 14px; font-weight: 300; @@ -93,18 +103,20 @@ export const TrashBtn = styled.button` color: var(--hover-color); } } -` +`; + export const DeleteBox = styled.div` display: flex; justify-content: center; align-items: center; background-color: var(--box-color); - max-width: 118px; + max-width: 122px; height: 18px; padding: 10px 10px; margin: 10px auto; border-radius: 10px; -` +`; + export const RemoveBtn = styled.button` background-color: transparent; border: none; @@ -115,24 +127,24 @@ export const RemoveBtn = styled.button` &:hover { color: var(--hover-color); } -` +`; export const Foot = styled.div` display: flex; flex-wrap: wrap; justify-content: center; - width: 200px; + width: 160px; margin-top: 20px; i { font-size: 20px; color: var(--text-color); - padding: 0 18px 0 15px; + padding: 0 9px; &:hover { color: var(--hover-color); } } -` +`; export const FootParagraph = styled.p` font-size: 12px; From 56f3c590d0309d4d018fd9343df0f8632661580a Mon Sep 17 00:00:00 2001 From: Johanna Leonsson Date: Sun, 23 Apr 2023 12:25:17 +0200 Subject: [PATCH 14/19] changed initial state --- code/src/reducers/reminders.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/code/src/reducers/reminders.js b/code/src/reducers/reminders.js index 49a542523..889934547 100644 --- a/code/src/reducers/reminders.js +++ b/code/src/reducers/reminders.js @@ -4,17 +4,7 @@ const initialState = { items: [ { id: '238uskfhslkjdfh98', - todo: 'Buy a turtle', - isDone: false - }, - { - id: '238uskfhslkjdfh99', - todo: 'Run a marathon', - isDone: false - }, - { - id: '238uskfhslkjdfh100', - todo: 'Plan the vacation 🏝️', + todo: 'Add a task and pet a turtle.', isDone: false } ] From f6386cb48e50e0a321060a20d8bf30d27e7559a9 Mon Sep 17 00:00:00 2001 From: Johanna Leonsson Date: Sun, 23 Apr 2023 12:32:41 +0200 Subject: [PATCH 15/19] og updated --- code/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/public/index.html b/code/public/index.html index 4262107c0..756e8f183 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -6,7 +6,7 @@ - +