algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-08-02 19:46:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

[offers][feat] revamp comments section

Browse Source
This commit is contained in:
Yangshun Tay
2022-11-04 11:21:01 +08:00
parent 5ea3aac37d
commit a7b4daec21
5 changed files with 43 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/portal/src/components/offers/profile/ProfileComments.tsx
View File

@ -1,13 +1,7 @@
import { signIn, useSession } from 'next-auth/react'; import { signIn, useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline'; import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline';
import { import { Button, Spinner, TextArea, useToast } from '@tih/ui';
Button,
HorizontalDivider,
Spinner,
TextArea,
useToast,
} from '@tih/ui';
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
import ExpandableCommentCard from '~/components/offers/profile/comments/ExpandableCommentCard'; import ExpandableCommentCard from '~/components/offers/profile/comments/ExpandableCommentCard';
@ -110,8 +104,8 @@ export default function ProfileComments({
); );
} }
return ( return (
<div className="bh-white h-fit p-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto"> <div className="bh-white h-fit lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
<div className="bg-white lg:sticky lg:top-0"> <div className="border-b border-slate-200 bg-white p-4 lg:sticky lg:top-0">
<div className="flex justify-end"> <div className="flex justify-end">
<div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4"> <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
<div className="col-span-1 flex justify-end"> <div className="col-span-1 flex justify-end">
@ -169,7 +163,7 @@ export default function ProfileComments({
</div> </div>
</div> </div>
<div className="mt-2 mb-6 bg-white"> <div className="space-y-4">
<h2 className="text-2xl font-bold">Discussions</h2> <h2 className="text-2xl font-bold">Discussions</h2>
{isEditable || session?.user?.name ? ( {isEditable || session?.user?.name ? (
<div> <div>
@ -199,11 +193,9 @@ export default function ProfileComments({
/> />
</div> </div>
</div> </div>
<HorizontalDivider />
</div> </div>
) : ( ) : (
<Button <Button
className="mb-5"
display="block" display="block"
href={loginPageHref()} href={loginPageHref()}
label="Sign in to join discussion" label="Sign in to join discussion"
@ -212,10 +204,10 @@ export default function ProfileComments({
)} )}
</div> </div>
</div> </div>
<section className="w-full"> <section className="w-full px-4">
<ul className="space-y-8" role="list"> <ul className="divide-y divide-slate-200" role="list">
{replies?.map((reply: Reply) => ( {replies?.map((reply: Reply) => (
<li key={reply.id}> <li key={reply.id} className="py-6">
<ExpandableCommentCard <ExpandableCommentCard
comment={reply} comment={reply}
profileId={profileId} profileId={profileId}

2
apps/portal/src/components/offers/profile/ProfileDetails.tsx
View File

@ -118,7 +118,7 @@ function ProfileAnalysis({
} }
return ( return (
<div className="p-4"> <div className="space-y-4 p-4">
{!analysis ? ( {!analysis ? (
<p>No analysis available.</p> <p>No analysis available.</p>
) : ( ) : (

4
apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
View File

@ -1,11 +1,11 @@
type ProfilePhotoHolderProps = Readonly<{ type ProfilePhotoHolderProps = Readonly<{
size?: 'lg' | 'sm'; size?: 'lg' | 'sm' | 'xs';
}>; }>;
export default function ProfilePhotoHolder({ export default function ProfilePhotoHolder({
size = 'lg', size = 'lg',
}: ProfilePhotoHolderProps) { }: ProfilePhotoHolderProps) {
const sizeMap = { lg: '16', sm: '12' }; const sizeMap = { lg: '16', sm: '12', xs: '10' };
return ( return (
<span <span
className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-slate-100`}> className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-slate-100`}>

35
apps/portal/src/components/offers/profile/comments/CommentCard.tsx
View File

@ -2,6 +2,8 @@ import { signIn, useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
import { Button, Dialog, TextArea, useToast } from '@tih/ui'; import { Button, Dialog, TextArea, useToast } from '@tih/ui';
import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
import { timeSinceNow } from '~/utils/offers/time'; import { timeSinceNow } from '~/utils/offers/time';
import { trpc } from '~/utils/trpc'; import { trpc } from '~/utils/trpc';
@ -121,14 +123,18 @@ export default function CommentCard({
return ( return (
<div className="flex space-x-3"> <div className="flex space-x-3">
{/* <div className="flex-shrink-0"> <div className="flex-shrink-0">
<img {user?.image ? (
alt="" <img
className="h-10 w-10 rounded-full" alt={user?.name ?? user?.email ?? 'Unknown user'}
src={`https://images.unsplash.com/photo-${comment.imageId}?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80`} className="h-10 w-10 rounded-full"
/> src={user?.image}
</div> */} />
<div> ) : (
<ProfilePhotoHolder size="xs" />
)}
</div>
<div className="w-full">
<div className="text-sm"> <div className="text-sm">
<p className="font-medium text-slate-900"> <p className="font-medium text-slate-900">
{user?.name ?? 'unknown user'} {user?.name ?? 'unknown user'}
@ -137,35 +143,35 @@ export default function CommentCard({
<div className="mt-1 text-sm text-slate-700"> <div className="mt-1 text-sm text-slate-700">
<p className="break-all">{message}</p> <p className="break-all">{message}</p>
</div> </div>
<div className="mt-2 space-x-2 text-sm"> <div className="mt-2 space-x-2 text-xs">
<span className="font-medium text-slate-500"> <span className="font-medium text-slate-500">
{timeSinceNow(createdAt)} ago {timeSinceNow(createdAt)} ago
</span>{' '} </span>{' '}
<span className="font-medium text-slate-500">&middot;</span>{' '}
{replyLength > 0 && ( {replyLength > 0 && (
<> <>
<span className="font-medium text-slate-500">&middot;</span>{' '}
<button <button
className="font-medium text-slate-900" className="font-medium text-slate-900"
type="button" type="button"
onClick={handleExpanded}> onClick={handleExpanded}>
{isExpanded ? `Hide replies` : `View replies (${replyLength})`} {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
</button> </button>
<span className="font-medium text-slate-500">&middot;</span>{' '}
</> </>
)} )}
{!disableReply && ( {!disableReply && (
<> <>
<span className="font-medium text-slate-500">&middot;</span>{' '}
<button <button
className="font-medium text-slate-900" className="font-medium text-slate-900"
type="button" type="button"
onClick={() => setIsReplying(!isReplying)}> onClick={() => setIsReplying(!isReplying)}>
Reply Reply
</button> </button>
<span className="font-medium text-slate-500">&middot;</span>{' '}
</> </>
)} )}
{deletable && ( {deletable && (
<> <>
<span className="font-medium text-slate-500">&middot;</span>{' '}
<button <button
className="font-medium text-slate-900" className="font-medium text-slate-900"
disabled={deleteCommentMutation.isLoading} disabled={deleteCommentMutation.isLoading}
@ -204,7 +210,7 @@ export default function CommentCard({
)} )}
</div> </div>
{!disableReply && isReplying && ( {!disableReply && isReplying && (
<div className="mt-2 mr-2"> <div className="mt-4 mr-2">
<form <form
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
@ -212,8 +218,9 @@ export default function CommentCard({
handleReply(); handleReply();
}}> }}>
<TextArea <TextArea
autoFocus={true}
isLabelHidden={true} isLabelHidden={true}
label="Comment" label="Reply to comment"
placeholder="Type your reply here" placeholder="Type your reply here"
resize="none" resize="none"
value={currentReply} value={currentReply}

26
apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
View File

@ -28,20 +28,18 @@ export default function ExpandableCommentCard({
/> />
{comment.replies && comment.replies.length > 0 && isExpanded && ( {comment.replies && comment.replies.length > 0 && isExpanded && (
<div className="pt-4"> <div className="pt-4">
<div className="border-l-4 border-slate-200 pl-4"> <ul className="space-y-4 pl-14" role="list">
<ul className="space-y-4" role="list"> {comment.replies.map((reply) => (
{comment.replies.map((reply) => ( <li key={reply.id}>
<li key={reply.id}> <CommentCard
<CommentCard comment={reply}
comment={reply} disableReply={true}
disableReply={true} profileId={profileId}
profileId={profileId} token={token}
token={token} />
/> </li>
</li> ))}
))} </ul>
</ul>
</div>
</div> </div>
)} )}
</div> </div>