@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/chat/chat-header-compose.jsx

@@ -1,112 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import Avatar from '@mui/material/Avatar';
-import { alpha } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import Autocomplete from '@mui/material/Autocomplete';
-
-import Iconify from 'src/components/iconify';
-import SearchNotFound from 'src/components/search-not-found';
-
-// ----------------------------------------------------------------------
-
-export default function ChatHeaderCompose({ contacts, onAddRecipients }) {
-  const [searchRecipients, setSearchRecipients] = useState('');
-
-  const handleAddRecipients = useCallback(
-    (selected) => {
-      setSearchRecipients('');
-      onAddRecipients(selected);
-    },
-    [onAddRecipients]
-  );
-
-  return (
-    <>
-      <Typography variant="subtitle2" sx={{ color: 'text.primary', mr: 2 }}>
-        To:
-      </Typography>
-
-      <Autocomplete
-        sx={{ minWidth: 320 }}
-        multiple
-        limitTags={3}
-        popupIcon={null}
-        defaultValue={[]}
-        disableCloseOnSelect
-        noOptionsText={<SearchNotFound query={searchRecipients} />}
-        onChange={(event, newValue) => handleAddRecipients(newValue)}
-        onInputChange={(event, newValue) => setSearchRecipients(newValue)}
-        options={contacts}
-        getOptionLabel={(recipient) => recipient.name}
-        isOptionEqualToValue={(option, value) => option.id === value.id}
-        renderInput={(params) => <TextField {...params} placeholder="+ Recipients" />}
-        renderOption={(props, recipient, { selected }) => (
-          <li {...props} key={recipient.id}>
-            <Box
-              key={recipient.id}
-              sx={{
-                mr: 1,
-                width: 32,
-                height: 32,
-                overflow: 'hidden',
-                borderRadius: '50%',
-                position: 'relative',
-              }}
-            >
-              <Avatar alt={recipient.name} src={recipient.avatarUrl} sx={{ width: 1, height: 1 }} />
-              <Stack
-                alignItems="center"
-                justifyContent="center"
-                sx={{
-                  top: 0,
-                  left: 0,
-                  width: 1,
-                  height: 1,
-                  opacity: 0,
-                  position: 'absolute',
-                  bgcolor: (theme) => alpha(theme.palette.grey[900], 0.8),
-                  transition: (theme) =>
-                    theme.transitions.create(['opacity'], {
-                      easing: theme.transitions.easing.easeInOut,
-                      duration: theme.transitions.duration.shorter,
-                    }),
-                  ...(selected && {
-                    opacity: 1,
-                    color: 'primary.main',
-                  }),
-                }}
-              >
-                <Iconify icon="eva:checkmark-fill" />
-              </Stack>
-            </Box>
-
-            {recipient.name}
-          </li>
-        )}
-        renderTags={(selected, getTagProps) =>
-          selected.map((recipient, index) => (
-            <Chip
-              {...getTagProps({ index })}
-              key={recipient.id}
-              label={recipient.name}
-              avatar={<Avatar alt={recipient.name} src={recipient.avatarUrl} />}
-              size="small"
-              variant="soft"
-            />
-          ))
-        }
-      />
-    </>
-  );
-}
-
-ChatHeaderCompose.propTypes = {
-  contacts: PropTypes.array,
-  onAddRecipients: PropTypes.func,
-};

package/minimal/src/sections/chat/chat-header-detail.jsx

@@ -1,84 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-import Avatar from '@mui/material/Avatar';
-import IconButton from '@mui/material/IconButton';
-import ListItemText from '@mui/material/ListItemText';
-import AvatarGroup, { avatarGroupClasses } from '@mui/material/AvatarGroup';
-
-import { fToNow } from 'src/utils/format-time';
-
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-export default function ChatHeaderDetail({ participants }) {
-  const group = participants.length > 1;
-
-  const singleParticipant = participants[0];
-
-  const renderGroup = (
-    <AvatarGroup
-      max={3}
-      sx={{
-        [`& .${avatarGroupClasses.avatar}`]: {
-          width: 32,
-          height: 32,
-        },
-      }}
-    >
-      {participants.map((participant) => (
-        <Avatar key={participant.id} alt={participant.name} src={participant.avatarUrl} />
-      ))}
-    </AvatarGroup>
-  );
-
-  const renderSingle = (
-    <Stack flexGrow={1} direction="row" alignItems="center" spacing={2}>
-      <Badge
-        variant={singleParticipant.status}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      >
-        <Avatar src={singleParticipant.avatarUrl} alt={singleParticipant.name} />
-      </Badge>
-
-      <ListItemText
-        primary={singleParticipant.name}
-        secondary={
-          singleParticipant.status === 'offline'
-            ? fToNow(singleParticipant.lastActivity)
-            : singleParticipant.status
-        }
-        secondaryTypographyProps={{
-          component: 'span',
-          ...(singleParticipant.status !== 'offline' && {
-            textTransform: 'capitalize',
-          }),
-        }}
-      />
-    </Stack>
-  );
-
-  return (
-    <>
-      {group ? renderGroup : renderSingle}
-
-      <Stack flexGrow={1} />
-
-      <IconButton>
-        <Iconify icon="solar:phone-bold" />
-      </IconButton>
-      <IconButton>
-        <Iconify icon="solar:videocamera-record-bold" />
-      </IconButton>
-      <IconButton>
-        <Iconify icon="eva:more-vertical-fill" />
-      </IconButton>
-    </>
-  );
-}
-
-ChatHeaderDetail.propTypes = {
-  participants: PropTypes.array,
-};

