CLASSROOMIO-T-214: Add comments feature in lesson
This commit is contained in:
Rotimi Best
@@ -0,0 +1,205 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
import type {
|
||||
RealtimeChannel,
|
||||
RealtimePostgresChangesPayload,
|
||||
PostgrestSingleResponse
|
||||
} from '@supabase/supabase-js';
|
||||
import type { LessonCommentInsertPayload, GroupPerson, LessonComment } from '$lib/utils/types';
|
||||
import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
|
||||
import { group } from '$lib/components/Course/store';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
|
||||
export let handleClose = () => {};
|
||||
|
||||
const supabase = getSupabase();
|
||||
|
||||
let comment = '';
|
||||
let bodyRef: HTMLDivElement;
|
||||
let lessonCommentChannel: RealtimeChannel;
|
||||
let comments: LessonComment[] = [];
|
||||
let groupmember: GroupPerson | undefined;
|
||||
|
||||
interface FetchComments {
|
||||
comment: string;
|
||||
created_at: string;
|
||||
groupmember: {
|
||||
id: string;
|
||||
profile: {
|
||||
avatar_url: string;
|
||||
fullname: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
async function handleSend() {
|
||||
console.log('groupmember', groupmember);
|
||||
if (!comment || !groupmember) {
|
||||
return;
|
||||
}
|
||||
|
||||
await supabase.from('lesson_comment').insert({
|
||||
lesson_id: $lesson.id,
|
||||
groupmember_id: groupmember.id,
|
||||
comment
|
||||
});
|
||||
|
||||
comment = '';
|
||||
setTimeout(() => {
|
||||
bodyRef.scrollTo({
|
||||
top: bodyRef.scrollHeight
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter') {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInsert(payload: RealtimePostgresChangesPayload<LessonCommentInsertPayload>) {
|
||||
const insertedComment = payload.new as LessonCommentInsertPayload;
|
||||
|
||||
const {
|
||||
data,
|
||||
error
|
||||
}: PostgrestSingleResponse<{
|
||||
id: string;
|
||||
profile: {
|
||||
fullname: string;
|
||||
avatar_url: string;
|
||||
};
|
||||
}> = await supabase
|
||||
.from('groupmember')
|
||||
.select('id, profile:profile_id(fullname, avatar_url)')
|
||||
.eq('id', insertedComment.groupmember_id)
|
||||
.single();
|
||||
|
||||
console.log('data', data);
|
||||
console.log('error', error);
|
||||
|
||||
if (error || !data) {
|
||||
return;
|
||||
}
|
||||
|
||||
comments = [
|
||||
...comments,
|
||||
{
|
||||
comment: insertedComment.comment,
|
||||
name: data.id === insertedComment.groupmember_id ? 'You' : data.profile.fullname || '',
|
||||
avatar: data.profile.avatar_url,
|
||||
commentAt: insertedComment.created_at
|
||||
}
|
||||
];
|
||||
$lesson.totalComments = comments.length;
|
||||
}
|
||||
|
||||
async function fetchComments(people: GroupPerson[], lessonId?: string | null) {
|
||||
groupmember = people.find((person) => person.profile_id === $profile.id);
|
||||
|
||||
if (!groupmember || !lessonId) return;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('lesson_comment')
|
||||
.select(
|
||||
`
|
||||
groupmember_id,
|
||||
created_at,
|
||||
comment,
|
||||
groupmember:groupmember_id(
|
||||
id,
|
||||
profile:profile_id(fullname, avatar_url)
|
||||
)
|
||||
`
|
||||
)
|
||||
.match({
|
||||
lesson_id: lessonId,
|
||||
groupmember_id: groupmember.id
|
||||
})
|
||||
.returns<FetchComments[]>();
|
||||
|
||||
if (error || !data) {
|
||||
console.error('error');
|
||||
return;
|
||||
}
|
||||
|
||||
comments = data.map((lessonComment) => {
|
||||
return {
|
||||
comment: lessonComment.comment,
|
||||
avatar: lessonComment.groupmember.profile.avatar_url,
|
||||
commentAt: lessonComment.created_at,
|
||||
name:
|
||||
lessonComment.groupmember.id === groupmember?.id
|
||||
? 'You'
|
||||
: lessonComment.groupmember.profile.fullname
|
||||
};
|
||||
});
|
||||
// $lesson.totalComments = comments.length;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
lessonCommentChannel = supabase
|
||||
.channel('any')
|
||||
.on(
|
||||
'postgres_changes',
|
||||
{ event: '*', schema: 'public', table: 'lesson_comment' },
|
||||
handleInsert
|
||||
)
|
||||
.subscribe();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
supabase.removeChannel(lessonCommentChannel);
|
||||
});
|
||||
|
||||
$: fetchComments($group.people, $lesson.id);
|
||||
</script>
|
||||
|
||||
<PageNav title="Comments" overidableStyle="padding: 0 10px">
|
||||
<div slot="widget">
|
||||
<CloseButton onClick={handleClose} />
|
||||
</div>
|
||||
</PageNav>
|
||||
|
||||
<div bind:this={bodyRef} class="overflow-auto h-[90%] px-2 min-w-[300px]">
|
||||
{#each comments as comment}
|
||||
<div class="pb-2 mt-2">
|
||||
<div class="flex items-start">
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
src={comment.avatar}
|
||||
/>
|
||||
<div class="ml-2">
|
||||
<p class="dark:text-white text-sm font-bold">{comment.name}</p>
|
||||
<p class="dark:text-white text-xs font-normal text-gray-800">
|
||||
{calDateDiff(comment.commentAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<article class="prose prose-sm sm:prose ml-8">
|
||||
{comment.comment}
|
||||
</article>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<TextField placeholder="Say something" bind:value={comment} onKeyDown={handleKeyDown} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
<script>
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
// import SendButton from "$lib/components/Buttons/Send/index.svelte";
|
||||
|
||||
export let handleClose;
|
||||
|
||||
let message = '';
|
||||
let bodyRef;
|
||||
let chats = [
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Evgeniy',
|
||||
message: "I'am looking at this and it looks great"
|
||||
},
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Sergey Semko',
|
||||
message: 'Thanks for the feedback, what do you think about my website. https://rotimibest.com'
|
||||
},
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Vitalii Marushko',
|
||||
message: 'Всем привет'
|
||||
},
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Natasha',
|
||||
message: 'Привет Виталий'
|
||||
}
|
||||
];
|
||||
|
||||
function handleSend() {
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
|
||||
chats = [
|
||||
...chats,
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'You',
|
||||
message
|
||||
}
|
||||
];
|
||||
|
||||
message = null;
|
||||
|
||||
setTimeout(() => {
|
||||
bodyRef.scrollTo({
|
||||
top: bodyRef.scrollHeight
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageNav title="LiveChat" overidableStyle="padding: 0 10px">
|
||||
<div slot="widget">
|
||||
<CloseButton onClick={handleClose} />
|
||||
</div>
|
||||
</PageNav>
|
||||
|
||||
<div bind:this={bodyRef} class="overflow-auto body">
|
||||
{#each chats as chat}
|
||||
<div class="pl-2 pb-4">
|
||||
<div class="flex items-center no-underline hover:underline text-black">
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
src={chat.avatar}
|
||||
/>
|
||||
<p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
|
||||
</div>
|
||||
<article class="prose prose-sm sm:prose pt-2 pl-8">
|
||||
{@html chat.message}
|
||||
</article>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<!-- <div class="flex items-center justify-between leading-none pl-2"> -->
|
||||
<TextField placeholder="Say something" bind:value={message} onKeyDown={handleKeyDown} />
|
||||
<!-- <SendButton onClick={handleSend} /> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.body {
|
||||
height: 90%;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,4 @@
|
||||
<script>
|
||||
import { marked } from 'marked';
|
||||
import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
@@ -101,7 +100,7 @@
|
||||
<div class="ml-2 flex-grow">
|
||||
<p class="dark:text-white text-sm font-bold">{question.name}</p>
|
||||
<article class="prose prose-sm sm:prose">
|
||||
{@html marked(question.question)}
|
||||
{question.question}
|
||||
</article>
|
||||
</div>
|
||||
<button class={`${question.answered && 'active'}`} on:click={handleMarkAnswered(question.id)}>
|
||||
|
||||
@@ -2,7 +2,7 @@ export default {
|
||||
APPS: {
|
||||
QANDA: 'QANDA',
|
||||
NOTES: 'NOTES',
|
||||
LIVE_CHAT: 'LIVE_CHAT',
|
||||
POLL: 'POLL',
|
||||
},
|
||||
COMMENTS: 'COMMENTS',
|
||||
POLL: 'POLL'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import hotkeys from 'hotkeys-js';
|
||||
import Forum from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import AlignBoxTopLeft from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
|
||||
@@ -9,19 +10,22 @@
|
||||
import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
|
||||
import { apps } from './store';
|
||||
|
||||
import Chip from '$lib/components/Chip/index.svelte';
|
||||
import QandA from './components/QandA/index.svelte';
|
||||
import LiveChat from './components/LiveChat/index.svelte';
|
||||
import Comments from './components/Comments/index.svelte';
|
||||
import Notes from './components/Notes/index.svelte';
|
||||
import Poll from './components/Poll/index.svelte';
|
||||
import APPS_CONSTANTS from './constants';
|
||||
import { browser } from '$app/environment';
|
||||
import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
|
||||
|
||||
let resize = false;
|
||||
let isDragging = false;
|
||||
let startX;
|
||||
let initialWidth;
|
||||
let appBarRef;
|
||||
let appContentRef;
|
||||
let isDown = writable(false);
|
||||
let startX: number;
|
||||
let initialWidth: number;
|
||||
let appBarRef: HTMLDivElement;
|
||||
let appContentRef: HTMLDivElement;
|
||||
|
||||
let topPadding = $apps.isStudent ? '48px' : '109px';
|
||||
|
||||
@@ -32,7 +36,7 @@
|
||||
};
|
||||
|
||||
function handleClose() {
|
||||
$apps.selectedApp = null;
|
||||
$apps.selectedApp = undefined;
|
||||
if (getResizableSidebar()) {
|
||||
appBarRef.style.width = '60px';
|
||||
} else if (!getResizableSidebar() && $apps.isStudent) {
|
||||
@@ -40,7 +44,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
function handleAppClick(appName) {
|
||||
function handleAppClick(appName?: string) {
|
||||
if (!$apps.selectedApp && getResizableSidebar()) {
|
||||
if (window.innerWidth <= 1024) {
|
||||
appBarRef.style.width = '300px';
|
||||
@@ -56,7 +60,7 @@
|
||||
$apps.dropdown = false;
|
||||
}
|
||||
|
||||
function handleCursor(event) {
|
||||
function handleCursor(event: MouseEvent) {
|
||||
if (!getResizableSidebar()) return;
|
||||
if (!resize && $apps.selectedApp) {
|
||||
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
|
||||
@@ -70,31 +74,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
function startDragging(event) {
|
||||
if (event.button === 0 && $apps.selectedApp) {
|
||||
event.preventDefault();
|
||||
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
|
||||
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
|
||||
function startDragging(event: MouseEvent) {
|
||||
console.log('start dragging');
|
||||
$isDown = true;
|
||||
setTimeout(() => {
|
||||
console.log('is down', $isDown);
|
||||
if (event.button === 0 && $apps.selectedApp && $isDown) {
|
||||
console.log('start dragging if');
|
||||
event.preventDefault();
|
||||
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
|
||||
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
|
||||
|
||||
if (
|
||||
(isNearRightBorder || isNearLeftBorder) &&
|
||||
event.clientX >= 0 &&
|
||||
event.clientX <= window.innerWidth
|
||||
) {
|
||||
isDragging = true;
|
||||
resize = true;
|
||||
startX = event.clientX;
|
||||
initialWidth = parseInt(getComputedStyle(appBarRef).width, 10);
|
||||
if (
|
||||
(isNearRightBorder || isNearLeftBorder) &&
|
||||
event.clientX >= 0 &&
|
||||
event.clientX <= window.innerWidth
|
||||
) {
|
||||
console.log('is dragging');
|
||||
isDragging = true;
|
||||
resize = true;
|
||||
startX = event.clientX;
|
||||
initialWidth = parseInt(getComputedStyle(appBarRef).width, 10) + 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function stopDragging() {
|
||||
isDragging = false;
|
||||
resize = false;
|
||||
$isDown = false;
|
||||
}
|
||||
|
||||
function dragSidebar(event) {
|
||||
function dragSidebar(event: MouseEvent) {
|
||||
if (!getResizableSidebar()) return;
|
||||
if (!isDragging || !$apps.selectedApp) return;
|
||||
const deltaX = startX - event.clientX + 60;
|
||||
@@ -108,7 +120,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
function updateTopPadding(isStudent) {
|
||||
function updateTopPadding(isStudent: boolean) {
|
||||
topPadding = isStudent ? '48px' : '109px';
|
||||
}
|
||||
|
||||
@@ -124,7 +136,7 @@
|
||||
event.preventDefault();
|
||||
switch (handler.key) {
|
||||
case 'A+1':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT);
|
||||
handleAppClick(APPS_CONSTANTS.APPS.COMMENTS);
|
||||
break;
|
||||
case 'A+2':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.QANDA);
|
||||
@@ -153,11 +165,11 @@
|
||||
|
||||
<div
|
||||
style={`--top-padding:${topPadding}`}
|
||||
class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`}
|
||||
class={`${$apps.open ? 'open ' : 'close'} root bg-white dark:bg-black`}
|
||||
bind:this={appBarRef}
|
||||
>
|
||||
<div class="apps">
|
||||
<div class="lg:hidden">
|
||||
<div class="lg:hidden mb-2">
|
||||
<IconButton
|
||||
buttonClassName="lg:hidden"
|
||||
toolTipProps={{ title: 'Settings', hotkeys: ['A', '0'] }}
|
||||
@@ -170,41 +182,48 @@
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
|
||||
value={APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === $apps.selectedApp}
|
||||
>
|
||||
<SendAlt size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
|
||||
value={APPS_CONSTANTS.APPS.QANDA}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
|
||||
>
|
||||
<Forum size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
|
||||
value={APPS_CONSTANTS.APPS.NOTES}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
|
||||
>
|
||||
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
|
||||
value={APPS_CONSTANTS.APPS.POLL}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
|
||||
>
|
||||
<ChartPie size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
<div class="mb-2 relative">
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Comments', hotkeys: ['A', '1'] }}
|
||||
value={APPS_CONSTANTS.APPS.COMMENTS}
|
||||
onClick={handleAppClick}
|
||||
contained={APPS_CONSTANTS.APPS.COMMENTS === $apps.selectedApp}
|
||||
buttonClassName="relative"
|
||||
>
|
||||
<Chip value={$lesson.totalComments} className="absolute -top-2 right-0 bg-primary-500" />
|
||||
<SendAlt size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
|
||||
value={APPS_CONSTANTS.APPS.QANDA}
|
||||
onClick={handleAppClick}
|
||||
contained={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
|
||||
>
|
||||
<Forum size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
|
||||
value={APPS_CONSTANTS.APPS.NOTES}
|
||||
onClick={handleAppClick}
|
||||
contained={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
|
||||
>
|
||||
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
|
||||
value={APPS_CONSTANTS.APPS.POLL}
|
||||
onClick={handleAppClick}
|
||||
contained={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
|
||||
>
|
||||
<ChartPie size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !!$apps.selectedApp}
|
||||
@@ -216,8 +235,8 @@
|
||||
>
|
||||
{#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
|
||||
<QandA {handleClose} />
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
<LiveChat {handleClose} />
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.COMMENTS}
|
||||
<Comments {handleClose} />
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
|
||||
<Poll {handleClose} />
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const apps = writable({
|
||||
open: false,
|
||||
dropdown: false,
|
||||
selectedApp: null,
|
||||
isStudent: false
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const apps = writable<{
|
||||
open: boolean;
|
||||
dropdown: boolean;
|
||||
selectedApp: string | undefined;
|
||||
isStudent: boolean;
|
||||
}>({
|
||||
open: false,
|
||||
dropdown: false,
|
||||
selectedApp: undefined,
|
||||
isStudent: false
|
||||
});
|
||||
Reference in New Issue
Block a user