Merge pull request #572 from mojoee/addingHeader

Adding header

components/CreateReplyRequestForm/CreateReplyRequestForm.js

@@ -101,6 +101,7 @@ const CREATE_REPLY_REQUEST = gql`
   mutation CreateReplyRequestFromForm($articleId: String!, $reason: String!) {
     CreateReplyRequest(articleId: $articleId, reason: $reason) {
       id
+      updatedAt
     }
   }
 `;

components/ReplyRequestReason/ReplyRequestReason.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/react-hooks';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Button } from '@material-ui/core';
+import TimeInfo from 'components/Infos/TimeInfo';
+import Link from 'next/link';
 
 import { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
@@ -22,6 +24,16 @@ const useStyles = makeStyles(theme => ({
       borderTop: `1px solid ${theme.palette.secondary[100]}`,
     },
   },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  user: {
+    margin: 0,
+    marginRight: 5,
+    fontWeight: 'bold',
+  },
   reason: {
     marginTop: 0,
   },
@@ -61,7 +73,7 @@ const ReplyRequestInfo = gql`
     reason
     positiveFeedbackCount
     negativeFeedbackCount
-
+    updatedAt
     user {
       id
       name
@@ -113,6 +125,10 @@ function ReplyRequestReason({ replyRequest, articleId }) {
         <Avatar user={user} size={40} />
       </Box>
       <Box flex={1} className={classes.reasonBody}>
+        <Box className={classes.header}>
+          <p className={classes.user}>{user.id}</p>
+          <TimeInfo time={replyRequest.updatedAt}/>
+        </Box>
         <p className={classes.reason}>{replyRequestReason}</p>
         <Box display="flex" justifyContent="space-between">
           <Box display="flex">