@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/post/create_post/create_post.tsx

@@ -1,225 +0,0 @@
-import React, { useState, useRef } from 'react';
-import * as Utils from '../../../utils/utils';
-// import { Textbox } from '../textbox';
-// import LocalizedIcon from '../../../widgets/icons/localized_icon';
-import { t } from '../../../utils/i18n';
-import { FormattedMessage } from 'react-intl';
-import TutorialTip from '../../post/tutorial/tutorial_tip/tutorial_tip';
-
-export const CreatePost = (props) => {
-    console.log({ props }, 'create post page');
-    const currentChannelProp = {
-        id: 'owsyt8n43jfxjpzh9np93mx1wa',
-        type: 'O',
-        display_name: 'default name',
-    };
-    const { draft, fullWidthTextBox, canPost } = props;
-
-    const [message, setMessage] = useState(props?.draft?.message);
-    const [caretPosition, setCaretPosition] = useState(props?.draft?.message?.length);
-    const [submitting, setSubmitting] = useState(false);
-    const [showPostDeletedModal, setShowPostDeletedModal] = useState(false);
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const [showConfirmModal, setShowConfirmModal] = useState(false);
-    const [channelTimezoneCount, setChannelTimezoneCount] = useState(0);
-    const [uploadsProgressPercent, setUploadsProgressPercent] = useState({});
-    const [renderScrollbar, setRenderScrollbar] = useState(false);
-    const [scrollbarWidth, setScrollbarWidth] = useState(0);
-    const [currentChannel, setCurrentChannel] = useState(currentChannelProp);
-    const [mentions, setMentions] = useState([]);
-    const [memberNotifyCount, setMemberNotifyCount] = useState(0);
-    const [errorClass, setErrorClass] = useState(null);
-    const [serverError, setServerError] = useState(null);
-    const [showTutorialTip, setShowTutorialTip] = useState(true);
-
-    const readOnlyChannel = props.readOnlyChannel || !canPost;
-
-    const topDiv = useRef();
-    const textboxRef = useRef();
-    const fileUploadRef = useRef();
-    const createPostControlsRef = useRef();
-
-    const ariaLabelMessageInput = Utils.localizeMessage(
-        'accessibility.sections.centerFooter',
-        'message input complimentary region',
-    );
-
-    const createTutorialTip = () => {
-        const screens = [];
-
-        screens.push(
-            <div>
-                <h4>
-                    <FormattedMessage id="create_post.tutorialTip.title" defaultMessage="Send a message" />
-                </h4>
-                {/* <p>
-                    <FormattedMarkdownMessage
-                        id='create_post.tutorialTip1'
-                        defaultMessage='Type your first message and select **Enter** to send it.'
-                    />
-                </p>
-                <p>
-                    <FormattedMarkdownMessage
-                        id='create_post.tutorialTip2'
-                        defaultMessage='Use the **Attachments** and **Emoji** buttons to add files and emojis to your messages.'
-                    />
-                </p> */}
-            </div>,
-        );
-
-        return (
-            <TutorialTip
-                placement="top"
-                screens={screens}
-                overlayClass="tip-overlay--chat"
-                telemetryTag="tutorial_tip_1_sending_messages"
-            />
-        );
-    };
-
-    let tutorialTip = null;
-    if (showTutorialTip) {
-        tutorialTip = createTutorialTip();
-    }
-
-    let centerClass = '';
-    if (!fullWidthTextBox) {
-        centerClass = 'center';
-    }
-
-    let sendButtonClass = 'send-button theme';
-    // if (!shouldEnableSendButton()) {
-    //     sendButtonClass += ' disabled';
-    // }
-
-    let attachmentsDisabled = '';
-    if (!props.canUploadFiles) {
-        attachmentsDisabled = ' post-create--attachment-disabled';
-    }
-
-    let scrollbarClass = '';
-    if (renderScrollbar) {
-        scrollbarClass = ' scroll';
-    }
-
-    let callButton;
-    if (!readOnlyChannel && !props.shouldShowPreview) {
-        callButton = <h1>call button</h1>;
-        // callButton = <CallButton />;
-    }
-
-    let fileUpload;
-    if (!readOnlyChannel && !props.shouldShowPreview) {
-        fileUpload = (
-            <h1>text</h1>
-            // <FileUpload
-            //     ref={fileUploadRef}
-            //     fileCount={getFileCount()}
-            //     getTarget={getFileUploadTarget}
-            //     onFileUploadChange={handleFileUploadChange}
-            //     onUploadStart={handleUploadStart}
-            //     onFileUpload={handleFileUploadComplete}
-            //     onUploadError={handleUploadError}
-            //     onUploadProgress={handleUploadProgress}
-            //     postType='post'
-            //     channelId={currentChannel.id}
-            // />
-        );
-    }
-
-    let createMessage;
-    if (readOnlyChannel) {
-        createMessage = Utils.localizeMessage(
-            'create_post.read_only',
-            'This channel is read-only. Only members with permission can post here.',
-        );
-    } else {
-        createMessage = <h1>createMessage</h1>;
-        // createMessage = formatMessage(
-        //     { id: 'create_post.write', defaultMessage: 'Write to {channelDisplayName}' },
-        //     { channelDisplayName: currentChannel.display_name },
-        // );
-    }
-
-    return (
-        <form
-            id="create_post"
-            // ref={topDiv}
-            className={centerClass}
-            // onSubmit={handleSubmit}
-        >
-            <div
-                className={'post-create' + attachmentsDisabled + scrollbarClass}
-                style={
-                    renderScrollbar && scrollbarWidth
-                        ? ({ '--detected-scrollbar-width': `${scrollbarWidth}px` } as any)
-                        : undefined
-                }
-            >
-                <div className="post-create-body">
-                    <div
-                        role="application"
-                        id="centerChannelFooter"
-                        aria-label={ariaLabelMessageInput as any}
-                        tabIndex={-1}
-                        className="post-body__cell a11y__region"
-                        data-a11y-sort-order="2"
-                    >
-                        {/* <Textbox/> */}
-                        <span className="post-body__actions">
-                            {/* {callButton} */}
-                            {/* {fileUpload} */}
-
-                            {/* {emojiPicker} */}
-                            <a
-                                role="button"
-                                tabIndex={0}
-                                aria-label="Send a message"
-                                // aria-label={formatMessage({
-                                //     id: 'create_post.send_message',
-                                //     defaultMessage: 'Send a message',
-                                // })}
-                                className={sendButtonClass}
-                                // onClick={handleSubmit}
-                            >
-                                {/* <LocalizedIcon
-                                    className="fa fa-paper-plane"
-                                    title={{
-                                        id: t('create_post.icon'),
-                                        defaultMessage: 'Create a post',
-                                    }}
-                                /> */}
-                            </a>
-                        </span>
-                    </div>
-                    {tutorialTip}
-                </div>
-                {/* <div id="postCreateFooter" role="form" className={postFooterClassName}>
-                    <div className="d-flex justify-content-between">
-                        <MsgTyping channelId={currentChannel.id} postId="" />
-                        <TextboxLinks
-                            characterLimit={props.maxPostSize}
-                            showPreview={props.shouldShowPreview}
-                            updatePreview={setShowPreview}
-                            message={readOnlyChannel ? '' : message}
-                        />
-                    </div>
-                    <div>
-                        {postError}
-                        {preview}
-                        {serverError}
-                    </div>
-                </div> */}
-            </div>
-            {/* <PostDeletedModal show={showPostDeletedModal} onHide={hidePostDeletedModal} /> */}
-            {/* <ConfirmModal
-                title={notifyAllTitle}
-                message={notifyAllMessage}
-                confirmButtonText={notifyAllConfirm}
-                show={showConfirmModal}
-                onConfirm={handleNotifyAllConfirmation}
-                onCancel={hideNotifyAllModal}
-            /> */}
-        </form>
-    );
-};

