@messenger-box/chakra-ui-inbox 0.0.1-alpha.168

package/src/components/InboxMessage/LeftSidebar.tsx

@@ -0,0 +1,250 @@
+import { SearchIcon } from '@chakra-ui/icons';
+import {
+    Button,
+    Avatar,
+    Box,
+    Heading,
+    Icon,
+    Input,
+    InputGroup,
+    InputRightElement,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+    useColorModeValue,
+} from '@chakra-ui/react';
+import { GoSettings } from '@react-icons/all-files/go/GoSettings';
+import React, { useEffect, useState } from 'react';
+import { ConversationItem } from './ConversationItem';
+
+type LeftSidebarProps = {
+    allChannels: any;
+    allChannelsLoading: boolean;
+    userChannels: any;
+    userChannelsLoading: boolean;
+    currentUser: any;
+    users?: any[];
+    handleSelectChannel: (channel: any) => void;
+    clearMessages: () => void;
+    selectedChannelId?: any;
+    channelToTop: number;
+    getChannelsRefetch: any;
+};
+
+export const LeftSidebar = (props: LeftSidebarProps) => {
+    const {
+        currentUser,
+        handleSelectChannel,
+        clearMessages,
+        users,
+        allChannels,
+        allChannelsLoading,
+        channelToTop,
+        userChannels,
+        userChannelsLoading,
+        getChannelsRefetch,
+        selectedChannelId,
+    } = props;
+    const [hostChannels, setHostChannels] = useState([]);
+    const [guestChannels, setGuestChannels] = useState([]);
+    const [hostKeyword, setHostKeyword] = useState('');
+    const [guestKeyword, setGuestKeyword] = useState('');
+    const [tabIndex, setTabIndex] = useState(0);
+
+    useEffect(() => {
+        if (channelToTop) {
+        }
+    }, [channelToTop]);
+
+    useEffect(() => {
+        if (!userChannelsLoading && userChannels.length !== 0) {
+            let fChannels = [];
+            let diChal = [];
+            // if (currentUser?.id !== '' && !allChannelsLoading) {
+            //     console.log(props);
+            let uc = [];
+            userChannels?.channelsByUser?.forEach((u) => uc.push(u.id)); // id of user's channel
+            let ac = [];
+            allChannels?.channels?.forEach((a) => ac.push(a.id)); // id of all channel
+            diChal = ac.filter((t) => !uc.includes(t)); // id of other's channel
+            allChannels?.channels?.filter((dc) => {
+                if (diChal.includes(dc.id)) {
+                    dc.members.forEach((m) => {
+                        if (m.user === currentUser?.id) {
+                            fChannels.push(dc);
+                        }
+                    });
+                }
+            });
+            // }
+            console.log(props);
+            let chls = [...(userChannels?.channelsByUser ?? []), ...fChannels];
+            const tempGuestChannels = [
+                ...(chls && chls.length && currentUser
+                    ? chls?.filter(
+                          (chl) =>
+                              chl.type === 'DIRECT' &&
+                              chl?.displayName !== 'admin (you)' &&
+                              chl?.displayName !== 'surveybot' &&
+                              chl.members[0].user == currentUser?.id,
+                      )
+                    : []),
+            ];
+            setGuestChannels(tempGuestChannels);
+            const tempHostChannels = [
+                ...(chls && chls.length && currentUser
+                    ? chls?.filter(
+                          (chl) =>
+                              chl.type === 'DIRECT' &&
+                              chl?.displayName !== 'admin (you)' &&
+                              chl?.displayName !== 'surveybot' &&
+                              chl.members[0].user != currentUser?.id,
+                      )
+                    : []),
+            ];
+            setHostChannels(tempHostChannels);
+            const isHost = tempHostChannels.findIndex((chl) => chl.id == selectedChannelId);
+            const isGuest = tempGuestChannels.findIndex((chl) => chl.id == selectedChannelId);
+            if (isHost == -1 && isGuest == -1) getChannelsRefetch();
+            // setHostChannels([...fChannels.filter((chl) => chl.type === 'DIRECT')]);
+        }
+    }, [allChannels, allChannelsLoading, userChannels, userChannelsLoading, currentUser, getChannelsRefetch]);
+
+    useEffect(() => {
+        if (selectedChannelId && hostChannels && hostChannels.length !== 0) {
+            const chlIndex = hostChannels.findIndex((chl) => chl.id == selectedChannelId);
+            if (chlIndex > -1) setTabIndex(0);
+        }
+        if (selectedChannelId && guestChannels && guestChannels.length !== 0) {
+            const chlIndex = guestChannels.findIndex((chl) => chl.id == selectedChannelId);
+            if (chlIndex > -1) setTabIndex(1);
+        }
+    }, [hostChannels, guestChannels, selectedChannelId]);
+
+    const handleTabChange = (index: number) => {
+        setTabIndex(index);
+        if ((index == 0 && hostChannels.length == 0) || (index == 1 && guestChannels.length == 0)) {
+            clearMessages();
+            return;
+        }
+        handleSelectChannel(index == 0 ? hostChannels[0].id : guestChannels[0].id);
+    };
+
+    return (
+        <Box w="100%" p="4" borderRightWidth="1px" borderRightColor="gray.300">
+            <Tabs index={tabIndex} onChange={handleTabChange}>
+                <TabList w="100%">
+                    <Tab w="50%" fontSize="24px" justifyContent={'flex-start'}>
+                        Host
+                    </Tab>
+                    <Tab w="50%" fontSize="24px" justifyContent={'flex-start'}>
+                        Guest
+                    </Tab>
+                </TabList>
+                <TabPanels>
+                    <TabPanel p="0" pt="1">
+                        <SearchInput keyword={hostKeyword} setKeyword={setHostKeyword} />
+                        {currentUser &&
+                            hostChannels &&
+                            hostChannels.length !== 0 &&
+                            hostChannels.map((channel, index) => (
+                                <ConversationItem
+                                    key={`conv_channel_${channel.id}`}
+                                    filter={hostKeyword}
+                                    channel={channel}
+                                    currentUser={currentUser}
+                                    handleSelectChannel={handleSelectChannel}
+                                    users={users}
+                                    selectedChannelId={selectedChannelId}
+                                    showBorder={index == hostChannels.length - 1 ? false : true}
+                                />
+                            ))}
+                    </TabPanel>
+                    <TabPanel p="0" pt="1">
+                        <SearchInput keyword={guestKeyword} setKeyword={setGuestKeyword} />
+                        {currentUser &&
+                            guestChannels &&
+                            guestChannels.length !== 0 &&
+                            guestChannels.map((channel, index) => (
+                                <ConversationItem
+                                    key={`conv_channel_${channel.id}`}
+                                    filter={guestKeyword}
+                                    channel={channel}
+                                    currentUser={currentUser}
+                                    handleSelectChannel={handleSelectChannel}
+                                    users={users}
+                                    selectedChannelId={selectedChannelId}
+                                    showBorder={index == guestChannels.length - 1 ? false : true}
+                                />
+                            ))}
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+        </Box>
+    );
+};
+const SearchInput = ({ keyword, setKeyword }: any) => {
+    return (
+        <Box w="100%" d="flex" alignItems={'center'} my="15px">
+            <InputGroup size="md">
+                <Input
+                    pr="4.5rem"
+                    pl="2rem"
+                    type="text"
+                    placeholder="Search Inbox"
+                    display="flex"
+                    alignItems="center"
+                    color="gray.500"
+                    backgroundColor="white"
+                    borderRadius="30px"
+                    borderWidth="1px"
+                    borderColor="gray.200"
+                    height="60px"
+                    value={keyword}
+                    onChange={(e) => setKeyword(e.target.value)}
+                    fontWeight="medium"
+                />
+                <InputRightElement width="60px" height="100%">
+                    <Button
+                        alignSelf="center"
+                        size="lg"
+                        minW="50px"
+                        w="50px"
+                        h="50px"
+                        borderRadius="24px"
+                        alignItems="center"
+                        justifyContent="center"
+                        borderWidth="1px"
+                        borderColor="yellow.400"
+                        backgroundColor="yellow.400"
+                        color="white"
+                        d="flex"
+                        onClick={() => {}}
+                    >
+                        <SearchIcon w="1.4rem" h="1.4rem" />
+                    </Button>
+                </InputRightElement>
+            </InputGroup>
+            <Button
+                alignSelf="center"
+                size="lg"
+                minW="50px"
+                w="50px"
+                h="50px"
+                marginLeft="5px"
+                borderRadius="30px"
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor="white"
+                borderWidth="1px"
+                borderColor="gray.200"
+                color="#333"
+                d="flex"
+            >
+                <Icon as={GoSettings} w="1.4rem" h="1.4rem" />
+            </Button>
+        </Box>
+    );
+};

