From c5104f432ce9504e6281e6f46064c3fdbcbf2555 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 3 Jun 2022 11:56:19 +0430 Subject: [PATCH] Added loader + Improvements. --- README.md | 2 +- package-lock.json | 206 ++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 17 ++- src/componets/AddItem.js | 9 +- src/componets/List.js | 11 +- src/componets/Loader.js | 13 +++ src/componets/NoResults.js | 12 ++ src/componets/TagSelection.js | 8 +- src/componets/ViewArchived.js | 4 +- src/modules/addItem.js | 6 +- src/styles/AddItem.css | 7 +- src/styles/App.css | 9 ++ src/styles/Filters.css | 6 +- src/styles/Loader.css | 7 ++ src/styles/Sort.css | 6 +- src/styles/index.css | 2 +- 17 files changed, 298 insertions(+), 28 deletions(-) create mode 100644 src/componets/Loader.js create mode 100644 src/componets/NoResults.js create mode 100644 src/styles/Loader.css diff --git a/README.md b/README.md index b599947..bd10de8 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ ### Linux/MacOS: 1. Make sure the MongoDB database and collection is up and running. -2. Edit `/src/config.json` accordingly. +2. Edit `/src/config.js` accordingly. 3. Head to the main folder using terminal and run: `(cd api && npm install --legacy-peer-deps) && npm install --legacy-peer-deps` for the dependancies. diff --git a/package-lock.json b/package-lock.json index 192a061..9504d19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react": "^18.0.0", "react-dom": "^18.0.0", "react-lazyload": "^3.2.0", + "react-loader-spinner": "^6.0.0-0", "react-scripts": "5.0.0", "react-select": "^5.3.2", "web-vitals": "^2.1.4" @@ -2049,6 +2050,14 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", + "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", + "dependencies": { + "@emotion/memoize": "^0.7.4" + } + }, "node_modules/@emotion/memoize": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", @@ -2097,6 +2106,11 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" }, + "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", @@ -4820,6 +4834,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "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.11", + "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", @@ -5131,6 +5165,11 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5597,6 +5636,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.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", @@ -5778,6 +5825,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "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", @@ -13307,6 +13364,26 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, + "node_modules/react-loader-spinner": { + "version": "6.0.0-0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.0.0-0.tgz", + "integrity": "sha512-ANUS2nWUNALH933d04IY3iT6aIYuizI6mQpzHjH5i4aKdnLhm68JLICd2CKdOgxCNixM5iKqA8QSNWBdKe4++g==", + "dependencies": { + "@babel/runtime": "^7.14.6", + "prop-types": "^15.8.1", + "styled-components": "^5.3.3", + "styled-tools": "^1.7.2", + "tslib": "^2.3.0" + }, + "engines": { + "npm": "please-use-yarn", + "yarn": ">= 1.19.1" + }, + "peerDependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14084,6 +14161,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "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", @@ -14481,6 +14563,41 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "hasInstallScript": true, + "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/styled-tools": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz", + "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==" + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -17521,6 +17638,14 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "@emotion/is-prop-valid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", + "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, "@emotion/memoize": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", @@ -17557,6 +17682,11 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" }, + "@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", @@ -19558,6 +19688,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "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.11", + "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", @@ -19801,6 +19948,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -20156,6 +20308,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.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", @@ -20261,6 +20418,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "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", @@ -25543,6 +25710,18 @@ "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz", "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==" }, + "react-loader-spinner": { + "version": "6.0.0-0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.0.0-0.tgz", + "integrity": "sha512-ANUS2nWUNALH933d04IY3iT6aIYuizI6mQpzHjH5i4aKdnLhm68JLICd2CKdOgxCNixM5iKqA8QSNWBdKe4++g==", + "requires": { + "@babel/runtime": "^7.14.6", + "prop-types": "^15.8.1", + "styled-components": "^5.3.3", + "styled-tools": "^1.7.2", + "tslib": "^2.3.0" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -26114,6 +26293,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "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", @@ -26412,6 +26596,28 @@ "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==" }, + "styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "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" + } + }, + "styled-tools": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz", + "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==" + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", diff --git a/package.json b/package.json index f244f9c..9bc8062 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "react": "^18.0.0", "react-dom": "^18.0.0", "react-lazyload": "^3.2.0", + "react-loader-spinner": "^6.0.0-0", "react-scripts": "5.0.0", "react-select": "^5.3.2", "web-vitals": "^2.1.4" diff --git a/src/App.js b/src/App.js index 700adeb..fb28b4e 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,8 @@ import Sort from './componets/Sort'; import sortList from './modules/sortList'; import filter from './modules/filterData'; import concatTags from './modules/concatTags'; +import NoResults from './componets/NoResults'; +import Loader from './componets/Loader'; function App() { const [data, setData] = useState([]), @@ -19,7 +21,12 @@ function App() { [nameChecked, setNameChecked] = useState(true), [descriptionChecked, setDescriptionChecked] = useState(true), [tagsChecked, setTagsChecked] = useState(true), - [sortBy, setSortBy] = useState('Default'); + [sortBy, setSortBy] = useState('Default'), + [loader, setLoader] = useState(false); + + function SetLoader(x) { + setLoader(x) + } function handleNameCheckbox() { setNameChecked(!nameChecked); @@ -66,6 +73,7 @@ function App() { useEffect(() => { fetchData(); + // eslint-disable-next-line }, [sortBy]); useEffect(() => { @@ -79,12 +87,14 @@ function App() { -