package/minimal/src/sections/chat/chat-message-input.jsx

@@ -1,153 +0,0 @@
-import { sub } from 'date-fns';
-import PropTypes from 'prop-types';
-import { useRef, useMemo, useState, useCallback } from 'react';
-
-import Stack from '@mui/material/Stack';
-import InputBase from '@mui/material/InputBase';
-import IconButton from '@mui/material/IconButton';
-
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-
-import { useMockedUser } from 'src/hooks/use-mocked-user';
-
-import uuidv4 from 'src/utils/uuidv4';
-
-import { sendMessage, createConversation } from 'src/api/chat';
-
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-export default function ChatMessageInput({
-  recipients,
-  onAddRecipients,
-  //
-  disabled,
-  selectedConversationId,
-}) {
-  const router = useRouter();
-
-  const { user } = useMockedUser();
-
-  const fileRef = useRef(null);
-
-  const [message, setMessage] = useState('');
-
-  const myContact = useMemo(
-    () => ({
-      id: `${user?.id}`,
-      role: `${user?.role}`,
-      email: `${user?.email}`,
-      address: `${user?.address}`,
-      name: `${user?.displayName}`,
-      lastActivity: new Date(),
-      avatarUrl: `${user?.photoURL}`,
-      phoneNumber: `${user?.phoneNumber}`,
-      status: 'online',
-    }),
-    [user]
-  );
-
-  const messageData = useMemo(
-    () => ({
-      id: uuidv4(),
-      attachments: [],
-      body: message,
-      contentType: 'text',
-      createdAt: sub(new Date(), { minutes: 1 }),
-      senderId: myContact.id,
-    }),
-    [message, myContact.id]
-  );
-
-  const conversationData = useMemo(
-    () => ({
-      id: uuidv4(),
-      messages: [messageData],
-      participants: [...recipients, myContact],
-      type: recipients.length > 1 ? 'GROUP' : 'ONE_TO_ONE',
-      unreadCount: 0,
-    }),
-    [messageData, myContact, recipients]
-  );
-
-  const handleAttach = useCallback(() => {
-    if (fileRef.current) {
-      fileRef.current.click();
-    }
-  }, []);
-
-  const handleChangeMessage = useCallback((event) => {
-    setMessage(event.target.value);
-  }, []);
-
-  const handleSendMessage = useCallback(
-    async (event) => {
-      try {
-        if (event.key === 'Enter') {
-          if (message) {
-            if (selectedConversationId) {
-              await sendMessage(selectedConversationId, messageData);
-            } else {
-              const res = await createConversation(conversationData);
-
-              router.push(`${paths.dashboard.chat}?id=${res.conversation.id}`);
-
-              onAddRecipients([]);
-            }
-          }
-          setMessage('');
-        }
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    [conversationData, message, messageData, onAddRecipients, router, selectedConversationId]
-  );
-
-  return (
-    <>
-      <InputBase
-        value={message}
-        onKeyUp={handleSendMessage}
-        onChange={handleChangeMessage}
-        placeholder="Type a message"
-        disabled={disabled}
-        startAdornment={
-          <IconButton>
-            <Iconify icon="eva:smiling-face-fill" />
-          </IconButton>
-        }
-        endAdornment={
-          <Stack direction="row" sx={{ flexShrink: 0 }}>
-            <IconButton onClick={handleAttach}>
-              <Iconify icon="solar:gallery-add-bold" />
-            </IconButton>
-            <IconButton onClick={handleAttach}>
-              <Iconify icon="eva:attach-2-fill" />
-            </IconButton>
-            <IconButton>
-              <Iconify icon="solar:microphone-bold" />
-            </IconButton>
-          </Stack>
-        }
-        sx={{
-          px: 1,
-          height: 56,
-          flexShrink: 0,
-          borderTop: (theme) => `solid 1px ${theme.palette.divider}`,
-        }}
-      />
-
-      <input type="file" ref={fileRef} style={{ display: 'none' }} />
-    </>
-  );
-}
-
-ChatMessageInput.propTypes = {
-  disabled: PropTypes.bool,
-  onAddRecipients: PropTypes.func,
-  recipients: PropTypes.array,
-  selectedConversationId: PropTypes.string,
-};

package/minimal/src/sections/chat/chat-message-item.jsx

@@ -1,153 +0,0 @@
-import PropTypes from 'prop-types';
-import { formatDistanceToNowStrict } from 'date-fns';
-
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Avatar from '@mui/material/Avatar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-
-import { useMockedUser } from 'src/hooks/use-mocked-user';
-
-import Iconify from 'src/components/iconify';
-
-import { useGetMessage } from './hooks';
-
-// ----------------------------------------------------------------------
-
-export default function ChatMessageItem({ message, participants, onOpenLightbox }) {
-  const { user } = useMockedUser();
-
-  const { me, senderDetails, hasImage } = useGetMessage({
-    message,
-    participants,
-    currentUserId: `${user?.id}`,
-  });
-
-  const { firstName, avatarUrl } = senderDetails;
-
-  const { body, createdAt } = message;
-
-  const renderInfo = (
-    <Typography
-      noWrap
-      variant="caption"
-      sx={{
-        mb: 1,
-        color: 'text.disabled',
-        ...(!me && {
-          mr: 'auto',
-        }),
-      }}
-    >
-      {!me && `${firstName},`} &nbsp;
-      {formatDistanceToNowStrict(new Date(createdAt), {
-        addSuffix: true,
-      })}
-    </Typography>
-  );
-
-  const renderBody = (
-    <Stack
-      sx={{
-        p: 1.5,
-        minWidth: 48,
-        maxWidth: 320,
-        borderRadius: 1,
-        typography: 'body2',
-        bgcolor: 'background.neutral',
-        ...(me && {
-          color: 'grey.800',
-          bgcolor: 'primary.lighter',
-        }),
-        ...(hasImage && {
-          p: 0,
-          bgcolor: 'transparent',
-        }),
-      }}
-    >
-      {hasImage ? (
-        <Box
-          component="img"
-          alt="attachment"
-          src={body}
-          onClick={() => onOpenLightbox(body)}
-          sx={{
-            minHeight: 220,
-            borderRadius: 1.5,
-            cursor: 'pointer',
-            '&:hover': {
-              opacity: 0.9,
-            },
-          }}
-        />
-      ) : (
-        body
-      )}
-    </Stack>
-  );
-
-  const renderActions = (
-    <Stack
-      direction="row"
-      className="message-actions"
-      sx={{
-        pt: 0.5,
-        opacity: 0,
-        top: '100%',
-        left: 0,
-        position: 'absolute',
-        transition: (theme) =>
-          theme.transitions.create(['opacity'], {
-            duration: theme.transitions.duration.shorter,
-          }),
-        ...(me && {
-          left: 'unset',
-          right: 0,
-        }),
-      }}
-    >
-      <IconButton size="small">
-        <Iconify icon="solar:reply-bold" width={16} />
-      </IconButton>
-      <IconButton size="small">
-        <Iconify icon="eva:smiling-face-fill" width={16} />
-      </IconButton>
-      <IconButton size="small">
-        <Iconify icon="solar:trash-bin-trash-bold" width={16} />
-      </IconButton>
-    </Stack>
-  );
-
-  return (
-    <Stack direction="row" justifyContent={me ? 'flex-end' : 'unset'} sx={{ mb: 5 }}>
-      {!me && <Avatar alt={firstName} src={avatarUrl} sx={{ width: 32, height: 32, mr: 2 }} />}
-
-      <Stack alignItems="flex-end">
-        {renderInfo}
-
-        <Stack
-          direction="row"
-          alignItems="center"
-          sx={{
-            position: 'relative',
-            '&:hover': {
-              '& .message-actions': {
-                opacity: 1,
-              },
-            },
-          }}
-        >
-          {renderBody}
-          {renderActions}
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-}
-
-ChatMessageItem.propTypes = {
-  message: PropTypes.object,
-  onOpenLightbox: PropTypes.func,
-  participants: PropTypes.array,
-};

package/minimal/src/sections/chat/chat-message-list.jsx

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-
-import Scrollbar from 'src/components/scrollbar';
-import Lightbox, { useLightBox } from 'src/components/lightbox';
-
-import { useMessagesScroll } from './hooks';
-import ChatMessageItem from './chat-message-item';
-
-// ----------------------------------------------------------------------
-
-export default function ChatMessageList({ messages = [], participants }) {
-  const { messagesEndRef } = useMessagesScroll(messages);
-
-  const slides = messages
-    .filter((message) => message.contentType === 'image')
-    .map((message) => ({ src: message.body }));
-
-  const lightbox = useLightBox(slides);
-
-  return (
-    <>
-      <Scrollbar ref={messagesEndRef} sx={{ px: 3, py: 5, height: 1 }}>
-        <Box>
-          {messages.map((message) => (
-            <ChatMessageItem
-              key={message.id}
-              message={message}
-              participants={participants}
-              onOpenLightbox={() => lightbox.onOpen(message.body)}
-            />
-          ))}
-        </Box>
-      </Scrollbar>
-
-      <Lightbox
-        index={lightbox.selected}
-        slides={slides}
-        open={lightbox.open}
-        close={lightbox.onClose}
-      />
-    </>
-  );
-}
-
-ChatMessageList.propTypes = {
-  messages: PropTypes.array,
-  participants: PropTypes.array,
-};

package/minimal/src/sections/chat/chat-nav-account.jsx

@@ -1,115 +0,0 @@
-import { useState, useCallback } from 'react';
-
-import Stack from '@mui/material/Stack';
-import Avatar from '@mui/material/Avatar';
-import Select from '@mui/material/Select';
-import Divider from '@mui/material/Divider';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import InputBase from '@mui/material/InputBase';
-import IconButton from '@mui/material/IconButton';
-import ListItemText from '@mui/material/ListItemText';
-import Badge, { badgeClasses } from '@mui/material/Badge';
-
-import { useMockedUser } from 'src/hooks/use-mocked-user';
-
-import Iconify from 'src/components/iconify';
-import CustomPopover, { usePopover } from 'src/components/custom-popover';
-
-// ----------------------------------------------------------------------
-
-export default function ChatNavAccount() {
-  const { user } = useMockedUser();
-
-  const popover = usePopover();
-
-  const [status, setStatus] = useState('online');
-
-  const handleChangeStatus = useCallback((event) => {
-    setStatus(event.target.value);
-  }, []);
-
-  return (
-    <>
-      <Badge variant={status} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
-        <Avatar
-          src={user?.photoURL}
-          alt={user?.displayName}
-          onClick={popover.onOpen}
-          sx={{ cursor: 'pointer', width: 48, height: 48 }}
-        />
-      </Badge>
-
-      <CustomPopover open={popover.open} onClose={popover.onClose} arrow="top-left" sx={{ p: 0 }}>
-        <Stack
-          direction="row"
-          alignItems="center"
-          spacing={2}
-          sx={{
-            py: 2,
-            pr: 1,
-            pl: 2.5,
-          }}
-        >
-          <ListItemText
-            primary={user?.displayName}
-            secondary={user?.email}
-            secondaryTypographyProps={{ component: 'span' }}
-          />
-
-          <Tooltip title="Log out">
-            <IconButton color="error">
-              <Iconify icon="ic:round-power-settings-new" />
-            </IconButton>
-          </Tooltip>
-        </Stack>
-
-        <Divider sx={{ borderStyle: 'dashed' }} />
-
-        <Stack sx={{ p: 1 }}>
-          <MenuItem>
-            <Badge
-              variant={status}
-              sx={{
-                [`& .${badgeClasses.badge}`]: {
-                  position: 'static',
-                  m: 0.75,
-                  width: 12,
-                  height: 12,
-                  flexShrink: 0,
-                },
-              }}
-            />
-
-            <Select
-              native
-              fullWidth
-              value={status}
-              onChange={handleChangeStatus}
-              input={<InputBase sx={{ pl: 2 }} />}
-              inputProps={{
-                sx: { textTransform: 'capitalize' },
-              }}
-            >
-              {['online', 'alway', 'busy', 'offline'].map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </Select>
-          </MenuItem>
-
-          <MenuItem>
-            <Iconify icon="solar:user-id-bold" width={24} />
-            Profile
-          </MenuItem>
-
-          <MenuItem>
-            <Iconify icon="eva:settings-2-fill" width={24} />
-            Settings
-          </MenuItem>
-        </Stack>
-      </CustomPopover>
-    </>
-  );
-}