diff --git a/package-lock.json b/package-lock.json index 2b444aa63564c027334632e77a24e57d7e60354c..554be7b09fb5cc551ac485904b458fc9dcf99eec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", "@jmetterrothan/instalike": "1.3.7", + "@reduxjs/toolkit": "^1.9.3", "axios": "0.27.2", "i18next": "^22.4.10", "i18next-browser-languagedetector": "^7.0.1", @@ -999,6 +1000,29 @@ "node": ">= 8" } }, + "node_modules/@reduxjs/toolkit": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz", + "integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==", + "dependencies": { + "immer": "^9.0.16", + "redux": "^4.2.0", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.7" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@remix-run/router": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.1.tgz", @@ -3409,6 +3433,15 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "9.0.19", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz", + "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -6070,6 +6103,17 @@ "fastq": "^1.6.0" } }, + "@reduxjs/toolkit": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz", + "integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==", + "requires": { + "immer": "^9.0.16", + "redux": "^4.2.0", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.7" + } + }, "@remix-run/router": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.1.tgz", @@ -7864,6 +7908,11 @@ "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", "dev": true }, + "immer": { + "version": "9.0.19", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz", + "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", diff --git a/package.json b/package.json index 91d1ae9953516e6cc8139baf160bb7e2f6869b84..93cc7b640a1fc235b0402daf99a7f7881464c5e6 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", "@jmetterrothan/instalike": "1.3.7", + "@reduxjs/toolkit": "^1.9.3", "axios": "0.27.2", "i18next": "^22.4.10", "i18next-browser-languagedetector": "^7.0.1", diff --git a/src/components/DiscoverPost.tsx b/src/components/DiscoverPost.tsx index a64af591d7cf660edb791310650c5a1a8af62282..049ad7a1d91a02f52bfcc2aeb1ade192bbf7edd0 100644 --- a/src/components/DiscoverPost.tsx +++ b/src/components/DiscoverPost.tsx @@ -17,8 +17,8 @@ const DiscoverPost = ({ img, likes, comments }: DiscoverPostProps) => { return <> {/* A DISCOVER POST */} - <div className="flex justify-center items-center rounded-2xl relative w-[315px] h-[315px] overflow-hidden"> - <img className="objet-cover w-full h-full" src={img.src} alt="" /> + <div className="flex justify-center items-center rounded-2xl relative max-w-[315px] max-h-[315px] overflow-hidden aspect-square"> + <img className="object-cover w-full h-full" style={{objectFit: 'cover'}} src={img.src} alt="" /> <div className="flex justify-center items-center bg-gray-900/50 absolute_card inset-0 gap-4"> <div className="px-2 flex items-center gap-2 text-white"> <FontAwesomeIcon className="text-[20px]" icon={faHeart} /> @@ -34,4 +34,4 @@ return <> </>; }; -export default DiscoverPost; \ No newline at end of file +export default DiscoverPost; diff --git a/src/views/DiscoverView.tsx b/src/views/DiscoverView.tsx index 9cb6cba3e0576b326a7f4a38772bef67bf1130ef..4b3a53a8c575b0d017cd0f32032d5513d76ca3b7 100644 --- a/src/views/DiscoverView.tsx +++ b/src/views/DiscoverView.tsx @@ -25,14 +25,14 @@ return <> {/* HEADER */} <Navbar /> {/* ALL DISCOVER POSTS */} - <div className="max-w-[995px] mx-auto mt-8 mb-16 px-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5"> + <div className="max-w-[995px] mx-auto mt-8 mb-16 px-4 flex flex-col items-center sm:grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 "> {/* A DISCOVER POST */} {feedItems && feedItems.map((post: Instalike.Post) => { console.log(post) return ( - <Link key={post.id} to={`/post/${post.id}`}> + <Link key={post.id} to={`/post/${post.id}`} className="flex justify-center"> <DiscoverPost key={post.id} img={post.resources[0]} likes={post.likesCount}