{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}

+

{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : null}

+ {numberOfResults === 0 ? : null} + {sortBox ? : null} {newBox ? concatTags(data)} /> : null} + + {loader ? : null} ); } diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index 66cff53..16a85ee 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -3,11 +3,16 @@ import '../styles/AddItem.css'; import TagSelection from './TagSelection'; import addItem from '../modules/addItem'; -const AddItem = ({onExit, reFetch, tags}) => { +const AddItem = ({onExit, reFetch, tags, SetLoader}) => { const [name, setName] = useState(''); const [link, setLink] = useState(''); const [tag, setTag] = useState([]); + function newItem() { + SetLoader(true) + addItem(name, link, tag, reFetch, onExit, SetLoader); + } + function SetName(e) { setName(e.target.value); } @@ -39,7 +44,7 @@ const AddItem = ({onExit, reFetch, tags}) => {

Tags:

- + diff --git a/src/componets/List.js b/src/componets/List.js index 54787e1..a832071 100644 --- a/src/componets/List.js +++ b/src/componets/List.js @@ -6,22 +6,23 @@ import deleteEntity from '../modules/deleteEntity'; const List = ({data, reFetch}) => { return (
+ {/* eslint-disable-next-line */} {data.map((e, i) => { try { const url = new URL(e.link); const favicon = 'http://www.google.com/s2/favicons?domain=' + url.hostname; - return + return (
- +
- {i + 1}. {e.name} ({url.hostname}) + {i + 1}. {e.name} ({url.hostname})
{e.title}
{e.tag.map((e, i) => { - return
{e}
+ return (
{e}
) })}
@@ -31,7 +32,7 @@ const List = ({data, reFetch}) => {
deleteEntity(e._id, reFetch)}>
- + ) } catch (e) { console.log(e); } diff --git a/src/componets/Loader.js b/src/componets/Loader.js new file mode 100644 index 0000000..1afc0ad --- /dev/null +++ b/src/componets/Loader.js @@ -0,0 +1,13 @@ +import '../styles/Loader.css'; +import { InfinitySpin } from 'react-loader-spinner' + + +const Loader = () => { + return ( +
+ +
+ ) +} + +export default Loader \ No newline at end of file diff --git a/src/componets/NoResults.js b/src/componets/NoResults.js new file mode 100644 index 0000000..450e5f6 --- /dev/null +++ b/src/componets/NoResults.js @@ -0,0 +1,12 @@ +import React from 'react' + +const NoResults = () => { + return ( +
+

¯\_(ツ)_/¯

+

Nothing found.

+
+ ) +} + +export default NoResults; \ No newline at end of file diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js index fa402d1..c41faf9 100644 --- a/src/componets/TagSelection.js +++ b/src/componets/TagSelection.js @@ -1,4 +1,3 @@ -import { useState } from "react"; import CreatableSelect from "react-select/creatable"; const customStyles = { @@ -7,6 +6,11 @@ const customStyles = { color: '#a9a9a9', }), + multiValueRemove: (provided) => ({ + ...provided, + color: 'gray', + }), + indicatorSeparator: (provided) => ({ ...provided, display: 'none', @@ -17,7 +21,7 @@ const customStyles = { border: 'solid', borderWidth: '1px', borderRadius: '0px', - borderColor: 'rgb(80, 80, 80)', + borderColor: 'rgb(141, 141, 141)', opacity: '90%', color: 'gray', background: '#273949', diff --git a/src/componets/ViewArchived.js b/src/componets/ViewArchived.js index 4c99124..d995e52 100644 --- a/src/componets/ViewArchived.js +++ b/src/componets/ViewArchived.js @@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => { return ( ) } diff --git a/src/modules/addItem.js b/src/modules/addItem.js index ae79532..90450b8 100644 --- a/src/modules/addItem.js +++ b/src/modules/addItem.js @@ -1,7 +1,7 @@ import config from '../config'; import { nanoid } from 'nanoid'; -const addItem = async (name, link, tag, reFetch, onExit) => { +const addItem = async (name, link, tag, reFetch, onExit, SetLoader) => { function isValidHttpUrl(string) { let url; @@ -30,9 +30,9 @@ const addItem = async (name, link, tag, reFetch, onExit) => { } }) .then(res => res.text()) - .then(message => {console.log(message)}) + .then(message => {SetLoader(false)}) .then(() => reFetch()); - + onExit(); } else if(name !== '' && link !== '' && tag !== '') { alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")'); diff --git a/src/styles/AddItem.css b/src/styles/AddItem.css index 624fc80..4982585 100644 --- a/src/styles/AddItem.css +++ b/src/styles/AddItem.css @@ -17,11 +17,10 @@ box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; position: absolute; z-index: 2; - top: 63px; - right: 20px; + top: 15%; + left: 20%; + right: 20%; background-color: #1f2c38; - width: 50%; - max-width: 500px; overflow-x: hidden; overflow-y: auto; } diff --git a/src/styles/App.css b/src/styles/App.css index ec58622..91c1952 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -59,3 +59,12 @@ textarea:focus, input:focus{ margin: 20px 20px 0px 30px; display: inline-block; } + +.no-results { + text-align: center; + padding-top: 5%; + padding-bottom: 5%; + background-color:#273949; + box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; + margin: 20px; +} \ No newline at end of file diff --git a/src/styles/Filters.css b/src/styles/Filters.css index 512486d..876c2b3 100644 --- a/src/styles/Filters.css +++ b/src/styles/Filters.css @@ -20,10 +20,10 @@ box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; background-color: #273949; padding: 5px; - top: 120px; - left: 195px; + top: 15%; + left: 30%; + right: 30%; position: absolute; - margin-top: 4px; -moz-user-select: none; -webkit-user-select: none; user-select: none; diff --git a/src/styles/Loader.css b/src/styles/Loader.css new file mode 100644 index 0000000..0451c27 --- /dev/null +++ b/src/styles/Loader.css @@ -0,0 +1,7 @@ +.loader { + position: absolute; + bottom: 100px; + left: 30%; + right: 30%; + text-align: center; +} \ No newline at end of file diff --git a/src/styles/Sort.css b/src/styles/Sort.css index 95f0d50..c8a5b65 100644 --- a/src/styles/Sort.css +++ b/src/styles/Sort.css @@ -20,10 +20,10 @@ box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; background-color: #273949; padding: 5px; - top: 120px; - left: 250px; + top: 15%; + left: 25%; + right: 25%; position: absolute; - margin-top: 4px; -moz-user-select: none; -webkit-user-select: none; user-select: none; diff --git a/src/styles/index.css b/src/styles/index.css index 6be3698..39e4617 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -9,5 +9,5 @@ body { } *::selection { - background-color: rgba(101, 142, 255, 0.335); + background-color: rgba(255, 255, 0, 0.25); } \ No newline at end of file