Skip to content

Commit

Permalink
Merge branch 'scorelab:master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yashasv-Prajapati
Yashasv-Prajapati authored Aug 15, 2023
2 parents 9798c86 + ec86094 commit 296a9c5
Show file tree
Hide file tree
Showing 13 changed files with 615 additions and 325 deletions.
207 changes: 118 additions & 89 deletions src/components/TutorialPage/components/Commnets/Comment.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
import {
Card,
Grid,
Box,
Typography,
Avatar,
TextField,
Button,
IconButton,
InputAdornment,
Paper
} from "@mui/material";
import EmojiPicker from "emoji-picker-react";
import { InsertEmoticon, Send } from "@mui/icons-material";
import AccountCircle from "@mui/icons-material/AccountCircle";
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 } from "react";
import React, {
useState,
useEffect,
useCallback,
useMemo,
useRef
} from "react";
import Textbox from "./Textbox";
import { divide } from "lodash";
import User from "../UserDetails";
import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import {
getCommentData,
getCommentReply,
addComment
} from "../../../../store/actions/tutorialPageActions";
const useStyles = makeStyles(() => ({
container: {
margin: "10px 0",
Expand All @@ -33,6 +39,7 @@ const useStyles = makeStyles(() => ({
fontWeight: "600"
},
comments: {
margin: "5px",
padding: "10px 15px"
},
settings: {
Expand All @@ -45,17 +52,40 @@ const useStyles = makeStyles(() => ({
}
}));

const Comment = () => {
const Comment = ({ id }) => {
const classes = useStyles();
const [commentText, setCommentText] = useState("");
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
const [showReplyfield, setShowReplyfield] = useState(false);
const addEmoji = emoji => {
setCommentText(prev => prev + emoji.emoji);
setShowEmojiPicker(false);
};
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const firestore = useFirestore();
const firebase = useFirebase();
const dispatch = useDispatch();
useState(() => {
getCommentData(id)(firebase, firestore, dispatch);
}, [id]);

const commentsArray = useSelector(
({
tutorialPage: {
comment: { data }
}
}) => data
);

const [data] = commentsArray.filter(comment => comment.comment_id == id);

const repliesArray = useSelector(
({
tutorialPage: {
comment: { replies }
}
}) => replies
);

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

console.log(repliesArray);

const handleIncrement = () => {
setCount(count + 1);
};
Expand All @@ -68,82 +98,81 @@ const Comment = () => {
setAlignment(newAlignment);
};

const handleSubmit = comment => {
const commentData = {
content: comment,
replyTo: data.comment_id,
tutorial_id: data.tutorial_id,
createdAt: firestore.FieldValue.serverTimestamp(),
userId: "codelabzuser"
};
addComment(commentData)(firebase, firestore, dispatch);
};

return (
<>
<Paper variant="outlined" className={classes.comments}>
<Typography mb={1} sx={{ fontSize: "18px" }}>
Amazing content keep it up 😃
</Typography>
<Grid container justifyContent="space-between">
<Grid
item
container
justifyContent="start"
alignItems="start"
columnSpacing={1}
xs={6}
>
<Grid item>
<Avatar sx={{ height: "30px", width: "30px" }}>A</Avatar>
</Grid>
<Grid item sx={{ width: "fit-content" }}>
<Typography sx={{ fontSize: "12px" }}>
<span className={classes.bold}>Abhishek</span>
</Typography>
<Typography
sx={{ fontSize: "10px", opacity: "0.4", fontWeight: "600" }}
>
19th March,2023
</Typography>
</Grid>
</Grid>
<CardActions className={classes.settings} disableSpacing>
{!showReplyfield && (
<Button
onClick={() => setShowReplyfield(true)}
sx={{ textTransform: "none", fontSize: "12px" }}
>
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
data && (
<>
<Paper variant="outlined" className={classes.comments}>
<Typography mb={1} sx={{ fontSize: "18px" }}>
{data?.content}
</Typography>
<Grid container justifyContent="space-between">
<User id={data?.userId} timestamp={data?.createdAt} size={"sm"} />
<CardActions className={classes.settings} disableSpacing>
{!showReplyfield && (
<Button
onClick={() => {
setShowReplyfield(true);
getCommentReply(id)(firebase, firestore, dispatch);
}}
sx={{ textTransform: "none", fontSize: "12px" }}
>
{replies?.replies?.length > 0 && replies?.replies?.length}{" "}
Reply
</Button>
)}
<ToggleButtonGroup
size="small"
className={classes.small}
onClick={handleDecrement}
value="center"
aria-label="centered"
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<IconButton aria-label="share" data-testId="MoreIcon">
<MoreVertOutlinedIcon />
</IconButton>
</CardActions>
</Grid>
</Paper>
{showReplyfield && (
<div style={{ marginLeft: "10px" }}>
<Textbox type="reply" />
</div>
)}
</>
<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>
<IconButton aria-label="share" data-testId="MoreIcon">
<MoreVertOutlinedIcon />
</IconButton>
</CardActions>
</Grid>
</Paper>
{showReplyfield && (
<div style={{ margin: "10px 0 0 10px" }}>
<Textbox type="reply" handleSubmit={handleSubmit} />
{replies?.replies.map((id, index) => {
return <Comment id={id} />;
})}
</div>
)}
</>
)
);
};

Expand Down
63 changes: 28 additions & 35 deletions src/components/TutorialPage/components/Commnets/CommentBox.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,11 @@
import {
Card,
Grid,
Box,
Typography,
Avatar,
TextField,
Button,
IconButton,
InputAdornment,
Paper
} from "@mui/material";
import EmojiPicker from "emoji-picker-react";
import { InsertEmoticon, Send } from "@mui/icons-material";
import AccountCircle from "@mui/icons-material/AccountCircle";
import { Card, Grid, Typography, Button } from "@mui/material";
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 } from "react";
import Textbox from "./Textbox";
import Comment from "./Comment";
import { addComment } from "../../../../store/actions/tutorialPageActions";
import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
const useStyles = makeStyles(() => ({
container: {
margin: "10px 0",
Expand All @@ -45,26 +28,36 @@ const useStyles = makeStyles(() => ({
}
}));

const CommentBox = () => {
const CommentBox = ({ comments, tutorialId }) => {
const classes = useStyles();
const firestore = useFirestore();
const firebase = useFirebase();
const dispatch = useDispatch();
const handleSubmit = comment => {
const commentData = {
content: comment,
replyTo: tutorialId,
tutorial_id: tutorialId,
createdAt: firestore.FieldValue.serverTimestamp(),
userId: "codelabzuser"
};
addComment(commentData)(firebase, firestore, dispatch);
};

return (
<Card className={classes.container}>
<Typography variant="h5" sx={{ fontWeight: "600" }}>
Comments(34)
Comments({comments?.length})
</Typography>
<Textbox />
<Textbox handleSubmit={handleSubmit} />
<Grid container rowSpacing={2}>
<Grid item xs={12}>
<Comment />
</Grid>

<Grid item xs={12}>
<Comment />
</Grid>

<Grid item xs={12}>
<Comment />
</Grid>
{comments?.map((id, index) => {
return (
<Grid item xs={12}>
<Comment id={id} key={index} />
</Grid>
);
})}
<Grid item container justifyContent="center">
<Button sx={{ textTransform: "none", fontSize: "14px" }}>
+ Load More
Expand Down
8 changes: 6 additions & 2 deletions src/components/TutorialPage/components/Commnets/Textbox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import EmojiPicker from "emoji-picker-react";
import { InsertEmoticon, Send } from "@mui/icons-material";
import AccountCircle from "@mui/icons-material/AccountCircle";

const Textbox = ({ type }) => {
const Textbox = ({ type, handleSubmit }) => {
const [commentText, setCommentText] = useState("");
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
const addEmoji = emoji => {
Expand Down Expand Up @@ -67,7 +67,11 @@ const Textbox = ({ type }) => {
)
}}
/>
<Button variant="contained" disableElevation>
<Button
variant="contained"
disableElevation
onClick={() => handleSubmit(commentText)}
>
<Send />
</Button>
</Box>
Expand Down
Loading

0 comments on commit 296a9c5

Please sign in to comment.