Skip to content

Commit

Permalink
Added save favourite option
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deepanshu0703 @narayan954
Deepanshu0703 authored and narayan954 committed Jun 1, 2023
1 parent 37d53ea commit 5a4e083
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 71 deletions.
38 changes: 33 additions & 5 deletions src/components/Post.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import CommentIcon from "@mui/icons-material/Comment";
import DeleteTwoToneIcon from "@mui/icons-material/DeleteTwoTone";
import DialogBox from "../reusableComponents/DialogBox";
import EmojiPicker from "emoji-picker-react";
import { FaSave } from "react-icons/fa";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined";
import ImageSlider from "../reusableComponents/ImageSlider";
Expand All @@ -41,14 +42,15 @@ import firebase from "firebase/compat/app";
import { red } from "@mui/material/colors";
import { saveAs } from "file-saver";
import useCreatedAt from "../hooks/useCreatedAt";
import { useSnackbar } from "notistack";
import { useTheme } from "@mui/material/styles";

const ITEM_HEIGHT = 48;

function Post(prop) {
const { postId, user, post, shareModal, setLink, setPostText } = prop;
const { username, caption, imageUrl, avatar, likecount, timestamp } = post;
const time = useCreatedAt(timestamp);

const [comments, setComments] = useState([]);
const [comment, setComment] = useState("");
const [likesNo, setLikesNo] = useState(likecount ? likecount.length : 0);
Expand All @@ -58,17 +60,17 @@ function Post(prop) {
const [Open, setOpen] = useState(false);
const [openEditCaption, setOpenEditCaption] = useState(false);
const [isCommentOpen, setisCommentOpen] = useState(false);
const [readMore, setReadMore] = useState(false);
const [deleteCommentID, setDeleteCommentID] = useState("");
const [openToDeleteComment, setOpenToDeleteComment] = useState(false);
const [readMore, setReadMore] = useState(false);
const navigate = useNavigate();

const time = useCreatedAt(timestamp);
const theme = useTheme();

const navigate = useNavigate();
const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
const { enqueueSnackbar } = useSnackbar();

const open = Boolean(anchorEl);

const docRef = doc(db, "posts", postId);

useEffect(() => {
Expand Down Expand Up @@ -115,6 +117,23 @@ function Post(prop) {
setComment("");
};

const save = async () => {
const localStoragePosts = JSON.parse(localStorage.getItem("posts")) || [];
const postIdExists = localStoragePosts.includes(postId);

if (!postIdExists) {
localStoragePosts.push(postId);
localStorage.setItem("posts", JSON.stringify(localStoragePosts));
enqueueSnackbar("Post added to favourites!", {
variant: "success",
});
} else {
enqueueSnackbar("Post is already in favourites!", {
variant: "error",
});
}
};

const deleteComment = async (event, commentRef) => {
event.preventDefault();
await db
Expand Down Expand Up @@ -160,7 +179,9 @@ function Post(prop) {
// };

const postHasImages = postImages.some((image) => Boolean(image.imageUrl));

const tempLikeCount = likecount ? [...likecount] : [];

const buttonStyle = {
":hover": {
color: "#ff4d4d",
Expand Down Expand Up @@ -207,6 +228,7 @@ function Post(prop) {
const urlimg = JSON.parse(imageUrl)[0].imageUrl;
saveAs(urlimg, "image");
};

const handleClickOpenCaption = async () => {
setOpenEditCaption(true);
};
Expand Down Expand Up @@ -482,6 +504,12 @@ function Post(prop) {
Post
</button>
<div className="social__icons__wrapper">
<FaSave
onClick={save}
style={{ cursor: "pointer", fontSize: "22px" }}
className="post_button"
/>

<div
className="social__icon"
onClick={likesHandler}
Expand Down
189 changes: 123 additions & 66 deletions src/pages/Profile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@ import {
Typography,
useMediaQuery,
} from "@mui/material";
import { auth, storage } from "../lib/firebase";
import { auth, db, storage } from "../lib/firebase";
import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";

import { FaUserCircle } from "react-icons/fa";
import Post from "../components/Post";
import ShareModal from "../components/ShareModal";
import { useSnackbar } from "notistack";
import { useState } from "react";

function Profile() {
const [openShareModal, setOpenShareModal] = useState(false);
const [currentPostLink, setCurrentPostLink] = useState("");
const [postText, setPostText] = useState("");
const [posts, setPosts] = useState([]);
const { name, email, avatar } = useLocation().state;
const isNonMobile = useMediaQuery("(min-width: 768px)");
const { enqueueSnackbar } = useSnackbar();
Expand All @@ -22,6 +28,23 @@ function Profile() {
const [visible, setVisibile] = useState(false);
const navigate = useNavigate();

useEffect(() => {
const fetchPosts = async () => {
const postsRef = db.collection("posts");
const snapshot = await postsRef.get();
const posts = [];
snapshot.forEach((doc) => {
if (
localStorage.getItem("posts") &&
localStorage.getItem("posts").includes(doc.id)
) {
posts.push({ id: doc.id, post: doc.data() });
}
});
setPosts(posts);
};
fetchPosts();
}, []);
const handleBack = () => {
navigate("/dummygram"); // Use navigate function to change the URL
};
Expand Down Expand Up @@ -66,83 +89,117 @@ function Profile() {
};

return (
<Box
height="100vh"
display="flex"
justifyContent="center"
alignItems="center"
>
<>
<Box
width={isNonMobile ? "30%" : "80%"}
paddingY={3}
sx={{ border: "1px solid gray", borderRadius: "10px" }}
height="100vh"
display="flex"
justifyContent="center"
alignItems="center"
>
<Box display="flex" flexDirection="column" gap={1}>
<Box marginX="auto" fontSize="600%">
{profilepic ? (
<Avatar
alt={name}
src={profilepic}
sx={{
width: "30vh",
height: "30vh",
// bgcolor: "royalblue",
border: "2px solid transparent",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}
/>
<Box
width={isNonMobile ? "30%" : "80%"}
paddingY={3}
sx={{ border: "1px solid gray", borderRadius: "10px" }}
display="flex"
justifyContent="center"
>
<Box display="flex" flexDirection="column" gap={1}>
<Box marginX="auto" fontSize="600%">
{profilepic ? (
<Avatar
alt={name}
src={profilepic}
sx={{
width: "30vh",
height: "30vh",
// bgcolor: "royalblue",
border: "2px solid transparent",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}
/>
) : (
<FaUserCircle style={{ width: "25vh", height: "25vh" }} />
)}
</Box>
{name == auth.currentUser.displayName ? (
<Box>
<input
type="file"
id="file"
className="file"
onChange={handleChange}
accept="image/*"
/>
<label htmlFor="file">
<div className="img-edit">Edit Profile Pic</div>
</label>
</Box>
) : (
<FaUserCircle style={{ width: "25vh", height: "25vh" }} />
""
)}
</Box>
{name == auth.currentUser.displayName ? (
<Box>
<input
type="file"
id="file"
className="file"
onChange={handleChange}
accept="image/*"
/>
<label htmlFor="file">
<div className="img-edit">Edit Profile Pic</div>
</label>
</Box>
) : (
""
)}
{visible && (
{visible && (
<Button
onClick={handleSave}
variant="outlined"
sx={{ marginTop: "1rem" }}
>
Save
</Button>
)}
<Divider sx={{ marginTop: "1rem" }} />
<Typography fontSize="1.3rem" fontWeight="600" fontFamily="serif">
{name}
</Typography>
<Divider />
<Typography fontSize="1.5rem" fontWeight="600" fontFamily="serif">
{email && email}
</Typography>
<Button
onClick={handleSave}
onClick={handleBack}
variant="outlined"
sx={{ marginTop: "1rem" }}
>
Save
Back
</Button>
)}
<Divider sx={{ marginTop: "1rem" }} />
<Typography fontSize="1.3rem" fontWeight="600" fontFamily="serif">
{name}
</Typography>
<Divider />
<Typography fontSize="1.5rem" fontWeight="600" fontFamily="serif">
{email && email}
</Typography>
<Button
onClick={handleBack}
variant="outlined"
sx={{ marginTop: "1rem" }}
>
Back
</Button>
</Box>
</Box>
</Box>
</Box>
<ShareModal
openShareModal={openShareModal}
setOpenShareModal={setOpenShareModal}
currentPostLink={currentPostLink}
postText={postText}
/>
<Box>
<div
className="profile__favourites"
style={{ marginTop: "-5em" }}
align="center"
>
{posts.length ? (
<>
<h1>Your Favourites</h1>
{posts.map(({ id, post }) => (
<Post
key={id}
postId={id}
user={auth.currentUser}
post={post}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
))}
</>
) : (
<>You have nothing in favourites</>
)}
</div>
</Box>
</>
);
}

Expand Down

0 comments on commit 5a4e083

Please sign in to comment.