From 3c3612522dae0560bdb708868a423bf7c7431ed2 Mon Sep 17 00:00:00 2001
From: Mykola <53128883+Nikolaus-B@users.noreply.github.com>
Date: Sun, 18 Feb 2024 02:03:15 +0200
Subject: [PATCH] add toast, more styles
---
package-lock.json | 38 +++++++++++++++++++
package.json | 1 +
src/components/AppLayout/AppLayout.jsx | 3 +-
src/components/ArticleItem/ArticleItem.jsx | 24 ++++++++++--
.../ArticleItem/ArticleItem.styled.js | 5 +++
src/components/UserForm/UserForm.jsx | 14 ++++---
6 files changed, 74 insertions(+), 11 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index c995f59..6b96db8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
"modern-normalize": "^2.0.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
+ "react-hot-toast": "^2.4.1",
"react-icons": "^5.0.1",
"react-loader-spinner": "^6.1.6",
"react-modal": "^3.16.1",
@@ -7646,6 +7647,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/goober": {
+ "version": "2.1.14",
+ "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+ "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+ "peerDependencies": {
+ "csstype": "^3.0.10"
+ }
+ },
"node_modules/graceful-fs": {
"version": "4.2.9",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
@@ -11874,6 +11883,21 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
+ "node_modules/react-hot-toast": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+ "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+ "dependencies": {
+ "goober": "^2.1.10"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": ">=16",
+ "react-dom": ">=16"
+ }
+ },
"node_modules/react-icons": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -20345,6 +20369,12 @@
"slash": "^3.0.0"
}
},
+ "goober": {
+ "version": "2.1.14",
+ "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+ "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+ "requires": {}
+ },
"graceful-fs": {
"version": "4.2.9",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
@@ -23276,6 +23306,14 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
+ "react-hot-toast": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+ "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+ "requires": {
+ "goober": "^2.1.10"
+ }
+ },
"react-icons": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
diff --git a/package.json b/package.json
index 390dd92..e4aba08 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"modern-normalize": "^2.0.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
+ "react-hot-toast": "^2.4.1",
"react-icons": "^5.0.1",
"react-loader-spinner": "^6.1.6",
"react-modal": "^3.16.1",
diff --git a/src/components/AppLayout/AppLayout.jsx b/src/components/AppLayout/AppLayout.jsx
index be8ebb2..0faf714 100644
--- a/src/components/AppLayout/AppLayout.jsx
+++ b/src/components/AppLayout/AppLayout.jsx
@@ -9,6 +9,7 @@ import {
HeaderList,
Nav,
} from './AppLayout.styled';
+import { Toaster } from 'react-hot-toast';
export const AppLayout = () => {
return (
@@ -31,7 +32,7 @@ export const AppLayout = () => {
-
+
);
diff --git a/src/components/ArticleItem/ArticleItem.jsx b/src/components/ArticleItem/ArticleItem.jsx
index fe9dd38..2d60f82 100644
--- a/src/components/ArticleItem/ArticleItem.jsx
+++ b/src/components/ArticleItem/ArticleItem.jsx
@@ -1,5 +1,12 @@
import React from 'react';
-import { Image, ImageContainer, Item } from './ArticleItem.styled';
+import {
+ ArticleAuthor,
+ ArticleDescription,
+ ArticleTitle,
+ Image,
+ ImageContainer,
+ Item,
+} from './ArticleItem.styled';
export const ArticleItem = ({ article }) => {
return (
@@ -13,9 +20,18 @@ export const ArticleItem = ({ article }) => {
alt="article title"
/>
- {article.author || 'No author'}
- {article.title || 'No title'}
- {article.description || 'No description avalable'}
+
+ Author: {' '}
+ {article.author || 'No author'}{' '}
+
+
+ Title:
+ {article.title || 'No title'}{' '}
+
+
+ Description:
+ {article.description || 'No description avalable'}{' '}
+
);
};
diff --git a/src/components/ArticleItem/ArticleItem.styled.js b/src/components/ArticleItem/ArticleItem.styled.js
index 52e9b9c..3d1f6f4 100644
--- a/src/components/ArticleItem/ArticleItem.styled.js
+++ b/src/components/ArticleItem/ArticleItem.styled.js
@@ -12,9 +12,14 @@ export const Item = styled.li`
export const ImageContainer = styled.div`
width: 380px;
height: 240px;
+ margin-bottom: 10px;
`;
export const Image = styled.img`
width: 100%;
height: 100%;
`;
+
+export const ArticleAuthor = styled.h3``;
+export const ArticleTitle = styled.h2``;
+export const ArticleDescription = styled.p``;
diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx
index 2719cc3..34b103d 100644
--- a/src/components/UserForm/UserForm.jsx
+++ b/src/components/UserForm/UserForm.jsx
@@ -11,6 +11,7 @@ import {
FormField,
Label,
} from './UserForm.styled';
+import toast from 'react-hot-toast';
const ArticleSchema = Yup.object().shape({
imageUrl: Yup.string(),
@@ -48,6 +49,7 @@ export const UserForm = () => {
article.title.toLowerCase() === values.title.toLowerCase()
)
) {
+ toast.error(`Article ${values.title} already exists`);
return;
}
dispatch(addArticle({ ...values, id: uid() }));
@@ -65,18 +67,18 @@ export const UserForm = () => {
-
-
+
+
Add article