[OTHER] move the message list to its own component

[Dun-sin]

What would you like to share?

Whisper/client/src/components/Chat.jsx

Lines 442 to 585 in dbec99c

	<div
	key={id}
	id={`message-${id}`}
	className={`
	flex flex-col gap-2 py-2 duration-500 transition-all
	${hasActiveReply ? 'bg-[#FF9F1C]/25 border-[#FF9F1C]' : ''},
	${hasActiveReply ? (isSender ? 'border-r-[3.5px]' : 'border-l-[3.5px]') : ''}`}
	>
	{replyTo && (
	<div
	className={`
	max-w-[80%] md:max-w-[50%] min-w-[10px] flex gap-2 items-center
	${sender.toString() === senderId.toString() ? 'self-end' : ''}
	${repliedMessage ? 'cursor-pointer' : ''}
	`}
	onClick={() => scrollToMessage(replyTo)}
	>
	<div className="truncate border-b-4 border-[#FF9F1C] p-1">
	{repliedMessage ? (
	typeof repliedMessage.message === 'string' ? (
	<div
	className="message-reply-container flex flex-nowrap items-center gap-2"
	dangerouslySetInnerHTML={{
	__html: md.render(repliedMessage.message),
	}}
	/>
	) : (
	repliedMessage.message
	)
	) : (
	<p className="text-gray-400 uppercase text-sm italic">
	Original Message Deleted
	</p>
	)}
	</div>
	<div
	className={sender.toString() !== senderId.toString() ? 'order-first' : ''}
	>
	{sender.toString() === senderId.toString() ? (
	<BsArrow90DegLeft className="fill-white text-2xl" />
	) : (
	<BsArrow90DegRight className="fill-white text-2xl" />
	)}
	</div>
	</div>
	)}
	<div
	className={`w-full flex text-white relative mb-2 ${
	isSender ? 'justify-end' : 'justify-start'
	}`}
	>
	<div
	className={`flex flex-col mb-[2px] min-w-[10px] mdl:max-w-[80%] max-w-[50%] ${
	isSender ? 'items-end' : 'items-start'
	}`}
	>
	{containsBadword && !isSender && !badwordChoices[id] ? (
	<div className="dark:text-white text-black flex flex-col border-red border w-full rounded-r-md p-3">
	<p>Your buddy is trying to send you a bad word</p>
	<div className="flex w-full gap-6">
	<span
	onClick={() => showBadword(id)}
	className="text-sm cursor-pointer"
	>
	See
	</span>
	<span
	onClick={() => hideBadword(id)}
	className="text-red text-sm cursor-pointer"
	>
	Hide
	</span>
	</div>
	</div>
	) : (
	<>
	<div
	className={`chat bg-red p-3 break-all will-change-auto flex gap-6 items-center text ${
	isSender
	? 'justify-between bg-secondary rounded-l-md'
	: 'rounded-r-md'
	}`}
	>
	{typeof message === 'string' ? (
	<span
	dangerouslySetInnerHTML={{
	__html: md.render(
	badwordChoices[id] === 'hide'
	? badwords.filter(message)
	: badwordChoices[id] === 'show'
	? message
	: message
	),
	}}
	/>
	) : badwordChoices[id] === 'hide' ? (
	badwords.filter(message)
	) : badwordChoices[id] === 'show' ? (
	message
	) : (
	message
	)}
	<DropDownOptions
	isSender={isSender && status !== 'pending'}
	id={id}
	inputRef={inputRef}
	cancelEdit={cancelEdit}
	setEditing={setEditing}
	setReplyId={startReply}
	/>
	</div>
	<div
	className={`flex gap-2 items-center ${
	isSender ? 'flex-row' : 'flex-row-reverse'
	}`}
	>
	<div
	className={`text-[12px] ${
	status === 'failed' ? 'text-red-600' : 'text-white'
	}`}
	>
	<MessageStatus
	time={getTime(time)}
	status={status ?? 'sent'}
	iAmTheSender={isSender}
	onResend={() => handleResend(id, doSend, state, app)}
	/>
	</div>
	<PreviousMessages
	id={id}
	isSender={isSender}
	isEdited={isEdited}
	openPreviousEdit={openPreviousEdit}
	openPreviousMessages={openPreviousMessages}
	oldMessages={oldMessages}
	/>
	</div>
	<MessageSeen isRead={isRead} isSender={isSender} />
	</>
	)}
	</div>
	</div>
	</div>

Additional information

Break it down into subcomponents as well:

• create a component for when we're displaying the bad word warning

  Whisper/client/src/components/Chat.jsx

  Lines 499 to 515 in dbec99c

  	<div className="dark:text-white text-black flex flex-col border-red border w-full rounded-r-md p-3">
  	<p>Your buddy is trying to send you a bad word</p>
  	<div className="flex w-full gap-6">
  	<span
  	onClick={() => showBadword(id)}
  	className="text-sm cursor-pointer"
  	>
  	See
  	</span>
  	<span
  	onClick={() => hideBadword(id)}
  	className="text-red text-sm cursor-pointer"
  	>
  	Hide
  	</span>
  	</div>
  	</div>

• create a component for status

  Whisper/client/src/components/Chat.jsx

  Lines 554 to 579 in dbec99c

  	<div
  	className={`flex gap-2 items-center ${
  	isSender ? 'flex-row' : 'flex-row-reverse'
  	}`}
  	>
  	<div
  	className={`text-[12px] ${
  	status === 'failed' ? 'text-red-600' : 'text-white'
  	}`}
  	>
  	<MessageStatus
  	time={getTime(time)}
  	status={status ?? 'sent'}
  	iAmTheSender={isSender}
  	onResend={() => handleResend(id, doSend, state, app)}
  	/>
  	</div>
  	<PreviousMessages
  	id={id}
  	isSender={isSender}
  	isEdited={isEdited}
  	openPreviousEdit={openPreviousEdit}
  	openPreviousMessages={openPreviousMessages}
  	oldMessages={oldMessages}
  	/>
  	</div>

[github-actions]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you.

[zainab-a-ali]

Can I be assigned this issue as well @Dun-sin ?

[wheval]

I want to work on this issue. I can create the component asap. Thanks

[Dun-sin]

I want to work on this issue. I can create the component asap. Thanks

sure @wheval, thanks for wanting to contribute. Make sure to read the issue description carefully and ask if you have questions on the discord server. Follow the rules here, or your PR won't be accepted and will be closed. Good luck!