Added loader + Improvements.
This commit is contained in:
Daniel
parent
1d23855eac
commit
c5104f432c
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
17
src/App.js
17
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() {
|
|||
<button className="btn" onClick={() => setNewBox(true)}></button>
|
||||
</div>
|
||||
|
||||
<p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}</p>
|
||||
<p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : null}</p>
|
||||
|
||||
<button className='btn' onClick={() => setFilterBox(true)}></button>
|
||||
<button className='btn' onClick={() => setSortBox(true)}></button>
|
||||
<List data={filteredData} reFetch={fetchData} />
|
||||
|
||||
{numberOfResults === 0 ? <NoResults /> : null}
|
||||
|
||||
{sortBox ? <Sort
|
||||
sortBy={sortByFunc}
|
||||
onExit={exitSorting}
|
||||
|
|
@ -101,10 +111,13 @@ function App() {
|
|||
/> : null}
|
||||
|
||||
{newBox ? <AddItem
|
||||
SetLoader={SetLoader}
|
||||
onExit={exitAdding}
|
||||
reFetch={fetchData}
|
||||
tags={() => concatTags(data)}
|
||||
/> : null}
|
||||
|
||||
{loader ? <Loader /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}) => {
|
|||
<input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
|
||||
<h3>Tags:</h3>
|
||||
<TagSelection setTags={SetTags} tags={tags} />
|
||||
<button onClick={() => addItem(name, link, tag, reFetch, onExit)} className="upload-btn">Upload </button>
|
||||
<button onClick={newItem} className="upload-btn">Upload </button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,22 +6,23 @@ import deleteEntity from '../modules/deleteEntity';
|
|||
const List = ({data, reFetch}) => {
|
||||
return (
|
||||
<div className="list">
|
||||
{/* 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 <LazyLoad key={i} height={200} offset={200}>
|
||||
return (<LazyLoad key={i} height={200} offset={200}>
|
||||
<div className="list-row">
|
||||
<div className="img-content-grp">
|
||||
<img src={favicon} />
|
||||
<img alt='' src={favicon} />
|
||||
<div className="list-entity-content">
|
||||
<div className='row-name'>
|
||||
<span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a>
|
||||
<span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a>
|
||||
</div>
|
||||
<div>{e.title}</div>
|
||||
<div className="tags">
|
||||
{e.tag.map((e, i) => {
|
||||
return <div key={i}>{e}</div>
|
||||
return (<div key={i}>{e}</div>)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,7 +32,7 @@ const List = ({data, reFetch}) => {
|
|||
<div className="delete" onClick={() => deleteEntity(e._id, reFetch)}></div>
|
||||
</div>
|
||||
</div>
|
||||
</LazyLoad>
|
||||
</LazyLoad>)
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import '../styles/Loader.css';
|
||||
import { InfinitySpin } from 'react-loader-spinner'
|
||||
|
||||
|
||||
const Loader = () => {
|
||||
return (
|
||||
<div className='loader'>
|
||||
<InfinitySpin color="white" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loader
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react'
|
||||
|
||||
const NoResults = () => {
|
||||
return (
|
||||
<div className='no-results'>
|
||||
<h1>¯\_(ツ)_/¯</h1>
|
||||
<p>Nothing found.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoResults;
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => {
|
|||
|
||||
return (
|
||||
<div className='view-archived'>
|
||||
<a href={screenshotPath} target='_blank'>Screenshot</a>
|
||||
<a href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
|
||||
<hr className='seperator' />
|
||||
<a href={pdfPath} target='_blank'>PDF</a>
|
||||
<a href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
.loader {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@ body {
|
|||
}
|
||||
|
||||
*::selection {
|
||||
background-color: rgba(101, 142, 255, 0.335);
|
||||
background-color: rgba(255, 255, 0, 0.25);
|
||||
}
|
||||
Ŝarĝante…
Reference in New Issue