From 31a92ecdbd8bdf2db03a4e856f88adbe3be06fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Mon, 27 Feb 2023 09:39:46 +0100
Subject: [PATCH] installation de redux toolkit + quelques modifications
---
package-lock.json | 49 +++++++++++++++++++++++++++++++++
package.json | 1 +
src/components/DiscoverPost.tsx | 6 ++--
src/views/DiscoverView.tsx | 4 +--
4 files changed, 55 insertions(+), 5 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2b444aa..554be7b 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 91d1ae9..93cc7b6 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 a64af59..049ad7a 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 9cb6cba..4b3a53a 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}
--
GitLab