feat: 화면 설정 반영
parent
ca4c0e46af
commit
d4050acdab
@ -1,43 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Box } from '@mui/material';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import AuthPattern from 'assets/images/auth/auth-pattern.svg';
|
|
||||||
import AuthPatternDark from 'assets/images/auth/auth-pattern-dark.svg';
|
|
||||||
|
|
||||||
// ===========================|| BACKGROUND GRID PATTERN 1 ||=========================== //
|
|
||||||
|
|
||||||
const BackgroundPattern1 = ({ children }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
component="span"
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
minHeight: '100vh',
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
|
|
||||||
backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
|
|
||||||
position: 'absolute',
|
|
||||||
backgroundPosition: '0 0',
|
|
||||||
overflow: 'hidden',
|
|
||||||
m: '0 0 0 auto',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
BackgroundPattern1.propTypes = {
|
|
||||||
children: PropTypes.node
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BackgroundPattern1;
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Box } from '@mui/material';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import AuthPattern from 'assets/images/auth/img-a2-grid.svg';
|
|
||||||
import AuthPatternDark from 'assets/images/auth/img-a2-grid-dark.svg';
|
|
||||||
|
|
||||||
// ===========================|| BACKGROUND GRID PATTERN 2 ||=========================== //
|
|
||||||
|
|
||||||
const BackgroundPattern2 = ({ children }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
component="span"
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
minHeight: '100%',
|
|
||||||
height: '100vh',
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
|
|
||||||
backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
|
|
||||||
position: 'absolute',
|
|
||||||
backgroundPosition: 'bottom left',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
// backgroundSize: 'cover',
|
|
||||||
overflow: 'hidden',
|
|
||||||
m: '0 0 0 auto',
|
|
||||||
p: '100px 0',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
'& > *': {
|
|
||||||
position: 'relative',
|
|
||||||
zIndex: 5
|
|
||||||
},
|
|
||||||
'&:after': {
|
|
||||||
content: '""',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
zIndex: 1,
|
|
||||||
bottom: 0,
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.light,
|
|
||||||
opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
BackgroundPattern2.propTypes = {
|
|
||||||
children: PropTypes.node
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BackgroundPattern2;
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Button, Card, CardContent, Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import ArrowRightAltRoundedIcon from '@mui/icons-material/ArrowRightAltRounded';
|
|
||||||
|
|
||||||
// ==============================|| BILL CARD ||============================== //
|
|
||||||
|
|
||||||
const BillCard = ({ primary, secondary, link, color, bg }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
return (
|
|
||||||
<Card sx={{ borderLeft: '10px solid', borderColor: color, background: bg }}>
|
|
||||||
<CardContent>
|
|
||||||
<Grid container spacing={0}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="body1" sx={{ color: theme.palette.grey[700] }}>
|
|
||||||
{primary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h2" sx={{ fontWeight: 500, mb: 1.5, color: theme.palette.grey[800] }}>
|
|
||||||
{secondary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Button
|
|
||||||
variant="text"
|
|
||||||
disableElevation
|
|
||||||
disableRipple
|
|
||||||
component={Link}
|
|
||||||
to="#"
|
|
||||||
sx={{
|
|
||||||
color,
|
|
||||||
p: 0,
|
|
||||||
'&:hover': { bgcolor: 'transparent' }
|
|
||||||
}}
|
|
||||||
endIcon={<ArrowRightAltRoundedIcon />}
|
|
||||||
>
|
|
||||||
{link}
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
BillCard.propTypes = {
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
link: PropTypes.string,
|
|
||||||
color: PropTypes.string,
|
|
||||||
bg: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BillCard;
|
|
||||||
@ -1,156 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Box, Button, ButtonBase, Card, Grid, Menu, MenuItem, Stack, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from 'ui-component/extended/Avatar';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
|
||||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
|
||||||
import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
|
|
||||||
import ReplyTwoToneIcon from '@mui/icons-material/ReplyTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| POST & COMMENT - REPLAY ||============================== //
|
|
||||||
|
|
||||||
const Reply = ({ commentId, handleReplayLikes, onReply, postId, reply }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const { id } = reply;
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const replies = reply;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{Object.keys(replies).length > 0 && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Box sx={{ pl: 6.25 }}>
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
padding: '16px 16px 8px',
|
|
||||||
mt: 1.25
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar
|
|
||||||
sx={{ width: 24, height: 24 }}
|
|
||||||
size="sm"
|
|
||||||
alt="User 1"
|
|
||||||
src={replies.profile && replies.profile.avatar && avatarImage(`./${replies.profile.avatar}`).default}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Grid container alignItems="center" spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Typography align="left" variant="h5" component="div">
|
|
||||||
{replies.profile.name}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography align="left" variant="caption">
|
|
||||||
<FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} />{' '}
|
|
||||||
{replies.profile.time}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
sx={{
|
|
||||||
...theme.typography.commonAvatar,
|
|
||||||
...theme.typography.smallAvatar,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
|
||||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
|
||||||
zIndex: 1,
|
|
||||||
transition: 'all .2s ease-in-out',
|
|
||||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
|
||||||
background: theme.palette.secondary.main,
|
|
||||||
color: theme.palette.secondary.light
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-controls="menu-comment-reply"
|
|
||||||
aria-haspopup="true"
|
|
||||||
>
|
|
||||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
|
||||||
</Avatar>
|
|
||||||
</ButtonBase>
|
|
||||||
<Menu
|
|
||||||
id="menu-comment-reply"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography align="left" variant="body2">
|
|
||||||
{replies.data.comment}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}>
|
|
||||||
<Button
|
|
||||||
onClick={() => handleReplayLikes(postId, commentId, id)}
|
|
||||||
variant="text"
|
|
||||||
color="inherit"
|
|
||||||
size="small"
|
|
||||||
startIcon={<ThumbUpAltTwoToneIcon color={replies.data.likes && replies.data.likes.like ? 'secondary' : 'inherit'} />}
|
|
||||||
>
|
|
||||||
{replies.data.likes && replies.data.likes.value ? replies.data.likes.value : 0} likes
|
|
||||||
</Button>
|
|
||||||
<Button variant="text" onClick={onReply} size="small" color="inherit" startIcon={<ReplyTwoToneIcon color="primary" />}>
|
|
||||||
reply
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Reply.propTypes = {
|
|
||||||
commentId: PropTypes.string,
|
|
||||||
handleReplayLikes: PropTypes.func,
|
|
||||||
onReply: PropTypes.func,
|
|
||||||
postId: PropTypes.string,
|
|
||||||
reply: PropTypes.object
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Reply;
|
|
||||||
@ -1,340 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
ButtonBase,
|
|
||||||
Card,
|
|
||||||
Collapse,
|
|
||||||
FormHelperText,
|
|
||||||
Grid,
|
|
||||||
InputAdornment,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Stack,
|
|
||||||
TextField,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery
|
|
||||||
} from '@mui/material';
|
|
||||||
|
|
||||||
// third-party
|
|
||||||
import * as yup from 'yup';
|
|
||||||
import uniqueId from 'lodash/uniqueId';
|
|
||||||
import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Reply from './Reply';
|
|
||||||
import Avatar from 'ui-component/extended/Avatar';
|
|
||||||
import AnimateButton from 'ui-component/extended/AnimateButton';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
|
||||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
|
||||||
import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
|
|
||||||
import ReplyTwoToneIcon from '@mui/icons-material/ReplyTwoTone';
|
|
||||||
import AttachmentRoundedIcon from '@mui/icons-material/AttachmentRounded';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
const validationSchema = yup.object().shape({
|
|
||||||
name: yup.string().required('Reply Field is Required')
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==============================|| COMMENT TEXTFIELD ||============================== //
|
|
||||||
|
|
||||||
const FormInput = ({ bug, label, name, required, ...others }) => {
|
|
||||||
const { control } = useFormContext();
|
|
||||||
|
|
||||||
let isError = false;
|
|
||||||
let errorMessage = '';
|
|
||||||
if (bug && Object.prototype.hasOwnProperty.call(bug, name)) {
|
|
||||||
isError = true;
|
|
||||||
errorMessage = bug[name].message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Controller
|
|
||||||
name={name}
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label={label}
|
|
||||||
InputLabelProps={{
|
|
||||||
className: required ? 'required-label' : '',
|
|
||||||
required: required || false
|
|
||||||
}}
|
|
||||||
error={isError}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{...others}
|
|
||||||
/>
|
|
||||||
{errorMessage && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<FormHelperText error>{errorMessage}</FormHelperText>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FormInput.propTypes = {
|
|
||||||
bug: PropTypes.object,
|
|
||||||
label: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
required: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
// ==============================|| SOCIAL PROFILE - COMMENT ||============================== //
|
|
||||||
|
|
||||||
const Comment = ({ comment, handleCommentLikes, handleReplayLikes, postId, replyAdd, user }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const matchesXS = useMediaQuery(theme.breakpoints.down('md'));
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [openReply, setOpenReply] = useState(false);
|
|
||||||
const handleChangeReply = () => {
|
|
||||||
setOpenReply((prev) => !prev);
|
|
||||||
};
|
|
||||||
|
|
||||||
let repliesResult = <></>;
|
|
||||||
if (Object.keys(comment).length > 0 && comment.data?.replies && comment.data?.replies.length) {
|
|
||||||
repliesResult = comment.data?.replies.map((reply, index) => (
|
|
||||||
<Reply
|
|
||||||
postId={postId}
|
|
||||||
commentId={comment.id}
|
|
||||||
key={index}
|
|
||||||
onReply={handleChangeReply}
|
|
||||||
reply={reply}
|
|
||||||
handleReplayLikes={handleReplayLikes}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: yupResolver(validationSchema)
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
reset
|
|
||||||
} = methods;
|
|
||||||
const onSubmit = async (reply) => {
|
|
||||||
handleChangeReply();
|
|
||||||
const replyId = uniqueId('#REPLY_');
|
|
||||||
const newReply = {
|
|
||||||
id: replyId,
|
|
||||||
profile: user,
|
|
||||||
data: {
|
|
||||||
comment: reply.name,
|
|
||||||
likes: {
|
|
||||||
like: false,
|
|
||||||
value: 0
|
|
||||||
},
|
|
||||||
replies: []
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
replyAdd(postId, comment.id, newReply);
|
|
||||||
reset({ name: '' });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{Object.keys(comment).length > 0 && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
padding: '16px 16px 8px',
|
|
||||||
mt: 1.25
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar
|
|
||||||
sx={{ width: 24, height: 24 }}
|
|
||||||
size="sm"
|
|
||||||
alt="User 1"
|
|
||||||
src={comment.profile && comment.profile.avatar && avatarImage(`./${comment.profile.avatar}`).default}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Grid container alignItems="center" spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Typography align="left" variant="h5" component="div">
|
|
||||||
{comment.profile.name}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography align="left" variant="caption">
|
|
||||||
<FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} /> {comment.profile.time}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<ButtonBase sx={{ borderRadius: '12px' }}>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
sx={{
|
|
||||||
...theme.typography.commonAvatar,
|
|
||||||
...theme.typography.smallAvatar,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
|
||||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
|
||||||
zIndex: 1,
|
|
||||||
transition: 'all .2s ease-in-out',
|
|
||||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
|
||||||
background: theme.palette.secondary.main,
|
|
||||||
color: theme.palette.secondary.light
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-controls="menu-comment"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleClick}
|
|
||||||
>
|
|
||||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
|
||||||
</Avatar>
|
|
||||||
</ButtonBase>
|
|
||||||
<Menu
|
|
||||||
id="menu-comment"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sx={{ '&.MuiGrid-root': { pt: 1.5 } }}>
|
|
||||||
<Typography align="left" variant="body2">
|
|
||||||
{comment.data?.comment}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}>
|
|
||||||
<Button
|
|
||||||
onClick={() => handleCommentLikes(postId, comment.id)}
|
|
||||||
variant="text"
|
|
||||||
color="inherit"
|
|
||||||
size="small"
|
|
||||||
startIcon={<ThumbUpAltTwoToneIcon color={comment.data?.likes && comment.data?.likes.like ? 'secondary' : 'inherit'} />}
|
|
||||||
>
|
|
||||||
{comment.data?.likes && comment.data?.likes.value ? comment.data?.likes.value : 0} likes
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="text"
|
|
||||||
onClick={handleChangeReply}
|
|
||||||
color="inherit"
|
|
||||||
size="small"
|
|
||||||
startIcon={<ReplyTwoToneIcon color="primary" />}
|
|
||||||
>
|
|
||||||
{comment.data?.replies ? comment.data?.replies.length : 0} reply
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
{repliesResult}
|
|
||||||
{/* comment - add new replay */}
|
|
||||||
<Collapse in={openReply} sx={{ width: '100%' }}>
|
|
||||||
{openReply && (
|
|
||||||
<Grid item xs={12} sx={{ pl: { xs: 1, sm: 3 }, pt: 3 }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
ml: 4.25,
|
|
||||||
[theme.breakpoints.down('md')]: {
|
|
||||||
ml: 0
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Grid container spacing={2} alignItems="flex-start">
|
|
||||||
<Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
|
|
||||||
<Avatar
|
|
||||||
sx={{ mt: 1.5 }}
|
|
||||||
alt="User 1"
|
|
||||||
src={comment.profile && comment.profile.avatar && avatarImage(`./${comment.profile.avatar}`).default}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth sx={{ mt: 1 }}>
|
|
||||||
<FormProvider {...methods}>
|
|
||||||
<FormInput
|
|
||||||
fullWidth
|
|
||||||
name="name"
|
|
||||||
label="Write a reply..."
|
|
||||||
size={matchesXS ? 'small' : 'medium'}
|
|
||||||
bug={errors}
|
|
||||||
InputProps={{
|
|
||||||
label: 'Write a reply...',
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">
|
|
||||||
<AttachmentRoundedIcon fontSize="small" />
|
|
||||||
</InputAdornment>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</FormProvider>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<AnimateButton>
|
|
||||||
<Button type="submit" variant="contained" color="secondary" size={matchesXS ? 'small' : 'large'} sx={{ mt: 1.5 }}>
|
|
||||||
Reply
|
|
||||||
</Button>
|
|
||||||
</AnimateButton>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</form>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Collapse>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Comment.propTypes = {
|
|
||||||
comment: PropTypes.object,
|
|
||||||
postId: PropTypes.string,
|
|
||||||
user: PropTypes.object,
|
|
||||||
commentAdd: PropTypes.func,
|
|
||||||
handleCommentLikes: PropTypes.func,
|
|
||||||
handlePostLikes: PropTypes.func,
|
|
||||||
handleReplayLikes: PropTypes.func,
|
|
||||||
post: PropTypes.object,
|
|
||||||
replyAdd: PropTypes.func
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Comment;
|
|
||||||
@ -1,406 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
ButtonBase,
|
|
||||||
CardMedia,
|
|
||||||
Collapse,
|
|
||||||
FormHelperText,
|
|
||||||
Grid,
|
|
||||||
IconButton,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Stack,
|
|
||||||
TextField,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery
|
|
||||||
} from '@mui/material';
|
|
||||||
|
|
||||||
// third-party
|
|
||||||
import * as yup from 'yup';
|
|
||||||
import uniqueId from 'lodash/uniqueId';
|
|
||||||
import { Controller, FormProvider, useForm } from 'react-hook-form';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
import ReactMarkdown from 'react-markdown';
|
|
||||||
import gfm from 'remark-gfm';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Comment from './Comment';
|
|
||||||
import MainCard from '../MainCard';
|
|
||||||
import useAuth from 'hooks/useAuth';
|
|
||||||
import AnimateButton from 'ui-component/extended/AnimateButton';
|
|
||||||
import ImageList from 'ui-component/extended/ImageList';
|
|
||||||
import Avatar from 'ui-component/extended/Avatar';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import ShareTwoToneIcon from '@mui/icons-material/ShareTwoTone';
|
|
||||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
|
||||||
import PeopleAltTwoToneIcon from '@mui/icons-material/PeopleAltTwoTone';
|
|
||||||
import ChatTwoToneIcon from '@mui/icons-material/ChatTwoTone';
|
|
||||||
import ContentCopyTwoToneIcon from '@mui/icons-material/ContentCopyTwoTone';
|
|
||||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
|
||||||
import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
|
|
||||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
|
||||||
import useConfig from 'hooks/useConfig';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
const validationSchema = yup.object().shape({
|
|
||||||
name: yup.string().required('Comment Field is Required')
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==============================|| COMMENT TEXTFIELD ||============================== //
|
|
||||||
|
|
||||||
const FormInput = ({ bug, label, size, fullWidth = true, name, required, ...others }) => {
|
|
||||||
let isError = false;
|
|
||||||
let errorMessage = '';
|
|
||||||
if (bug && Object.prototype.hasOwnProperty.call(bug, name)) {
|
|
||||||
isError = true;
|
|
||||||
errorMessage = bug[name].message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Controller
|
|
||||||
name={name}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField
|
|
||||||
fullWidth={fullWidth}
|
|
||||||
size={size}
|
|
||||||
label={label}
|
|
||||||
InputLabelProps={{
|
|
||||||
className: required ? 'required-label' : '',
|
|
||||||
required: required || false
|
|
||||||
}}
|
|
||||||
error={isError}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{...others}
|
|
||||||
/>
|
|
||||||
{errorMessage && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<FormHelperText error>{errorMessage}</FormHelperText>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FormInput.propTypes = {
|
|
||||||
bug: PropTypes.object,
|
|
||||||
size: PropTypes.string,
|
|
||||||
label: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
required: PropTypes.bool,
|
|
||||||
fullWidth: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
// ==============================|| SOCIAL PROFILE - POST ||============================== //
|
|
||||||
|
|
||||||
const Post = ({ commentAdd, handleCommentLikes, handlePostLikes, handleReplayLikes, post, replyAdd }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { id, data } = post;
|
|
||||||
let { profile } = post;
|
|
||||||
|
|
||||||
profile = { ...profile, name: user?.name || profile.name };
|
|
||||||
|
|
||||||
const { borderRadius } = useConfig();
|
|
||||||
const matchesXS = useMediaQuery(theme.breakpoints.down('md'));
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [anchorSharedEl, setAnchorSharedEl] = React.useState(null);
|
|
||||||
const handleSharedClick = (event) => {
|
|
||||||
setAnchorSharedEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSharedClose = () => {
|
|
||||||
setAnchorSharedEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [openComment, setOpenComment] = React.useState(!(data.comments && data.comments.length > 0));
|
|
||||||
const handleChangeComment = () => {
|
|
||||||
setOpenComment((prev) => !prev);
|
|
||||||
};
|
|
||||||
|
|
||||||
let commentsResult = <></>;
|
|
||||||
|
|
||||||
if (data && data.comments) {
|
|
||||||
commentsResult = data.comments.map((comment) => (
|
|
||||||
<Comment
|
|
||||||
postId={id}
|
|
||||||
comment={comment}
|
|
||||||
key={comment.id}
|
|
||||||
user={profile}
|
|
||||||
replyAdd={replyAdd}
|
|
||||||
handleCommentLikes={handleCommentLikes}
|
|
||||||
handleReplayLikes={handleReplayLikes}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: yupResolver(validationSchema)
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
reset
|
|
||||||
} = methods;
|
|
||||||
const onSubmit = async (comment) => {
|
|
||||||
handleChangeComment();
|
|
||||||
const commentId = uniqueId('#COMMENT_');
|
|
||||||
const newComment = {
|
|
||||||
id: commentId,
|
|
||||||
profile,
|
|
||||||
data: {
|
|
||||||
comment: comment.name,
|
|
||||||
likes: {
|
|
||||||
like: false,
|
|
||||||
value: 0
|
|
||||||
},
|
|
||||||
replies: []
|
|
||||||
}
|
|
||||||
};
|
|
||||||
commentAdd(id, newComment);
|
|
||||||
reset({ name: '' });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar alt="User 1" src={profile.avatar && avatarImage(`./${profile.avatar}`).default} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Grid container alignItems="center" spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Typography align="left" variant="h5" component="div">
|
|
||||||
{profile.name}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography align="left" variant="caption">
|
|
||||||
<FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} /> {profile.time}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
sx={{
|
|
||||||
...theme.typography.commonAvatar,
|
|
||||||
...theme.typography.smallAvatar,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
|
||||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
|
||||||
zIndex: 1,
|
|
||||||
transition: 'all .2s ease-in-out',
|
|
||||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
|
||||||
background: theme.palette.secondary.main,
|
|
||||||
color: theme.palette.secondary.light
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-controls="menu-post"
|
|
||||||
aria-haspopup="true"
|
|
||||||
>
|
|
||||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
|
||||||
</Avatar>
|
|
||||||
</ButtonBase>
|
|
||||||
<Menu
|
|
||||||
id="menu-post"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* post - content */}
|
|
||||||
<Grid
|
|
||||||
item
|
|
||||||
xs={12}
|
|
||||||
sx={{
|
|
||||||
'& > p': {
|
|
||||||
...theme.typography.body1,
|
|
||||||
mb: 0
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ReactMarkdown remarkPlugins={[gfm]}>{data.content}</ReactMarkdown>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* post - photo grid */}
|
|
||||||
{data && data.images && data.images.length > 0 && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<ImageList itemData={data.images} />
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* post - video */}
|
|
||||||
{data.video && (
|
|
||||||
<Grid item xs={12} sx={{ '&.MuiGrid-root': { pt: 2 } }}>
|
|
||||||
<CardMedia
|
|
||||||
sx={{
|
|
||||||
borderRadius: `${borderRadius}px`,
|
|
||||||
height: 330,
|
|
||||||
[theme.breakpoints.down('xl')]: {
|
|
||||||
height: 220
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
component="iframe"
|
|
||||||
src={`https://www.youtube.com/embed/${data.video}`}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* post - comment, likes and replay history */}
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid
|
|
||||||
container
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="space-between"
|
|
||||||
spacing={2}
|
|
||||||
sx={{ mt: 0, color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}
|
|
||||||
>
|
|
||||||
<Grid item>
|
|
||||||
<Stack direction="row" spacing={2}>
|
|
||||||
<Button
|
|
||||||
variant="text"
|
|
||||||
onClick={() => handlePostLikes(id)}
|
|
||||||
color="inherit"
|
|
||||||
size="small"
|
|
||||||
startIcon={<ThumbUpAltTwoToneIcon color={data && data.likes && data.likes.like ? 'primary' : 'inherit'} />}
|
|
||||||
>
|
|
||||||
{data && data.likes && data.likes.value ? data.likes.value : 0}
|
|
||||||
<Typography color="inherit" sx={{ fontWeight: 500, ml: 0.5, display: { xs: 'none', sm: 'block' } }}>
|
|
||||||
likes
|
|
||||||
</Typography>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleChangeComment}
|
|
||||||
size="small"
|
|
||||||
variant="text"
|
|
||||||
color="inherit"
|
|
||||||
startIcon={<ChatBubbleTwoToneIcon color="secondary" />}
|
|
||||||
>
|
|
||||||
{data.comments ? data.comments.length : 0} comments
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<IconButton onClick={handleSharedClick} size="large">
|
|
||||||
<ShareTwoToneIcon sx={{ width: '1rem', height: '1rem' }} />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-post"
|
|
||||||
anchorEl={anchorSharedEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorSharedEl)}
|
|
||||||
onClose={handleSharedClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
'& .MuiSvgIcon-root': {
|
|
||||||
marginRight: '14px',
|
|
||||||
fontSize: '1.25rem'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleSharedClose}>
|
|
||||||
<ShareTwoToneIcon fontSize="inherit" /> Share Now
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleSharedClose}>
|
|
||||||
<PeopleAltTwoToneIcon fontSize="inherit" /> Share to Friends
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleSharedClose}>
|
|
||||||
<ChatTwoToneIcon fontSize="inherit" /> Send in Messanger
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleSharedClose}>
|
|
||||||
<ContentCopyTwoToneIcon fontSize="inherit" /> Copy Link
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
{/* add new comment */}
|
|
||||||
<Collapse in={openComment} sx={{ width: '100%' }}>
|
|
||||||
{openComment && (
|
|
||||||
<Grid item xs={12} sx={{ pt: 2 }}>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Grid container spacing={2} alignItems="flex-start">
|
|
||||||
<Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
|
|
||||||
<Avatar sx={{ mt: 0.75 }} alt="User 1" src={profile.avatar && avatarImage(`./${profile.avatar}`).default} size="xs" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<FormProvider {...methods}>
|
|
||||||
<FormInput fullWidth name="name" label="Write a comment..." size={matchesXS ? 'small' : 'medium'} bug={errors} />
|
|
||||||
</FormProvider>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<AnimateButton>
|
|
||||||
<Button type="submit" variant="contained" color="secondary" size={matchesXS ? 'small' : 'large'} sx={{ mt: 0.5 }}>
|
|
||||||
Comment
|
|
||||||
</Button>
|
|
||||||
</AnimateButton>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</form>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Collapse>
|
|
||||||
{commentsResult}
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Post.propTypes = {
|
|
||||||
commentAdd: PropTypes.func,
|
|
||||||
handleCommentLikes: PropTypes.func,
|
|
||||||
handlePostLikes: PropTypes.func,
|
|
||||||
handleReplayLikes: PropTypes.func,
|
|
||||||
post: PropTypes.object,
|
|
||||||
replyAdd: PropTypes.func
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Post;
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Grid, IconButton, Stack, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
|
|
||||||
// ============================|| ROUND ICON CARD ||============================ //
|
|
||||||
|
|
||||||
const RoundIconCard = ({ primary, secondary, content, iconPrimary, color, bgcolor }) => {
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container alignItems="center" spacing={0} justifyContent="space-between">
|
|
||||||
<Grid item>
|
|
||||||
<Stack spacing={1}>
|
|
||||||
<Typography variant="h5" color="inherit">
|
|
||||||
{primary}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="h3">{secondary}</Typography>
|
|
||||||
<Typography variant="subtitle2" color="inherit">
|
|
||||||
{content}
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<IconButton sx={{ bgcolor, color, '& .MuiSvgIcon-root': { fontSize: '1.5rem' } }} size="large">
|
|
||||||
{primaryIcon}
|
|
||||||
</IconButton>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
RoundIconCard.propTypes = {
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
content: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
color: PropTypes.string,
|
|
||||||
bgcolor: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RoundIconCard;
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme, styled } from '@mui/material/styles';
|
|
||||||
import { Button, Card, CardContent, CardMedia, Chip, Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from '../extended/Avatar';
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
||||||
import TwitterIcon from '@mui/icons-material/Twitter';
|
|
||||||
import LinkedInIcon from '@mui/icons-material/LinkedIn';
|
|
||||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// styles
|
|
||||||
const FacebookWrapper = styled(Button)({
|
|
||||||
padding: 8,
|
|
||||||
background: 'rgba(66, 103, 178, 0.2)',
|
|
||||||
'& svg': {
|
|
||||||
color: '#4267B2'
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
background: '#4267B2',
|
|
||||||
'& svg': {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const TwitterWrapper = styled(Button)({
|
|
||||||
padding: 8,
|
|
||||||
background: 'rgba(29, 161, 242, 0.2)',
|
|
||||||
'& svg': {
|
|
||||||
color: '#1DA1F2'
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
background: '#1DA1F2',
|
|
||||||
'& svg': {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const LinkedInWrapper = styled(Button)({
|
|
||||||
padding: 8,
|
|
||||||
background: 'rgba(14, 118, 168, 0.12)',
|
|
||||||
'& svg': {
|
|
||||||
color: '#0E76A8'
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
background: '#0E76A8',
|
|
||||||
'& svg': {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==============================|| USER PROFILE CARD ||============================== //
|
|
||||||
|
|
||||||
const UserProfileCard = ({ avatar, name, profile, role, status }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
const imageProfile = profile && avatarImage(`./${profile}`).default;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: theme.palette.mode === 'dark' ? 'none' : '1px solid',
|
|
||||||
borderColor: theme.palette.grey[100],
|
|
||||||
textAlign: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardMedia component="img" image={imageProfile} title="Slider5 image" sx={{ height: '125px' }} />
|
|
||||||
<CardContent sx={{ p: 2, pb: '16px !important' }}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Avatar alt={name} src={avatarProfile} sx={{ width: 72, height: 72, m: '-50px auto 0' }} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} alignItems="center">
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h4">{name}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="body2">{role}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
{status === 'Active' ? (
|
|
||||||
<Chip
|
|
||||||
label="Active"
|
|
||||||
size="small"
|
|
||||||
sx={{
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'success.light',
|
|
||||||
color: 'success.dark'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Chip
|
|
||||||
label="Rejected"
|
|
||||||
size="small"
|
|
||||||
sx={{
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'error.light',
|
|
||||||
color: 'error.dark'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<FacebookWrapper fullWidth>
|
|
||||||
<FacebookIcon />
|
|
||||||
</FacebookWrapper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<TwitterWrapper fullWidth>
|
|
||||||
<TwitterIcon />
|
|
||||||
</TwitterWrapper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<LinkedInWrapper fullWidth>
|
|
||||||
<LinkedInIcon />
|
|
||||||
</LinkedInWrapper>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Button variant="outlined" fullWidth startIcon={<ChatBubbleTwoToneIcon />}>
|
|
||||||
Message
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
UserProfileCard.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
profile: PropTypes.string,
|
|
||||||
role: PropTypes.string,
|
|
||||||
status: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserProfileCard;
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme, styled } from '@mui/material/styles';
|
|
||||||
import { Button, Card, Chip, Grid, IconButton, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from '../extended/Avatar';
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
||||||
import TwitterIcon from '@mui/icons-material/Twitter';
|
|
||||||
import LinkedInIcon from '@mui/icons-material/LinkedIn';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// styles
|
|
||||||
const FacebookWrapper = styled(Button)({
|
|
||||||
padding: 8,
|
|
||||||
background: 'rgba(66, 103, 178, 0.2)',
|
|
||||||
'& svg': {
|
|
||||||
color: '#4267B2'
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
background: '#4267B2',
|
|
||||||
'& svg': {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const TwitterWrapper = styled(Button)({
|
|
||||||
padding: 8,
|
|
||||||
background: 'rgba(29, 161, 242, 0.2)',
|
|
||||||
'& svg': {
|
|
||||||
color: '#1DA1F2'
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
background: '#1DA1F2',
|
|
||||||
'& svg': {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const LinkedInWrapper = styled(Button)({
|
|
||||||
padding: 8,
|
|
||||||
background: 'rgba(14, 118, 168, 0.12)',
|
|
||||||
'& svg': {
|
|
||||||
color: '#0E76A8'
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
background: '#0E76A8',
|
|
||||||
'& svg': {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==============================|| USER SIMPLE CARD ||============================== //
|
|
||||||
|
|
||||||
const UserSimpleCard = ({ avatar, name, status }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: '1px solid',
|
|
||||||
borderColor: theme.palette.mode === 'dark' ? 'transparent' : theme.palette.grey[100],
|
|
||||||
'&:hover': {
|
|
||||||
border: `1px solid${theme.palette.primary.main}`
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Avatar alt={name} src={avatarProfile} sx={{ width: 72, height: 72 }} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<IconButton size="small" sx={{ mt: -0.75, mr: -0.75 }} onClick={handleClick}>
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
color="inherit"
|
|
||||||
aria-controls="menu-friend-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
sx={{ opacity: 0.6 }}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-simple-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} alignItems="center">
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Typography variant="h4">{name}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
{status === 'Active' ? (
|
|
||||||
<Chip
|
|
||||||
label="Active"
|
|
||||||
size="small"
|
|
||||||
sx={{
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'success.light',
|
|
||||||
color: 'success.dark'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Chip
|
|
||||||
label="Rejected"
|
|
||||||
size="small"
|
|
||||||
sx={{
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'error.light',
|
|
||||||
color: 'error.dark'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<FacebookWrapper fullWidth>
|
|
||||||
<FacebookIcon fontSize="small" />
|
|
||||||
</FacebookWrapper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<TwitterWrapper fullWidth>
|
|
||||||
<TwitterIcon fontSize="small" />
|
|
||||||
</TwitterWrapper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<LinkedInWrapper fullWidth>
|
|
||||||
<LinkedInIcon fontSize="small" />
|
|
||||||
</LinkedInWrapper>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
UserSimpleCard.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
status: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserSimpleCard;
|
|
||||||
Loading…
Reference in New Issue