toast notifications

src/App.js

@@ -15,7 +15,7 @@ const App = () => {
 	return (
 		<StyledThemeProvider theme={theme}>
 			<GlobalStyle />
-			<ToastContainer autoClose={1000} closeButton={false}/>
+			<ToastContainer autoClose={2000} closeButton={false} />
 			{user ? <Routing /> : <Auth />}
 		</StyledThemeProvider>
 	);

src/components/DeletePost.js

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { toast } from 'react-toastify';
 import { useHistory } from 'react-router-dom';
 import { FeedContext } from "../context/FeedContext";
 import { deletePost } from "../services/api";
@@ -15,6 +16,7 @@ const DeletePost = ({ postId, closeModal, goToHome }) => {
 		}
 
 		setFeed(feed.filter(post => post._id !== postId));
+		toast.success('Your post has been deleted successfully');
 		deletePost({ postId });
 	};
 

src/components/Login.js

@@ -79,6 +79,7 @@ const Login = ({ signup }) => {
 
 		localStorage.setItem("user", JSON.stringify(userResponse.data.data));
 		setUser(userResponse.data.data);
+		toast.success('Login successful')
 
 		email.setValue("");
 		password.setValue("");

src/components/NewPost.js

@@ -77,7 +77,7 @@ const NewPost = () => {
 
 	const handleSubmitPost = () => {
 		if (!caption.value) {
-			return toast.error("You should leave the caption field empty");
+			return toast.error("Please write something");
 		}
 
 		setShowModal(false);
@@ -106,6 +106,7 @@ const NewPost = () => {
 			post.isMine = true;
 			setFeed([post, ...feed]);
 			window.scrollTo(0, 0);
+			toast.success('Your post has been submitted successfully');
 		});
 	};
 

src/components/NoFeedSuggestions.js

@@ -26,6 +26,8 @@ const Wrapper = styled.div`
 
 	button {
 		font-size: 0.9rem;
+		position: relative;
+		top: -5px;
 	}
 
 	@media screen and (max-width: 660px) {
@@ -42,6 +44,10 @@ const Wrapper = styled.div`
 
 	@media screen and (max-width: 400px) {
 		width: 340px;
+
+		button {
+			font-size: 0.8rem;
+		}
 	}
 `;
 

src/components/ProfileHeader.js

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
+import { toast } from 'react-toastify';
 import styled from "styled-components";
 import { useHistory } from "react-router-dom";
 import Follow from "./Follow";
@@ -219,6 +220,7 @@ const ProfileHeader = ({ profile }) => {
 	const handleLogout = () => {
 		setUser(null);
 		localStorage.removeItem("user");
+		toast.success('You are logged out');
 	};
 
 	useEffect(() => setFollowers(profile?.followersCount), [profile]);

src/components/Search.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { toast } from 'react-toastify';
 import styled from "styled-components";
 import useInput from "../hooks/useInput";
 
@@ -16,8 +17,8 @@ const Search = () => {
 
 	const handleSearch = e => {
 		if(e.keyCode === 13) {
-			console.log(searchterm.value)
 			searchterm.setValue('')
+			return toast.success("Sorry, the search feature isn't finished yet")
 		}
 	}
 

src/styles/Button.js

@@ -19,12 +19,6 @@ const Button = styled.button`
 			border: 1px solid #dbdbdb;
 			font-weight: 500;
 		`}
-
-	${props =>
-		props.sm &&
-		css`
-			padding: 0.4rem 0.6rem;
-		`}
 `;
 
 export default Button;