+
Popular Tags
@@ -61,7 +61,7 @@ const TagCard = props => {
label={tag}
id={index}
className={classes.chip}
- data-testId={index === 0 ? "TagsChip" : ""}
+ data-testid={index === 0 ? "TagsChip" : ""}
/>
);
})}
diff --git a/src/components/CardTabs/Users/UserElement.jsx b/src/components/CardTabs/Users/UserElement.jsx
index 2a6c2a9c..05fcebe5 100644
--- a/src/components/CardTabs/Users/UserElement.jsx
+++ b/src/components/CardTabs/Users/UserElement.jsx
@@ -15,7 +15,7 @@ const UserElement = ({ user, index, useStyles }) => {
key: "user" + { index },
mb: 1.5
}}
- gutterBottom
+ gutterbottom="true"
>
-
+ {/* 750 ? true : undefined} xs={2} className={classes.sideBody}> */}
+ 750 ? true : undefined}
+ xs={windowSize.width > 750 ? 2 : undefined}
+ className={classes.sideBody}
+ >
{windowSize.width > 750 && (
750 ? true : undefined}
className={classes.leftSideCard}
direction="column"
style={{
@@ -216,17 +222,22 @@ function HomePage({ background = "white", textColor = "black" }) {
boxShadow: "none"
}}
>
-
+ 750 ? true : undefined}
+ className={classes.outerSideBar}
+ >
)}
750 ? true : undefined}
className={classes.mainBody}
- data-testId="homepageMainBody"
- xs={6}
+ data-testid="homepageMainBody"
+ xs={windowSize.width > 750 ? 6 : undefined}
>
-
+ 750 ? true : undefined}
+ sx={{ display: { md: "none" } }}
+ >
{tutorials.map(tutorial => {
@@ -257,7 +272,7 @@ function HomePage({ background = "white", textColor = "black" }) {
-
+ 750 ? true : undefined}
+ className={classes.sideBody}
+ xs={windowSize.width > 750 ? 3 : undefined}
+ >
750 ? true : undefined}
alignContent="center"
direction="column"
style={{
width: "100%"
}}
- data-testId="homepageTagSidebar"
+ data-testid="homepageTagSidebar"
>
-
+ 750 ? true : undefined}
+ style={{ minWidth: "100%" }}
+ >
@@ -325,9 +349,13 @@ function HomePage({ background = "white", textColor = "black" }) {
style={{
width: "100%"
}}
- data-testId="homepageUpcomingEvents"
+ data-testid="homepageUpcomingEvents"
>
-
+ 750 ? true : undefined}
+ style={{ minWidth: "100%" }}
+ >
@@ -338,9 +366,13 @@ function HomePage({ background = "white", textColor = "black" }) {
style={{
width: "100%"
}}
- data-testId="homepageUsersToFollow"
+ data-testid="homepageUsersToFollow"
>
-
+ 750 ? true : undefined}
+ style={{ minWidth: "100%" }}
+ >
@@ -356,9 +388,13 @@ function HomePage({ background = "white", textColor = "black" }) {
border: "none",
boxShadow: "none"
}}
- data-testId="homepageContributors"
+ data-testid="homepageContributors"
>
-
+ 750 ? true : undefined}
+ style={{ minWidth: "100%" }}
+ >
@@ -370,9 +406,13 @@ function HomePage({ background = "white", textColor = "black" }) {
style={{
width: "100%"
}}
- data-testId="homepagePopularEventSidebar"
+ data-testid="homepagePopularEventSidebar"
>
-
+ 750 ? true : undefined}
+ style={{ minWidth: "100%" }}
+ >
diff --git a/src/components/NavBar/new/MiniNavbar/index.jsx b/src/components/NavBar/new/MiniNavbar/index.jsx
index 596e4e5b..ae9579a9 100644
--- a/src/components/NavBar/new/MiniNavbar/index.jsx
+++ b/src/components/NavBar/new/MiniNavbar/index.jsx
@@ -131,13 +131,12 @@ function MiniNavbar() {
-
- {window.innerWidth > 960 && (
- toggleDrawer(true)} />
- )}
- {window.innerWidth <= 960 && (
- toggleSlider()} />
- )}
+
+ window.innerWidth > 960 ? toggleDrawer(true) : toggleSlider()
+ }
+ >
+
diff --git a/src/components/SideBar/sidelist.jsx b/src/components/SideBar/sidelist.jsx
index abc8d879..8d8edd7a 100644
--- a/src/components/SideBar/sidelist.jsx
+++ b/src/components/SideBar/sidelist.jsx
@@ -91,7 +91,7 @@ const SideList = ({
{menuItems.map(function (item, index) {
return (
-
+
Activity
diff --git a/src/components/Topbar/NewCodelabz/index.jsx b/src/components/Topbar/NewCodelabz/index.jsx
index 392d030f..659777b9 100644
--- a/src/components/Topbar/NewCodelabz/index.jsx
+++ b/src/components/Topbar/NewCodelabz/index.jsx
@@ -34,9 +34,9 @@ function NewCodelabz({ setVisibleModal }) {
return (
-
+
setVisibleModal(true)}
>
-
-
-
-
-
+
diff --git a/src/components/TutorialPage/components/Commnets/CommentBox.jsx b/src/components/TutorialPage/components/Commnets/CommentBox.jsx
index 02f462f9..f5e78950 100644
--- a/src/components/TutorialPage/components/Commnets/CommentBox.jsx
+++ b/src/components/TutorialPage/components/Commnets/CommentBox.jsx
@@ -41,7 +41,9 @@ const CommentBox = ({ commentsArray, tutorialId }) => {
replyTo: tutorialId,
tutorial_id: tutorialId,
createdAt: firestore.FieldValue.serverTimestamp(),
- userId: "codelabzuser"
+ userId: "codelabzuser",
+ likes: 0,
+ dislikes: 0
};
addComment(commentData)(firebase, firestore, dispatch);
};
diff --git a/src/components/TutorialPage/components/PostDetails.jsx b/src/components/TutorialPage/components/PostDetails.jsx
index 1c46ac63..a3cf9422 100644
--- a/src/components/TutorialPage/components/PostDetails.jsx
+++ b/src/components/TutorialPage/components/PostDetails.jsx
@@ -8,16 +8,15 @@ import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import ChatOutlinedIcon from "@mui/icons-material/ChatOutlined";
import TurnedInNotOutlinedIcon from "@mui/icons-material/TurnedInNotOutlined";
import MoreVertOutlinedIcon from "@mui/icons-material/MoreVertOutlined";
-import ToggleButton from "@mui/lab/ToggleButton";
-import ToggleButtonGroup from "@mui/lab/ToggleButtonGroup";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import User from "./UserDetails";
import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import { getUserProfileData } from "../../../store/actions";
import { HashLink } from "react-router-hash-link";
import { useParams } from "react-router-dom";
+import TutorialLikesDislikes from "../../ui-helpers/TutorialLikesDislikes.jsx";
+import PropTypes from "prop-types";
+
const useStyles = makeStyles(() => ({
container: {
padding: "20px",
@@ -45,8 +44,6 @@ const PostDetails = ({ details }) => {
const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
- const [alignment, setAlignment] = React.useState("left");
- const [count, setCount] = useState(details.upVote - details.downVote || 0);
const { id } = useParams();
useEffect(() => {
@@ -65,17 +62,6 @@ const PostDetails = ({ details }) => {
return timestamp.toDate().toDateString();
};
- const handleIncrement = () => {
- setCount(count + 1);
- };
-
- const handleDecrement = () => {
- setCount(count - 1);
- };
-
- const handleAlignment = (event, newAlignment) => {
- setAlignment(newAlignment);
- };
const classes = useStyles();
return (
<>
@@ -108,32 +94,7 @@ const PostDetails = ({ details }) => {
-
-
-
-
-
-
+
+
+ {likesCount}
+
+
+ {dislikesCount}
+
+
+ );
+};
+
+CommentLikesDislikes.propTypes = {
+ comment_id: PropTypes.string.isRequired
+};
+
+export default CommentLikesDislikes;
diff --git a/src/components/ui-helpers/TutorialLikesDislikes.jsx b/src/components/ui-helpers/TutorialLikesDislikes.jsx
new file mode 100644
index 00000000..dfb920bd
--- /dev/null
+++ b/src/components/ui-helpers/TutorialLikesDislikes.jsx
@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from "react";
+import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { ThumbUp, ThumbDown } from "@mui/icons-material";
+import { db } from "../../config/index";
+import PropTypes from "prop-types";
+import firebase from "../../config/index";
+
+const TutorialLikesDislikes = ({ tutorial_id }) => {
+ const [userChoice, setUserChoice] = useState(null);
+ const [likesCount, setLikesCount] = useState(0);
+ const [dislikesCount, setDislikesCount] = useState(0);
+
+ const tutorialLikesDocRef = db.collection("tutorial_likes").doc(tutorial_id); // Reference to the document in the "tutorial_likes" collection
+
+ const tutorialLikesDocSnapshot = tutorialLikesDocRef.get();
+ const tutorialDislikesDocRef = db
+ .collection("tutorial_dislikes")
+ .doc(tutorial_id); // Reference to the document in the "tutorial_dislikes" collection
+ const tutorialDislikesDocSnapshot = tutorialDislikesDocRef.get();
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (!firebase.auth().currentUser) {
+ // User not authenticated
+ return;
+ }
+
+ // Check if the current user has already liked the tutorial
+ const likesSnapshot = await tutorialLikesDocRef.get();
+ if (likesSnapshot.exists) {
+ const userIds = likesSnapshot.data().userIds || [];
+ if (userIds.includes(firebase.auth().currentUser.uid)) {
+ setUserChoice("like");
+ }
+ }
+
+ // Check if the current user has already disliked the tutorial
+ const dislikesSnapshot = await tutorialDislikesDocRef.get();
+ if (dislikesSnapshot.exists) {
+ const userIds = dislikesSnapshot.data().userIds || [];
+ if (userIds.includes(firebase.auth().currentUser.uid)) {
+ setUserChoice("dislike");
+ }
+ }
+
+ // Subscribe to like/dislike counts in Firestore
+ const unsubscribeLikes = db
+ .collection("tutorial_likes")
+ .doc(tutorial_id)
+ .onSnapshot(doc => {
+ if (doc.exists) {
+ setLikesCount(doc.data().userIds.length || 0);
+ }
+ });
+
+ const unsubscribeDislikes = db
+ .collection("tutorial_dislikes")
+ .doc(tutorial_id)
+ .onSnapshot(doc => {
+ if (doc.exists) {
+ setDislikesCount(doc.data().userIds.length || 0);
+ }
+ });
+
+ // Unsubscribe from snapshot listeners when component unmounts
+ return () => {
+ unsubscribeLikes();
+ unsubscribeDislikes();
+ };
+ };
+
+ fetchData();
+ }, [tutorial_id]);
+
+ async function handleIncrement(newChoice) {
+ const fieldToUpdate =
+ newChoice === "like" ? "tutorial_likes" : "tutorial_dislikes";
+ const countField = newChoice === "like" ? "likes" : "dislikes";
+ const addUserId = firebase.firestore.FieldValue.arrayUnion(
+ firebase.auth().currentUser.uid
+ );
+
+ // Update like/dislike count of tutorials in Firestore
+ await db
+ .collection("tutorials")
+ .doc(tutorial_id)
+ .update({
+ [countField]: firebase.firestore.FieldValue.increment(1)
+ });
+
+ // Update like/dislike count in Firestore
+ await db
+ .collection(fieldToUpdate)
+ .doc(tutorial_id)
+ .update({
+ [fieldToUpdate + "_count"]: firebase.firestore.FieldValue.increment(1),
+ userIds: addUserId
+ });
+
+ setUserChoice(newChoice);
+ if (newChoice === "like") {
+ setLikesCount(likesCount + 1);
+ } else {
+ setDislikesCount(dislikesCount + 1);
+ }
+
+ // Log the updated array of users
+ const docSnapshot = await db
+ .collection(fieldToUpdate)
+ .doc(tutorial_id)
+ .get();
+ console.log(
+ `array of users who are in ${fieldToUpdate}`,
+ docSnapshot.data().userIds
+ );
+ }
+
+ const handleUserChoice = async (event, newChoice) => {
+ if (!tutorialLikesDocSnapshot.exists) {
+ // Document doesn't exist, create it with initial data
+ await tutorialLikesDocRef.set({
+ tutorial_id: tutorial_id,
+ userIds: [],
+ tutorial_likes_count: 0
+ });
+ }
+
+ if (!tutorialDislikesDocSnapshot.exists) {
+ // Document doesn't exist, create it with initial data
+ await tutorialDislikesDocRef.set({
+ tutorial_id: tutorial_id,
+ userIds: [],
+ tutorial_dislikes_count: 0
+ });
+ }
+
+ if (newChoice) {
+ handleIncrement(newChoice);
+ }
+ if (userChoice) {
+ // Update like/dislike count of tutorials in Firestore
+ await db
+ .collection("tutorials")
+ .doc(tutorial_id)
+ .update({
+ [userChoice + "s"]: firebase.firestore.FieldValue.increment(-1)
+ });
+ }
+ setUserChoice(newChoice);
+ };
+
+ return (
+
+
+ {likesCount}
+
+
+ {dislikesCount}
+
+
+ );
+};
+
+TutorialLikesDislikes.propTypes = {
+ tutorial_id: PropTypes.string.isRequired
+};
+
+export default TutorialLikesDislikes;
\ No newline at end of file
diff --git a/src/config/index.js b/src/config/index.js
index ee402c72..aefbdce6 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -29,7 +29,7 @@ export const onlineFirebaseApp = initializeApp(firebaseConfig, "secondary");
// Initialize firebase instance
firebase.initializeApp(firebaseConfig);
-const db = firebase.firestore(); // <- needed if using firestor
+export const db = firebase.firestore(); // <- needed if using firestor
if (import.meta.env.VITE_APP_USE_EMULATOR) {
firebase.firestore().useEmulator("localhost", 8080);
diff --git a/src/helpers/appBar.jsx b/src/helpers/appBar.jsx
index 6db7a627..dd0c7364 100644
--- a/src/helpers/appBar.jsx
+++ b/src/helpers/appBar.jsx
@@ -109,13 +109,13 @@ const CodeLabzAppBar = () => {
if (authed) {
return (
-
+
+