react-easy-wall 1.3.3 → 2.0.0

package/src/components/comment/comment.store.ts

@@ -0,0 +1,32 @@
+import { createStore } from '@cobuildlab/react-simple-state';
+import { Comment } from '../../shared/types/generated';
+import { ReplyCommentStore } from './comment.types';
+
+export const fetchCommentsStore = createStore<{
+  comments: Comment[];
+  count: number;
+}>({
+  initialValue: {
+    comments: [],
+    count: 0,
+  },
+});
+
+export const postStore = createStore<{ id: number }>({
+  initialValue: {
+    id: 0,
+  },
+});
+
+export const replyCommentStore = createStore<ReplyCommentStore>({
+  initialValue: {
+    message: '',
+    commentId: 0,
+  },
+});
+
+export const openSubscriptionCommentsStore = createStore<{ open: boolean }>({
+  initialValue: {
+    open: false,
+  },
+});

package/src/components/comment/comment.types.ts

@@ -0,0 +1,11 @@
+export type ReplyCommentStore = {
+  message: string;
+  commentId: number;
+};
+
+export type CommentContextType = {
+  callAction: () => void;
+  loadMoreComments: () => void;
+  postId?: number;
+  loading?: boolean;
+};

package/src/components/comment/comment.utils.ts

@@ -0,0 +1,20 @@
+import { BtnEmoji } from '../../shared/components/react-editor/BtnEmoji';
+
+export const getCommentPlaceholder = (isAllowed: boolean) => {
+  if (isAllowed) return '';
+
+  return 'Suscribete para comentar...';
+};
+
+export const editorToolbar = {
+  options: ['inline', 'emoji'],
+  inline: {
+    inDropdown: false,
+    options: ['bold', 'italic'],
+  },
+  emoji: {
+    className: undefined,
+    component: BtnEmoji,
+    popupClassName: undefined,
+  },
+};

package/src/components/comment/components/AddComment.tsx

@@ -0,0 +1,118 @@
+'use client'
+import React, { useState } from 'react';
+import { Avatar, Box, Card } from '@mui/material';
+import { ButtonDefault } from '../../../shared/components/buttons/ButtonDefault';
+import { createStyles, makeStyles } from '@mui/styles';
+import { useComment } from '../comment.hooks';
+
+import { ReactSimpleWysiwyg } from '../../../shared/components/react-editor/ReactSimpleWysiwyg';
+import { useSession } from '../../session/session.hooks';
+import { useCallAction } from '@cobuildlab/react-simple-state';
+import { createComment, openSubscriptionCommentsStoreAction } from '../comment.actions';
+import { Theme } from '@mui/material';
+
+const useStyles = makeStyles<Theme>((theme: Theme) =>
+  createStyles({
+    cardHeader: {
+      '& > .MuiCardHeader-action': {
+        marginTop: 0,
+        marginRight: 0,
+      },
+      '& > .MuiCardHeader-avatar': {
+        outline: '1px solid #eaecf1',
+        borderRadius: '50%',
+      },
+    },
+    button: {
+      minWidth: 130,
+      '&:disabled': {
+        backgroundColor: '#8B8B8B !important',
+      },
+    },
+    addcommentStyles: {
+      display: 'flex',
+      [theme.breakpoints.down('md')]: {
+        display: 'block',
+      },
+    },
+    buttoncommentStyles: {
+      marginLeft: 10,
+      [theme.breakpoints.down('md')]: {
+        marginLeft: 0,
+        marginTop: 10,
+      },
+    },
+    avatarStyles: {
+      marginRight: 10,
+
+      [theme.breakpoints.down('md')]: {
+        marginRight: 0,
+        marginBottom: 10,
+        display: 'flex',
+        alignItems: 'center',
+        alignContent: 'center',
+      },
+    },
+    name: {
+      fontSize: 14,
+      fontWeight: 700,
+    },
+  }),
+);
+
+export const AddComment: React.FC = () => {
+  const classes = useStyles();
+  const { user, subscription } = useSession();
+  const [html, setHtml] = useState<string>('');
+  const { callAction, postId } = useComment();
+
+  const [callCreateComment, loading] = useCallAction(createComment, {
+    onCompleted: () => {
+      setHtml('');
+      callAction();
+    },
+  });
+
+  return (
+    <Card elevation={0}>
+      <Box className={classes.addcommentStyles}>
+        {user ? (
+          <Box className={classes.avatarStyles}>
+            <Avatar sx={{ width: 40, height: 40, marginRight: 1 }} src={user?.avatar as string} />
+            <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+              <Box className={classes.name} mb={1}>
+                {user?.name}
+              </Box>
+            </Box>
+          </Box>
+        ) : null}
+        {
+          <Box component={'div'} style={{ width: '100%' }}>
+            <ReactSimpleWysiwyg value={html} onChange={(value) => setHtml(value)} />
+          </Box>
+        }
+        {
+          <Box className={classes.buttoncommentStyles}>
+            <ButtonDefault
+              disabled={!(html && user)}
+              onClick={() => {
+                if (!subscription) return openSubscriptionCommentsStoreAction(true);
+
+                callCreateComment({
+                  data: {
+                    message: html,
+                    post_id: postId,
+                  },
+                });
+              }}
+              color={!subscription ? 'primary' : 'inherit'}
+              isLoading={loading}
+              className={classes.button}>
+              Comentar
+            </ButtonDefault>
+          </Box>
+        }
+      </Box>
+    </Card>
+  );
+};