package/src/components/post/create_post/index.ts

@@ -1 +0,0 @@
-export { CreatePost } from './create_post';

package/src/components/post/failed_post_options/failed_post_options.tsx

@@ -1,32 +0,0 @@
-import React, { MouseEvent } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-export const FailedPostOptions = (props) => {
-    console.log({ props }, 'failed post options');
-
-    const retryPost = (e: MouseEvent): void => {
-        e.preventDefault();
-
-        const post = { ...props.post };
-        Reflect.deleteProperty(post, 'id');
-        props.actions.createPost(post);
-    };
-
-    const cancelPost = (e: MouseEvent): void => {
-        e.preventDefault();
-
-        props.actions.removePost(props.post);
-    };
-
-    return (
-        <span className="pending-post-actions">
-            <a className="post-retry" href="#" onClick={retryPost}>
-                <FormattedMessage id="pending_post_actions.retry" defaultMessage="Retry" />
-            </a>
-            {' - '}
-            <a className="post-cancel" href="#" onClick={cancelPost}>
-                <FormattedMessage id="pending_post_actions.cancel" defaultMessage="Cancel" />
-            </a>
-        </span>
-    );
-};

package/src/components/post/failed_post_options/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export { FailedPostOptions } from './failed_post_options';

package/src/components/post/index.tsx

