File size: 4,141 Bytes
ec4551b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 'use client';
import { useUser } from '@gitroom/frontend/components/layout/user.context';
import { Button } from '@gitroom/react/form/button';
import { FC, useCallback, useMemo, useState } from 'react';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import useSWR from 'swr';
import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
export const RenderComponents: FC<{
postId: string;
}> = (props) => {
const { postId } = props;
const fetch = useFetch();
const comments = useCallback(async () => {
return (await fetch(`/public/posts/${postId}/comments`)).json();
}, [postId]);
const { data, mutate, isLoading } = useSWR('comments', comments);
const mapUsers = useMemo(() => {
return (data?.comments || []).reduce(
(all: any, current: any) => {
all.users[current.userId] = all.users[current.userId] || all.counter++;
return all;
},
{
users: {},
counter: 1,
}
).users;
}, [data]);
const { handleSubmit, register, setValue } = useForm();
const submit: SubmitHandler<FieldValues> = useCallback(
async (e) => {
setValue('comment', '');
await fetch(`/posts/${postId}/comments`, {
method: 'POST',
body: JSON.stringify(e),
});
mutate();
},
[postId, mutate]
);
const t = useT();
if (isLoading) {
return <></>;
}
return (
<>
<div className="mb-6 flex space-x-3">
<form className="flex-1 space-y-2" onSubmit={handleSubmit(submit)}>
<textarea
{...register('comment', {
required: true,
})}
className="flex w-full px-3 py-2 h-[98px] text-sm ring-offset-background placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px] resize-none text-white bg-third border border-tableBorder placeholder-gray-500 focus:ring-0"
placeholder="Add a comment..."
defaultValue={''}
/>
<div className="flex justify-end">
<Button type="submit">
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-send me-2 h-4 w-4"
>
<path d="m22 2-7 20-4-9-9-4Z" />
<path d="M22 2 11 13" />
</svg>
{t('post', 'Post')}
</Button>
</div>
</form>
</div>
<div className="space-y-4">
{!!data.comments.length && (
<h3 className="text-lg font-semibold">{t('comments', 'Comments')}</h3>
)}
{data.comments.map((comment: any) => (
<div
key={comment.id}
className="flex space-x-3 border-t border-tableBorder py-3"
>
<div className="flex-1 space-y-1">
<div className="flex items-center space-x-2">
<h3 className="text-sm font-semibold">
{t('user', 'User')}
{mapUsers[comment.userId]}
</h3>
</div>
<p className="text-sm text-gray-300">{comment.content}</p>
</div>
</div>
))}
</div>
</>
);
};
export const CommentsComponents: FC<{
postId: string;
}> = (props) => {
const user = useUser();
const t = useT();
const { postId } = props;
const goToComments = useCallback(() => {
window.location.href = `/auth?returnUrl=${window.location.href}`;
}, []);
if (!user?.id) {
return (
<Button onClick={goToComments}>
{t(
'login_register_to_add_comments',
'Login / Register to add comments'
)}
</Button>
);
}
return <RenderComponents postId={postId} />;
};
|