package/src/components/comment/components/AddCommentContainer.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import React from 'react';
+import { Box, Card, CardHeader, CardContent, Divider } from '@mui/material';
+import { AddComment } from './AddComment';
+import { makeStyles } from '@mui/styles';
+import { useRouter } from 'next/router';
+import { theme } from '../../../shared/mui/theme';
+import { URL_PORTAL } from '../../../shared/constants';
+import { useSession } from '../../session/session.hooks';
+
+const useStyles = makeStyles({
+  text: {
+    cursor: 'pointer',
+    textDecoration: 'underline',
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5),
+    fontWeight: 700,
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: 700,
+  },
+  cardHeader: {
+    '& > .MuiCardHeader-action': {
+      marginTop: 0,
+      marginRight: 0,
+      marginBottom: theme.spacing(1),
+    },
+    alignItems: 'center',
+  },
+});
+
+export const AddCommentContainer: React.FC = () => {
+  const classes = useStyles();
+  const { user, subscription } = useSession();
+  const router = useRouter();
+  const redirectTo = (url: string) => {
+    const redirectUrl = new URL(url);
+    redirectUrl.searchParams.append('redirect_url', window.location.href);
+    window.location.href = redirectUrl.href;
+  };
+
+  return (
+    <Card elevation={1} sx={{ px: 2, pt: 2 }}>
+      <CardHeader
+        sx={{ p: 0 }}
+        title={
+          user ? (
+            <Box sx={{ display: { xs: 'none', lg: 'block' } }}>
+              <Box className={classes.name} mb={1}>
+                {user?.name}
+              </Box>
+            </Box>
+          ) : null
+        }
+        className={classes.cardHeader}
+        action={
+          !user ? (
+            <Box display="flex">
+              <Box
+                className={classes.text}
+                onClick={() => redirectTo(`${URL_PORTAL}/autenticacion?action=AUTH_LOGIN`)}>
+                Iniciar sesión
+              </Box>
+              <Divider orientation="vertical" flexItem sx={{ mr: 1, ml: 1 }} />
+              <Box
+                className={classes.text}
+                onClick={() => redirectTo(`${URL_PORTAL}/autenticacion?action=AUTH_REGISTER`)}>
+                Registrate
+              </Box>
+            </Box>
+          ) : (
+            <>
+              {!subscription ? (
+                <Box display="flex">
+                  <Box
+                    className={classes.text}
+                    component={'a'}
+                    href={`${URL_PORTAL}/planes?post_url=${URL_PORTAL}${router.asPath}`}>
+                    Suscríbete
+                  </Box>
+                </Box>
+              ) : null}
+            </>
+          )
+        }
+      />
+      <CardContent sx={{ p: 0 }}>
+        <AddComment />
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/comment/components/AddReplyComment.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import React, { useState } from 'react';
+import { Avatar, Box, Card, CardHeader } from '@mui/material';
+import { EditorProvider } from 'react-simple-wysiwyg';
+import { ButtonDefault } from '../../../shared/components/buttons/ButtonDefault';
+import { makeStyles } from '@mui/styles';
+import { useComment } from '../comment.hooks';
+import { ReactSimpleWysiwyg } from '../../../shared/components/react-editor/ReactSimpleWysiwyg';
+import { useCallAction, useStore } from '@cobuildlab/react-simple-state';
+import { replyCommentStore } from '../comment.store';
+import {
+  createReplyComment,
+  openSubscriptionCommentsStoreAction,
+  replyCommentStoreAction,
+} from '../comment.actions';
+import { useSession } from '../../session/session.hooks';
+
+const useStyles = makeStyles({
+  cardHeader: {
+    '& > .MuiCardHeader-action': {
+      marginTop: 0,
+      marginRight: 0,
+    },
+    '& > .MuiCardHeader-avatar': {
+      outline: '1px solid #eaecf1',
+      borderRadius: '50%',
+    },
+  },
+  button: {
+    minWidth: 130,
+  },
+});
+
+export const AddReplyComment: React.FC = () => {
+  const classes = useStyles();
+  const { user, subscription } = useSession();
+  const { message, commentId } = useStore(replyCommentStore);
+  const [html, setHtml] = useState<string>(message);
+  const { callAction, postId } = useComment();
+
+  const [callCreateComment, loading] = useCallAction(createReplyComment, {
+    onCompleted: () => {
+      callAction();
+      replyCommentStoreAction('', 0);
+    },
+  });
+
+  console.log({ html });
+
+  return (
+    <EditorProvider>
+      <Card elevation={0}>
+        <CardHeader
+          sx={{ p: 0 }}
+          className={classes.cardHeader}
+          avatar={
+            user ? (
+              <Avatar
+                sx={{ width: 40, height: 40 }}
+                src={user?.avatar as string}
+              />
+            ) : null
+          }
+          title={
+            <ReactSimpleWysiwyg
+              value={html}
+              onChange={(value) => setHtml(value)}
+            />
+          }
+          action={
+            <Box ml={2}>
+              <ButtonDefault
+                disabled={!(html && user)}
+                onClick={() => {
+                  if (!subscription)
+                    return openSubscriptionCommentsStoreAction(true);
+
+                  callCreateComment({
+                    data: {
+                      message: html,
+                      post_id: postId,
+                      comment_id: commentId,
+                    },
+                  });
+                }}
+                color="primary"
+                isLoading={loading}
+                className={classes.button}
+              >
+                Comentar
+              </ButtonDefault>
+            </Box>
+          }
+        />
+      </Card>
+    </EditorProvider>
+  );
+};

package/src/components/comment/components/AddReplyCommentContainer.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import React from 'react';
+import { Box, Card, CardHeader, CardContent } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+import { AddReplyComment } from './AddReplyComment';
+import { useSession } from '../../session/session.hooks';
+import { theme } from '../../../shared/mui/theme';
+
+const useStyles = makeStyles({
+  name: {
+    fontSize: 14,
+    fontWeight: 700,
+  },
+  cardHeader: {
+    '& > .MuiCardHeader-action': {
+      marginTop: 0,
+      marginRight: 0,
+      marginBottom: theme.spacing(1),
+    },
+    alignItems: 'center',
+  },
+});
+
+export const AddReplyCommentContainer: React.FC = () => {
+  const classes = useStyles();
+  const { user } = useSession();
+
+  return (
+    <Card elevation={1} sx={{ px: 2, pt: 2 }}>
+      <CardHeader
+        sx={{ p: 0 }}
+        title={
+          user ? (
+            <Box className={classes.name} mb={1}>
+              {user?.name}
+            </Box>
+          ) : null
+        }
+        className={classes.cardHeader}
+      />
+      <CardContent sx={{ p: 0 }}>
+        <AddReplyComment />
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/comment/components/CommentContainer.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import React from 'react';
+import { Comment, ReplyComment } from '../../../shared/types/generated';
+import { Box, Divider, Grid } from '@mui/material';
+import { ReplyComments } from './ReplyComments';
+import { CommentItem } from './CommentItem';
+import { useStore } from '@cobuildlab/react-simple-state';
+import { replyCommentStore } from '../comment.store';
+import { AddReplyCommentContainer } from './AddReplyCommentContainer';
+import { replyCommentStoreAction } from '../comment.actions';
+import { PRIMARY_COLOR } from '../../../shared/mui/theme';
+
+type CommentContainerProps = {
+  comment: Comment;
+};
+export const CommentContainer: React.FC<CommentContainerProps> = ({ comment }) => {
+  const { commentId } = useStore(replyCommentStore);
+
+  const onReply = (r: Comment | ReplyComment) => {
+    console.log({ r });
+    if (comment.id === commentId) {
+      replyCommentStoreAction('', 0);
+    } else {
+      replyCommentStoreAction(
+        `<b style="color:${PRIMARY_COLOR}">@${r.user?.name}</b>&nbsp;`,
+        comment.id as number,
+      );
+    }
+  };
+
+  const selectedComment = commentId === comment.id;
+  const haveReplyComments = comment.replies?.length;
+
+  return (
+    <Grid container>
+      <Grid size={12} mb={2}>
+        <CommentItem comment={comment} onReply={onReply} />
+      </Grid>
+      {selectedComment || haveReplyComments ? (
+        <Grid size={12} mb={2}>
+          <Grid container>
+            <Grid size={1}>
+              <Box display="flex" height="100%" justifyContent="center">
+                <Divider orientation="vertical" flexItem />
+              </Box>
+            </Grid>
+            <Grid size={11}>
+              <Grid container spacing={2}>
+                {haveReplyComments ? (
+                  <Grid size={12}>
+                    <ReplyComments
+                      replyComments={(comment.replies || []) as ReplyComment[]}
+                      onReply={onReply}
+                    />
+                  </Grid>
+                ) : null}
+                {selectedComment ? (
+                  <Grid size={12}>
+                    <AddReplyCommentContainer />
+                  </Grid>
+                ) : null}
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      ) : null}
+    </Grid>
+  );
+};

package/src/components/comment/components/CommentItem.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+
+import React from 'react';
+import { Comment, ReplyComment } from '../../../shared/types/generated';
+import {
+  Avatar,
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import moment from 'moment/moment';
+import ReplyIcon from '@mui/icons-material/Reply';
+import 'moment/locale/es';
+
+moment.locale('es');
+
+const useStyles = makeStyles({
+  cardHeader: {
+    '& > .MuiCardHeader-action': {
+      marginTop: 0,
+      marginRight: 0,
+    },
+    '& > .MuiCardHeader-avatar': {
+      outline: '1px solid #eaecf1',
+      borderRadius: '50%',
+    },
+    alignItems: 'center',
+  },
+  reply: {
+    cursor: 'pointer',
+  },
+});
+
+type CommentItemProps = {
+  comment: Comment | ReplyComment;
+  onReply: (comment: Comment | ReplyComment) => void;
+};
+export const CommentItem: React.FC<CommentItemProps> = ({
+  comment,
+  onReply,
+}) => {
+  const classes = useStyles();
+  const { user } = comment;
+
+  return (
+    <Card>
+      <CardHeader
+        className={classes.cardHeader}
+        title={
+          <Box display="flex">
+            <Typography variant="body1" fontWeight={700} mr={1} fontSize={14}>
+              {user?.name}
+            </Typography>
+            <Typography variant="body1" fontSize={14}>
+              {moment(parseInt(comment.created_at as string)).fromNow()}
+            </Typography>
+          </Box>
+        }
+        avatar={
+          <Avatar sx={{ width: 40, height: 40 }} src={user?.avatar as string} />
+        }
+        action={
+          <Box
+            display="flex"
+            alignItems="center"
+            className={classes.reply}
+            onClick={() => {
+              onReply(comment);
+            }}
+          >
+            <ReplyIcon color="primary" />
+            <Typography variant="body2" fontWeight={700} color="primary">
+              {' '}
+              Responder
+            </Typography>
+          </Box>
+        }
+      />
+      <CardContent>
+        <div
+          dangerouslySetInnerHTML={{ __html: comment.message as string }}
+        ></div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/comment/components/CommentSubscriptionDialog.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from 'react';
+import { DialogDefault } from '../../../shared/components/dialog/DialogDefault';
+import { useStore } from '@cobuildlab/react-simple-state';
+import { openSubscriptionCommentsStore } from '../comment.store';
+import { openSubscriptionCommentsStoreAction } from '../comment.actions';
+import { Typography, Box } from '@mui/material';
+import {URL_PORTAL} from "../../../shared/constants";
+
+export const CommentSubscriptionDialog: React.FC = () => {
+  const { open } = useStore(openSubscriptionCommentsStore);
+  return (
+    <DialogDefault
+      isOpen={open}
+      showActions
+      handleClose={() => openSubscriptionCommentsStoreAction(false)}
+      successText="SUSCRIBIRTE"
+      handleSuccess={() =>
+        (window.location.href = `${URL_PORTAL}/planes`)
+      }
+    >
+      <Box px={2} textAlign="center">
+        <Typography fontSize={20} fontWeight={700}>
+          Debes tener una suscripción activa para poder realizar un comentario
+        </Typography>
+      </Box>
+    </DialogDefault>
+  );
+};

package/src/components/comment/components/ReplyComments.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+
+import React from 'react';
+import { Comment, ReplyComment } from '../../../shared/types/generated';
+import { Grid } from '@mui/material';
+import { CommentItem } from './CommentItem';
+
+type ReplyCommentsProps = {
+  replyComments: ReplyComment[];
+  onReply: (comment: Comment | ReplyComment) => void;
+};
+
+export const ReplyComments: React.FC<ReplyCommentsProps> = ({
+  replyComments,
+  onReply,
+}) => {
+  return (
+    <Grid container spacing={2}>
+      {replyComments?.map((replyComment, key) => (
+        <Grid size={12} key={key}>
+          <CommentItem comment={replyComment} onReply={onReply} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};

package/src/components/comment/components/ShowMoreComments.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import React from 'react';
+import { Box, Grid, Paper } from '@mui/material';
+import { useStore } from '@cobuildlab/react-simple-state';
+import { fetchCommentsStore } from '../comment.store';
+import { makeStyles } from '@mui/styles';
+import { useComment } from '../comment.hooks';
+
+const useStyles = makeStyles({
+  root: {
+    cursor: 'pointer',
+  },
+});
+
+export const ShowMoreComments: React.FC = () => {
+  const { comments, count } = useStore(fetchCommentsStore);
+  const classes = useStyles();
+
+  const { loading, loadMoreComments } = useComment();
+
+  return count > comments.length ? (
+    <Grid size={12}>
+      <Paper
+        elevation={1}
+        className={classes.root}
+        onClick={() => loadMoreComments()}
+      >
+        <Box p={1} textAlign="center">
+          {loading ? 'Cargando...' : 'Ver más comentarios'}
+        </Box>
+      </Paper>
+    </Grid>
+  ) : null;
+};

package/src/components/comment/index.ts

@@ -0,0 +1,3 @@
+export * from './Comments'
+export * from './CommentContext'
+export * from './CommentProvider'