better defaults

src/components/Follow.js

@@ -13,17 +13,13 @@ const Follow = ({ nobtn, isFollowing, incFollowers, decFollowers, userId }) => {
 			if (decFollowers) {
 				decFollowers();
 			}
-			follow({ url: `/users/${userId}/unfollow` }).then(res =>
-				console.log(res.data)
-			);
+			follow({ url: `/users/${userId}/unfollow` });
 		} else {
 			setFollowingState(true);
 			if (incFollowers) {
 				incFollowers();
 			}
-			follow({ url: `/users/${userId}/follow` }).then(res =>
-				console.log(res.data)
-			);
+			follow({ url: `/users/${userId}/follow` });
 		}
 	};
 

src/components/LikePost.js

@@ -13,11 +13,11 @@ const LikePost = ({ isLiked, postId, incLikes, decLikes}) => {
 		if (likedState) {
 			setLiked(false);
 			decLikes()
-			toggleLike({ postId }).then(resp => console.log(resp.data.success))
+			toggleLike({ postId })
 		} else {
 			setLiked(true);
 			incLikes()
-			toggleLike({ postId }).then(resp => console.log(resp.data.success))
+			toggleLike({ postId })
 		}
 	};
 

src/components/NewPost.js

@@ -69,12 +69,9 @@ const NewPost = () => {
 			data.append("file", e.target.files[0]);
 			data.append("upload_preset", "instaclone");
 
-			uploadImage({ body: data })
-				.then(res => {
-					console.log(res.data);
-					setPostImage(res.data.secure_url);
-				})
-				.catch(err => console.log(err));
+			uploadImage({ body: data }).then(res => {
+				setPostImage(res.data.secure_url);
+			});
 		}
 	};
 
@@ -102,16 +99,14 @@ const NewPost = () => {
 			tags
 		};
 
-		createPost({ body: newPost })
-			.then(res => {
-				const post = res.data.data;
-				post.isLiked = false;
-				post.isSaved = false;
-				post.isMine = true;
-				setFeed([post, ...feed]);
-				window.scrollTo(0, 0);
-			})
-			.catch(err => console.log(err));
+		createPost({ body: newPost }).then(res => {
+			const post = res.data.data;
+			post.isLiked = false;
+			post.isSaved = false;
+			post.isMine = true;
+			setFeed([post, ...feed]);
+			window.scrollTo(0, 0);
+		});
 	};
 
 	return (

src/components/NoFeedSuggestions.js

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import Avatar from "../styles/Avatar";
+import Follow from "./Follow";
+import { getUsers } from "../services/api";
+import Loader from "./Loader";
+
+const Wrapper = styled.div`
+	background: ${props => props.theme.white};
+	border: 1px solid ${props => props.theme.borderColor};
+	width: 600px;
+	padding: 1rem;
+	justify-self: center;
+
+	.suggestion {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 1rem;
+	}
+
+	.user-info {
+		display: flex;
+		align-items: center;
+	}
+
+	button {
+		font-size: 0.9rem;
+	}
+
+	@media screen and (max-width: 660px) {
+		width: 500px;
+	}
+
+	@media screen and (max-width: 530px) {
+		width: 450px;
+	}
+
+	@media screen and (max-width: 480px) {
+		width: 380px;
+	}
+
+	@media screen and (max-width: 400px) {
+		width: 340px;
+	}
+`;
+
+const NoFeedSuggestions = () => {
+	const [users, setUsers] = useState([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		getUsers().then(res => {
+			setUsers(res.data.data);
+			setLoading(false);
+		});
+	}, []);
+
+	if (loading) {
+		return <Loader />;
+	}
+
+	return (
+		<div style={{ display: "flex", flexDirection: "column" }}>
+			<h3 style={{ marginBottom: "0.7rem" }}>Suggestions for you</h3>
+			<Wrapper>
+				{users.map(user => (
+					<div key={user._id} className="suggestion">
+						<div className="user-info">
+							<Avatar src={user.avatar} alt="avatar" />
+							<div className="user-meta">
+								<h4>{user.username}</h4>
+								<span className="secondary">{user.fullname}</span>
+							</div>
+						</div>
+						<Follow isFollowing={user.isFollowing} userId={user._id} />
+					</div>
+				))}
+			</Wrapper>
+		</div>
+	);
+};
+
+export default NoFeedSuggestions;

src/components/PostPreview.js

@@ -94,6 +94,12 @@ const Wrapper = styled.div`
 			height: 200px;
 			width: 100%;
 	}
+
+	@media screen and (max-width: 400px) {
+		img, .overlay {
+			height: 170px;
+			width: 100%;
+	}
 	}
 `;
 

src/components/ProfileForm.js

@@ -102,9 +102,7 @@ const ProfileForm = () => {
 		data.append("file", file);
 		data.append("upload_preset", "instaclone");
 
-		uploadImage({ body: data })
-			.then(res => setNewAvatar(res.data.secure_url))
-			.catch(err => console.log(err));
+		uploadImage({ body: data }).then(res => setNewAvatar(res.data.secure_url));
 	};
 
 	const handleEditProfile = e => {
@@ -133,7 +131,6 @@ const ProfileForm = () => {
 
 		editProfile({ body })
 			.then(res => {
-				console.log("submitted");
 				res.data.data.token = user.token;
 
 				// update the user context and localstorage