Story feature

src/components/ImgUpload/index.css

@@ -190,6 +190,22 @@ input {
   font-size: large;
 }
 
+.shareBtnContainer {
+  width: 100%;
+  display: flex;
+  gap: 5px;
+}
+
+.disable_post_btn {
+  background: grey;
+  cursor: not-allowed;
+}
+
+.disable_post_btn:hover {
+  background: grey;
+  cursor: not-allowed;
+}
+
 @media only screen and (min-width: 800px) {
   .dialogStyle {
     width: 60vw;
@@ -239,6 +255,7 @@ input {
 
   .small_post_view {
     display: none;
+    width: 100%;
   }
 }
 
@@ -263,7 +280,7 @@ input {
   }
 
   .post__caption_section {
-    width: 48vw;
+    width: 100%;
   }
 
   .next_button {

src/components/ImgUpload/index.jsx

@@ -25,6 +25,7 @@ export default function ImgUpload(props) {
   const [imagePreviews, setImagePreviews] = useState([]);
   const [isValidimage, setisValidimage] = useState(true);
   const [buttonPopup, setButtonPopup] = useState(false);
+  const [isStoryUploaded, setIsStoryUploaded] = useState(false);
   const [username, setUsername] = useState("");
 
   const displayName = auth.currentUser.displayName;
@@ -48,8 +49,10 @@ export default function ImgUpload(props) {
       const docRef = doc(db, "users", auth?.currentUser?.uid);
       const docSnap = await getDoc(docRef);
       setUsername(docSnap.data().username);
+      if (docSnap.data().storyTimestamp) {
+        setIsStoryUploaded(true);
+      }
     }
-
     getUsername();
   }, []);
 
@@ -87,30 +90,51 @@ export default function ImgUpload(props) {
     setImagePreviews(images);
   };
 
-  const savePost = async (imageUrl = "") => {
+  const savePost = async (imageUrl = "", type) => {
     try {
-      const postRef = await db.collection("posts").add({
-        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
-        caption: caption,
-        imageUrl,
-        username: username,
-        displayName: props.user.displayName,
-        avatar: props.user.photoURL,
-        likecount: [],
-        uid: auth?.currentUser?.uid,
-      });
+      if (type === "Post") {
+        const postRef = await db.collection("posts").add({
+          timestamp: firebase.firestore.FieldValue.serverTimestamp(),
+          caption: caption,
+          imageUrl,
+          username: username,
+          displayName: props.user.displayName,
+          avatar: props.user.photoURL,
+          likecount: [],
+          uid: auth?.currentUser?.uid,
+        });
 
-      const postId = postRef.id; // Store post ID in a separate variable
+        const postId = postRef.id; // Store post ID in a separate variable
 
-      await db
-        .collection("users")
-        .doc(props.user.uid)
-        .update({
-          posts: firebase.firestore.FieldValue.arrayUnion(postId), // Use postId instead of postRef.id
+        await db
+          .collection("users")
+          .doc(props.user.uid)
+          .update({
+            posts: firebase.firestore.FieldValue.arrayUnion(postId), // Use postId instead of postRef.id
+          });
+      } else {
+        await db.collection("story").add({
+          caption: caption,
+          imageUrl,
+          username: username,
+          uid: auth?.currentUser?.uid,
         });
 
+        const querySnapshot = await db
+          .collection("users")
+          .where("username", "==", username)
+          .get();
+        if (!querySnapshot.empty) {
+          const userRef = querySnapshot.docs[0].ref;
+          // Update the 'storyTimestamp' field
+          await userRef.update({
+            storyTimestamp: firebase.firestore.FieldValue.serverTimestamp(),
+          });
+        }
+      }
+
       playSuccessSound();
-      enqueueSnackbar("Post was uploaded successfully!", {
+      enqueueSnackbar(`${type} uploaded successfully!`, {
         variant: "success",
       });
 
@@ -138,7 +162,7 @@ export default function ImgUpload(props) {
     }
   };
 
-  function handleUpload() {
+  function handleUpload(type) {
     if ((!image && !caption) || !isValidimage) {
       enqueueSnackbar("Upload valid image and caption!", {
         variant: "error",
@@ -152,7 +176,7 @@ export default function ImgUpload(props) {
     }
 
     if (!image) {
-      savePost();
+      savePost("", type);
       return;
     }
 
@@ -167,7 +191,7 @@ export default function ImgUpload(props) {
       },
     })
       .then((urls) => {
-        savePost(JSON.stringify(urls));
+        savePost(JSON.stringify(urls), type);
       })
       .catch((err) => {
         enqueueSnackbar(err.message, {
@@ -311,13 +335,24 @@ export default function ImgUpload(props) {
             }}
             style={{ color: "var(--color) !important" }}
           />
-          <button
-            onClick={handleUpload}
-            disabled={uploadingPost}
-            className="share__button"
-          >
-            Share
-          </button>
+          <div className="shareBtnContainer">
+            <button
+              onClick={() => handleUpload("Post")}
+              disabled={uploadingPost}
+              className="share__button"
+            >
+              Add Post
+            </button>
+            <button
+              onClick={() => handleUpload("Story")}
+              disabled={uploadingPost || isStoryUploaded}
+              className={`share__button ${
+                isStoryUploaded ? "disable_post_btn" : null
+              }`}
+            >
+              Create Story
+            </button>
+          </div>
         </div>
       </div>
       <div className="small_post_view">
@@ -430,6 +465,7 @@ export default function ImgUpload(props) {
               )}
             </div>
             <TextField
+              className="create-post-input"
               onChange={(e) => setCaption(e.target.value)}
               value={caption}
               variant="filled"
@@ -445,16 +481,29 @@ export default function ImgUpload(props) {
                 },
                 "& .MuiFilledInput-root": {
                   background: "transparent",
+                  color: "var(--color)",
                 },
               }}
+              style={{ color: "var(--color) !important" }}
             />
-            <button
-              onClick={handleUpload}
-              disabled={uploadingPost}
-              className="share__button"
-            >
-              Share
-            </button>
+            <div className="shareBtnContainer">
+              <button
+                onClick={() => handleUpload("Post")}
+                disabled={uploadingPost}
+                className="share__button"
+              >
+                Add Post
+              </button>
+              <button
+                onClick={() => handleUpload("Story")}
+                disabled={uploadingPost || isStoryUploaded}
+                className={`share__button ${
+                  isStoryUploaded ? "disable_post_btn" : null
+                }`}
+              >
+                Create Story
+              </button>
+            </div>
           </div>
         )}
       </div>

src/components/Post/index.jsx

@@ -60,7 +60,7 @@ function Post(prop) {
             snapshot.docs.map((doc) => ({
               id: doc.id,
               content: doc.data(),
-            })),
+            }))
           );
         });
     }
@@ -138,13 +138,6 @@ function Post(prop) {
 
   const tempLikeCount = likecount ? [...likecount] : [];
 
-  const buttonStyle = {
-    ":hover": {
-      color: "#FF4D4D",
-      fontSize: "29px",
-    },
-  };
-
   async function likesHandler() {
     if (user && likecount !== undefined) {
       let ind = tempLikeCount.indexOf(user.uid);

src/components/SideBar/index.jsx

@@ -53,7 +53,8 @@ function SideBar({ anonymous }) {
             }
           >
             <div className="sidebar_align">
-              <AddCircleOutlineIcon className="icon" /> <span>New Post</span>
+              <AddCircleOutlineIcon className="icon" />{" "}
+              <span>New Post/Story</span>
             </div>
           </li>
           <li

src/components/Story/index.css

@@ -0,0 +1,74 @@
+.story_main_container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.story_icons {
+  position: absolute;
+  top: 20px;
+  transform: scale(1.4);
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 10px;
+}
+
+.story_close_icon {
+  right: 30px;
+  color: white;
+}
+
+.story_icons:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.story_delete_icon {
+  right: 80px;
+  color: red;
+}
+
+.story_container {
+  position: relative;
+  /* border: 5px solid red; */
+  max-width: 500px;
+  max-height: 500px;
+  margin: 20px;
+}
+
+.story_bg {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+}
+
+.story_without_image {
+  position: relative;
+}
+
+.caption_without_image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 20px;
+}
+
+.caption_with_image {
+  color: white;
+  width: 100%;
+  text-align: center;
+  padding-block: 10px;
+  font-size: 24px;
+  margin-top: 30px;
+}
+
+.story_image {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: initial;
+}