Skip to content

Commit

Permalink
Feature/like dislike implementation (#18)
Browse files Browse the repository at this point in the history 
* feat: Add TutorialLikesDislikes component for handling tutorial likes and dislikes

* feat: Transition from upVote/downVote to like/dislike system for tutorials

* feat: Add CommentLikesDislikes component for handling comment likes and dislikes

* feat: Transition from upVote/downVote to like/dislike system for comments
  • Loading branch information
@lokeshwar777
lokeshwar777 authored Jul 8, 2024
1 parent ef68cb1 commit 37b89e4
Show file tree
Hide file tree
Showing 7 changed files with 253 additions and 172 deletions.
44 changes: 2 additions & 42 deletions src/components/Card/CardWithPicture.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,11 @@ 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, ToggleButtonGroup } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import { getUserProfileData } from "../../store/actions";
import TutorialLikesDislikes from "../ui-helpers/TutorialLikesDislikes";

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -86,22 +84,9 @@ const useStyles = makeStyles(theme => ({

export default function CardWithPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
const handleIncrement = () => {
setCount(count + 1);
};

const handleDecrement = () => {
setCount(count - 1);
};

const handleAlignment = (event, newAlignment) => {
setAlignment(newAlignment);
};

useEffect(() => {
getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
Expand Down Expand Up @@ -202,32 +187,7 @@ export default function CardWithPicture({ tutorial }) {
{"10 min"}
</Typography>
<div className={classes.grow} />
<ToggleButtonGroup
size="small"
className={classes.small}
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton
className={classes.toggleButton}
onClick={handleIncrement}
value="left"
aria-label="left aligned"
>
<KeyboardArrowUpIcon />
<span>{count}</span>
</ToggleButton>
<ToggleButton
className={classes.toggleButton}
onClick={handleDecrement}
value="center"
aria-label="centered"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<TutorialLikesDislikes tutorial_id={tutorial?.tutorial_id} />
<IconButton aria-label="share" data-testId="CommentIcon">
<ChatOutlinedIcon />
</IconButton>
Expand Down
46 changes: 3 additions & 43 deletions src/components/Card/CardWithoutPicture.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ 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 { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import { getUserProfileData } from "../../store/actions";
import TutorialLikesDislikes from "../ui-helpers/TutorialLikesDislikes";

const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(1),
Expand Down Expand Up @@ -80,22 +78,9 @@ const useStyles = makeStyles(theme => ({

export default function CardWithoutPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
const handleIncrement = () => {
setCount(count + 1);
};

const handleDecrement = () => {
setCount(count - 1);
};

const handleAlignment = (event, newAlignment) => {
setAlignment(newAlignment);
};

useEffect(() => {
getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
Expand Down Expand Up @@ -191,32 +176,7 @@ export default function CardWithoutPicture({ tutorial }) {
{"10 min"}
</Typography>
<div className={classes.grow} />
<ToggleButtonGroup
size="small"
className={classes.small}
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton
className={classes.toggleButton}
onClick={handleIncrement}
value="left"
aria-label="left aligned"
>
<KeyboardArrowUpIcon />
<span>{count}</span>
</ToggleButton>
<ToggleButton
className={classes.toggleButton}
onClick={handleDecrement}
value="center"
aria-label="centered"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<TutorialLikesDislikes tutorial_id={tutorial?.tutorial_id} />
<IconButton aria-label="share" data-testId="CommentIcon">
<ChatOutlinedIcon />
</IconButton>
Expand Down
45 changes: 2 additions & 43 deletions src/components/TutorialPage/components/Commnets/Comment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ import {
import { makeStyles } from "@mui/styles";
import CardActions from "@mui/material/CardActions";
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 React, {
useState,
useEffect,
Expand All @@ -29,6 +25,7 @@ import {
getCommentReply,
addComment
} from "../../../../store/actions/tutorialPageActions";
import CommentLikesDislikes from "../../../ui-helpers/CommentLikesDislikes";
const useStyles = makeStyles(() => ({
container: {
margin: "10px 0",
Expand All @@ -55,7 +52,6 @@ const useStyles = makeStyles(() => ({
const Comment = ({ id }) => {
const classes = useStyles();
const [showReplyfield, setShowReplyfield] = useState(false);
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const firestore = useFirestore();
const firebase = useFirebase();
Expand Down Expand Up @@ -84,18 +80,6 @@ const Comment = ({ id }) => {

const [replies] = repliesArray.filter(replies => replies.comment_id == id);

const handleIncrement = () => {
setCount(count + 1);
};

const handleDecrement = () => {
setCount(count - 1);
};

const handleAlignment = (event, newAlignment) => {
setAlignment(newAlignment);
};

const handleSubmit = comment => {
const commentData = {
content: comment,
Expand Down Expand Up @@ -129,32 +113,7 @@ const Comment = ({ id }) => {
Reply
</Button>
)}
<ToggleButtonGroup
size="small"
className={classes.small}
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton
className={classes.small}
onClick={handleIncrement}
value="left"
aria-label="left aligned"
>
<KeyboardArrowUpIcon />
<span>{count}</span>
</ToggleButton>
<ToggleButton
className={classes.small}
onClick={handleDecrement}
value="center"
aria-label="centered"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<CommentLikesDislikes comment_id={data.comment_id} />
<IconButton aria-label="share" data-testId="MoreIcon">
<MoreVertOutlinedIcon />
</IconButton>
Expand Down
45 changes: 2 additions & 43 deletions src/components/TutorialPage/components/PostDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,13 @@ 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";
const useStyles = makeStyles(() => ({
container: {
padding: "20px",
Expand Down Expand Up @@ -45,8 +42,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(() => {
Expand All @@ -65,17 +60,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 (
<>
Expand Down Expand Up @@ -108,32 +92,7 @@ const PostDetails = ({ details }) => {

<Grid item sx={{ width: "fit-content" }}>
<CardActions className={classes.settings} disableSpacing>
<ToggleButtonGroup
size="small"
className={classes.small}
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton
className={classes.small}
onClick={handleIncrement}
value="left"
aria-label="left aligned"
>
<KeyboardArrowUpIcon />
<span>{count}</span>
</ToggleButton>
<ToggleButton
className={classes.small}
onClick={handleDecrement}
value="center"
aria-label="centered"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<TutorialLikesDislikes tutorial_id={details?.tutorial_id} />
<HashLink to={`/tutorial/${id}#comments`}>
<IconButton aria-label="share" data-testId="CommentIcon">
<ChatOutlinedIcon />
Expand Down
3 changes: 2 additions & 1 deletion src/components/TutorialPage/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ function TutorialPage({ background = "white", textColor = "black" }) {
upVote: tutorial?.upVotes,
downVote: tutorial?.downVotes,
published_on: tutorial?.createdAt,
tag: tutorial?.tut_tags
tag: tutorial?.tut_tags,
tutorial_id: tutorial?.tutorial_id
};

const steps = useSelector(
Expand Down
Loading

0 comments on commit 37b89e4

Please sign in to comment.