From 5eba266d6290d981cab7eea9aab0d26fb3cd0ff6 Mon Sep 17 00:00:00 2001
From: berkaydoner <berkaydoner13@gmail.com>
Date: Wed, 8 Dec 2021 23:54:57 +0300
Subject: [PATCH] Implemented the initial version of the nested comment-answer
 structure

---
 frontend/src/Views/Comments/Comment.js  | 60 +++++++++++++++++++++++
 frontend/src/Views/Comments/Comments.js | 63 +++++++++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 frontend/src/Views/Comments/Comment.js
 create mode 100644 frontend/src/Views/Comments/Comments.js

diff --git a/frontend/src/Views/Comments/Comment.js b/frontend/src/Views/Comments/Comment.js
new file mode 100644
index 00000000..c84c3aa3
--- /dev/null
+++ b/frontend/src/Views/Comments/Comment.js
@@ -0,0 +1,60 @@
+import {ListItem, ListItemAvatar, ListItemText, Stack, Typography} from "@mui/material";
+import * as React from "react";
+import Avatar from '@mui/material/Avatar';
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+export default function Comment(props){
+    const [open, setOpen] = React.useState(true);
+    const object = props.content
+    const handleClick = () => {
+        setOpen(!open);
+    };
+    const handleReply = () => {
+        if (!props.newcomment.includes("@")) {
+            props.setReply("@" + object.username + " " + props.newcomment)
+        }
+    }
+
+    const contentStyle = {fontSize: 14, display: "inline"}
+    const infoStyle = {fontSize: 12, display: "inline", color: "#677079"}
+
+    const listStyle = {
+        paddingBottom: 0,
+        paddingTop: object.isAnswer ? 0 : "1%",
+        paddingLeft: object.isAnswer ? "10%" : "3%"
+    }
+    return (
+        <React.Fragment>
+            <ListItem alignItems="flex-start" style={listStyle}>
+                <ListItemAvatar>
+                    <Avatar src={object.avatar}/>
+                </ListItemAvatar>
+                <Stack direction="column">
+                    <ListItemText style={{paddingTop: 0, paddingBottom: 0}} primary={object.username}
+                                  secondary={<Typography style={contentStyle}>{object.content}</Typography>}/>
+                    <Stack direction="row" spacing={1}>
+                        {object.creationDate ?
+                            <Typography style={infoStyle}>
+                                {(!object.isAnswer ? "commented at " : "answered at ") +
+                                object.creationDate}</Typography>
+                            : null
+                        }
+                        <button style={{
+                            background: "none", border: "none", marginBottom: "2px", padding: 0,
+                            cursor: "pointer", color: "#525960", fontWeight: "bold"
+                        }}
+                                onClick={handleReply}>reply
+                        </button>
+                    </Stack>
+                </Stack>
+            </ListItem>
+            {object.answers !== null && object.answers !== undefined && object.answers !== []
+                ? object.answers.map(d =>
+                    <Comment content={d} newcomment={props.newcomment} setReply={props.setReply}/>
+                )
+                : null
+            }
+        </React.Fragment>
+    );
+}
diff --git a/frontend/src/Views/Comments/Comments.js b/frontend/src/Views/Comments/Comments.js
new file mode 100644
index 00000000..fd52b231
--- /dev/null
+++ b/frontend/src/Views/Comments/Comments.js
@@ -0,0 +1,63 @@
+import {Box, Dialog, DialogTitle, ListItem, ListItemAvatar, ListItemText, Modal, Typography} from "@mui/material";
+import * as React from "react";
+import Button from "@mui/material/Button";
+import TextField from '@mui/material/TextField';
+import Comment from "./Comment";
+import List from '@mui/material/List';
+import Grid from "@mui/material/Grid";
+import DialogContent from "@mui/material/DialogContent";
+import {useRef} from "react";
+
+export default function Comments(props){
+    const typoStyle = {fontSize:13,display:"flex", flexDirection: "column", justifyContent: "center"}
+    const [open, setOpen] = React.useState(false);
+    const [newComment, setNewComment] = React.useState("");
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+    const handleInput = event => {
+        setNewComment(event.target.value);
+    };
+    const handlePostComment = () => {
+    };
+    const comments = [{avatar:"https://avatars.githubusercontent.com/u/52797716?v=4}",
+        username:"bdoner", content:"It was nice playing with you.", isAnswer:false,
+        creationDate: "2014-11-31T23:00:00-08:00",
+        answers:[{avatar:"https://avatars.githubusercontent.com/u/36790615?v=4}",
+            username:"dogukanakar", content:"Indeed", isAnswer:true,
+            creationDate: "2014-11-31T23:00:00-08:00"},
+            {avatar:"https://avatars.githubusercontent.com/u/56451575?v=4}",
+                username:"sefika", content:":)", isAnswer:true}]},
+            {avatar:"https://avatars.githubusercontent.com/u/36790615?v=4}",
+                username:"dogukanakar", content:"Do you wanna play a rematch?", isAnswer:false,
+                answers:[{avatar:"https://avatars.githubusercontent.com/u/52797716?v=4}",
+                    username:"bdoner", content:"Sure!", isAnswer:true},
+            ]}];
+    return (
+        <div>
+            <Button onClick={handleOpen}>View Comments</Button>
+            <Dialog open={open} onClose={handleClose} fullWidth>
+                <DialogTitle>Comments</DialogTitle>
+                <DialogContent>
+                    <List>
+                        {comments.map(d=>
+                            <React.Fragment>
+                                <Comment content={d} newcomment={newComment} setReply={(e) => {setNewComment(e)}} ref={textInput}/>
+                            </React.Fragment>
+                        )}
+                    </List>
+                    <Grid container spacing={3}>
+                        <Grid item sm={10}>
+                            <TextField id="comment" fullWidth size="small" variant="outlined" placeholder="Add comment..."
+                                    autoFocus style={{marginLeft:"3%",marginBottom:"3%"}}    value={newComment||""} onChange={handleInput}></TextField>
+                        </Grid>
+                        <Grid item sm={2}>
+                            <Button onClick={handlePostComment}>Share</Button>
+                        </Grid>
+                    </Grid>
+                </DialogContent>
+
+            </Dialog>
+        </div>
+    );
+}