Skip to content

Commit

Permalink
fix: Back Button Inconsistency in Threads and Starred/Pinned Sections. (
Browse files Browse the repository at this point in the history 
#460)

* fixed location of back icon

created custom reusable hook to fetch chat data from different components

changed dynamic header parameters to include both back icon and header icons

removed back-arrow-icon from chatbody

* formatted the changed files using prettier

fixed linting issues of which i could understand and have worked before
  • Loading branch information
@Spiral-Memory
Spiral-Memory authored Feb 16, 2024
1 parent 8d161fa commit 449b52e
Show file tree
Hide file tree
Showing 7 changed files with 350 additions and 256 deletions.
237 changes: 134 additions & 103 deletions packages/react/src/components/AllThreads/AllThreads.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ import classes from './AllThreads.module.css';
import { Icon } from '../Icon';
import { Box } from '../Box';
import { ActionButton } from '../ActionButton';
import { useMessageStore, useUserStore, useThreadsMessageStore } from '../../store';
import {
useMessageStore,
useUserStore,
useThreadsMessageStore,
} from '../../store';
import { MessageBody } from '../Message/MessageBody';
import { MessageMetrics } from '../Message/MessageMetrics';
import MessageAvatarContainer from '../Message/MessageAvatarContainer';
import MessageBodyContainer from '../Message/MessageBodyContainer';
import MessageHeader from '../Message/MessageHeader';


const MessageCss = css`
display: flex;
flex-direction: row;
Expand All @@ -32,118 +35,146 @@ const MessageCss = css`
`;

const AllThreads = () => {
const showAvatar = useUserStore((state) => state.showAvatar);
const messages = useMessageStore((state) => state.messages);
const setShowAllThreads = useThreadsMessageStore((state) => state.setShowAllThreads);
const openThread = useMessageStore((state) => state.openThread);
const [text, setText] = useState('');
const showAvatar = useUserStore((state) => state.showAvatar);
const messages = useMessageStore((state) => state.messages);
const setShowAllThreads = useThreadsMessageStore(
(state) => state.setShowAllThreads
);
const openThread = useMessageStore((state) => state.openThread);
const [text, setText] = useState('');

const toggleShowAllThreads = () => {
setShowAllThreads(false);
};
const toggleShowAllThreads = () => {
setShowAllThreads(false);
};

const handleOpenThread = (msg) => () => {
openThread(msg);
toggleShowAllThreads(false);
};
const handleOpenThread = (msg) => () => {
openThread(msg);
toggleShowAllThreads(false);
};

const handleInputChange = (e) => {
setText(e.target.value);
};
const handleInputChange = (e) => {
setText(e.target.value);
};

const filteredThreads = useMemo(() => {
return messages.filter((message) =>
message.msg.toLowerCase().includes(text.toLowerCase())
);
}, [messages, text]);
const filteredThreads = useMemo(
() =>
messages.filter((message) =>
message.msg.toLowerCase().includes(text.toLowerCase())
),
[messages, text]
);

return (
<Box className={classes.component}>
<Box className={classes.wrapContainer}>
return (
<Box className={classes.component}>
<Box className={classes.wrapContainer}>
<Box style={{ padding: '16px' }}>
<Box
css={css`
display: flex;
`}
>
<h3 style={{ display: 'contents' }}>
<Icon
name="thread"
size="1.25rem"
style={{ padding: '0px 20px 20px 0px' }}
/>
<Box
css={css`
width: 100%;
color: #4a4a4a;
`}
>
Threads
</Box>
<ActionButton onClick={toggleShowAllThreads} ghost size="small">
<Icon name="cross" size="1.25rem" />
</ActionButton>
</h3>
</Box>

<Box style={{ padding: '16px' }}>
<Box css={css`display: flex;`}>
<h3 style={{ display: 'contents' }}>
<Icon
name="thread"
size="1.25rem"
style={{ padding: '0px 20px 20px 0px' }}
/>
<Box css={css`
width: 100%;
color: #4a4a4a;
`}
>
Threads
</Box>
<ActionButton onClick={toggleShowAllThreads} ghost size="small">
<Icon name="cross" size="1.25rem" />
</ActionButton>
</h3>
</Box>
<Box
className={classes.searchContainer}
style={{ border: '2px solid #ddd', position: 'relative' }}
>
<input
placeholder="Search Messages"
onChange={handleInputChange}
className={classes.textInput}
/>

<Box
className={classes.searchContainer}
style={{ border: '2px solid #ddd', position: 'relative' }}
>
<input
placeholder="Search Messages"
onChange={handleInputChange}
className={classes.textInput}
/>
<Icon
name="magnifier"
size="1.25rem"
style={{ padding: '0.125em', cursor: 'pointer' }}
/>
</Box>
</Box>

<Icon name="magnifier" size="1.25rem" style={{ padding: '0.125em', cursor: 'pointer' }} />
</Box>
</Box>
<Box
style={{
flex: '1',
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
}}
>
{filteredThreads.length === 0 ? (
<Box
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
color: '#4a4a4a',
}}
>
<Icon
name="magnifier"
size="3rem"
style={{ padding: '0.5rem' }}
/>
<span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
No threads found
</span>
</Box>
) : (
filteredThreads.map(
(message) =>
!message.t &&
message.tcount && (
<Box
key={message._id}
css={MessageCss}
onClick={handleOpenThread(message)}
>
{showAvatar && (
<MessageAvatarContainer
message={message}
sequential={false}
isStarred={false}
/>
)}
<MessageBodyContainer>
<MessageHeader message={message} isTimeStamped={false} />

<Box
style={{
flex: '1',
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
alignItems: filteredThreads.length === 0 ? 'center' : 'initial'
}}
>
{filteredThreads.length === 0 ? (
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: '#4a4a4a' }}>
<Icon name="magnifier" size="3rem" style={{ padding: '0.5rem' }} />
<span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>No threads found</span>
</Box>
) : (filteredThreads
.map((message) => (
!message.t && message.tcount && (
<Box key={message._id} css={MessageCss} onClick={handleOpenThread(message)}>
{showAvatar && (
<MessageAvatarContainer
message={message}
sequential={false}
isStarred={false}
/>
)}
<MessageBodyContainer>
{<MessageHeader message={message} isTimeStamped={false} />}
<MessageBody>
{message.attachments && message.attachments.length > 0 ? (
message.file.name
) : (
message.msg
)}
</MessageBody>
<MessageBody>
{message.attachments && message.attachments.length > 0
? message.file.name
: message.msg}
</MessageBody>

<MessageMetrics
message={message}
isReplyButton={false}
/>
</MessageBodyContainer>
</Box>
)
)))}
</Box>
</Box>
<MessageMetrics message={message} isReplyButton={false} />
</MessageBodyContainer>
</Box>
)
)
)}
</Box>
);
</Box>
</Box>
);
};

export default AllThreads;
Loading

0 comments on commit 449b52e

Please sign in to comment.