@@ -1,131 +0,0 @@
-import * as React from 'react';
-import { css } from '@emotion/css';
-import { styleSheet2 } from './style';
-import { AiOutlineSearch, AiOutlineStar, AiOutlineQuestionCircle } from 'react-icons/ai';
-import { RiPushpinLine } from 'react-icons/ri';
-import { BsAt, BsChevronDown } from 'react-icons/bs';
-import { IoBookmarkOutline } from 'react-icons/io5';
-import { Menu, Dropdown } from 'antd';
-import { useDeleteChannelMutation } from 'common/graphql';
-import { useNavigate, useLocation } from '@remix-run/react';
-
-export const PostViewPage = ({ channel, currentUsrId }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const [deleteChannel, deleteChannelResponse] = useDeleteChannelMutation({
-        // update: (cache, mutationResult) => {
-        //     const normalizedId = cache.identify({ ChannelId, __typename: 'Channel' });
-        //     cache.evict({ id: normalizedId });
-        //     cache.gc();
-        //     cache.modify({
-        //         fields: {
-        //             channels(existingChannels, {toReference}) {
-        //                 return [...existingChannels.filter(i => i !== mutationResult.data.deleteChannel)]
-        //             }
-        //         }
-        //     })
-        // },
-    });
-
-    const hendleDelete = async () => {
-        await deleteChannel({
-            variables: {
-                ChannelId: channel.id,
-            },
-            update(cache) {
-                cache.modify({
-                    fields: {
-                        channels(existingChannels = [], { readField }) {
-                            return existingChannels.filter((postRef) => channel.id !== readField('id', postRef));
-                        },
-                    },
-                });
-                navigate(`/o/${location.pathname.split('/')[2]}/dashboard`);
-            },
-        });
-    };
-
-    const menu = (
-        <Menu>
-            <Menu.Item key="0">
-                <div style={{ cursor: 'pointer' }} onClick={hendleDelete}>
-                    Delete Channel
-                </div>
-            </Menu.Item>
-            {/*<Menu.Divider />*/}
-        </Menu>
-    );
-
-    return (
-        <div>
-            {channel ? (
-                <div className={css(styleSheet2.customStyle)}>
-                    <div className="top-bar">
-                        {channel ? (
-                            <div className="top-left">
-                                <div className="text-nav">
-                                    <button style={{ border: '0px', background: 'white' }}>
-                                        <AiOutlineStar className="icon ml-0" />
-                                    </button>
-                                    <h5>
-                                        {channel.type !== 'DIRECT'
-                                            ? channel.title
-                                            : channel.displayName.split('_').length === 2
-                                            ? channel.displayName.split('_')[0].split('-')[0] !== currentUsrId
-                                                ? channel.displayName.split('_')[0].split('-')[1]
-                                                : channel.displayName.split('_')[1].split('-')[1]
-                                            : channel.displayName}
-                                    </h5>
-                                    <Dropdown overlay={menu} trigger={['click']} className="down_menu">
-                                        <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
-                                            <BsChevronDown className="down_menu" />
-                                        </a>
-                                    </Dropdown>
-                                </div>
-                                <p>
-                                    {channel.description ? channel.description : 'Add a channel description'}
-                                    <a> Edit Description</a>
-                                </p>
-                            </div>
-                        ) : (
-                            <div className="top-left">
-                                <div className="text-nav">
-                                    <button style={{ border: '0px', background: 'white' }}>
-                                        <AiOutlineStar className="icon ml-0" />
-                                    </button>
-                                    <h5>surveybot</h5>
-                                    <span>BOT</span>
-                                </div>
-                                <p>
-                                    Surveybot collects user feedback to improve Mattermost.<a href="#">Learn more.</a>
-                                </p>
-                            </div>
-                        )}
-                        <div className="top-right">
-                            <button style={{ border: '0px', background: 'white' }}>
-                                <RiPushpinLine className="icon" />
-                            </button>
-                            <div className="searchbar">
-                                <AiOutlineSearch className="icon" />
-                                <input type="search" name="text" placeholder="search" />
-                            </div>
-                            <div className="icons-nav">
-                                <button style={{ border: '0px', background: 'white' }}>
-                                    <BsAt className="icon" />
-                                </button>
-                                <button style={{ border: '0px', background: 'white' }}>
-                                    <IoBookmarkOutline className="icon-m" color="gray" />
-                                </button>
-                                <button style={{ border: '0px', background: 'white' }}>
-                                    <AiOutlineQuestionCircle className="icon" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            ) : (
-                ''
-            )}
-        </div>
-    );
-};

