like animation

Kashishjain04 · May 21, 2021 · 419887a · 419887a
1 parent 05c555a
commit 419887a
Show file tree

Hide file tree

Showing 80 changed files with 78 additions and 61 deletions.
diff --git a/.firebaserc b/.firebaserc
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
diff --git a/craco.config.js b/craco.config.js
diff --git a/firebase.json b/firebase.json
diff --git a/firestore.indexes.json b/firestore.indexes.json
diff --git a/firestore.rules b/firestore.rules
diff --git a/package.json b/package.json
diff --git a/public/images/apple-icon-180.png b/public/images/apple-icon-180.png
diff --git a/public/images/apple-splash-1125-2436.jpg b/public/images/apple-splash-1125-2436.jpg
diff --git a/public/images/apple-splash-1136-640.jpg b/public/images/apple-splash-1136-640.jpg
diff --git a/public/images/apple-splash-1170-2532.jpg b/public/images/apple-splash-1170-2532.jpg
diff --git a/public/images/apple-splash-1242-2208.jpg b/public/images/apple-splash-1242-2208.jpg
diff --git a/public/images/apple-splash-1242-2688.jpg b/public/images/apple-splash-1242-2688.jpg
diff --git a/public/images/apple-splash-1284-2778.jpg b/public/images/apple-splash-1284-2778.jpg
diff --git a/public/images/apple-splash-1334-750.jpg b/public/images/apple-splash-1334-750.jpg
diff --git a/public/images/apple-splash-1536-2048.jpg b/public/images/apple-splash-1536-2048.jpg
diff --git a/public/images/apple-splash-1620-2160.jpg b/public/images/apple-splash-1620-2160.jpg
diff --git a/public/images/apple-splash-1668-2224.jpg b/public/images/apple-splash-1668-2224.jpg
diff --git a/public/images/apple-splash-1668-2388.jpg b/public/images/apple-splash-1668-2388.jpg
diff --git a/public/images/apple-splash-1792-828.jpg b/public/images/apple-splash-1792-828.jpg
diff --git a/public/images/apple-splash-2048-1536.jpg b/public/images/apple-splash-2048-1536.jpg
diff --git a/public/images/apple-splash-2048-2732.jpg b/public/images/apple-splash-2048-2732.jpg
diff --git a/public/images/apple-splash-2160-1620.jpg b/public/images/apple-splash-2160-1620.jpg
diff --git a/public/images/apple-splash-2208-1242.jpg b/public/images/apple-splash-2208-1242.jpg
diff --git a/public/images/apple-splash-2224-1668.jpg b/public/images/apple-splash-2224-1668.jpg
diff --git a/public/images/apple-splash-2388-1668.jpg b/public/images/apple-splash-2388-1668.jpg
diff --git a/public/images/apple-splash-2436-1125.jpg b/public/images/apple-splash-2436-1125.jpg
diff --git a/public/images/apple-splash-2532-1170.jpg b/public/images/apple-splash-2532-1170.jpg
diff --git a/public/images/apple-splash-2688-1242.jpg b/public/images/apple-splash-2688-1242.jpg
diff --git a/public/images/apple-splash-2732-2048.jpg b/public/images/apple-splash-2732-2048.jpg
diff --git a/public/images/apple-splash-2778-1284.jpg b/public/images/apple-splash-2778-1284.jpg
diff --git a/public/images/apple-splash-640-1136.jpg b/public/images/apple-splash-640-1136.jpg
diff --git a/public/images/apple-splash-750-1334.jpg b/public/images/apple-splash-750-1334.jpg
diff --git a/public/images/apple-splash-828-1792.jpg b/public/images/apple-splash-828-1792.jpg
diff --git a/public/images/logo-text.png b/public/images/logo-text.png
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/public/images/manifest-icon-192.png b/public/images/manifest-icon-192.png
diff --git a/public/images/manifest-icon-512.png b/public/images/manifest-icon-512.png
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/screenshots/ss1.png b/public/screenshots/ss1.png
diff --git a/public/screenshots/ss2.png b/public/screenshots/ss2.png
diff --git a/public/screenshots/ss3.png b/public/screenshots/ss3.png
diff --git a/src/App.js b/src/App.js
diff --git a/src/components/ChatForm.js b/src/components/ChatForm.js
diff --git a/src/components/ChatMessages.js b/src/components/ChatMessages.js
diff --git a/src/components/Loading/Nav.js b/src/components/Loading/Nav.js
diff --git a/src/components/Loading/NewPost.js b/src/components/Loading/NewPost.js
diff --git a/src/components/Loading/PostCard.js b/src/components/Loading/PostCard.js
diff --git a/src/components/Loading/Stories.js b/src/components/Loading/Stories.js
diff --git a/src/components/Nav.js b/src/components/Nav.js
diff --git a/src/components/NewPost.js b/src/components/NewPost.js
diff --git a/src/components/NewStory.js b/src/components/NewStory.js
diff --git a/src/components/PostCard.js b/src/components/PostCard.js
@@ -10,13 +10,20 @@ const db = firebase.firestore;
 const PostCard = ({ post, id }) => {
   const user = useSelector(selectUser),
     [comment, setComment] = useState(""),
-    [imgLoaded, setImgLoaded] = useState(post.image === "");
+    [imgLoaded, setImgLoaded] = useState(post.image === ""),
+    [likeAnimate, setLikeAnimate] = useState(false);
 
   const likeHandler = () => {
     db()
       .doc(`posts/${id}`)
       .update({
         likes: db.FieldValue.arrayUnion(user.email),
+      })
+      .then(() => {
+        setLikeAnimate(true);
+        setTimeout(() => {
+          setLikeAnimate(false);
+        }, 1000);
       });
   };
   const unlikeHandler = () => {
@@ -58,12 +65,16 @@ const PostCard = ({ post, id }) => {
 
   useEffect(() => {
     post.image && loadImage(post.image);
+    return () => {
+      setLikeAnimate(false);
+    };
   }, [post]);
 
   return !imgLoaded ? (
     <LoadingPostCard />
   ) : (
-    <div className="bg-white my-2 sm:border sm:border-gray-300 rounded-md">
+    <div className="bg-white my-2 sm:border sm:border-gray-300 rounded-md relative">
+      {/* header */}
       <div className="flex items-center px-4 py-2">
         <Link
           to={
@@ -80,21 +91,28 @@ const PostCard = ({ post, id }) => {
         </Link>
         <p className="text-lg font-semibold">{post.user?.name}</p>
       </div>
-      {post.image ? (
-        <img
-          onDoubleClick={likeHandler}
-          src={post.image}
-          alt="post"
-          className="w-full border-t border-b cursor-pointer"
-        />
-      ) : (
-        <p
-          onDoubleClick={likeHandler}
-          className="p-4 border-t border-b cursor-pointer"
-        >
-          {post.text}
-        </p>
-      )}
+      {/* main content */}
+      <div className="border-t border-b cursot-pointer relative">
+        {/* heart */}
+        {likeAnimate && (
+          <div className="heart-container absolute top-0 left-0 z-10 w-full h-full grid place-items-center">
+            <i className="bx bxs-heart text-white text-9xl instagram-heart" />
+          </div>
+        )}
+        {post.image ? (
+          <img
+            onDoubleClick={likeHandler}
+            src={post.image}
+            alt="post"
+            className="w-full"
+          />
+        ) : (
+          <p onDoubleClick={likeHandler} className="p-4">
+            {post.text}
+          </p>
+        )}
+      </div>
+      {/* like btn */}
       <div className="flex space-x-4 px-4 mt-1">
         {post.likes.includes(user.email) ? (
           <i
@@ -107,18 +125,21 @@ const PostCard = ({ post, id }) => {
             onClick={likeHandler}
           />
         )}
+        {/* other action btns */}
         <i className="bx bx-comment post-action-btn" />
         <i className="bx bx-share post-action-btn" />
       </div>
       <p className="px-4 mb-2 font-semibold text-sm">
         {post.likes?.length} likes
       </p>
+      {/* if image post: caption */}
       {post.image && (
         <p className="px-4 mb-2 -mt-2 line-clamp-1">
           <span className="font-semibold">{post.user.name}: </span>
           <span className="break-all">{post.text}</span>
         </p>
       )}
+      {/* comments */}
       {post.comments?.length !== 0 && (
         <p className="px-4 -mt-2 mb-2 text-sm text-gray-500">Comments</p>
       )}
@@ -128,6 +149,7 @@ const PostCard = ({ post, id }) => {
           <span className="break-all">{comment.comment}</span>
         </p>
       ))}
+      {/* add comment */}
       <form className="border-t flex" onSubmit={commentHandler}>
         <input
           type="text"

diff --git a/src/components/Posts.js b/src/components/Posts.js
diff --git a/src/components/ProfileHeader.js b/src/components/ProfileHeader.js
diff --git a/src/components/ProfilePosts.js b/src/components/ProfilePosts.js
diff --git a/src/components/Stories.js b/src/components/Stories.js
@@ -1,55 +1,25 @@
 import React from "react";
+import { useSelector } from "react-redux";
+import { selectUser } from "../redux/userSlice";
 import NewStory from "./NewStory";
 import StoryCard from "./StoryCard";
 
 const Stories = () => {
+  const user = useSelector(selectUser);
   return (
     <ul className="stories">
       <NewStory />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
-      <StoryCard
-        image="https://lh3.googleusercontent.com/a-/AOh14GhfgSuVig-RNSusuO5_kYuCKLZEBIbxvssam3e8ng=s96-c"
-        userName="Kashish_jain04"
-      />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
+      <StoryCard image={user.photoURL} userName="Kashish_jain04" />
     </ul>
   );
 };

diff --git a/src/components/StoryCard.js b/src/components/StoryCard.js
diff --git a/src/components/StoryImage.js b/src/components/StoryImage.js
diff --git a/src/components/UserHeader.js b/src/components/UserHeader.js
diff --git a/src/hooks/OutsideAlerter.js b/src/hooks/OutsideAlerter.js
diff --git a/src/index.css b/src/index.css
@@ -36,3 +36,28 @@
 * {
   -webkit-tap-highlight-color: transparent;
 }
+
+.instagram-heart {
+  animation-duration: 1000ms;
+  animation-name: like-heart-animation;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes like-heart-animation {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  15% {
+    opacity: 0.9;
+    transform: scale(1.2);
+  }
+  30% {
+    transform: scale(0.95);
+  }
+  45%,
+  80% {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+}
diff --git a/src/index.js b/src/index.js
diff --git a/src/pages/Chat.js b/src/pages/Chat.js
diff --git a/src/pages/Chats.js b/src/pages/Chats.js
diff --git a/src/pages/Home.js b/src/pages/Home.js
diff --git a/src/pages/LoadingHome.js b/src/pages/LoadingHome.js
diff --git a/src/pages/Login.js b/src/pages/Login.js
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
diff --git a/src/pages/User.js b/src/pages/User.js
diff --git a/src/redux/store.js b/src/redux/store.js
diff --git a/src/redux/userSlice.js b/src/redux/userSlice.js
diff --git a/src/service-worker.js b/src/service-worker.js
diff --git a/src/serviceWorkerRegistration.js b/src/serviceWorkerRegistration.js
diff --git a/storage.rules b/storage.rules
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/yarn.lock b/yarn.lock