@messenger-box/platform-browser 10.0.3-alpha.54 → 10.0.3-alpha.61

package/src/components/post/index.tsx

@@ -1,33 +1,22 @@
 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 }) => {
+interface PostViewPageProps {
+    channel: any;
+    currentUsrId: string;
+}
+
+export const PostViewPage: React.FC<PostViewPageProps> = ({ 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 [deleteChannel] = useDeleteChannelMutation();
 
-    const hendleDelete = async () => {
+    const handleDelete = async () => {
         await deleteChannel({
             variables: {
                 ChannelId: channel.id,
@@ -45,87 +34,73 @@ export const PostViewPage = ({ channel, currentUsrId }) => {
         });
     };
 
-    const menu = (
-        <Menu>
-            <Menu.Item key="0">
-                <div style={{ cursor: 'pointer' }} onClick={hendleDelete}>
-                    Delete Channel
-                </div>
-            </Menu.Item>
-            {/*<Menu.Divider />*/}
-        </Menu>
-    );
+    const menuItems = [
+        {
+            key: 'search',
+            icon: <AiOutlineSearch className="h-5 w-5" />,
+            label: 'Search',
+        },
+        {
+            key: 'pin',
+            icon: <RiPushpinLine className="h-5 w-5" />,
+            label: 'Pin to channel',
+        },
+        {
+            key: 'star',
+            icon: <AiOutlineStar className="h-5 w-5" />,
+            label: 'Star channel',
+        },
+        {
+            key: 'members',
+            icon: <BsAt className="h-5 w-5" />,
+            label: 'View members',
+        },
+        {
+            key: 'delete',
+            icon: <IoBookmarkOutline className="h-5 w-5" />,
+            label: 'Delete channel',
+            onClick: handleDelete,
+        },
+    ];
 
     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" />
+        <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200">
+                <div className="flex items-center space-x-4">
+                    <h1 className="text-xl font-semibold text-gray-900">{channel?.name || 'Channel Name'}</h1>
+                    <div className="flex items-center space-x-2 text-gray-500">
+                        <BsAt className="h-4 w-4" />
+                        <span>{channel?.members_count || 0} members</span>
+                    </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                    <div className="relative">
+                        <button
+                            className="flex items-center space-x-1 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
+                            onClick={() => {}}
+                        >
+                            <BsChevronDown className="h-4 w-4" />
+                            <span>More</span>
+                        </button>
+                        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg hidden">
+                            {menuItems.map((item) => (
+                                <button
+                                    key={item.key}
+                                    onClick={item.onClick}
+                                    className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                                >
+                                    {item.icon}
+                                    <span>{item.label}</span>
                                 </button>
-                            </div>
+                            ))}
                         </div>
                     </div>
+                    <button className="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
+                        <AiOutlineQuestionCircle className="h-5 w-5" />
+                    </button>
                 </div>
-            ) : (
-                ''
-            )}
+            </div>
+            <div className="flex-1 overflow-y-auto p-4">{/* Channel content will go here */}</div>
         </div>
     );
 };

package/src/components/post/post_header/post_header_custom_status.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import EmojiIcon from '../../../widgets/icons/emoji_icon';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
 
 export const PostHeaderCustomStatus = (props) => {
     const { userId, isSystemMessage, isBot } = props;
@@ -37,10 +35,13 @@ export const PostHeaderCustomStatus = (props) => {
         // dispatch(setStatusDropdown(true));
     };
     return (
-        <div className={css(styleSheet.postHeaderStyle)}>
-            <button onClick={updateStatus} className="post__header-set-custom-status cursor--pointer style--none">
-                <EmojiIcon className="post__header-set-custom-status-icon" />
-                <span className="post__header-set-custom-status-text">
+        <div className="p-2">
+            <button
+                onClick={updateStatus}
+                className="flex items-center gap-2 cursor-pointer border-none bg-transparent p-0"
+            >
+                <EmojiIcon className="w-5 h-5" />
+                <span className="text-sm">
                     <FormattedMessage id="post_header.update_status" defaultMessage="Update your status" />
                 </span>
             </button>

package/src/components/post/post_header/style.ts

@@ -1,54 +1,54 @@
-import { inherits } from 'util';
+// import { inherits } from 'util';
 
 export const styleSheet = {
-    postHeaderStyle:  {
-            display: 'inherit',
-            '& .post__header-set-custom-status': {
-                // display: 'none',
-            },
-            '& .post.current--user.other--root .post__header-set-custom-status, .post.current--user.post--root .post__header-set-custom-status, .post.current--user.post--comment .post__header-set-custom-status':
-                {
-                    display: 'block',
-                    padding: '0 6px',
-                    marginLeft: '8px',
-                    background: 'rgba(0, 0, 0, )',
-                    borderRadius: '4px',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-icon > svg, .post.current--user.post--root .post__header-set-custom-status-icon > svg, .post.current--user.post--comment .post__header-set-custom-status-icon > svg':
-                {
-                    width: '12px',
-                    height: '12px',
-                    marginRight: '4px',
-                    marginBottom: '2px',
-                    background: 'inherit',
-                    fill: 'rgba(0, 1, 0, )',
-                    verticalAlign: 'middle',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-icon > svg:hover, .post.current--user.post--root .post__header-set-custom-status-icon > svg:hover, .post.current--user.post--comment .post__header-set-custom-status-icon > svg:hover':
-                {
-                    fill: 'rgba(0, 1, 0, )',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-text, .post.current--user.post--root .post__header-set-custom-status-text, .post.current--user.post--comment .post__header-set-custom-status-text':
-                {
-                    color: 'rgba(0, 1, 0, )',
-                    fontSize: '12px',
-                    fontWeight: 'normal',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-text:hover, .post.current--user.post--root .post__header-set-custom-status-text:hover, .post.current--user.post--comment .post__header-set-custom-status-text:hover':
-                {
-                    color: 'rgba(0, 1, 0, )',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status:active, .post.current--user.post--root .post__header-set-custom-status:active, .post.current--user.post--comment .post__header-set-custom-status:active':
-                {
-                    background: 'rgba(0, 0, 0, )',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status:active-icon > svg, .post.current--user.post--root .post__header-set-custom-status:active-icon > svg, .post.current--user.post--comment .post__header-set-custom-status:active-icon > svg':
-                {
-                    // fill: var(--button-bg);
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status:active-text, .post.current--user.post--root .post__header-set-custom-status:active-text, .post.current--user.post--comment .post__header-set-custom-status:active-text':
-                {
-                    // color: var(--button-bg);
-                },
-        }
+    postHeaderStyle: {
+        display: 'inherit',
+        '& .post__header-set-custom-status': {
+            // display: 'none',
+        },
+        '& .post.current--user.other--root .post__header-set-custom-status, .post.current--user.post--root .post__header-set-custom-status, .post.current--user.post--comment .post__header-set-custom-status':
+            {
+                display: 'block',
+                padding: '0 6px',
+                marginLeft: '8px',
+                background: 'rgba(0, 0, 0, )',
+                borderRadius: '4px',
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status-icon > svg, .post.current--user.post--root .post__header-set-custom-status-icon > svg, .post.current--user.post--comment .post__header-set-custom-status-icon > svg':
+            {
+                width: '12px',
+                height: '12px',
+                marginRight: '4px',
+                marginBottom: '2px',
+                background: 'inherit',
+                fill: 'rgba(0, 1, 0, )',
+                verticalAlign: 'middle',
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status-icon > svg:hover, .post.current--user.post--root .post__header-set-custom-status-icon > svg:hover, .post.current--user.post--comment .post__header-set-custom-status-icon > svg:hover':
+            {
+                fill: 'rgba(0, 1, 0, )',
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status-text, .post.current--user.post--root .post__header-set-custom-status-text, .post.current--user.post--comment .post__header-set-custom-status-text':
+            {
+                color: 'rgba(0, 1, 0, )',
+                fontSize: '12px',
+                fontWeight: 'normal',
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status-text:hover, .post.current--user.post--root .post__header-set-custom-status-text:hover, .post.current--user.post--comment .post__header-set-custom-status-text:hover':
+            {
+                color: 'rgba(0, 1, 0, )',
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status:active, .post.current--user.post--root .post__header-set-custom-status:active, .post.current--user.post--comment .post__header-set-custom-status:active':
+            {
+                background: 'rgba(0, 0, 0, )',
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status:active-icon > svg, .post.current--user.post--root .post__header-set-custom-status:active-icon > svg, .post.current--user.post--comment .post__header-set-custom-status:active-icon > svg':
+            {
+                // fill: var(--button-bg);
+            },
+        '& .post.current--user.other--root .post__header-set-custom-status:active-text, .post.current--user.post--root .post__header-set-custom-status:active-text, .post.current--user.post--comment .post__header-set-custom-status:active-text':
+            {
+                // color: var(--button-bg);
+            },
+    },
 } as any;