package/src/components/post/markdown/index.ts

@@ -1 +0,0 @@
-export { Markdown } from './markdown';

package/src/components/post/markdown/markdown.test.tsx

@@ -1,62 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {shallow} from 'enzyme';
-
-// import {TeamType} from 'mattermost-redux/types/teams';
-
-// import {TestHelper} from 'utils/test_helper';
-
-// import Markdown from 'components/markdown/markdown';
-// import EmojiMap from 'utils/emoji_map';
-
-// describe('components/Markdown', () => {
-//     const baseProps = {
-//         channelNamesMap: {},
-//         enableFormatting: true,
-//         mentionKeys: [],
-//         message: 'This _is_ some **Markdown**',
-//         siteURL: 'https://markdown.example.com',
-//         team: TestHelper.getTeamMock({
-//             id: 'id123',
-//             invite_id: 'invite_id123',
-//             name: 'yourteamhere',
-//             create_at: 1,
-//             update_at: 2,
-//             delete_at: 3,
-//             display_name: 'test',
-//             description: 'test',
-//             email: 'test@test.com',
-//             type: 'T' as TeamType,
-//             company_name: 'test',
-//             allowed_domains: 'test',
-//             allow_open_invite: false,
-//             scheme_id: 'test',
-//             group_constrained: false,
-//         }),
-//         hasImageProxy: false,
-//         minimumHashtagLength: 3,
-//         emojiMap: new EmojiMap([]),
-//         metadata: {},
-//     };
-
-//     test('should render properly', () => {
-//         const wrapper = shallow(
-//             <Markdown {...baseProps}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should not render markdown when formatting is disabled', () => {
-//         const props = {
-//             ...baseProps,
-//             enableFormatting: false,
-//         };
-
-//         const wrapper = shallow(
-//             <Markdown {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//     });
-// });

package/src/components/post/markdown/markdown.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-
-export const Markdown = (props) => {
-    console.log({ props }, 'markdown component');
-    if (!props.enableFormatting) {
-        return <span>{props.message}</span>;
-    }
-    const options = Object.assign(
-        {
-            autolinkedUrlSchemes: props.autolinkedUrlSchemes,
-            siteURL: props.siteURL,
-            mentionKeys: props.mentionKeys,
-            atMentions: true,
-            channelNamesMap: props.channelNamesMap,
-            proxyImages: props.hasImageProxy && props.proxyImages,
-            team: props.team,
-            minimumHashtagLength: props.minimumHashtagLength,
-            managedResourcePaths: props.managedResourcePaths,
-        },
-        props.options,
-    );
-    // const htmlFormattedText = formatText(props.message, options, props.emojiMap);
-    return (
-        <>
-            <h1>markdown componetn</h1>
-        </>
-        // messageHtmlToComponent(htmlFormattedText, props.isRHS, {
-        //     imageProps: props.imageProps,
-        //     imagesMetadata: props.imagesMetadata,
-        //     hasPluginTooltips: props.hasPluginTooltips,
-        //     postId: props.postId,
-        //     channelId: props.channelId,
-        //     postType: props.postType,
-        //     mentionHighlight: props.options.mentionHighlight,
-        //     disableGroupHighlight: props.options.disableGroupHighlight,
-        // });
-    );
-};

package/src/components/post/post/defaultpost.ts

@@ -1,25 +0,0 @@
-export const post = {
-    edit_at: 0,
-    original_id: '',
-    hashtags: '',
-    pending_post_id: '',
-    reply_count: 0,
-    metadata: {
-        embeds: [],
-        emojis: [],
-        files: [],
-        images: {},
-        reactions: [],
-    },
-    channel_id: '',
-    create_at: 0,
-    delete_at: 0,
-    id: 'id',
-    is_pinned: false,
-    message: 'post message',
-    props: {},
-    root_id: '',
-    type: 'system_add_remove',
-    update_at: 0,
-    user_id: 'user_id',
-};