From 5e46d6a098ded476237e5214b85729db8731a926 Mon Sep 17 00:00:00 2001 From: maximus Date: Wed, 5 Oct 2022 15:49:07 +0300 Subject: [PATCH] ended search --- .env.development | 2 +- package-lock.json | 540 ++++++++++++++---- package.json | 1 + src/components/Loader/Loader.css | 24 + src/components/Loader/Loader.tsx | 10 + .../sections}/FeaturedArticlesCards.tsx | 10 +- .../sections}/FeaturedArticlesCategories.tsx | 2 +- .../sections}/FeaturedAuthorsCards.tsx | 12 +- .../MainPage/sections/MainSection.tsx | 27 + src/components/MainSection.tsx | 210 ------- src/components/{ => search}/Inputgroup.tsx | 4 +- src/components/search/SearchBar.tsx | 49 ++ .../{SearchBar.tsx => search/SearchInput.tsx} | 116 ++-- src/index.tsx | 2 + src/pages/MainPage.tsx | 31 +- src/pages/SearchResultsPage.tsx | 5 + src/searchResults/data/searchReducer.ts | 18 +- src/searchResults/data/searchService.ts | 3 +- .../data/searchStoreImplementation.ts | 12 +- .../useCases/changeSearchRequestUseCase.ts | 2 +- src/searchResults/view/searchView.tsx | 87 ++- tailwind.config.js | 1 + 22 files changed, 735 insertions(+), 433 deletions(-) mode change 100755 => 100644 package-lock.json create mode 100644 src/components/Loader/Loader.css create mode 100644 src/components/Loader/Loader.tsx rename src/components/{ => MainPage/sections}/FeaturedArticlesCards.tsx (94%) rename src/components/{parts => MainPage/sections}/FeaturedArticlesCategories.tsx (93%) rename src/components/{ => MainPage/sections}/FeaturedAuthorsCards.tsx (94%) create mode 100755 src/components/MainPage/sections/MainSection.tsx delete mode 100755 src/components/MainSection.tsx rename src/components/{ => search}/Inputgroup.tsx (94%) create mode 100644 src/components/search/SearchBar.tsx rename src/components/{SearchBar.tsx => search/SearchInput.tsx} (56%) create mode 100644 src/pages/SearchResultsPage.tsx diff --git a/.env.development b/.env.development index 75a593c..9c2b36e 100755 --- a/.env.development +++ b/.env.development @@ -2,5 +2,5 @@ REACT_APP_CMS_BASE_URL=http://scipaper.ru REACT_APP_CMS_APP_NAME=scipaper REACT_APP_OPENID_PROVIDER_URL=http://auth.techpal.ru/auth/realms/master/protocol/openid-connect/auth?client_id=techpal&response_type=code REACT_APP_INTEGRATOR_URL=http://scipaper.ru -REACT_APP_INTEGRATOR_API_VERSION=/api/v1 +REACT_APP_INTEGRATOR_API_VERSION=/v1 REACT_APP_GRAPHQL_URL=/graphql diff --git a/package-lock.json b/package-lock.json old mode 100755 new mode 100644 index febb10b..64573f7 --- a/package-lock.json +++ b/package-lock.json @@ -70,6 +70,7 @@ "postcss": "^8.4.14", "prop-types": "^15.8.1", "react-test-renderer": "^18.2.0", + "tailwind-scrollbar": "^2.0.1", "webpack": "^5.74.0" } }, @@ -4059,6 +4060,11 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -4409,6 +4415,26 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" }, + "node_modules/@rsuite/icon-font": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz", + "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q==" + }, + "node_modules/@rsuite/icons": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.2.tgz", + "integrity": "sha512-Y7vJNDQpJnFlyYSUXQ2iQ9Meg7+ZKcrIenhpYDdM3c7vYDE/L7pml+hrK28jk6QfV/QkVv5B504D+l7aM6AAJQ==", + "dependencies": { + "@rsuite/icon-font": "^4.0.0", + "classnames": "^2.2.5", + "insert-css": "^2.0.0", + "lodash": "^4.17.20" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz", @@ -11196,6 +11222,11 @@ "@types/node": "*" } }, + "node_modules/@types/chai": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz", + "integrity": "sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==" + }, "node_modules/@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -11361,9 +11392,9 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, "node_modules/@types/lodash": { - "version": "4.14.182", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", - "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" + "version": "4.14.186", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz", + "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" }, "node_modules/@types/mdast": { "version": "3.0.10", @@ -11495,6 +11526,25 @@ "@types/react": "*" } }, + "node_modules/@types/react-virtualized": { + "version": "9.21.21", + "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.21.tgz", + "integrity": "sha512-Exx6I7p4Qn+BBA1SRyj/UwQlZ0I0Pq7g7uhAp0QQ4JWzZunqEqNBGTmCmMmS/3N9wFgAGWuBD16ap7k8Y14VPA==", + "dependencies": { + "@types/prop-types": "*", + "@types/react": "^17" + } + }, + "node_modules/@types/react-virtualized/node_modules/@types/react": { + "version": "17.0.50", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.50.tgz", + "integrity": "sha512-ZCBHzpDb5skMnc1zFXAXnL3l1FAdi+xZvwxK+PkglMmBrwjpp9nKaWuEvrGnSifCJmBFGxZOOFuwC6KH/s0NuA==", + "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", @@ -13675,16 +13725,6 @@ "node": ">=8" } }, - "node_modules/bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "dev": true, - "optional": true, - "dependencies": { - "file-uri-to-path": "1.0.0" - } - }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -14646,7 +14686,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz", "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==", - "dev": true, "engines": { "node": ">=6" } @@ -15980,6 +16019,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -16400,6 +16451,45 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "node_modules/dom-helpers/node_modules/@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/dom-lib": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.1.3.tgz", + "integrity": "sha512-66NzehAJZM5HrH/2FW6C0tgaMIywDF5I9n7PWgvdSciohlYQbCFcSf5XA6hhIqQdFbfrnZDD8NGLo9pDRzO5hQ==", + "dependencies": { + "@babel/runtime": "^7.16.0" + } + }, + "node_modules/dom-lib/node_modules/@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -18359,13 +18449,6 @@ "node": ">=12" } }, - "node_modules/file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "dev": true, - "optional": true - }, "node_modules/filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -19023,19 +19106,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -20573,6 +20643,11 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz", "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==" }, + "node_modules/insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==" + }, "node_modules/internal-slot": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", @@ -27258,13 +27333,6 @@ "multicast-dns": "cli.js" } }, - "node_modules/nan": { - "version": "2.16.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz", - "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==", - "dev": true, - "optional": true - }, "node_modules/nanoclone": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", @@ -30320,6 +30388,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-loading-skeleton": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz", @@ -32522,6 +32595,23 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, + "node_modules/react-virtualized": { + "version": "9.22.3", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz", + "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0-alpha", + "react-dom": "^15.3.0 || ^16.0.0-alpha" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -35295,6 +35385,78 @@ "node": ">=8" } }, + "node_modules/rsuite": { + "version": "5.19.0", + "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-5.19.0.tgz", + "integrity": "sha512-KQD48UT2HJec+VNzcsrGlo65+OMas7kOjJnxkwR3GsiIugw2aQ9o2JUBmoaJFxhbAnwv1hjJ73ZgW3MH3Wo/Pw==", + "dependencies": { + "@babel/runtime": "^7.18.9", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.2", + "@types/chai": "^4.3.3", + "@types/lodash": "^4.14.184", + "@types/prop-types": "^15.7.4", + "@types/react-virtualized": "^9.21.11", + "classnames": "^2.3.1", + "date-fns": "^2.29.2", + "dom-lib": "^3.1.2", + "lodash": "^4.17.11", + "prop-types": "^15.8.1", + "react-virtualized": "^9.22.3", + "rsuite-table": "^5.7.1", + "schema-typed": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/rsuite-table": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.7.2.tgz", + "integrity": "sha512-JwfxAR8lXVXM9PRQGJMbayciMcVFpHWExAhfY53h6JYKC7LfPeBx/Z6k4P7PO0grFkVGBdFW3ZgHxhCD1ur/eA==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.0", + "classnames": "^2.3.1", + "dom-lib": "^3.1.3", + "lodash": "^4.17.21", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "prop-types": "^15.7.2", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/rsuite-table/node_modules/@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/rsuite-table/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, + "node_modules/rsuite/node_modules/@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", @@ -35737,6 +35899,25 @@ "loose-envify": "^1.1.0" } }, + "node_modules/schema-typed": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.0.3.tgz", + "integrity": "sha512-4KckVnJjTtVugYpSAoQrcH4quE4yIVTvI/nHEqtwdceBr/ZCuH2LfV8/gaZFrYU7cwwyufLKaswt28aqQ1T9ww==", + "dependencies": { + "@babel/runtime": "^7.16.0" + } + }, + "node_modules/schema-typed/node_modules/@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/schema-utils": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", @@ -37181,6 +37362,18 @@ "integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==", "dev": true }, + "node_modules/tailwind-scrollbar": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz", + "integrity": "sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==", + "dev": true, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "tailwindcss": "3.x" + } + }, "node_modules/tailwindcss": { "version": "3.1.7", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz", @@ -38777,25 +38970,6 @@ "node": ">=0.10.0" } }, - "node_modules/watchpack-chokidar2/node_modules/fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "dependencies": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - }, - "engines": { - "node": ">= 4.0" - } - }, "node_modules/watchpack-chokidar2/node_modules/glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -42793,6 +42967,11 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -43032,6 +43211,22 @@ } } }, + "@rsuite/icon-font": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz", + "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q==" + }, + "@rsuite/icons": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.2.tgz", + "integrity": "sha512-Y7vJNDQpJnFlyYSUXQ2iQ9Meg7+ZKcrIenhpYDdM3c7vYDE/L7pml+hrK28jk6QfV/QkVv5B504D+l7aM6AAJQ==", + "requires": { + "@rsuite/icon-font": "^4.0.0", + "classnames": "^2.2.5", + "insert-css": "^2.0.0", + "lodash": "^4.17.20" + } + }, "@rushstack/eslint-patch": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz", @@ -48209,6 +48404,11 @@ "@types/node": "*" } }, + "@types/chai": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz", + "integrity": "sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==" + }, "@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -48374,9 +48574,9 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, "@types/lodash": { - "version": "4.14.182", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", - "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" + "version": "4.14.186", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz", + "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" }, "@types/mdast": { "version": "3.0.10", @@ -48508,6 +48708,27 @@ "@types/react": "*" } }, + "@types/react-virtualized": { + "version": "9.21.21", + "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.21.tgz", + "integrity": "sha512-Exx6I7p4Qn+BBA1SRyj/UwQlZ0I0Pq7g7uhAp0QQ4JWzZunqEqNBGTmCmMmS/3N9wFgAGWuBD16ap7k8Y14VPA==", + "requires": { + "@types/prop-types": "*", + "@types/react": "^17" + }, + "dependencies": { + "@types/react": { + "version": "17.0.50", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.50.tgz", + "integrity": "sha512-ZCBHzpDb5skMnc1zFXAXnL3l1FAdi+xZvwxK+PkglMmBrwjpp9nKaWuEvrGnSifCJmBFGxZOOFuwC6KH/s0NuA==", + "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", @@ -50209,16 +50430,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "dev": true, - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -50974,8 +51185,7 @@ "clsx": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz", - "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==", - "dev": true + "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==" }, "cnbuilder": { "version": "3.1.0", @@ -51997,6 +52207,11 @@ } } }, + "date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -52314,6 +52529,43 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "dom-lib": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.1.3.tgz", + "integrity": "sha512-66NzehAJZM5HrH/2FW6C0tgaMIywDF5I9n7PWgvdSciohlYQbCFcSf5XA6hhIqQdFbfrnZDD8NGLo9pDRzO5hQ==", + "requires": { + "@babel/runtime": "^7.16.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -53824,13 +54076,6 @@ } } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "dev": true, - "optional": true - }, "filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -54343,12 +54588,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "optional": true - }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -55466,6 +55705,11 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz", "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==" }, + "insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==" + }, "internal-slot": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", @@ -60412,13 +60656,6 @@ "thunky": "^1.0.2" } }, - "nan": { - "version": "2.16.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz", - "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==", - "dev": true, - "optional": true - }, "nanoclone": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", @@ -62513,6 +62750,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-loading-skeleton": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz", @@ -64090,6 +64332,19 @@ } } }, + "react-virtualized": { + "version": "9.22.3", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz", + "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==", + "requires": { + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -66054,6 +66309,66 @@ } } }, + "rsuite": { + "version": "https://registry.npmjs.org/rsuite/-/rsuite-5.19.0.tgz", + "integrity": "sha512-KQD48UT2HJec+VNzcsrGlo65+OMas7kOjJnxkwR3GsiIugw2aQ9o2JUBmoaJFxhbAnwv1hjJ73ZgW3MH3Wo/Pw==", + "requires": { + "@babel/runtime": "^7.18.9", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.2", + "@types/chai": "^4.3.3", + "@types/lodash": "^4.14.184", + "@types/prop-types": "^15.7.4", + "@types/react-virtualized": "^9.21.11", + "classnames": "^2.3.1", + "date-fns": "^2.29.2", + "dom-lib": "^3.1.2", + "lodash": "^4.17.11", + "prop-types": "^15.8.1", + "react-virtualized": "^9.22.3", + "rsuite-table": "^5.7.1", + "schema-typed": "^2.0.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "rsuite-table": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.7.2.tgz", + "integrity": "sha512-JwfxAR8lXVXM9PRQGJMbayciMcVFpHWExAhfY53h6JYKC7LfPeBx/Z6k4P7PO0grFkVGBdFW3ZgHxhCD1ur/eA==", + "requires": { + "@babel/runtime": "^7.12.5", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.0", + "classnames": "^2.3.1", + "dom-lib": "^3.1.3", + "lodash": "^4.17.21", + "react-is": "^17.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + } + } + }, "rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", @@ -66388,6 +66703,24 @@ "loose-envify": "^1.1.0" } }, + "schema-typed": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.0.3.tgz", + "integrity": "sha512-4KckVnJjTtVugYpSAoQrcH4quE4yIVTvI/nHEqtwdceBr/ZCuH2LfV8/gaZFrYU7cwwyufLKaswt28aqQ1T9ww==", + "requires": { + "@babel/runtime": "^7.16.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "schema-utils": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", @@ -67542,6 +67875,12 @@ "integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==", "dev": true }, + "tailwind-scrollbar": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz", + "integrity": "sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==", + "dev": true + }, "tailwindcss": { "version": "3.1.7", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz", @@ -68762,17 +69101,6 @@ } } }, - "fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "dev": true, - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } - }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", diff --git a/package.json b/package.json index 0ccda54..5d32e57 100755 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ "postcss": "^8.4.14", "prop-types": "^15.8.1", "react-test-renderer": "^18.2.0", + "tailwind-scrollbar": "^2.0.1", "webpack": "^5.74.0" } } diff --git a/src/components/Loader/Loader.css b/src/components/Loader/Loader.css new file mode 100644 index 0000000..2699c78 --- /dev/null +++ b/src/components/Loader/Loader.css @@ -0,0 +1,24 @@ +.loader { + position: relative; + background: #096DD9; + transform: rotateX(65deg) rotate(45deg); + color: #003A8C; + animation: layers1 1s linear infinite alternate; + } + .loader:after { + content: ''; + position: absolute; + inset: 0; + background: rgba(24, 144, 255, 0.7); + animation: layerTr 1s linear infinite alternate; + } + + @keyframes layers1 { + 0% { box-shadow: 0px 0px 0 0px } + 90% , 100% { box-shadow: 8px 8px 0 -4px } + } + @keyframes layerTr { + 0% { transform: translate(0, 0) scale(1) } + 100% { transform: translate(-10px, -10px) scale(1) } + } + \ No newline at end of file diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx new file mode 100644 index 0000000..8e52204 --- /dev/null +++ b/src/components/Loader/Loader.tsx @@ -0,0 +1,10 @@ +import classNames from "classnames" +import "./Loader.css" + +type Props = { + className: string, +} + +export const Loader = ({className}:Props)=>{ + return (
) +} \ No newline at end of file diff --git a/src/components/FeaturedArticlesCards.tsx b/src/components/MainPage/sections/FeaturedArticlesCards.tsx similarity index 94% rename from src/components/FeaturedArticlesCards.tsx rename to src/components/MainPage/sections/FeaturedArticlesCards.tsx index 2223044..890add1 100755 --- a/src/components/FeaturedArticlesCards.tsx +++ b/src/components/MainPage/sections/FeaturedArticlesCards.tsx @@ -8,11 +8,11 @@ import "react-loading-skeleton/dist/skeleton.css"; /* -------------------------------------------------------------------------- */ /* Components */ /* -------------------------------------------------------------------------- */ -import Typography from "./typography/Typography"; -import SkeletonCard from "./SkeletonCard"; -import AspectRatio from "./AspectRatio"; -import Card from "./Card"; -import Link from "./typography/Link"; +import Typography from "../../typography/Typography"; +import SkeletonCard from "../../SkeletonCard"; +import AspectRatio from "../../AspectRatio"; +import Card from "../../Card"; +import Link from "../../typography/Link"; /* -------------------------------------------------------------------------- */ /* Icons */ diff --git a/src/components/parts/FeaturedArticlesCategories.tsx b/src/components/MainPage/sections/FeaturedArticlesCategories.tsx similarity index 93% rename from src/components/parts/FeaturedArticlesCategories.tsx rename to src/components/MainPage/sections/FeaturedArticlesCategories.tsx index 1af60c0..21dafc0 100755 --- a/src/components/parts/FeaturedArticlesCategories.tsx +++ b/src/components/MainPage/sections/FeaturedArticlesCategories.tsx @@ -20,7 +20,7 @@ const categories = [ }, { id: 3, title: "Fundamental", count: 5617813, icon: }, { id: 4, title: "Humanitarian", count: 5617813, icon: }, - { id: 5, title: "Argicultural", count: 5617813, icon: }, + { id: 5, title: "Agricultural", count: 5617813, icon: }, { id: 6, title: "Social", count: 5617813, icon: }, ]; diff --git a/src/components/FeaturedAuthorsCards.tsx b/src/components/MainPage/sections/FeaturedAuthorsCards.tsx similarity index 94% rename from src/components/FeaturedAuthorsCards.tsx rename to src/components/MainPage/sections/FeaturedAuthorsCards.tsx index 3ef0830..91acd31 100755 --- a/src/components/FeaturedAuthorsCards.tsx +++ b/src/components/MainPage/sections/FeaturedAuthorsCards.tsx @@ -1,11 +1,11 @@ /* -------------------------------------------------------------------------- */ /* Components */ /* -------------------------------------------------------------------------- */ -import Heading from "./typography/Heading"; -import SkeletonCard from "./SkeletonCard"; -import { Button } from "./Button/Button"; -import Avatar from "./Avatar"; -import Card from "./Card"; +import Heading from "../../typography/Heading"; +import SkeletonCard from "../../SkeletonCard"; +import { Button } from "../../Button/Button"; +import Avatar from "../../Avatar"; +import Card from "../../Card"; /* -------------------------------------------------------------------------- */ /* Swiper */ @@ -21,7 +21,7 @@ import "swiper/css"; /* Icons */ /* -------------------------------------------------------------------------- */ import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg"; -import Link from "./typography/Link"; +import Link from "../../typography/Link"; /* -------------------------------------------------------------------------- */ /* Variables */ diff --git a/src/components/MainPage/sections/MainSection.tsx b/src/components/MainPage/sections/MainSection.tsx new file mode 100755 index 0000000..1823cac --- /dev/null +++ b/src/components/MainPage/sections/MainSection.tsx @@ -0,0 +1,27 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import {SearchBar} from "../../search/SearchBar"; + +export default function MainSection() { + + return ( +
+
+ Scientific Library with Free Access +
+
+
Search
+
320 455
+
Items
+
+
+ +
+ Advanced Search +
+
+
+ ); +} diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx deleted file mode 100755 index 95ac679..0000000 --- a/src/components/MainSection.tsx +++ /dev/null @@ -1,210 +0,0 @@ -<<<<<<< Updated upstream -/* -------------------------------------------------------------------------- */ -/* Imports */ -/* -------------------------------------------------------------------------- */ -import React from "react"; -import Inputgroup from "./Inputgroup"; -import Select from "./Select"; -import { useState } from "react"; -import { Button } from "./Button/Button"; -import { SVGSearch } from "../components/icons"; -import SearchBar from "components/SearchBar"; - -type Props = { - className?: string; - options: T[]; - hintsValues: H[]; - displayValueResolver?: (element: T) => any; -}; - -/* -------------------------------------------------------------------------- */ -/* Component implementation */ -/* -------------------------------------------------------------------------- */ - -export default function MainSection({ - className, - options, - hintsValues, - displayValueResolver, - ...props -}: Props) { - const [value, setValue] = useState(options[0]); // Category - - const [hints, setHints] = useState([]); //Response list - const [onSelected, setOnSelected] = useState(""); // Selected item from response list - const [query, setQuery] = useState(""); // Query - - const onChange = (query: string) => { - console.log(query) - setQuery(query); - setHints(hintsValues); - }; - const onClick = () => { - console.log(displayValueResolver ? displayValueResolver(value) : value); - console.log(onSelected); - console.log(query); - }; - const searchResolver = (item: any) => { - setOnSelected(item.caption); - console.log(onSelected); - }; - //empty items message - const IsEmptyItems = () => { - return

Nothing Found

; - }; - - return ( -
-
- Scientific Library with Free Access -
-
-
Search
-
320 455
-
Items
-
-
- -
-
- value?.name ?? ""} - /> -
-
- value.caption} - /> -
-
-
- -
- -
- Advanced Search -
-
-
- ); -} ->>>>>>> Stashed changes diff --git a/src/components/Inputgroup.tsx b/src/components/search/Inputgroup.tsx similarity index 94% rename from src/components/Inputgroup.tsx rename to src/components/search/Inputgroup.tsx index 4f93040..3897f06 100755 --- a/src/components/Inputgroup.tsx +++ b/src/components/search/Inputgroup.tsx @@ -20,7 +20,7 @@ const Inputgroup = ({ children, className }: Props) => { const arrChildren = React.Children.toArray(children); return ( -
{ } return e; })} -
+ ); }; diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx new file mode 100644 index 0000000..e309823 --- /dev/null +++ b/src/components/search/SearchBar.tsx @@ -0,0 +1,49 @@ +import React, { useState, useEffect } from "react"; +import Inputgroup from "./Inputgroup"; +import SearchInput from "./SearchInput"; +import { Button } from "components/Button/Button"; +import { SVGSearch } from "components/icons"; +import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation"; +import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel"; +import Link from "components/typography/Link"; + + +type Props = { + className?: string; +}; + +/* ------------------------------- Categories ------------------------------- */ + + +export function SearchBar({ className }: Props) { + const [onSelected, setOnSelected] = useState(""); // Selected item from response list + + const searchResolver = (item: any) => { + setOnSelected(item.caption); + console.log(onSelected); + }; + return ( + //TOdO Need to add dropdown with categories + +
+ {/*
+
*/} +
+ +
+
+
+ + +
+ + ); +} diff --git a/src/components/SearchBar.tsx b/src/components/search/SearchInput.tsx similarity index 56% rename from src/components/SearchBar.tsx rename to src/components/search/SearchInput.tsx index 6edf0b6..fc0160a 100755 --- a/src/components/SearchBar.tsx +++ b/src/components/search/SearchInput.tsx @@ -3,10 +3,11 @@ /* -------------------------------------------------------------------------- */ import React from "react"; import classNames from "classnames"; -import "../index.css"; import { Combobox, Transition } from "@headlessui/react"; import { Fragment, useEffect, useState } from "react"; - +import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation"; +import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel"; +import { Loader } from "components/Loader/Loader"; /* -------------------------------------------------------------------------- */ /* Component props */ /* -------------------------------------------------------------------------- */ @@ -16,11 +17,7 @@ type Hint = { }; type Props = { - onChange: (query: string) => void; onSelected: (value: Hint) => void; - IsEmptyItems: () => React.ReactNode; - hints: Hint[]; - displayValueResolver?: (element: T) => any; disabled?: boolean; inGroup?: boolean; className?: string; @@ -51,7 +48,7 @@ const inputStyle = ` const inputList = ` absolute z-10 mt-1 w-full max-h-56 bg-white shadow-lg - rounded py-1 + rounded overflow-hidden focus:outline-none text-base @@ -69,70 +66,73 @@ const inputInGroup = [ /* Component implementation */ /* -------------------------------------------------------------------------- */ -export default function SearchBar({ - onChange, +export default function SearchInput({ onSelected, - hints, - displayValueResolver, disabled, inGroup = false, className, maxScrollSize = 140, elementScrollSize = 36, placeHolder = "Search...", - IsEmptyItems, ...props }: Props) { - const [selected, setSelected] = useState(hints); - const [query, setQuery] = useState(""); + const store = useSearchStoreImplementation(); + const { + search, + changeSearchRequest, + searchRequest, + searchResults, + isLoading, + isFailed, + } = useSearchViewModel(store); + const [inputValue, setInputValue] = useState(""); + + const changeInputValue = (value: string) => { + setInputValue(value); + changeSearchRequest(value); + }; useEffect(() => { - onChange(query); - }, [query, onChange]); - - const handleSelected = (value: Hint) => { - setSelected(value); - onSelected && onSelected(value); - }; + if (searchRequest !== "") { + search(); + } + }, [searchRequest, changeSearchRequest]); return (
- +
setQuery(event.target.value)} + onChange={(event) => changeInputValue(event.target.value)} placeholder={placeHolder} - displayValue={(value: T) => - displayValueResolver ? displayValueResolver(value) : value - } + displayValue={() => inputValue} />
-
- {query.length > 0 && ( -
- setQuery("")} - > - - {hints.length === 0 && query !== "" ? IsEmptyItems() : null} - {/* */} - {hints.map((item: any, id: number) => ( + + {searchRequest !== "" && !isFailed && !isLoading && ( + + + + {searchResults === undefined || + (searchResults.data.length === 0 && searchRequest !== "") ? ( +
Nothing found
+ ) : null} + {searchResults !== undefined && + searchResults.data.map((result) => ( classNames( active @@ -144,17 +144,25 @@ export default function SearchBar({ : "font-normal " ) } - value={item} + value={result.title} + onClick={() => { + if (result.title != undefined) { + changeInputValue(result.title); + } + }} > -
{item.caption}
+
{result.title}
 ))} - {/* */} - - -
- )} -
+ + + )} + {isLoading && ( +
+
+
+
+ )}
diff --git a/src/index.tsx b/src/index.tsx index 67d2584..38e06d5 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,6 +15,7 @@ import CookiesPolicy from "pages/Information/CookiesPolicy"; import AccountSettings from "pages/Information/AccountSettings"; import { store } from "store/store"; import { Provider } from "react-redux"; +import { SearchResultsPage } from "pages/SearchResultsPage"; const rootElement = document.getElementById("root"); if (!rootElement) throw new Error("Failed to find the root element"); @@ -34,6 +35,7 @@ root.render( } /> + }> diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 1d25261..83b5614 100755 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,41 +1,22 @@ import React from "react"; import BaseLayout from "components/BaseLayout"; -import MainSection from "components/MainSection"; -import FeaturedArticlesCards from "components/FeaturedArticlesCards"; -import FeaturedAuthorsCards from "components/FeaturedAuthorsCards"; -import { FeaturedArticlesCategories } from "components/parts/FeaturedArticlesCategories"; +import FeaturedArticlesCards from "components/MainPage/sections/FeaturedArticlesCards"; +import FeaturedAuthorsCards from "components/MainPage/sections/FeaturedAuthorsCards"; +import { FeaturedArticlesCategories } from "components/MainPage/sections/FeaturedArticlesCategories"; import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies"; -import { SearchView } from "../searchResults/view/searchView"; - +import MainSection from "components/MainPage/sections/MainSection"; type Props = { className?: string; }; -const options = [ - { name: "All" }, - { name: "Wade Cooper" }, - { name: "Arlene Mccoy" }, - { name: "Devon Webb" }, - { name: "Tom Cook" }, - { name: "Tanya Fox" }, - { name: "Hellen Schmidt" }, -]; -const hintsValues = [ - { id: "1", caption: "Wade Cooper" }, - { id: "2", caption: "Arlene Mccoy" }, - { id: "3", caption: "Devon Webb" }, - { id: "4", caption: "Tom Cook" }, - { id: "5", caption: "Tanya Fox" }, - { id: "6", caption: "Hellen Schmidt" }, -]; export default function MainPage({ className }: Props) { return (
- {/* */} - + {/* */} + diff --git a/src/pages/SearchResultsPage.tsx b/src/pages/SearchResultsPage.tsx new file mode 100644 index 0000000..a1d4a5a --- /dev/null +++ b/src/pages/SearchResultsPage.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const SearchResultsPage = () =>{ + return
Search results page
+} \ No newline at end of file diff --git a/src/searchResults/data/searchReducer.ts b/src/searchResults/data/searchReducer.ts index 6b6dbd7..11d0c9b 100755 --- a/src/searchResults/data/searchReducer.ts +++ b/src/searchResults/data/searchReducer.ts @@ -8,11 +8,11 @@ type SearchStoreState = Omit< >; const ININTIAL_STATE: SearchStoreState = { + searchRequest: "", searchResults: undefined, failure: undefined, isFailed: false, - isLoading: false, - searchRequest: "", + isLoading: false, }; const searchResultReducer = ( @@ -31,13 +31,6 @@ const searchResultReducer = ( isLoading: true, isFailed: false, }; - case actionTypes.GET_SEARCH_RESULTS_FAILURE: - return { - ...state, - isFailed: true, - failure: action.payload, - isLoading: false, - }; case actionTypes.GET_SEARCH_RESULTS_SUCCESS: return { ...state, @@ -45,6 +38,13 @@ const searchResultReducer = ( isLoading: false, isFailed: false, }; + case actionTypes.GET_SEARCH_RESULTS_FAILURE: + return { + ...state, + isFailed: true, + failure: action.payload, + isLoading: false, + }; default: return state; } diff --git a/src/searchResults/data/searchService.ts b/src/searchResults/data/searchService.ts index f01694b..c08aff1 100755 --- a/src/searchResults/data/searchService.ts +++ b/src/searchResults/data/searchService.ts @@ -10,7 +10,8 @@ const searchEndpoint = "/papers/search"; async function search(request: string): Promise { try { const response = await integratorApiClient.get( - searchEndpoint + `&query=&page=1` + // searchEndpoint + `?query=` + request + `&page=1` + "https://run.mocky.io/v3/89c8421d-86b1-4af7-850e-b71def846cfe" ); const dto = response.data; return create({ data: dto.data }); diff --git a/src/searchResults/data/searchStoreImplementation.ts b/src/searchResults/data/searchStoreImplementation.ts index 275bc21..c4581d9 100755 --- a/src/searchResults/data/searchStoreImplementation.ts +++ b/src/searchResults/data/searchStoreImplementation.ts @@ -1,29 +1,33 @@ import React from "react"; import { SearchResultsStore } from "searchResults/domain/searchStore"; import { RootState, useAppDispatch, useAppSelector } from "store"; -import { SearchAction } from "./actions/searchActions"; +import { changeSearchRequestAction, SearchAction } from "./actions/searchActions"; import { SearchStoreState } from "./searchReducer"; const searchSelector = (state: RootState): SearchStoreState => state.searchResults; const useSearchStoreImplementation = (): SearchResultsStore => { - const { searchResults, failure, isFailed, isLoading, request } = + const { searchResults, failure, isFailed, isLoading, searchRequest } = useAppSelector(searchSelector); const dispatch = useAppDispatch(); const search = React.useCallback( - (query: string) => SearchAction(request)(dispatch), + (searchRequest: string) => SearchAction(searchRequest)(dispatch), [dispatch] ); + const changeSearchRequest = React.useCallback( + (searchRequest: string) => changeSearchRequestAction(searchRequest)(dispatch), [dispatch] + ) return { - request, isLoading, isFailed, searchResults, failure, + searchRequest, + changeSearchRequest: changeSearchRequest, search: search, }; }; diff --git a/src/searchResults/useCases/changeSearchRequestUseCase.ts b/src/searchResults/useCases/changeSearchRequestUseCase.ts index faa464b..30d6121 100755 --- a/src/searchResults/useCases/changeSearchRequestUseCase.ts +++ b/src/searchResults/useCases/changeSearchRequestUseCase.ts @@ -6,7 +6,7 @@ type ChangeRequestStore = Pick< "changeSearchRequest" | "searchRequest" >; -const debouncedTask = debounce((task) => Promise.resolve(task()), 100); +const debouncedTask = debounce((task) => Promise.resolve(task()), 200); const changeSearchRequestUseCase = (store: ChangeRequestStore) => { return debouncedTask(() => store.changeSearchRequest(store.searchRequest)); diff --git a/src/searchResults/view/searchView.tsx b/src/searchResults/view/searchView.tsx index 991cd0e..1c1e9b6 100755 --- a/src/searchResults/view/searchView.tsx +++ b/src/searchResults/view/searchView.tsx @@ -1,21 +1,92 @@ +import classNames from "classnames"; import React, { useState, useEffect } from "react"; import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel"; import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation"; -export function SearchView() { +const searchDropDownStyle = ` +absolute +top-12 left-0 +right-0 +bg-white +w-full +max-h-[200px] +overflow-y-scroll +shadow-md +scrollbar-thin +scrollbar-thumb-gray-500 +scrollbar-track-inherit +scrollbar-thumb-rounded +` + + + +type Props = { + className?: string; +}; + +export const SearchView = ({ className }: Props) => { + const [value, setValue] = useState(''); const store = useSearchStoreImplementation(); - const { searchResults, search } = useSearchViewModel(store); - const [query, setQuery] = useState(""); + const { + search, + changeSearchRequest, + searchRequest, + searchResults, + isLoading, + isFailed, + } = useSearchViewModel(store); + + const changeInputValue = (value: string) => { + setValue(value); + changeSearchRequest(value) + } + + useEffect(() => { + if (searchRequest !== "") { + search(); + } + }, [searchRequest, changeSearchRequest]); return ( -
+
search()} + onChange={e => changeInputValue(e.target.value)} + value={value} /> - {/*
{searchResults}
*/} +
+
    + {isLoading &&

    Is loading...

    } + {isFailed && searchRequest != "" && ( +

    + Sorry... Something went wrong from our side +

    + )} + {!isLoading && + !isFailed && + searchResults != undefined && + searchRequest != "" && + searchResults.data.map((result) => ( +
  • { + if (result.title != undefined) { + changeInputValue(result.title) + } + }} + > + {result.title} +
    • + ))} +
+
); -} +}; diff --git a/tailwind.config.js b/tailwind.config.js index 1788c28..0340eef 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -93,6 +93,7 @@ module.exports = { }); }, require("@tailwindcss/line-clamp"), + require("tailwind-scrollbar")({ nocompatible: true }), ], theme: { extend: {