package/src/components/InboxMessage/MessageInput.tsx

@@ -0,0 +1,148 @@
+import {
+    Box,
+    Button,
+    Image,
+    InputGroup,
+    InputLeftElement,
+    InputRightElement,
+    Textarea,
+    Tooltip,
+} from '@chakra-ui/react';
+import { BiImage } from '@react-icons/all-files/bi/BiImage';
+import { fi } from 'date-fns/locale';
+import React, { useMemo, useRef, useState } from 'react';
+import { logoURL } from '../../constants/index';
+import { FilesList } from '../inbox/FilesList';
+
+type MessageInputProps = {
+    channelId: string;
+    handleSend: (message: string, files?: File[]) => void;
+};
+
+export const MessageInput = ({ channelId, handleSend: handleSendProp }: MessageInputProps) => {
+    const files$ = useRef<HTMLInputElement>();
+    const [files, setFiles] = useState([]);
+    const [message, setMessage] = useState('');
+    const [height, setHeight] = useState<any>('40px');
+    const handleSend = () => {
+        handleSendProp(message, files);
+
+        setMessage('');
+        setFiles([]);
+    };
+
+    const handleKeyDown = (e) => {
+        const keyCode = e.which || e.keyCode;
+        if (keyCode == 13 && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+
+    const inputHeight = useMemo(() => {
+        return 40 + (message.split('\n').length - 1) * 20 + 'px';
+    }, [message]);
+
+    const handleFileChange = ({ target: { files } }) => setFiles((existing) => existing.concat(...files));
+
+    const openFileUpload = () => files$.current?.click();
+    return (
+        <>
+            <input 
+                style={{ display: 'none' }} 
+                accept="image/png, image/gif, image/jpeg"
+                type="file" onChange={handleFileChange} ref={files$} multiple={true} />
+            <Box p="6" px={{ base: 0, md: '80px', lg: '150px'}}>
+                <Tooltip
+                    label="Image"
+                    placement="top"
+                    // bg="white"
+                    display="flex"
+                    alignItems="center"
+                    width="60px"
+                    height="40px"
+                    borderRadius="10px"
+                    fontSize="15px"
+                    justifyContent="center"
+                    marginTop="5px"
+                    // color="white"
+                    boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
+                    hasArrow={true}
+                >
+                    <Button
+                        onClick={openFileUpload}
+                        border="none"
+                        borderRadius="50%"
+                        bg="none"
+                        width="42px"
+                        height="42px"
+                        p="4px"
+                        _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
+                    >
+                        <BiImage color="#464646" width="full" height="full" />
+                    </Button>
+                </Tooltip>
+                <InputGroup size="md" marginBottom={15}>
+                    <InputLeftElement height="100%" pl="25px" width="60px">
+                        <Image width={'28px'} height={'28px'} src={logoURL} />
+                    </InputLeftElement>
+                    <Textarea
+                        fontSize="16px"
+                        placeholder="Reminder - Leave a review"
+                        value={message}
+                        height={inputHeight}
+                        minHeight="50px"
+                        maxH="220px"
+                        pl="75px"
+                        pr="15px"
+                        pt="12px"
+                        pb="12px"
+                        borderRadius={'25px'}
+                        borderColor={'transparent'}
+                        backgroundColor={'gray.300'}
+                        color="gray.600"
+                        resize="none"
+                        overflow={'hidden'}
+                        onKeyDown={handleKeyDown}
+                        onChange={(e) => setMessage(e.target.value)}
+                        onSubmit={(e) => alert(e)}
+                    />
+                    <InputRightElement height="100%">
+                        {message || files.length && (
+                            <Box
+                                position="relative"
+                                right="20px"
+                                as="button"
+                                height="30px"
+                                lineHeight="1.2"
+                                transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
+                                border="1px"
+                                px="15px"
+                                borderRadius="5px"
+                                fontSize="13px"
+                                fontWeight="semibold"
+                                bg="transparent"
+                                borderColor="#ccd0d5"
+                                color="#4b4f56"
+                                _hover={{ bg: '#ebedf0' }}
+                                _active={{
+                                    bg: '#dddfe2',
+                                    transform: 'scale(0.98)',
+                                    borderColor: '#bec3c9',
+                                }}
+                                _focus={{
+                                    boxShadow: '0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)',
+                                }}
+                                onClick={handleSend}
+                            >
+                                Send
+                            </Box>
+                        )}
+                        {/* </Button> */}
+                    </InputRightElement>
+                </InputGroup>
+                <FilesList files={files} />
+            </Box>
+        </>
+    );
+};

package/src/components/InboxMessage/Messages.tsx

@@ -0,0 +1,137 @@
+import {
+    Icon,
+    Avatar,
+    Box,
+    Flex,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalOverlay,
+    Text,
+    useDisclosure,
+} from '@chakra-ui/react';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag';
+import React, { useMemo, useRef } from 'react';
+import { UserModalContent } from './UserModalContent';
+import { isToday, isYesterday, format } from 'date-fns';
+import { FilesList } from '../inbox/FilesList';
+
+type MessagesProps = {
+    channelId: number;
+    currentUser: any;
+    channelMessages: any[];
+    totalCount: number;
+};
+export const Messages = ({ channelId, currentUser, channelMessages, totalCount }: MessagesProps) => {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+    const messagesEndRef = useRef(null);
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+
+    const messageList = useMemo(() => {
+        let currentDate = '';
+        let res = [];
+        channelMessages.map((msg) => {
+            const date = new Date(msg.createdAt);
+            let msgDate;
+            if (isToday(date)) msgDate = 'Today';
+            else if (isYesterday(date)) msgDate = 'Yesterday';
+            else msgDate = format(new Date(msg.createdAt), 'eee, do MMMM');
+
+            if (msgDate !== currentDate) {
+                res.push(msgDate);
+                currentDate = msgDate;
+            }
+            res.push(msg);
+        });
+        return res;
+    }, [channelMessages]);
+    return (
+        <Box w="full">
+            {messageList.map((message, index) => {
+                return typeof message !== 'object' ? (
+                    <Flex w="full" key={`msgList_${index}`} justifyContent={'center'} mb="7">
+                        <Text fontSize="14px" color="gray.600" fontWeight={'bold'}>
+                            {message}
+                        </Text>
+                    </Flex>
+                ) : (
+                    <Flex w="full" key={`msgList_${index}`} justifyContent={'flex-start'} mb="7">
+                        <Flex flexGrow={1}>
+                            <Avatar
+                                width="60px"
+                                height="60px"
+                                backgroundColor="grey"
+                                borderRadius="50%"
+                                src={message?.imageUrl ? message?.imageUrl : ''}
+                                marginRight="15px"
+                                onClick={onOpen}
+                            ></Avatar>
+                            <Box flexGrow={1}>
+                                <Flex flexGrow={1} mt="5px">
+                                    <Text fontSize="14px" color="gray.600" fontWeight={'bold'}>
+                                        {message?.author?.familyName && message?.author?.givenName
+                                            ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                            : message?.author?.username}
+                                    </Text>
+                                    <Text fontSize="14px" color="gray.500" ml="10px">
+                                        {format(new Date(message?.createdAt), 'MMM dd, yyyy hh:mm aaa')}
+                                    </Text>
+                                </Flex>
+                                <Box>
+                                    <Text fontSize="14px" mt="5px" mb="5px" color="gray.600" whiteSpace={'pre-line'}>
+                                        {message?.message}
+                                    </Text>
+                                    {message.files?.totalCount ? <FilesList uploaded files={message.files?.data} /> : null}
+                                </Box>
+                            </Box>
+                        </Flex>
+                        {currentUser?.id !== message?.author?.id && (
+                            <Box ml="8px">
+                                <Icon as={BsFlag} color="gray.600" width={'24px'} height={'24px'} />
+                            </Box>
+                        )}
+                    </Flex>
+                );
+            })}
+        </Box>
+    );
+};
+
+// TODO: remove unused code
+const ChateeModal = ({ element, isOpen, onClose }) => {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
+            <ModalOverlay />
+            <ModalContent
+                backgroundColor="white"
+                width="1036px"
+                position="absolute"
+                left="530px"
+                top="100px"
+                height="700px"
+                borderRadius="10px"
+                boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
+            >
+                <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    borderBottom="1px solid rgb(221, 221, 221)"
+                    paddingBottom="15px"
+                    paddingTop="15px"
+                >
+                    <ModalCloseButton as="a" width="30px" marginLeft="10px" color="black" _hover={{ color: 'black' }} />
+                </Box>
+                <ModalBody>
+                    <UserModalContent
+                        username={element?.author?.username}
+                        image={element.imageUrl ? element.imageUrl : ''}
+                    />
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
+};

package/src/components/InboxMessage/Popover.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useFela } from 'react-fela';
+import { Button, Box } from '@chakra-ui/react';
+
+export const Popover = () => {
+    const content = [
+        {
+            name: 'All Conversations',
+        },
+        {
+            name: 'Archived Conversations',
+            total: '0',
+        },
+        {
+            name: 'Unread Conversations',
+            total: '0',
+        },
+    ];
+    return (
+        <Box>
+            {content?.map((item, index) => {
+                if (!item.total) {
+                    return (
+                        <Box _hover={{ bg: '#edecec' }} className="popover-style" key={index}>
+                            <Button
+                                border="none"
+                                fontSize="15px"
+                                color="#282121"
+                                variant="link"
+                                bg='none'
+                                height= '30px' 
+                            >
+                                {item.name}
+                            </Button>
+                        </Box>
+                    );
+                } else {
+                    return (
+                        <Box _hover={{ bg: '#edecec' }} className="popover-style" key={index}>
+                            <Button
+                                border="none"
+                                fontSize="15px"
+                                color="#282121"
+                                variant="link"
+                                bg='none'
+                                height= '30px'
+                            >
+                                {item.name + `(${item.total})`}
+                            </Button>
+                        </Box>
+                    );
+                }
+            })}
+        </Box>
+    );
+}

package/src/components/InboxMessage/UserModalContent.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Avatar, Button, Box, Flex, Text, Link } from '@chakra-ui/react';
+import { AiOutlineSecurityScan } from '@react-icons/all-files/ai/AiOutlineSecurityScan';
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+import { BsFillStarFill } from '@react-icons/all-files/bs/BsFillStarFill';
+
+export const UserModalContent = ({ username, imageUrl }: any) => {
+    return (
+        <Box>
+            <Box>
+                <Avatar
+                    size="large"
+                    src={imageUrl !== '' ? imageUrl : ''}
+                    backgroundColor="grey"
+                    width="200px"
+                    height="200px"
+                    borderRadius="50%"
+                />
+                <a href="#">Update photo</a>
+                <AiOutlineSecurityScan style={{ width: '24px', height: '24px', color: 'black' }} />
+                <Box>
+                    <Text>Identity verification</Text>
+                    <Text as="p" color="black">
+                        Show others you’re really you with the identity verification badge.
+                    </Text>
+                    <Button className="get-badge-btn" color="black" bg="transparent">
+                        Get the badge
+                    </Button>
+                </Box>
+                <Box>
+                    <Text>{username} confirmed </Text>
+                    <Box>
+                        <FiCheck color="black" />
+                        <Text as="p" color="black">
+                            Email address
+                        </Text>
+                    </Box>
+                </Box>
+            </Box>
+            <Box>
+                <Flex>
+                    <Text>Hi, I'm {username}</Text>
+                    <Text as="p">Joined in 2021</Text>
+                    <Link>Edit profile</Link>
+                    <BsFillStarFill color="black" fontSize="md" />
+                    Reviews
+                </Flex>
+                <Link href="">Reviews by you</Link>
+            </Box>
+        </Box>
+    );
+};

package/src/components/InboxMessage/index.ts

@@ -0,0 +1,3 @@
+export * from './LeftSidebar';
+export * from './Messages';
+export * from './MessageInput';

package/src/components/inbox/FilesList.tsx

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+
+export function FilesList({ files, uploaded = false }: { files: any[], uploaded?: boolean }) {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+            {files.map(file => <FilesList.FileElement uploaded={uploaded} file={file} />)}
+        </div>
+    );
+}
+
+FilesList.FileElement = function FileElement({ file, uploaded }: { file: any, uploaded: boolean }) {
+    const url = useMemo(() => uploaded ? file.url : URL.createObjectURL(file), [file, uploaded]);
+
+    return (
+        <div style={{ height: 50, width: 50, backgroundImage: `url(${url})`, backgroundSize: 'contain', marginRight: '10px' }} />
+    );
+}