Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added save favourite option #407

Merged
merged 1 commit into from
Jun 1, 2023
Merged

Added save favourite option #407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 33 additions & 5 deletions src/components/Post.jsx
View file
Open in desktop
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
Open in desktop
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