chore: better Prettier config for easier reviews
This commit is contained in:
@ -1,18 +1,18 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
|
||||
import classNames from 'clsx'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
import { useSwipeable } from 'react-swipeable'
|
||||
import { useState, useEffect } from "react"
|
||||
import Image from "next/image"
|
||||
import { PlusIcon, MenuIcon, UsersIcon, XIcon } from "@heroicons/react/solid"
|
||||
import classNames from "clsx"
|
||||
import { useMediaQuery } from "react-responsive"
|
||||
import { useSwipeable } from "react-swipeable"
|
||||
|
||||
import type { DirectionSidebar } from './Sidebar'
|
||||
import { Sidebar } from './Sidebar'
|
||||
import { IconButton } from '../design/IconButton'
|
||||
import { IconLink } from '../design/IconLink'
|
||||
import { Guilds } from './Guilds/Guilds'
|
||||
import { Divider } from '../design/Divider'
|
||||
import { Members } from './Members'
|
||||
import { useAuthentication } from '../../tools/authentication'
|
||||
import type { DirectionSidebar } from "./Sidebar"
|
||||
import { Sidebar } from "./Sidebar"
|
||||
import { IconButton } from "../design/IconButton"
|
||||
import { IconLink } from "../design/IconLink"
|
||||
import { Guilds } from "./Guilds/Guilds"
|
||||
import { Divider } from "../design/Divider"
|
||||
import { Members } from "./Members"
|
||||
import { useAuthentication } from "../../tools/authentication"
|
||||
|
||||
export interface ChannelsPath {
|
||||
channelId: number
|
||||
@ -27,9 +27,9 @@ const isGuildsChannelsPath = (path: any): path is GuildsChannelsPath => {
|
||||
}
|
||||
|
||||
export type ApplicationPath =
|
||||
| '/application'
|
||||
| '/application/guilds/join'
|
||||
| '/application/guilds/create'
|
||||
| "/application"
|
||||
| "/application/guilds/join"
|
||||
| "/application/guilds/create"
|
||||
| `/application/users/${number}`
|
||||
| `/application/users/settings`
|
||||
| GuildsChannelsPath
|
||||
@ -51,51 +51,51 @@ export const Application: React.FC<
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
const isMobile = useMediaQuery({
|
||||
query: '(max-width: 900px)'
|
||||
query: "(max-width: 900px)",
|
||||
})
|
||||
|
||||
const [visibleSidebars, setVisibleSidebars] = useState({
|
||||
left: !isMobile,
|
||||
right: false
|
||||
right: false,
|
||||
})
|
||||
|
||||
const handleToggleSidebars = (direction: DirectionSidebar): void => {
|
||||
if (!isMobile) {
|
||||
if (direction === 'left') {
|
||||
if (direction === "left") {
|
||||
return setVisibleSidebars({
|
||||
...visibleSidebars,
|
||||
left: !visibleSidebars.left
|
||||
left: !visibleSidebars.left,
|
||||
})
|
||||
}
|
||||
if (direction === 'right') {
|
||||
if (direction === "right") {
|
||||
return setVisibleSidebars({
|
||||
...visibleSidebars,
|
||||
right: !visibleSidebars.right
|
||||
right: !visibleSidebars.right,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (direction === 'right' && visibleSidebars.left) {
|
||||
if (direction === "right" && visibleSidebars.left) {
|
||||
return setVisibleSidebars({
|
||||
left: false,
|
||||
right: true
|
||||
right: true,
|
||||
})
|
||||
}
|
||||
if (direction === 'left' && visibleSidebars.right) {
|
||||
if (direction === "left" && visibleSidebars.right) {
|
||||
return setVisibleSidebars({
|
||||
left: true,
|
||||
right: false
|
||||
right: false,
|
||||
})
|
||||
}
|
||||
if (direction === 'left' && !visibleSidebars.right) {
|
||||
if (direction === "left" && !visibleSidebars.right) {
|
||||
return setVisibleSidebars({
|
||||
...visibleSidebars,
|
||||
left: !visibleSidebars.left
|
||||
left: !visibleSidebars.left,
|
||||
})
|
||||
}
|
||||
if (direction === 'right' && !visibleSidebars.left) {
|
||||
if (direction === "right" && !visibleSidebars.left) {
|
||||
return setVisibleSidebars({
|
||||
...visibleSidebars,
|
||||
right: !visibleSidebars.right
|
||||
right: !visibleSidebars.right,
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -105,7 +105,7 @@ export const Application: React.FC<
|
||||
if (isMobile && (visibleSidebars.left || visibleSidebars.right)) {
|
||||
return setVisibleSidebars({
|
||||
left: false,
|
||||
right: false
|
||||
right: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -120,7 +120,7 @@ export const Application: React.FC<
|
||||
}
|
||||
setVisibleSidebars({
|
||||
...visibleSidebars,
|
||||
left: true
|
||||
left: true,
|
||||
})
|
||||
},
|
||||
onSwipedLeft: () => {
|
||||
@ -130,10 +130,10 @@ export const Application: React.FC<
|
||||
}
|
||||
setVisibleSidebars({
|
||||
...visibleSidebars,
|
||||
right: true
|
||||
right: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
@ -146,28 +146,28 @@ export const Application: React.FC<
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className='z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800'>
|
||||
<header className="z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800">
|
||||
<IconButton
|
||||
className='h-10 w-10 p-2'
|
||||
className="h-10 w-10 p-2"
|
||||
onClick={() => {
|
||||
return handleToggleSidebars('left')
|
||||
return handleToggleSidebars("left")
|
||||
}}
|
||||
>
|
||||
{!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
|
||||
</IconButton>
|
||||
<div
|
||||
data-cy='application-title'
|
||||
className='text-md font-semibold text-green-800 dark:text-green-400'
|
||||
data-cy="application-title"
|
||||
className="text-md font-semibold text-green-800 dark:text-green-400"
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div className='flex space-x-2'>
|
||||
{title.startsWith('#') && (
|
||||
<div className="flex space-x-2">
|
||||
{title.startsWith("#") && (
|
||||
<IconButton
|
||||
data-cy='icon-button-right-sidebar-members'
|
||||
className='h-10 w-10 p-2'
|
||||
data-cy="icon-button-right-sidebar-members"
|
||||
className="h-10 w-10 p-2"
|
||||
onClick={() => {
|
||||
return handleToggleSidebars('right')
|
||||
return handleToggleSidebars("right")
|
||||
}}
|
||||
>
|
||||
{!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
|
||||
@ -177,26 +177,26 @@ export const Application: React.FC<
|
||||
</header>
|
||||
|
||||
<main
|
||||
className='h-full-without-header relative flex overflow-hidden'
|
||||
className="h-full-without-header relative flex overflow-hidden"
|
||||
{...swipeableHandlers}
|
||||
>
|
||||
<Sidebar
|
||||
direction='left'
|
||||
direction="left"
|
||||
visible={visibleSidebars.left}
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<div className='left-0 top-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800'>
|
||||
<div className="left-0 top-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800">
|
||||
<IconLink
|
||||
href={`/application/users/settings`}
|
||||
selected={path === `/application/users/settings`}
|
||||
title='Settings'
|
||||
title="Settings"
|
||||
>
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full'
|
||||
className="rounded-full"
|
||||
src={
|
||||
user.logo == null
|
||||
? '/images/data/user-default.png'
|
||||
? "/images/data/user-default.png"
|
||||
: user.logo
|
||||
}
|
||||
alt={"Users's profil picture"}
|
||||
@ -206,11 +206,11 @@ export const Application: React.FC<
|
||||
/>
|
||||
</IconLink>
|
||||
<IconLink
|
||||
href='/application'
|
||||
selected={path === '/application'}
|
||||
title='Join or create a Guild'
|
||||
href="/application"
|
||||
selected={path === "/application"}
|
||||
title="Join or create a Guild"
|
||||
>
|
||||
<PlusIcon className='h-12 w-12 text-green-800 dark:text-green-400' />
|
||||
<PlusIcon className="h-12 w-12 text-green-800 dark:text-green-400" />
|
||||
</IconLink>
|
||||
<Divider />
|
||||
<Guilds path={path} />
|
||||
@ -219,14 +219,14 @@ export const Application: React.FC<
|
||||
</Sidebar>
|
||||
|
||||
<div
|
||||
id='application-page-content'
|
||||
id="application-page-content"
|
||||
onClick={handleCloseSidebars}
|
||||
className={classNames(
|
||||
'h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
|
||||
"h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition",
|
||||
{
|
||||
'absolute opacity-20':
|
||||
isMobile && (visibleSidebars.left || visibleSidebars.right)
|
||||
}
|
||||
"absolute opacity-20":
|
||||
isMobile && (visibleSidebars.left || visibleSidebars.right),
|
||||
},
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
@ -234,7 +234,7 @@ export const Application: React.FC<
|
||||
|
||||
{isGuildsChannelsPath(path) && (
|
||||
<Sidebar
|
||||
direction='right'
|
||||
direction="right"
|
||||
visible={visibleSidebars.right}
|
||||
isMobile={isMobile}
|
||||
>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import { useState } from 'react'
|
||||
import { Form, useForm } from 'react-component-form'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import classNames from 'clsx'
|
||||
import axios from 'axios'
|
||||
import type { HandleUseFormCallback } from 'react-component-form'
|
||||
import { useRouter } from "next/router"
|
||||
import { useState } from "react"
|
||||
import { Form, useForm } from "react-component-form"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import classNames from "clsx"
|
||||
import axios from "axios"
|
||||
import type { HandleUseFormCallback } from "react-component-form"
|
||||
|
||||
import { FormState } from '../../design/FormState'
|
||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||
import { Input } from '../../design/Input'
|
||||
import { Button } from '../../design/Button'
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import { FormState } from "../../design/FormState"
|
||||
import { useGuildMember } from "../../../contexts/GuildMember"
|
||||
import { Input } from "../../design/Input"
|
||||
import { Button } from "../../design/Button"
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import type {
|
||||
Channel,
|
||||
ChannelWithDefaultChannelId
|
||||
} from '../../../models/Channel'
|
||||
import { channelSchema } from '../../../models/Channel'
|
||||
import { ConfirmPopup } from '../ConfirmPopup'
|
||||
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||
ChannelWithDefaultChannelId,
|
||||
} from "../../../models/Channel"
|
||||
import { channelSchema } from "../../../models/Channel"
|
||||
import { ConfirmPopup } from "../ConfirmPopup"
|
||||
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
||||
|
||||
const schema = {
|
||||
name: channelSchema.name
|
||||
name: channelSchema.name,
|
||||
}
|
||||
|
||||
export interface ChannelSettingsProps {
|
||||
@ -36,7 +36,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
const { channel } = props
|
||||
|
||||
const [inputValues, setInputValues] = useState({
|
||||
name: channel.name
|
||||
name: channel.name,
|
||||
})
|
||||
|
||||
const [confirmation, setConfirmation] = useState(false)
|
||||
@ -51,7 +51,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
message,
|
||||
errors,
|
||||
setFetchState,
|
||||
setMessage
|
||||
setMessage,
|
||||
} = useForm(schema)
|
||||
const { getFirstErrorTranslation } = useFormTranslation()
|
||||
|
||||
@ -63,8 +63,8 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
return null
|
||||
} catch (error) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -75,7 +75,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
setInputValues((oldInputValues) => {
|
||||
return {
|
||||
...oldInputValues,
|
||||
[event.target.name]: event.target.value
|
||||
[event.target.name]: event.target.value,
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -84,15 +84,15 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
try {
|
||||
const { data } =
|
||||
await authentication.api.delete<ChannelWithDefaultChannelId>(
|
||||
`/channels/${channel.id}`
|
||||
`/channels/${channel.id}`,
|
||||
)
|
||||
await router.push(`/application/${guild.id}/${data.defaultChannelId}`)
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setFetchState("error")
|
||||
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
||||
setMessage('application:delete-channel-only-one')
|
||||
setMessage("application:delete-channel-only-one")
|
||||
} else {
|
||||
setMessage('errors:server-error')
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -101,37 +101,37 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
<>
|
||||
<Form
|
||||
onSubmit={handleUseForm(onSubmit)}
|
||||
className='my-auto flex flex-col items-center justify-center py-12'
|
||||
className="my-auto flex flex-col items-center justify-center py-12"
|
||||
>
|
||||
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
||||
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
||||
<div className='mx-12 flex flex-col'>
|
||||
<div className="flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row">
|
||||
<div className=" flex w-full flex-wrap items-center justify-center px-6 sm:w-max">
|
||||
<div className="mx-12 flex flex-col">
|
||||
<Input
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
placeholder={t('common:name')}
|
||||
className='!mt-0'
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
placeholder={t("common:name")}
|
||||
className="!mt-0"
|
||||
onChange={onChange}
|
||||
value={inputValues.name}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
data-cy='channel-name-input'
|
||||
data-cy="channel-name-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
||||
<div className='space-x-6'>
|
||||
<Button type='submit' data-cy='button-save-channel-settings'>
|
||||
{t('application:save')}
|
||||
<div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
|
||||
<div className="space-x-6">
|
||||
<Button type="submit" data-cy="button-save-channel-settings">
|
||||
{t("application:save")}
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
color='red'
|
||||
type="button"
|
||||
color="red"
|
||||
onClick={handleConfirmation}
|
||||
data-cy='button-delete-channel-settings'
|
||||
data-cy="button-delete-channel-settings"
|
||||
>
|
||||
{t('application:delete')}
|
||||
{t("application:delete")}
|
||||
</Button>
|
||||
</div>
|
||||
<FormState state={fetchState} message={message} />
|
||||
@ -139,17 +139,17 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
||||
</Form>
|
||||
<div
|
||||
className={classNames(
|
||||
'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
|
||||
{ 'pointer-events-auto !visible !opacity-100': confirmation }
|
||||
"pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all",
|
||||
{ "pointer-events-auto !visible !opacity-100": confirmation },
|
||||
)}
|
||||
>
|
||||
<ConfirmPopup
|
||||
className={classNames('relative top-8 transition-all', {
|
||||
'!top-0': confirmation
|
||||
className={classNames("relative top-8 transition-all", {
|
||||
"!top-0": confirmation,
|
||||
})}
|
||||
handleYes={handleDelete}
|
||||
handleNo={handleConfirmation}
|
||||
title={`${t('application:delete-the-channel')} ?`}
|
||||
title={`${t("application:delete-the-channel")} ?`}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './ChannelSettings'
|
||||
export * from "./ChannelSettings"
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { memo } from 'react'
|
||||
import classNames from 'clsx'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { CogIcon } from '@heroicons/react/solid'
|
||||
import { memo } from "react"
|
||||
import classNames from "clsx"
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/router"
|
||||
import { CogIcon } from "@heroicons/react/solid"
|
||||
|
||||
import type { GuildsChannelsPath } from '../Application'
|
||||
import type { Channel as ChannelType } from '../../../models/Channel'
|
||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||
import { IconButton } from '../../design/IconButton'
|
||||
import type { GuildsChannelsPath } from "../Application"
|
||||
import type { Channel as ChannelType } from "../../../models/Channel"
|
||||
import { useGuildMember } from "../../../contexts/GuildMember"
|
||||
import { IconButton } from "../../design/IconButton"
|
||||
|
||||
export interface ChannelProps {
|
||||
path: GuildsChannelsPath
|
||||
@ -25,24 +25,24 @@ const ChannelMemo: React.FC<ChannelProps> = (props) => {
|
||||
<Link
|
||||
href={`/application/${path.guildId}/${channel.id}`}
|
||||
className={classNames(
|
||||
'group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
|
||||
"group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600",
|
||||
{
|
||||
'font-semibold text-green-800 dark:text-green-400': selected
|
||||
}
|
||||
"font-semibold text-green-800 dark:text-green-400": selected,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className='max-[315px] ml-2 mr-4 break-all' data-cy='channel-name'>
|
||||
<span className="max-[315px] ml-2 mr-4 break-all" data-cy="channel-name">
|
||||
# {channel.name}
|
||||
</span>
|
||||
{member.isOwner && (
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
await router.push(
|
||||
`/application/${channel.guildId}/${channel.id}/settings`
|
||||
`/application/${channel.guildId}/${channel.id}/settings`,
|
||||
)
|
||||
}}
|
||||
className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
|
||||
title='Settings'
|
||||
className="bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600"
|
||||
title="Settings"
|
||||
>
|
||||
<CogIcon height={20} width={20} />
|
||||
</IconButton>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
|
||||
import { useChannels } from '../../../contexts/Channels'
|
||||
import type { GuildsChannelsPath } from '../Application'
|
||||
import { Loader } from '../../design/Loader'
|
||||
import { Channel } from './Channel'
|
||||
import { useChannels } from "../../../contexts/Channels"
|
||||
import type { GuildsChannelsPath } from "../Application"
|
||||
import { Loader } from "../../design/Loader"
|
||||
import { Channel } from "./Channel"
|
||||
|
||||
export interface ChannelsProps {
|
||||
path: GuildsChannelsPath
|
||||
@ -16,12 +16,12 @@ export const Channels: React.FC<ChannelsProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
id='channels'
|
||||
className='scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto'
|
||||
id="channels"
|
||||
className="scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto"
|
||||
>
|
||||
<InfiniteScroll
|
||||
className='channels-list w-full'
|
||||
scrollableTarget='channels'
|
||||
className="channels-list w-full"
|
||||
scrollableTarget="channels"
|
||||
dataLength={channels.length}
|
||||
next={nextPage}
|
||||
hasMore={hasMore}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Channels'
|
||||
export * from "./Channels"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import classNames from 'clsx'
|
||||
import Image from "next/image"
|
||||
import { useState } from "react"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import classNames from "clsx"
|
||||
|
||||
import { Loader } from '../../design/Loader'
|
||||
import { Loader } from "../../design/Loader"
|
||||
|
||||
export interface ConfirmPopupProps {
|
||||
className?: string
|
||||
@ -27,43 +27,43 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
|
||||
<div className={props.className}>
|
||||
<Loader
|
||||
className={classNames(
|
||||
'absolute left-1/2 top-1/2 scale-0 transition-all',
|
||||
"absolute left-1/2 top-1/2 scale-0 transition-all",
|
||||
{
|
||||
'scale-100': isLoading
|
||||
}
|
||||
"scale-100": isLoading,
|
||||
},
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'visible flex flex-col items-center opacity-100 transition-all',
|
||||
"visible flex flex-col items-center opacity-100 transition-all",
|
||||
{
|
||||
'invisible opacity-0': isLoading
|
||||
}
|
||||
"invisible opacity-0": isLoading,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
quality={100}
|
||||
src='/images/svg/design/join-guild.svg'
|
||||
alt='Illustration'
|
||||
src="/images/svg/design/join-guild.svg"
|
||||
alt="Illustration"
|
||||
height={150}
|
||||
width={150}
|
||||
/>
|
||||
<div className='mt-8 flex flex-col'>
|
||||
<h1 className='mb-6 text-center text-xl'>{props.title}</h1>
|
||||
<div className='flex gap-7'>
|
||||
<div className="mt-8 flex flex-col">
|
||||
<h1 className="mb-6 text-center text-xl">{props.title}</h1>
|
||||
<div className="flex gap-7">
|
||||
<button
|
||||
className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
|
||||
className="rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
|
||||
onClick={handleYesLoading}
|
||||
data-cy='confirm-popup-yes-button'
|
||||
data-cy="confirm-popup-yes-button"
|
||||
>
|
||||
{t('common:yes')}
|
||||
{t("common:yes")}
|
||||
</button>
|
||||
<button
|
||||
className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
|
||||
className="rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
|
||||
onClick={props.handleNo}
|
||||
data-cy='confirm-popup-no-button'
|
||||
data-cy="confirm-popup-no-button"
|
||||
>
|
||||
{t('common:no')}
|
||||
{t("common:no")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './ConfirmPopup'
|
||||
export * from "./ConfirmPopup"
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { Form, useForm } from 'react-component-form'
|
||||
import type { HandleUseFormCallback } from 'react-component-form'
|
||||
import { useRouter } from "next/router"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import { Form, useForm } from "react-component-form"
|
||||
import type { HandleUseFormCallback } from "react-component-form"
|
||||
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import { Input } from '../../design/Input'
|
||||
import { Main } from '../../design/Main'
|
||||
import { Button } from '../../design/Button'
|
||||
import { FormState } from '../../design/FormState'
|
||||
import type { Channel } from '../../../models/Channel'
|
||||
import { channelSchema } from '../../../models/Channel'
|
||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import { Input } from "../../design/Input"
|
||||
import { Main } from "../../design/Main"
|
||||
import { Button } from "../../design/Button"
|
||||
import { FormState } from "../../design/FormState"
|
||||
import type { Channel } from "../../../models/Channel"
|
||||
import { channelSchema } from "../../../models/Channel"
|
||||
import { useGuildMember } from "../../../contexts/GuildMember"
|
||||
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
||||
|
||||
const schema = {
|
||||
name: channelSchema.name
|
||||
name: channelSchema.name,
|
||||
}
|
||||
|
||||
export const CreateChannel: React.FC = () => {
|
||||
@ -31,38 +31,38 @@ export const CreateChannel: React.FC = () => {
|
||||
try {
|
||||
const { data: channel } = await authentication.api.post<Channel>(
|
||||
`/guilds/${guild.id}/channels`,
|
||||
formData
|
||||
formData,
|
||||
)
|
||||
await router.push(`/application/${guild.id}/${channel.id}`)
|
||||
return null
|
||||
} catch (error) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
|
||||
<Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={t('common:name')}
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
type="text"
|
||||
placeholder={t("common:name")}
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
data-cy='channel-name-input'
|
||||
data-cy="channel-name-input"
|
||||
/>
|
||||
<Button
|
||||
className='mt-6 w-full'
|
||||
type='submit'
|
||||
data-cy='button-create-channel'
|
||||
className="mt-6 w-full"
|
||||
type="submit"
|
||||
data-cy="button-create-channel"
|
||||
>
|
||||
{t('application:create')}
|
||||
{t("application:create")}
|
||||
</Button>
|
||||
</Form>
|
||||
<FormState id='message' state={fetchState} message={message} />
|
||||
<FormState id="message" state={fetchState} message={message} />
|
||||
</Main>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './CreateChannel'
|
||||
export * from "./CreateChannel"
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { Form, useForm } from 'react-component-form'
|
||||
import type { AxiosResponse } from 'axios'
|
||||
import type { HandleUseFormCallback } from 'react-component-form'
|
||||
import { useRouter } from "next/router"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import { Form, useForm } from "react-component-form"
|
||||
import type { AxiosResponse } from "axios"
|
||||
import type { HandleUseFormCallback } from "react-component-form"
|
||||
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import type { GuildComplete } from '../../../models/Guild'
|
||||
import { guildSchema } from '../../../models/Guild'
|
||||
import { Input } from '../../design/Input'
|
||||
import { Main } from '../../design/Main'
|
||||
import { Button } from '../../design/Button'
|
||||
import { FormState } from '../../design/FormState'
|
||||
import { Textarea } from '../../design/Textarea'
|
||||
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import type { GuildComplete } from "../../../models/Guild"
|
||||
import { guildSchema } from "../../../models/Guild"
|
||||
import { Input } from "../../design/Input"
|
||||
import { Main } from "../../design/Main"
|
||||
import { Button } from "../../design/Button"
|
||||
import { FormState } from "../../design/FormState"
|
||||
import { Textarea } from "../../design/Textarea"
|
||||
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
||||
|
||||
const schema = {
|
||||
name: guildSchema.name,
|
||||
description: guildSchema.description
|
||||
description: guildSchema.description,
|
||||
}
|
||||
|
||||
export const CreateGuild: React.FC = () => {
|
||||
@ -33,44 +33,44 @@ export const CreateGuild: React.FC = () => {
|
||||
const { data } = await authentication.api.post<
|
||||
any,
|
||||
AxiosResponse<{ guild: GuildComplete }>
|
||||
>('/guilds', { name: formData.name, description: formData.description })
|
||||
>("/guilds", { name: formData.name, description: formData.description })
|
||||
const guildId = data.guild.id
|
||||
const channel = data.guild.channels[0]
|
||||
if (channel == null) {
|
||||
throw new Error('No channel found')
|
||||
throw new Error("No channel found")
|
||||
}
|
||||
const channelId = channel.id
|
||||
await router.push(`/application/${guildId}/${channelId}`)
|
||||
return null
|
||||
} catch (error) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
|
||||
<Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={t('common:name')}
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
type="text"
|
||||
placeholder={t("common:name")}
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
/>
|
||||
<Textarea
|
||||
label='Description'
|
||||
placeholder='Description'
|
||||
id='description'
|
||||
label="Description"
|
||||
placeholder="Description"
|
||||
id="description"
|
||||
/>
|
||||
<Button className='mt-6 w-full' type='submit' data-cy='submit'>
|
||||
{t('application:create')}
|
||||
<Button className="mt-6 w-full" type="submit" data-cy="submit">
|
||||
{t("application:create")}
|
||||
</Button>
|
||||
</Form>
|
||||
<FormState
|
||||
id='message'
|
||||
id="message"
|
||||
state={fetchState}
|
||||
message={message != null ? t(message) : undefined}
|
||||
/>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './CreateGuild'
|
||||
export * from "./CreateGuild"
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import Link from 'next/link'
|
||||
import { CogIcon, PlusIcon } from '@heroicons/react/solid'
|
||||
import Link from "next/link"
|
||||
import { CogIcon, PlusIcon } from "@heroicons/react/solid"
|
||||
|
||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||
import { Divider } from '../../design/Divider'
|
||||
import { Channels } from '../Channels'
|
||||
import { IconButton } from '../../design/IconButton'
|
||||
import type { GuildsChannelsPath } from '..'
|
||||
import { useGuildMember } from "../../../contexts/GuildMember"
|
||||
import { Divider } from "../../design/Divider"
|
||||
import { Channels } from "../Channels"
|
||||
import { IconButton } from "../../design/IconButton"
|
||||
import type { GuildsChannelsPath } from ".."
|
||||
|
||||
export interface GuildLeftSidebarProps {
|
||||
path: GuildsChannelsPath
|
||||
@ -17,23 +17,23 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
|
||||
const { guild, member } = useGuildMember()
|
||||
|
||||
return (
|
||||
<div className='mt-2 flex w-full flex-col justify-between'>
|
||||
<div className='mx-8 mt-2 p-2 text-center'>
|
||||
<h2 data-cy='guild-left-sidebar-title' className='text-xl'>
|
||||
<div className="mt-2 flex w-full flex-col justify-between">
|
||||
<div className="mx-8 mt-2 p-2 text-center">
|
||||
<h2 data-cy="guild-left-sidebar-title" className="text-xl">
|
||||
{guild.name}
|
||||
</h2>
|
||||
</div>
|
||||
<Divider />
|
||||
<Channels path={path} />
|
||||
<Divider />
|
||||
<div className='mb-1 flex items-center justify-center space-x-6 p-2'>
|
||||
<div className="mb-1 flex items-center justify-center space-x-6 p-2">
|
||||
{member.isOwner && (
|
||||
<Link
|
||||
href={`/application/${path.guildId}/channels/create`}
|
||||
passHref
|
||||
data-cy='link-add-channel'
|
||||
data-cy="link-add-channel"
|
||||
>
|
||||
<IconButton className='h-10 w-10' title='Add a Channel'>
|
||||
<IconButton className="h-10 w-10" title="Add a Channel">
|
||||
<PlusIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
@ -41,9 +41,9 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
|
||||
<Link
|
||||
href={`/application/${path.guildId}/settings`}
|
||||
passHref
|
||||
data-cy='link-settings-guild'
|
||||
data-cy="link-settings-guild"
|
||||
>
|
||||
<IconButton className='h-7 w-7' title='Settings'>
|
||||
<IconButton className="h-7 w-7" title="Settings">
|
||||
<CogIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './GuildLeftSidebar'
|
||||
export * from "./GuildLeftSidebar"
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useState } from 'react'
|
||||
import { Type } from '@sinclair/typebox'
|
||||
import { PhotographIcon } from '@heroicons/react/solid'
|
||||
import { Form, useForm } from 'react-component-form'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import classNames from 'clsx'
|
||||
import type { HandleUseFormCallback } from 'react-component-form'
|
||||
import Image from "next/image"
|
||||
import { useRouter } from "next/router"
|
||||
import { useState } from "react"
|
||||
import { Type } from "@sinclair/typebox"
|
||||
import { PhotographIcon } from "@heroicons/react/solid"
|
||||
import { Form, useForm } from "react-component-form"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import classNames from "clsx"
|
||||
import type { HandleUseFormCallback } from "react-component-form"
|
||||
|
||||
import { guildSchema } from '../../../models/Guild'
|
||||
import { FormState } from '../../design/FormState'
|
||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||
import { Textarea } from '../../design/Textarea'
|
||||
import { Input } from '../../design/Input'
|
||||
import { Button } from '../../design/Button'
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import { ConfirmPopup } from '../ConfirmPopup'
|
||||
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||
import { guildSchema } from "../../../models/Guild"
|
||||
import { FormState } from "../../design/FormState"
|
||||
import { useGuildMember } from "../../../contexts/GuildMember"
|
||||
import { Textarea } from "../../design/Textarea"
|
||||
import { Input } from "../../design/Input"
|
||||
import { Button } from "../../design/Button"
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import { ConfirmPopup } from "../ConfirmPopup"
|
||||
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
||||
|
||||
const schema = {
|
||||
name: guildSchema.name,
|
||||
description: Type.Optional(guildSchema.description)
|
||||
description: Type.Optional(guildSchema.description),
|
||||
}
|
||||
|
||||
export const GuildSettings: React.FC = () => {
|
||||
@ -31,7 +31,7 @@ export const GuildSettings: React.FC = () => {
|
||||
|
||||
const [inputValues, setInputValues] = useState({
|
||||
name: guild.name,
|
||||
description: guild.description
|
||||
description: guild.description,
|
||||
})
|
||||
|
||||
const [confirmation, setConfirmation] = useState(false)
|
||||
@ -46,7 +46,7 @@ export const GuildSettings: React.FC = () => {
|
||||
message,
|
||||
errors,
|
||||
setFetchState,
|
||||
setMessage
|
||||
setMessage,
|
||||
} = useForm(schema)
|
||||
const { getFirstErrorTranslation } = useFormTranslation()
|
||||
|
||||
@ -55,13 +55,13 @@ export const GuildSettings: React.FC = () => {
|
||||
await authentication.api.put(`/guilds/${guild.id}`, formData)
|
||||
setInputValues(formData as unknown as any)
|
||||
return {
|
||||
type: 'success',
|
||||
message: 'application:saved-information'
|
||||
type: "success",
|
||||
message: "application:saved-information",
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,30 +72,30 @@ export const GuildSettings: React.FC = () => {
|
||||
setInputValues((oldInputValues) => {
|
||||
return {
|
||||
...oldInputValues,
|
||||
[event.target.name]: event.target.value
|
||||
[event.target.name]: event.target.value,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
const files = event?.target?.files
|
||||
if (files != null && files.length === 1 && files[0] != null) {
|
||||
const file = files[0]
|
||||
const formData = new FormData()
|
||||
formData.append('icon', file)
|
||||
formData.append("icon", file)
|
||||
try {
|
||||
await authentication.api.put(`/guilds/${guild.id}/icon`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
setFetchState('idle')
|
||||
setFetchState("idle")
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -104,18 +104,18 @@ export const GuildSettings: React.FC = () => {
|
||||
try {
|
||||
await authentication.api.delete(`/guilds/${guild.id}`)
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
|
||||
const handleLeave = async (): Promise<void> => {
|
||||
try {
|
||||
await authentication.api.delete(`/guilds/${guild.id}/members/leave`)
|
||||
await router.push('/application')
|
||||
await router.push("/application")
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,85 +123,85 @@ export const GuildSettings: React.FC = () => {
|
||||
<>
|
||||
<Form
|
||||
onSubmit={handleUseForm(onSubmit)}
|
||||
className='my-auto flex flex-col items-center justify-center py-12'
|
||||
className="my-auto flex flex-col items-center justify-center py-12"
|
||||
>
|
||||
{member.isOwner && (
|
||||
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
||||
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
||||
<div className='relative'>
|
||||
<div className='absolute z-50 h-full w-full'>
|
||||
<button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
|
||||
<div className="flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row">
|
||||
<div className=" flex w-full flex-wrap items-center justify-center px-6 sm:w-max">
|
||||
<div className="relative">
|
||||
<div className="absolute z-50 h-full w-full">
|
||||
<button className="relative flex h-full w-full items-center justify-center transition hover:scale-110">
|
||||
<input
|
||||
type='file'
|
||||
className='absolute h-full w-full cursor-pointer opacity-0'
|
||||
type="file"
|
||||
className="absolute h-full w-full cursor-pointer opacity-0"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<PhotographIcon color='white' className='h-8 w-8' />
|
||||
<PhotographIcon color="white" className="h-8 w-8" />
|
||||
</button>
|
||||
</div>
|
||||
<div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
|
||||
<div className="flex items-center justify-center rounded-full bg-black shadow-xl">
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full opacity-50'
|
||||
className="rounded-full opacity-50"
|
||||
src={
|
||||
guild.icon == null
|
||||
? '/images/data/guild-default.png'
|
||||
? "/images/data/guild-default.png"
|
||||
: guild.icon
|
||||
}
|
||||
alt='Profil Picture'
|
||||
draggable='false'
|
||||
alt="Profil Picture"
|
||||
draggable="false"
|
||||
height={125}
|
||||
width={125}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-12 flex flex-col'>
|
||||
<div className="mx-12 flex flex-col">
|
||||
<Input
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
placeholder={t('common:name')}
|
||||
className='!mt-0'
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
placeholder={t("common:name")}
|
||||
className="!mt-0"
|
||||
onChange={onChange}
|
||||
value={inputValues.name}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
data-cy='guild-name-input'
|
||||
data-cy="guild-name-input"
|
||||
/>
|
||||
<Textarea
|
||||
name='description'
|
||||
label={'Description'}
|
||||
placeholder={'Description'}
|
||||
id='textarea-description'
|
||||
name="description"
|
||||
label={"Description"}
|
||||
placeholder={"Description"}
|
||||
id="textarea-description"
|
||||
onChange={onChange}
|
||||
value={inputValues.description ?? ''}
|
||||
data-cy='guild-description-input'
|
||||
value={inputValues.description ?? ""}
|
||||
data-cy="guild-description-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
||||
<div className='space-x-6'>
|
||||
<div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
|
||||
<div className="space-x-6">
|
||||
{member.isOwner ? (
|
||||
<>
|
||||
<Button type='submit' data-cy='button-save-guild-settings'>
|
||||
{t('application:save')}
|
||||
<Button type="submit" data-cy="button-save-guild-settings">
|
||||
{t("application:save")}
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
color='red'
|
||||
type="button"
|
||||
color="red"
|
||||
onClick={handleConfirmation}
|
||||
data-cy='button-delete-guild-settings'
|
||||
data-cy="button-delete-guild-settings"
|
||||
>
|
||||
{t('application:delete')}
|
||||
{t("application:delete")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
color='red'
|
||||
color="red"
|
||||
onClick={handleLeave}
|
||||
data-cy='button-leave-guild-settings'
|
||||
data-cy="button-leave-guild-settings"
|
||||
>
|
||||
{t('application:leave')} {guild.name}
|
||||
{t("application:leave")} {guild.name}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@ -217,17 +217,17 @@ export const GuildSettings: React.FC = () => {
|
||||
</Form>
|
||||
<div
|
||||
className={classNames(
|
||||
'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
|
||||
{ 'pointer-events-auto !visible !opacity-100': confirmation }
|
||||
"pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all",
|
||||
{ "pointer-events-auto !visible !opacity-100": confirmation },
|
||||
)}
|
||||
>
|
||||
<ConfirmPopup
|
||||
className={classNames('relative top-8 transition-all', {
|
||||
'!top-0': confirmation
|
||||
className={classNames("relative top-8 transition-all", {
|
||||
"!top-0": confirmation,
|
||||
})}
|
||||
handleYes={handleDelete}
|
||||
handleNo={handleConfirmation}
|
||||
title={`${t('application:delete-the-guild')} ?`}
|
||||
title={`${t("application:delete-the-guild")} ?`}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './GuildSettings'
|
||||
export * from "./GuildSettings"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { memo } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { memo } from "react"
|
||||
import Image from "next/image"
|
||||
|
||||
import type { GuildWithDefaultChannelId } from '../../../models/Guild'
|
||||
import { IconLink } from '../../design/IconLink'
|
||||
import type { GuildWithDefaultChannelId } from "../../../models/Guild"
|
||||
import { IconLink } from "../../design/IconLink"
|
||||
|
||||
export interface GuildProps {
|
||||
guild: GuildWithDefaultChannelId
|
||||
@ -14,19 +14,19 @@ const GuildMemo: React.FC<GuildProps> = (props) => {
|
||||
|
||||
return (
|
||||
<IconLink
|
||||
className='mt-2'
|
||||
className="mt-2"
|
||||
href={`/application/${guild.id}/${guild.defaultChannelId}`}
|
||||
selected={selected}
|
||||
title={guild.name}
|
||||
>
|
||||
<div className='pl-[6px]'>
|
||||
<div className="pl-[6px]">
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full'
|
||||
className="rounded-full"
|
||||
src={
|
||||
guild.icon != null ? guild.icon : '/images/data/guild-default.png'
|
||||
guild.icon != null ? guild.icon : "/images/data/guild-default.png"
|
||||
}
|
||||
alt='logo'
|
||||
alt="logo"
|
||||
width={48}
|
||||
height={48}
|
||||
draggable={false}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
|
||||
import { Loader } from '../../design/Loader'
|
||||
import { useGuilds } from '../../../contexts/Guilds'
|
||||
import type { GuildsPath } from '..'
|
||||
import { Guild } from './Guild'
|
||||
import { Loader } from "../../design/Loader"
|
||||
import { useGuilds } from "../../../contexts/Guilds"
|
||||
import type { GuildsPath } from ".."
|
||||
import { Guild } from "./Guild"
|
||||
|
||||
export interface GuildsProps {
|
||||
path: GuildsPath | string
|
||||
@ -16,19 +16,19 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
id='guilds-list'
|
||||
className='border-r-1 scrollbar-firefox-support mt-[130px] h-full min-w-[92px] space-y-2 overflow-y-auto border-gray-500 pt-2 dark:border-white/20'
|
||||
id="guilds-list"
|
||||
className="border-r-1 scrollbar-firefox-support mt-[130px] h-full min-w-[92px] space-y-2 overflow-y-auto border-gray-500 pt-2 dark:border-white/20"
|
||||
>
|
||||
<InfiniteScroll
|
||||
className='guilds-list'
|
||||
className="guilds-list"
|
||||
dataLength={guilds.length}
|
||||
next={nextPage}
|
||||
hasMore={hasMore}
|
||||
scrollableTarget='guilds-list'
|
||||
scrollableTarget="guilds-list"
|
||||
loader={<Loader />}
|
||||
>
|
||||
{guilds.map((guild) => {
|
||||
const selected = typeof path !== 'string' && path.guildId === guild.id
|
||||
const selected = typeof path !== "string" && path.guildId === guild.id
|
||||
return <Guild key={guild.id} guild={guild} selected={selected} />
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Guilds'
|
||||
export * from "./Guilds"
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useState } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import classNames from 'clsx'
|
||||
import axios from 'axios'
|
||||
import Image from "next/image"
|
||||
import { useRouter } from "next/router"
|
||||
import { useState } from "react"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import classNames from "clsx"
|
||||
import axios from "axios"
|
||||
|
||||
import { Emoji } from '../../Emoji'
|
||||
import { ConfirmPopup } from '../ConfirmPopup'
|
||||
import { Emoji } from "../../Emoji"
|
||||
import { ConfirmPopup } from "../ConfirmPopup"
|
||||
import type {
|
||||
GuildPublic as GuildPublicType,
|
||||
GuildWithDefaultChannelId
|
||||
} from '../../../models/Guild'
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
GuildWithDefaultChannelId,
|
||||
} from "../../../models/Guild"
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
|
||||
export interface GuildPublicProps {
|
||||
guild: GuildPublicType
|
||||
@ -36,70 +36,70 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
||||
guild: GuildWithDefaultChannelId
|
||||
}>(`/guilds/${guild.id}/members/join`)
|
||||
await router.push(
|
||||
`/application/${guild.id}/${data.guild.defaultChannelId}`
|
||||
`/application/${guild.id}/${data.guild.defaultChannelId}`,
|
||||
)
|
||||
} catch (error) {
|
||||
if (
|
||||
axios.isAxiosError(error) &&
|
||||
error.response?.status === 400 &&
|
||||
typeof error?.response?.data.defaultChannelId === 'number'
|
||||
typeof error?.response?.data.defaultChannelId === "number"
|
||||
) {
|
||||
const defaultChannelId = error.response.data.defaultChannelId as number
|
||||
await router.push(`/application/${guild.id}/${defaultChannelId}`)
|
||||
} else {
|
||||
await router.push('/application')
|
||||
await router.push("/application")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
|
||||
<div className="relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700">
|
||||
<div
|
||||
className={classNames(
|
||||
'flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
|
||||
{ '-translate-x-full': isConfirmed }
|
||||
"flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out",
|
||||
{ "-translate-x-full": isConfirmed },
|
||||
)}
|
||||
onClick={handleIsConfirmed}
|
||||
>
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full'
|
||||
className="rounded-full"
|
||||
src={
|
||||
guild.icon != null ? guild.icon : '/images/data/guild-default.png'
|
||||
guild.icon != null ? guild.icon : "/images/data/guild-default.png"
|
||||
}
|
||||
alt='logo'
|
||||
alt="logo"
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<div className='m-2 mt-6 w-full px-4 text-center'>
|
||||
<div className="m-2 mt-6 w-full px-4 text-center">
|
||||
<h3
|
||||
data-cy='guild-name'
|
||||
className='center mb-2 w-full truncate text-xl font-bold'
|
||||
data-cy="guild-name"
|
||||
className="center mb-2 w-full truncate text-xl font-bold"
|
||||
>
|
||||
{guild.name}
|
||||
</h3>
|
||||
<p className='break-words'>
|
||||
<p className="break-words">
|
||||
{guild.description != null ? (
|
||||
guild.description
|
||||
) : (
|
||||
<span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
|
||||
<Emoji value=':eyes:' size={25} />
|
||||
<span className='ml-2'>{t('application:nothing-here')}</span>
|
||||
<span className="flex h-full items-center justify-center opacity-40 dark:opacity-20">
|
||||
<Emoji value=":eyes:" size={25} />
|
||||
<span className="ml-2">{t("application:nothing-here")}</span>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<p className='mt-auto flex flex-col text-green-800 dark:text-green-400'>
|
||||
{guild.membersCount} {t('application:members')}
|
||||
<p className="mt-auto flex flex-col text-green-800 dark:text-green-400">
|
||||
{guild.membersCount} {t("application:members")}
|
||||
</p>
|
||||
</div>
|
||||
<ConfirmPopup
|
||||
title={`${t('application:join-the-guild')} ?`}
|
||||
title={`${t("application:join-the-guild")} ?`}
|
||||
className={classNames(
|
||||
'w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
|
||||
"w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all",
|
||||
{
|
||||
'!left-0': isConfirmed
|
||||
}
|
||||
"!left-0": isConfirmed,
|
||||
},
|
||||
)}
|
||||
handleYes={handleYes}
|
||||
handleNo={handleIsConfirmed}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { useEffect, useState } from 'react'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import { useEffect, useState } from "react"
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import type { GuildPublic as GuildPublicType } from '../../../models/Guild'
|
||||
import { Loader } from '../../design/Loader'
|
||||
import { GuildPublic } from './GuildPublic'
|
||||
import { usePagination } from '../../../hooks/usePagination'
|
||||
import type { SocketData } from '../../../tools/handleSocketData'
|
||||
import { handleSocketData } from '../../../tools/handleSocketData'
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import type { GuildPublic as GuildPublicType } from "../../../models/Guild"
|
||||
import { Loader } from "../../design/Loader"
|
||||
import { GuildPublic } from "./GuildPublic"
|
||||
import { usePagination } from "../../../hooks/usePagination"
|
||||
import type { SocketData } from "../../../tools/handleSocketData"
|
||||
import { handleSocketData } from "../../../tools/handleSocketData"
|
||||
|
||||
export const JoinGuildsPublic: React.FC = () => {
|
||||
const [search, setSearch] = useState('')
|
||||
const [search, setSearch] = useState("")
|
||||
|
||||
const { authentication } = useAuthentication()
|
||||
const { t } = useTranslation()
|
||||
@ -19,19 +19,19 @@ export const JoinGuildsPublic: React.FC = () => {
|
||||
const { items, hasMore, nextPage, resetPagination, setItems } =
|
||||
usePagination<GuildPublicType>({
|
||||
api: authentication.api,
|
||||
url: '/guilds/public'
|
||||
url: "/guilds/public",
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
authentication?.socket?.on(
|
||||
'guilds',
|
||||
"guilds",
|
||||
(data: SocketData<GuildPublicType>) => {
|
||||
handleSocketData({ data, setItems })
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return () => {
|
||||
authentication?.socket?.off('guilds')
|
||||
authentication?.socket?.off("guilds")
|
||||
}
|
||||
}, [authentication.socket, setItems])
|
||||
|
||||
@ -45,23 +45,23 @@ export const JoinGuildsPublic: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex h-full w-full flex-col transition-all'>
|
||||
<div className="flex h-full w-full flex-col transition-all">
|
||||
<input
|
||||
data-cy='search-guild-input'
|
||||
data-cy="search-guild-input"
|
||||
onChange={handleChange}
|
||||
className='mx-auto my-6 mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
|
||||
type='search'
|
||||
name='search-guild'
|
||||
placeholder={`🔎 ${t('application:search')}...`}
|
||||
className="mx-auto my-6 mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12"
|
||||
type="search"
|
||||
name="search-guild"
|
||||
placeholder={`🔎 ${t("application:search")}...`}
|
||||
/>
|
||||
<div className='w-full p-12'>
|
||||
<div className="w-full p-12">
|
||||
<InfiniteScroll
|
||||
className='guilds-public-list relative mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
|
||||
className="guilds-public-list relative mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible"
|
||||
dataLength={items.length}
|
||||
next={nextPage}
|
||||
scrollableTarget='application-page-content'
|
||||
scrollableTarget="application-page-content"
|
||||
hasMore={hasMore}
|
||||
loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
|
||||
loader={<Loader className="absolute left-1/2 -translate-x-1/2" />}
|
||||
>
|
||||
{items.map((guild) => {
|
||||
return <GuildPublic guild={guild} key={guild.id} />
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './JoinGuildsPublic'
|
||||
export * from "./JoinGuildsPublic"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { memo } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { memo } from "react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
import type { MemberWithPublicUser } from '../../../models/Member'
|
||||
import { Emoji } from '../../Emoji'
|
||||
import type { MemberWithPublicUser } from "../../../models/Member"
|
||||
import { Emoji } from "../../Emoji"
|
||||
|
||||
export interface MemberProps {
|
||||
member: MemberWithPublicUser
|
||||
@ -14,27 +14,27 @@ const MemberMemo: React.FC<MemberProps> = (props) => {
|
||||
|
||||
return (
|
||||
<Link href={`/application/users/${member.user.id}`}>
|
||||
<div className='flex cursor-pointer items-center overflow-hidden px-6 py-2 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
|
||||
<div className='flex min-w-[50px] rounded-full'>
|
||||
<div className="flex cursor-pointer items-center overflow-hidden px-6 py-2 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900">
|
||||
<div className="flex min-w-[50px] rounded-full">
|
||||
<Image
|
||||
src={
|
||||
member.user.logo == null
|
||||
? '/images/data/user-default.png'
|
||||
? "/images/data/user-default.png"
|
||||
: member.user.logo
|
||||
}
|
||||
alt={"Users's profil picture"}
|
||||
height={50}
|
||||
width={50}
|
||||
draggable={false}
|
||||
className='rounded-full'
|
||||
className="rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div className='ml-5'>
|
||||
<p data-cy='member-user-name' className='flex truncate font-bold'>
|
||||
<div className="ml-5">
|
||||
<p data-cy="member-user-name" className="flex truncate font-bold">
|
||||
{member.user.name}
|
||||
{member.isOwner && (
|
||||
<span className='ml-4'>
|
||||
<Emoji value=':crown:' size={18} />
|
||||
<span className="ml-4">
|
||||
<Emoji value=":crown:" size={18} />
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
|
||||
import { Divider } from '../../design/Divider'
|
||||
import { Loader } from '../../design/Loader'
|
||||
import { useMembers } from '../../../contexts/Members'
|
||||
import { Member } from './Member'
|
||||
import { capitalize } from '../../../tools/utils/capitalize'
|
||||
import { Divider } from "../../design/Divider"
|
||||
import { Loader } from "../../design/Loader"
|
||||
import { useMembers } from "../../../contexts/Members"
|
||||
import { Member } from "./Member"
|
||||
import { capitalize } from "../../../tools/utils/capitalize"
|
||||
|
||||
export const Members: React.FC = () => {
|
||||
const { members, hasMore, nextPage } = useMembers()
|
||||
@ -14,14 +14,14 @@ export const Members: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='mb-2'>
|
||||
<h1 data-cy='members-title' className='my-2 pt-2 text-center text-xl'>
|
||||
{capitalize(t('application:members'))}
|
||||
<div className="mb-2">
|
||||
<h1 data-cy="members-title" className="my-2 pt-2 text-center text-xl">
|
||||
{capitalize(t("application:members"))}
|
||||
</h1>
|
||||
<Divider />
|
||||
</div>
|
||||
<InfiniteScroll
|
||||
className='members-list'
|
||||
className="members-list"
|
||||
dataLength={members.length}
|
||||
next={nextPage}
|
||||
hasMore={hasMore}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Members'
|
||||
export * from "./Members"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import TextareaAutosize from 'react-textarea-autosize'
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import TextareaAutosize from "react-textarea-autosize"
|
||||
|
||||
import type { MessageProps } from '../Message'
|
||||
import type { MessageProps } from "../Message"
|
||||
|
||||
export interface EditMessageProps extends MessageProps {
|
||||
handleEdit: () => Promise<void>
|
||||
@ -15,7 +15,7 @@ export const EditMessage: React.FC<
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
event.preventDefault()
|
||||
await handleEdit()
|
||||
@ -23,23 +23,23 @@ export const EditMessage: React.FC<
|
||||
|
||||
return (
|
||||
<form
|
||||
className='flex h-full w-full items-center'
|
||||
className="flex h-full w-full items-center"
|
||||
onSubmit={handleEditSubmit}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<TextareaAutosize
|
||||
className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
|
||||
placeholder={t('application:write-a-message')}
|
||||
wrap='soft'
|
||||
className="scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none"
|
||||
placeholder={t("application:write-a-message")}
|
||||
wrap="soft"
|
||||
maxRows={6}
|
||||
name='message'
|
||||
name="message"
|
||||
defaultValue={message.value}
|
||||
ref={textareaRef}
|
||||
autoFocus
|
||||
onFocus={(event) => {
|
||||
event.currentTarget.setSelectionRange(
|
||||
event.currentTarget.value.length,
|
||||
event.currentTarget.value.length
|
||||
event.currentTarget.value.length,
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './EditMessage'
|
||||
export * from "./EditMessage"
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import date from 'date-and-time'
|
||||
import { useState, useRef } from "react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import date from "date-and-time"
|
||||
|
||||
import type { MessageWithMember } from '../../../../models/Message'
|
||||
import { MessageText } from './MessageText'
|
||||
import { Loader } from '../../../design/Loader'
|
||||
import { MessageFile } from './MessageFile'
|
||||
import { useAuthentication } from '../../../../tools/authentication'
|
||||
import { MessageOptions } from './MessageOptions'
|
||||
import { EditMessage } from './EditMessage'
|
||||
import type { MessageWithMember } from "../../../../models/Message"
|
||||
import { MessageText } from "./MessageText"
|
||||
import { Loader } from "../../../design/Loader"
|
||||
import { MessageFile } from "./MessageFile"
|
||||
import { useAuthentication } from "../../../../tools/authentication"
|
||||
import { MessageOptions } from "./MessageOptions"
|
||||
import { EditMessage } from "./EditMessage"
|
||||
|
||||
export interface MessageProps {
|
||||
message: MessageWithMember
|
||||
@ -23,12 +23,12 @@ export const Message: React.FC<MessageProps> = (props) => {
|
||||
const { authentication, user } = useAuthentication()
|
||||
|
||||
const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault()
|
||||
event.currentTarget.dispatchEvent(
|
||||
new Event('submit', { cancelable: true, bubbles: true })
|
||||
new Event("submit", { cancelable: true, bubbles: true }),
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -36,13 +36,13 @@ export const Message: React.FC<MessageProps> = (props) => {
|
||||
const handleEdit = async (): Promise<void> => {
|
||||
const newMessage = textareaReference.current?.value ?? message.value
|
||||
if (
|
||||
typeof newMessage === 'string' &&
|
||||
typeof newMessage === "string" &&
|
||||
newMessage.length > 0 &&
|
||||
newMessage !== message.value
|
||||
) {
|
||||
try {
|
||||
await authentication.api.put(`/messages/${message.id}`, {
|
||||
value: newMessage
|
||||
value: newMessage,
|
||||
})
|
||||
} catch {}
|
||||
}
|
||||
@ -58,17 +58,17 @@ export const Message: React.FC<MessageProps> = (props) => {
|
||||
return (
|
||||
<div
|
||||
data-cy={`message-${message.id}`}
|
||||
className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
|
||||
className="group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900"
|
||||
>
|
||||
<Link href={`/application/users/${message.member.user.id}`}>
|
||||
<div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
|
||||
<div className='h-10 w-10 drop-shadow-md'>
|
||||
<div className="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center">
|
||||
<div className="h-10 w-10 drop-shadow-md">
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full'
|
||||
className="rounded-full"
|
||||
src={
|
||||
message.member.user.logo == null
|
||||
? '/images/data/user-default.png'
|
||||
? "/images/data/user-default.png"
|
||||
: message.member.user.logo
|
||||
}
|
||||
alt={"Users's profil picture"}
|
||||
@ -79,33 +79,33 @@ export const Message: React.FC<MessageProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className='relative w-full whitespace-pre-wrap break-words break-all'>
|
||||
<div className='flex w-max items-center'>
|
||||
<div className="relative w-full whitespace-pre-wrap break-words break-all">
|
||||
<div className="flex w-max items-center">
|
||||
<Link href={`/application/users/${message.member.user.id}`}>
|
||||
<span
|
||||
data-cy='message-member-user-name'
|
||||
className='font-bold text-gray-900 dark:text-gray-200'
|
||||
data-cy="message-member-user-name"
|
||||
className="font-bold text-gray-900 dark:text-gray-200"
|
||||
>
|
||||
{message.member.user.name}
|
||||
</span>
|
||||
</Link>
|
||||
<span
|
||||
data-cy='message-date'
|
||||
className='ml-4 select-none text-xs text-gray-500 dark:text-gray-200'
|
||||
data-cy="message-date"
|
||||
className="ml-4 select-none text-xs text-gray-500 dark:text-gray-200"
|
||||
>
|
||||
{date.format(new Date(message.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
|
||||
{date.format(new Date(message.createdAt), "DD/MM/YYYY - HH:mm:ss")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{message.member.userId === user.id && (
|
||||
<MessageOptions
|
||||
message={message}
|
||||
editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
|
||||
editMode={isEditing ? ":white_check_mark:" : ":pencil2:"}
|
||||
handleEdit={isEditing ? handleEdit : handleEditMode}
|
||||
/>
|
||||
)}
|
||||
|
||||
{message.type === 'text' ? (
|
||||
{message.type === "text" ? (
|
||||
<>
|
||||
{isEditing ? (
|
||||
<EditMessage
|
||||
@ -118,7 +118,7 @@ export const Message: React.FC<MessageProps> = (props) => {
|
||||
<MessageText message={message} />
|
||||
)}
|
||||
</>
|
||||
) : message.type === 'file' ? (
|
||||
) : message.type === "file" ? (
|
||||
<MessageFile message={message} />
|
||||
) : (
|
||||
<Loader />
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
export const FileIcon: React.FC = () => {
|
||||
return (
|
||||
<svg
|
||||
className='fill-current text-black dark:text-white'
|
||||
width='21'
|
||||
height='26'
|
||||
viewBox='0 0 21 26'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className="fill-current text-black dark:text-white"
|
||||
width="21"
|
||||
height="26"
|
||||
viewBox="0 0 21 26"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d='M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z' />
|
||||
<path d="M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import prettyBytes from 'pretty-bytes'
|
||||
import { DownloadIcon } from '@heroicons/react/solid'
|
||||
import { useState, useEffect } from "react"
|
||||
import axios from "axios"
|
||||
import prettyBytes from "pretty-bytes"
|
||||
import { DownloadIcon } from "@heroicons/react/solid"
|
||||
|
||||
import type { MessageWithMember } from '../../../../../models/Message'
|
||||
import { Loader } from '../../../../design/Loader'
|
||||
import { FileIcon } from './FileIcon'
|
||||
import { api } from '../../../../../tools/api'
|
||||
import type { MessageWithMember } from "../../../../../models/Message"
|
||||
import { Loader } from "../../../../design/Loader"
|
||||
import { FileIcon } from "./FileIcon"
|
||||
import { api } from "../../../../../tools/api"
|
||||
|
||||
const supportedImageMimetype = [
|
||||
'image/png',
|
||||
'image/jpg',
|
||||
'image/jpeg',
|
||||
'image/gif'
|
||||
"image/png",
|
||||
"image/jpg",
|
||||
"image/jpeg",
|
||||
"image/gif",
|
||||
]
|
||||
|
||||
export interface FileData {
|
||||
@ -34,8 +34,8 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
|
||||
|
||||
const fetchData = async (): Promise<void> => {
|
||||
const { data } = await api.get(message.value, {
|
||||
responseType: 'blob',
|
||||
cancelToken: ourRequest.token
|
||||
responseType: "blob",
|
||||
cancelToken: ourRequest.token,
|
||||
})
|
||||
const fileURL = URL.createObjectURL(data)
|
||||
setFile({ blob: data, url: fileURL })
|
||||
@ -52,27 +52,27 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
|
||||
}
|
||||
if (supportedImageMimetype.includes(message.mimetype)) {
|
||||
return (
|
||||
<a href={file.url} target='_blank' rel='noreferrer'>
|
||||
<a href={file.url} target="_blank" rel="noreferrer">
|
||||
<img
|
||||
data-cy={`message-file-image-${message.id}`}
|
||||
className='max-h-80 sm:max-w-xs'
|
||||
className="max-h-80 sm:max-w-xs"
|
||||
src={file.url}
|
||||
alt={message.value}
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
if (message.mimetype.startsWith('audio/')) {
|
||||
if (message.mimetype.startsWith("audio/")) {
|
||||
return (
|
||||
<audio controls data-cy={`message-file-audio-${message.id}`}>
|
||||
<source src={file.url} type={message.mimetype} />
|
||||
</audio>
|
||||
)
|
||||
}
|
||||
if (message.mimetype.startsWith('video/')) {
|
||||
if (message.mimetype.startsWith("video/")) {
|
||||
return (
|
||||
<video
|
||||
className='max-h-80 max-w-xs'
|
||||
className="max-h-80 max-w-xs"
|
||||
controls
|
||||
data-cy={`message-file-video-${message.id}`}
|
||||
>
|
||||
@ -82,17 +82,17 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
|
||||
}
|
||||
return (
|
||||
<a href={file.url} download data-cy={`message-file-download-${message.id}`}>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex items-center'>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center">
|
||||
<div>
|
||||
<FileIcon />
|
||||
</div>
|
||||
<div className='ml-4'>
|
||||
<div className="ml-4">
|
||||
<p>{file.blob.type}</p>
|
||||
<p className='mt-1'>{prettyBytes(file.blob.size)}</p>
|
||||
<p className="mt-1">{prettyBytes(file.blob.size)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<DownloadIcon className='ml-4 h-8 w-8' />
|
||||
<DownloadIcon className="ml-4 h-8 w-8" />
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './MessageFile'
|
||||
export * from "./MessageFile"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
|
||||
import { useAuthentication } from '../../../../../tools/authentication'
|
||||
import { Emoji } from '../../../../Emoji'
|
||||
import type { MessageProps } from '../Message'
|
||||
import { useAuthentication } from "../../../../../tools/authentication"
|
||||
import { Emoji } from "../../../../Emoji"
|
||||
import type { MessageProps } from "../Message"
|
||||
|
||||
interface MessageOptionsProps extends MessageProps {
|
||||
handleEdit: () => void
|
||||
editMode: ':white_check_mark:' | ':pencil2:'
|
||||
editMode: ":white_check_mark:" | ":pencil2:"
|
||||
}
|
||||
|
||||
export const MessageOptions: React.FC<
|
||||
@ -22,22 +22,22 @@ export const MessageOptions: React.FC<
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100'>
|
||||
{message.type === 'text' && (
|
||||
<div className="absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100">
|
||||
{message.type === "text" && (
|
||||
<div
|
||||
className='message-options rounded-l-lg border-l-slate-600'
|
||||
title={t('application:edit')}
|
||||
className="message-options rounded-l-lg border-l-slate-600"
|
||||
title={t("application:edit")}
|
||||
onClick={handleEdit}
|
||||
>
|
||||
<Emoji value={editMode} size={18} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className='message-options rounded-r-lg border-r-slate-600'
|
||||
title={t('application:delete')}
|
||||
className="message-options rounded-r-lg border-r-slate-600"
|
||||
title={t("application:delete")}
|
||||
onClick={handleDeleteMessage}
|
||||
>
|
||||
<Emoji value=':wastebasket:' size={18} />
|
||||
<Emoji value=":wastebasket:" size={18} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './MessageOptions'
|
||||
export * from "./MessageOptions"
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import { useMemo } from 'react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import gfm from 'remark-gfm'
|
||||
import remarkBreaks from 'remark-breaks'
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
|
||||
import { useMemo } from "react"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import gfm from "remark-gfm"
|
||||
import remarkBreaks from "remark-breaks"
|
||||
import remarkMath from "remark-math"
|
||||
import rehypeKatex from "rehype-katex"
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||
import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism"
|
||||
|
||||
import 'katex/dist/katex.min.css'
|
||||
import "katex/dist/katex.min.css"
|
||||
|
||||
import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
|
||||
import type { MessageWithMember } from '../../../../../models/Message'
|
||||
import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from "../../../../Emoji"
|
||||
import type { MessageWithMember } from "../../../../../models/Message"
|
||||
|
||||
export interface MessageContentProps {
|
||||
message: MessageWithMember
|
||||
@ -35,16 +35,16 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
|
||||
|
||||
return (
|
||||
<ReactMarkdown
|
||||
disallowedElements={['table']}
|
||||
disallowedElements={["table"]}
|
||||
unwrapDisallowed
|
||||
remarkPlugins={[[gfm], [remarkBreaks], [remarkMath]]}
|
||||
rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
|
||||
linkTarget='_blank'
|
||||
linkTarget="_blank"
|
||||
components={{
|
||||
a: (props) => {
|
||||
return (
|
||||
<a
|
||||
className='text-green-800 hover:underline dark:text-green-400'
|
||||
className="text-green-800 hover:underline dark:text-green-400"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@ -55,22 +55,22 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
|
||||
},
|
||||
code: (properties) => {
|
||||
const { inline, className, children, ...props } = properties
|
||||
const match = /language-(\w+)/.exec(className ?? '')
|
||||
const match = /language-(\w+)/.exec(className ?? "")
|
||||
return !(inline as boolean) && match != null ? (
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus as any}
|
||||
language={match[1]}
|
||||
PreTag='div'
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
{String(children).replace(/\n$/, "")}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
}
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message.value}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './MessageText'
|
||||
export * from "./MessageText"
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Message'
|
||||
export * from "./Message"
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
|
||||
import { Loader } from '../../design/Loader'
|
||||
import { Message } from './Message'
|
||||
import { useMessages } from '../../../contexts/Messages'
|
||||
import { Emoji } from '../../Emoji'
|
||||
import { Loader } from "../../design/Loader"
|
||||
import { Message } from "./Message"
|
||||
import { useMessages } from "../../../contexts/Messages"
|
||||
import { Emoji } from "../../Emoji"
|
||||
|
||||
export const Messages: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -13,25 +13,25 @@ export const Messages: React.FC = () => {
|
||||
if (messages.length === 0) {
|
||||
return (
|
||||
<div
|
||||
id='messages'
|
||||
className='scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all'
|
||||
id="messages"
|
||||
className="scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all"
|
||||
>
|
||||
<p>
|
||||
{t('application:nothing-here')} <Emoji value=':ghost:' size={20} />
|
||||
{t("application:nothing-here")} <Emoji value=":ghost:" size={20} />
|
||||
</p>
|
||||
<p>{t('application:start-chatting-kill-ghost')}</p>
|
||||
<p>{t("application:start-chatting-kill-ghost")}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id='messages'
|
||||
className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
|
||||
id="messages"
|
||||
className="scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all"
|
||||
>
|
||||
<InfiniteScroll
|
||||
scrollableTarget='messages'
|
||||
className='messages-list !overflow-x-hidden'
|
||||
scrollableTarget="messages"
|
||||
className="messages-list !overflow-x-hidden"
|
||||
dataLength={messages.length}
|
||||
next={nextPage}
|
||||
inverse
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Messages'
|
||||
export * from "./Messages"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
|
||||
import classNames from 'clsx'
|
||||
import Image from 'next/image'
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import { PlusSmIcon, ArrowDownIcon } from "@heroicons/react/solid"
|
||||
import classNames from "clsx"
|
||||
import Image from "next/image"
|
||||
|
||||
import { PopupGuildCard } from './PopupGuildCard'
|
||||
import { PopupGuildCard } from "./PopupGuildCard"
|
||||
|
||||
export interface PopupGuildProps {
|
||||
className?: string
|
||||
@ -18,43 +18,43 @@ export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
|
||||
<div
|
||||
className={classNames(
|
||||
className,
|
||||
'h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8'
|
||||
"h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8",
|
||||
)}
|
||||
>
|
||||
<PopupGuildCard
|
||||
image={
|
||||
<Image
|
||||
quality={100}
|
||||
src='/images/svg/design/create-guild.svg'
|
||||
alt={t('application:create-a-guild')}
|
||||
draggable='false'
|
||||
src="/images/svg/design/create-guild.svg"
|
||||
alt={t("application:create-a-guild")}
|
||||
draggable="false"
|
||||
width={230}
|
||||
height={230}
|
||||
/>
|
||||
}
|
||||
description={t('application:create-a-guild-description')}
|
||||
description={t("application:create-a-guild-description")}
|
||||
link={{
|
||||
icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
|
||||
text: t('application:create-a-guild'),
|
||||
href: '/application/guilds/create'
|
||||
icon: <PlusSmIcon className="mr-2 h-8 w-8" />,
|
||||
text: t("application:create-a-guild"),
|
||||
href: "/application/guilds/create",
|
||||
}}
|
||||
/>
|
||||
<PopupGuildCard
|
||||
image={
|
||||
<Image
|
||||
quality={100}
|
||||
src='/images/svg/design/join-guild.svg'
|
||||
alt={t('application:join-a-guild')}
|
||||
draggable='false'
|
||||
src="/images/svg/design/join-guild.svg"
|
||||
alt={t("application:join-a-guild")}
|
||||
draggable="false"
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
}
|
||||
description={t('application:join-a-guild-description')}
|
||||
description={t("application:join-a-guild-description")}
|
||||
link={{
|
||||
icon: <ArrowDownIcon className='mr-2 h-6 w-6' />,
|
||||
text: t('application:join-a-guild'),
|
||||
href: '/application/guilds/join'
|
||||
icon: <ArrowDownIcon className="mr-2 h-6 w-6" />,
|
||||
text: t("application:join-a-guild"),
|
||||
href: "/application/guilds/join",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import React from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
export interface PopupGuildCardProps {
|
||||
image: JSX.Element
|
||||
@ -15,17 +15,17 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
|
||||
const { image, description, link } = props
|
||||
|
||||
return (
|
||||
<div className='m-8 h-96 w-80 rounded-2xl bg-gray-800'>
|
||||
<div className='flex h-1/2 w-full items-center justify-center'>
|
||||
<div className="m-8 h-96 w-80 rounded-2xl bg-gray-800">
|
||||
<div className="flex h-1/2 w-full items-center justify-center">
|
||||
{image}
|
||||
</div>
|
||||
<div className='mt-2 flex h-1/2 w-full flex-col justify-between rounded-b-2xl bg-gray-700 shadow-sm'>
|
||||
<p className='mt-6 px-8 text-center text-sm text-gray-200'>
|
||||
<div className="mt-2 flex h-1/2 w-full flex-col justify-between rounded-b-2xl bg-gray-700 shadow-sm">
|
||||
<p className="mt-6 px-8 text-center text-sm text-gray-200">
|
||||
{description}
|
||||
</p>
|
||||
<Link
|
||||
href={link.href}
|
||||
className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'
|
||||
className="mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600"
|
||||
>
|
||||
{link.icon}
|
||||
{link.text}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './PopupGuild'
|
||||
export * from "./PopupGuild"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import TextareaAutosize from 'react-textarea-autosize'
|
||||
import classNames from 'clsx'
|
||||
import { useState, useRef } from "react"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import TextareaAutosize from "react-textarea-autosize"
|
||||
import classNames from "clsx"
|
||||
|
||||
import type { GuildsChannelsPath } from '..'
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import type { EmojiPickerOnClick } from '../../Emoji'
|
||||
import { EmojiPicker } from '../../Emoji'
|
||||
import type { GuildsChannelsPath } from ".."
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import type { EmojiPickerOnClick } from "../../Emoji"
|
||||
import { EmojiPicker } from "../../Emoji"
|
||||
|
||||
export interface SendMessageProps {
|
||||
path: GuildsChannelsPath
|
||||
@ -18,54 +18,54 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
||||
const { authentication } = useAuthentication()
|
||||
|
||||
const [isVisibleEmojiPicker, setIsVisibleEmojiPicker] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const [message, setMessage] = useState("")
|
||||
const textareaReference = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault()
|
||||
event.currentTarget.dispatchEvent(
|
||||
new Event('submit', { cancelable: true, bubbles: true })
|
||||
new Event("submit", { cancelable: true, bubbles: true }),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
event.preventDefault()
|
||||
if (typeof message === 'string' && message.length > 0) {
|
||||
if (typeof message === "string" && message.length > 0) {
|
||||
await authentication.api.post(`/channels/${path.channelId}/messages`, {
|
||||
value: message
|
||||
value: message,
|
||||
})
|
||||
setMessage('')
|
||||
setMessage("")
|
||||
}
|
||||
}
|
||||
|
||||
const handleTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
setMessage(event.target.value)
|
||||
}
|
||||
|
||||
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
const files = event?.target?.files
|
||||
if (files != null && files.length === 1 && files[0] != null) {
|
||||
const file = files[0]
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append("file", file)
|
||||
await authentication.api.post(
|
||||
`/channels/${path.channelId}/messages/uploads`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -77,7 +77,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
||||
}
|
||||
|
||||
const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
|
||||
const emojiColons = emoji.colons ?? ''
|
||||
const emojiColons = emoji.colons ?? ""
|
||||
setMessage((oldMessage) => {
|
||||
return oldMessage + emojiColons
|
||||
})
|
||||
@ -86,51 +86,51 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='relative p-6 pb-4'>
|
||||
<div className="relative p-6 pb-4">
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute bottom-24 right-20 z-50 w-fit transition-all duration-100',
|
||||
"absolute bottom-24 right-20 z-50 w-fit transition-all duration-100",
|
||||
{
|
||||
'invisible translate-y-5 opacity-0': !isVisibleEmojiPicker
|
||||
}
|
||||
"invisible translate-y-5 opacity-0": !isVisibleEmojiPicker,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<EmojiPicker onClick={handleEmojiPicker} />
|
||||
</div>
|
||||
<div className='flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200'>
|
||||
<div className="flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200">
|
||||
<form
|
||||
className='flex h-full w-full items-center'
|
||||
className="flex h-full w-full items-center"
|
||||
onSubmit={handleSubmit}
|
||||
onKeyDown={handleTextareaKeyDown}
|
||||
>
|
||||
<TextareaAutosize
|
||||
className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 tracking-wide outline-none'
|
||||
placeholder={t('application:write-a-message')}
|
||||
wrap='soft'
|
||||
className="scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 tracking-wide outline-none"
|
||||
placeholder={t("application:write-a-message")}
|
||||
wrap="soft"
|
||||
maxRows={6}
|
||||
name='message'
|
||||
name="message"
|
||||
onChange={handleTextareaChange}
|
||||
value={message}
|
||||
ref={textareaReference}
|
||||
/>
|
||||
</form>
|
||||
<div className='flex h-full items-center justify-around pr-6'>
|
||||
<div className="flex h-full items-center justify-around pr-6">
|
||||
<button
|
||||
className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
|
||||
className="flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1"
|
||||
onClick={handleVisibleEmojiPicker}
|
||||
>
|
||||
🙂
|
||||
</button>
|
||||
<button className='relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400'>
|
||||
<button className="relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400">
|
||||
<input
|
||||
type='file'
|
||||
className='absolute h-full w-full cursor-pointer opacity-0'
|
||||
type="file"
|
||||
className="absolute h-full w-full cursor-pointer opacity-0"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<svg width='25' height='25' viewBox='0 0 22 22'>
|
||||
<svg width="25" height="25" viewBox="0 0 22 22">
|
||||
<path
|
||||
d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
|
||||
fill='currentColor'
|
||||
d="M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './SendMessage'
|
||||
export * from "./SendMessage"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import classNames from 'clsx'
|
||||
import classNames from "clsx"
|
||||
|
||||
import type { ApplicationProps } from '..'
|
||||
import type { ApplicationProps } from ".."
|
||||
|
||||
export type DirectionSidebar = 'left' | 'right'
|
||||
export type DirectionSidebar = "left" | "right"
|
||||
|
||||
export interface SidebarProps {
|
||||
direction: DirectionSidebar
|
||||
@ -12,24 +12,24 @@ export interface SidebarProps {
|
||||
}
|
||||
|
||||
export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
|
||||
props
|
||||
props,
|
||||
) => {
|
||||
const { direction, visible, children, path, isMobile } = props
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={classNames(
|
||||
'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
|
||||
"h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800",
|
||||
{
|
||||
'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
|
||||
direction === 'right',
|
||||
'w-72': direction === 'right' && visible,
|
||||
'invisible w-0 opacity-0': !visible,
|
||||
'w-80': direction === 'left' && visible,
|
||||
'max-w-max': typeof path !== 'string' && direction === 'left',
|
||||
'right-0 top-0': direction === 'right' && isMobile,
|
||||
absolute: isMobile
|
||||
}
|
||||
"scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto":
|
||||
direction === "right",
|
||||
"w-72": direction === "right" && visible,
|
||||
"invisible w-0 opacity-0": !visible,
|
||||
"w-80": direction === "left" && visible,
|
||||
"max-w-max": typeof path !== "string" && direction === "left",
|
||||
"right-0 top-0": direction === "right" && isMobile,
|
||||
absolute: isMobile,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Sidebar'
|
||||
export * from "./Sidebar"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import Image from 'next/image'
|
||||
import date from 'date-and-time'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import Image from "next/image"
|
||||
import date from "date-and-time"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
|
||||
import type { UserPublic } from '../../../models/User'
|
||||
import type { Guild } from '../../../models/Guild'
|
||||
import type { UserPublic } from "../../../models/User"
|
||||
import type { Guild } from "../../../models/Guild"
|
||||
|
||||
export interface UserProfileProps {
|
||||
className?: string
|
||||
@ -16,73 +16,73 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='relative flex h-full flex-col items-center justify-center'>
|
||||
<div className='transition'>
|
||||
<div className='max-w-[1000px] px-12'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex w-max flex-col items-center gap-7 md:flex-row'>
|
||||
<div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
|
||||
<div className="relative flex h-full flex-col items-center justify-center">
|
||||
<div className="transition">
|
||||
<div className="max-w-[1000px] px-12">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex w-max flex-col items-center gap-7 md:flex-row">
|
||||
<div className="relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all">
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full'
|
||||
className="rounded-full"
|
||||
src={
|
||||
user.logo != null
|
||||
? user.logo
|
||||
: '/images/data/user-default.png'
|
||||
: "/images/data/user-default.png"
|
||||
}
|
||||
alt='Profil Picture'
|
||||
draggable='false'
|
||||
alt="Profil Picture"
|
||||
draggable="false"
|
||||
height={125}
|
||||
width={125}
|
||||
/>
|
||||
</div>
|
||||
<div className='ml-10 flex flex-col'>
|
||||
<div className='mb-2 flex items-center'>
|
||||
<div className="ml-10 flex flex-col">
|
||||
<div className="mb-2 flex items-center">
|
||||
<p
|
||||
className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
|
||||
data-cy='user-name'
|
||||
className="space text-dark text-3xl font-bold tracking-wide dark:text-white"
|
||||
data-cy="user-name"
|
||||
>
|
||||
{user.name}
|
||||
</p>
|
||||
<p
|
||||
className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
|
||||
data-cy='user-createdAt'
|
||||
className="ml-8 select-none text-sm tracking-widest text-white opacity-40"
|
||||
data-cy="user-createdAt"
|
||||
>
|
||||
{date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
|
||||
{date.format(new Date(user.createdAt), "DD/MM/YYYY")}
|
||||
</p>
|
||||
</div>
|
||||
<div className='my-2 text-left'>
|
||||
<div className="my-2 text-left">
|
||||
{user.email != null && (
|
||||
<p className='font-bold'>
|
||||
Email:{' '}
|
||||
<p className="font-bold">
|
||||
Email:{" "}
|
||||
<a
|
||||
href={`mailto:${user.email}`}
|
||||
target='_blank'
|
||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
||||
rel='noreferrer'
|
||||
data-cy='user-email'
|
||||
target="_blank"
|
||||
className="relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white"
|
||||
rel="noreferrer"
|
||||
data-cy="user-email"
|
||||
>
|
||||
{user.email}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{user.website != null && (
|
||||
<p className='font-bold'>
|
||||
{t('application:website')}:{' '}
|
||||
<p className="font-bold">
|
||||
{t("application:website")}:{" "}
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={user.website}
|
||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
||||
className="relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white"
|
||||
>
|
||||
{user.website}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{user.status != null && (
|
||||
<p className='flex font-bold'>
|
||||
{t('application:status')}:{' '}
|
||||
<span className='ml-2 font-normal tracking-wide'>
|
||||
<p className="flex font-bold">
|
||||
{t("application:status")}:{" "}
|
||||
<span className="ml-2 font-normal tracking-wide">
|
||||
{user.status}
|
||||
</span>
|
||||
</p>
|
||||
@ -92,7 +92,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
{user.biography != null && (
|
||||
<div className='mt-7 text-center'>
|
||||
<div className="mt-7 text-center">
|
||||
<p>{user.biography}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './UserProfile'
|
||||
export * from "./UserProfile"
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
import Image from 'next/image'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Form, useForm } from 'react-component-form'
|
||||
import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
|
||||
import { Type } from '@sinclair/typebox'
|
||||
import axios from 'axios'
|
||||
import Link from 'next/link'
|
||||
import type { HandleUseFormCallback } from 'react-component-form'
|
||||
import Image from "next/image"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import { useState, useMemo } from "react"
|
||||
import { Form, useForm } from "react-component-form"
|
||||
import { EyeIcon, PhotographIcon } from "@heroicons/react/solid"
|
||||
import { Type } from "@sinclair/typebox"
|
||||
import axios from "axios"
|
||||
import Link from "next/link"
|
||||
import type { HandleUseFormCallback } from "react-component-form"
|
||||
|
||||
import { Input } from '../../design/Input'
|
||||
import { Checkbox } from '../../design/Checkbox'
|
||||
import { Textarea } from '../../design/Textarea'
|
||||
import { SocialMediaButton } from '../../design/SocialMediaButton'
|
||||
import { SwitchTheme } from '../../Header/SwitchTheme'
|
||||
import { Language } from '../../Header/Language'
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
import { Button } from '../../design/Button'
|
||||
import { FormState } from '../../design/FormState'
|
||||
import { userSchema } from '../../../models/User'
|
||||
import { userSettingsSchema } from '../../../models/UserSettings'
|
||||
import type { ProviderOAuth } from '../../../models/OAuth'
|
||||
import { providers } from '../../../models/OAuth'
|
||||
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||
import { Input } from "../../design/Input"
|
||||
import { Checkbox } from "../../design/Checkbox"
|
||||
import { Textarea } from "../../design/Textarea"
|
||||
import { SocialMediaButton } from "../../design/SocialMediaButton"
|
||||
import { SwitchTheme } from "../../Header/SwitchTheme"
|
||||
import { Language } from "../../Header/Language"
|
||||
import { useAuthentication } from "../../../tools/authentication"
|
||||
import { Button } from "../../design/Button"
|
||||
import { FormState } from "../../design/FormState"
|
||||
import { userSchema } from "../../../models/User"
|
||||
import { userSettingsSchema } from "../../../models/UserSettings"
|
||||
import type { ProviderOAuth } from "../../../models/OAuth"
|
||||
import { providers } from "../../../models/OAuth"
|
||||
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
||||
|
||||
const schema = {
|
||||
name: userSchema.name,
|
||||
@ -30,7 +30,7 @@ const schema = {
|
||||
website: Type.Optional(userSchema.website),
|
||||
biography: Type.Optional(userSchema.biography),
|
||||
isPublicGuilds: userSettingsSchema.isPublicGuilds,
|
||||
isPublicEmail: userSettingsSchema.isPublicEmail
|
||||
isPublicEmail: userSettingsSchema.isPublicEmail,
|
||||
}
|
||||
|
||||
export const UserSettings: React.FC = () => {
|
||||
@ -43,7 +43,7 @@ export const UserSettings: React.FC = () => {
|
||||
website: user.website,
|
||||
biography: user.biography,
|
||||
isPublicGuilds: user.settings.isPublicGuilds,
|
||||
isPublicEmail: user.settings.isPublicEmail
|
||||
isPublicEmail: user.settings.isPublicEmail,
|
||||
})
|
||||
|
||||
const {
|
||||
@ -52,7 +52,7 @@ export const UserSettings: React.FC = () => {
|
||||
setFetchState,
|
||||
message,
|
||||
setMessage,
|
||||
errors
|
||||
errors,
|
||||
} = useForm(schema)
|
||||
const { getFirstErrorTranslation } = useFormTranslation()
|
||||
|
||||
@ -68,19 +68,19 @@ export const UserSettings: React.FC = () => {
|
||||
const userSettings = { isPublicEmail, isPublicGuilds }
|
||||
const { data: userCurrentData } = await authentication.api.put(
|
||||
`/users/current?redirectURI=${window.location.origin}/authentication/signin`,
|
||||
userData
|
||||
userData,
|
||||
)
|
||||
setInputValues(formData as unknown as any)
|
||||
const hasEmailChanged = user.email !== userCurrentData.user.email
|
||||
if (hasEmailChanged) {
|
||||
return {
|
||||
type: 'success',
|
||||
message: 'application:success-email-changed'
|
||||
type: "success",
|
||||
message: "application:success-email-changed",
|
||||
}
|
||||
}
|
||||
const { data: userCurrentSettings } = await authentication.api.put(
|
||||
'/users/current/settings',
|
||||
userSettings
|
||||
"/users/current/settings",
|
||||
userSettings,
|
||||
)
|
||||
setUser((oldUser) => {
|
||||
return {
|
||||
@ -88,36 +88,36 @@ export const UserSettings: React.FC = () => {
|
||||
...userCurrentData,
|
||||
settings: {
|
||||
...oldUser.settings,
|
||||
...userCurrentSettings.settings
|
||||
}
|
||||
...userCurrentSettings.settings,
|
||||
},
|
||||
}
|
||||
})
|
||||
return {
|
||||
type: 'success',
|
||||
message: 'application:saved-information'
|
||||
type: "success",
|
||||
message: "application:saved-information",
|
||||
}
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
||||
const message = error.response.data.message as string
|
||||
if (message.endsWith('already taken.')) {
|
||||
if (message.endsWith("already taken.")) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'authentication:already-used'
|
||||
type: "error",
|
||||
message: "authentication:already-used",
|
||||
}
|
||||
} else if (message.endsWith('email to sign in.')) {
|
||||
} else if (message.endsWith("email to sign in.")) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'authentication:email-required-to-sign-in'
|
||||
type: "error",
|
||||
message: "authentication:email-required-to-sign-in",
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -128,95 +128,95 @@ export const UserSettings: React.FC = () => {
|
||||
setInputValues((oldInputValues) => {
|
||||
return {
|
||||
...oldInputValues,
|
||||
[event.target.name]: event.target.value
|
||||
[event.target.name]: event.target.value,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
setInputValues((oldInputValues) => {
|
||||
return {
|
||||
...oldInputValues,
|
||||
[event.target.name]: event.target.checked
|
||||
[event.target.name]: event.target.checked,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
const files = event?.target?.files
|
||||
if (files != null && files.length === 1 && files[0] != null) {
|
||||
const file = files[0]
|
||||
const formData = new FormData()
|
||||
formData.append('logo', file)
|
||||
formData.append("logo", file)
|
||||
try {
|
||||
const { data } = await authentication.api.put(
|
||||
`/users/current/logo`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
},
|
||||
)
|
||||
setUser((oldUser) => {
|
||||
return {
|
||||
...oldUser,
|
||||
logo: data.user.logo
|
||||
logo: data.user.logo,
|
||||
}
|
||||
})
|
||||
setFetchState('idle')
|
||||
setFetchState("idle")
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSignout = async (): Promise<void> => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
await authentication.signoutServerSide()
|
||||
}
|
||||
|
||||
const handleSignoutAllDevices = async (): Promise<void> => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
await authentication.signoutAllDevicesServerSide()
|
||||
}
|
||||
|
||||
const handleDeletionProvider = (
|
||||
provider: ProviderOAuth
|
||||
provider: ProviderOAuth,
|
||||
): (() => Promise<void>) => {
|
||||
return async () => {
|
||||
try {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
await authentication.api.delete(`/users/oauth2/${provider}`)
|
||||
setUser((oldUser) => {
|
||||
return {
|
||||
...oldUser,
|
||||
strategies: oldUser.strategies.filter((strategy) => {
|
||||
return strategy !== provider
|
||||
})
|
||||
}),
|
||||
}
|
||||
})
|
||||
setMessage('application:success-deleted-provider')
|
||||
setMessage("application:success-deleted-provider")
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddProvider = (
|
||||
provider: ProviderOAuth
|
||||
provider: ProviderOAuth,
|
||||
): (() => Promise<void>) => {
|
||||
return async () => {
|
||||
const redirect = window.location.href.replace(location.search, '')
|
||||
const redirect = window.location.href.replace(location.search, "")
|
||||
const { data: url } = await authentication.api.get(
|
||||
`/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`
|
||||
`/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`,
|
||||
)
|
||||
window.location.href = url
|
||||
}
|
||||
@ -225,116 +225,116 @@ export const UserSettings: React.FC = () => {
|
||||
return (
|
||||
<Form
|
||||
onSubmit={handleUseForm(onSubmit)}
|
||||
className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
|
||||
className="my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]"
|
||||
>
|
||||
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
||||
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
||||
<div className='relative'>
|
||||
<div className='absolute z-50 h-full w-full'>
|
||||
<button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
|
||||
<div className="flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row">
|
||||
<div className=" flex w-full flex-wrap items-center justify-center px-6 sm:w-max">
|
||||
<div className="relative">
|
||||
<div className="absolute z-50 h-full w-full">
|
||||
<button className="relative flex h-full w-full items-center justify-center transition hover:scale-110">
|
||||
<input
|
||||
type='file'
|
||||
className='absolute h-full w-full cursor-pointer opacity-0'
|
||||
type="file"
|
||||
className="absolute h-full w-full cursor-pointer opacity-0"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<PhotographIcon color='white' className='h-8 w-8' />
|
||||
<PhotographIcon color="white" className="h-8 w-8" />
|
||||
</button>
|
||||
</div>
|
||||
<div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
|
||||
<div className="flex items-center justify-center rounded-full bg-black shadow-xl">
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full opacity-50'
|
||||
className="rounded-full opacity-50"
|
||||
src={
|
||||
user.logo != null
|
||||
? user.logo
|
||||
: '/images/data/user-default.png'
|
||||
: "/images/data/user-default.png"
|
||||
}
|
||||
alt='Profil Picture'
|
||||
draggable='false'
|
||||
alt="Profil Picture"
|
||||
draggable="false"
|
||||
height={125}
|
||||
width={125}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-12 flex flex-col'>
|
||||
<div className="mx-12 flex flex-col">
|
||||
<Input
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
placeholder={t('common:name')}
|
||||
className='!mt-0'
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
placeholder={t("common:name")}
|
||||
className="!mt-0"
|
||||
onChange={onChange}
|
||||
value={inputValues.name ?? ''}
|
||||
value={inputValues.name ?? ""}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
/>
|
||||
<Input
|
||||
name='status'
|
||||
label={t('application:status')}
|
||||
placeholder={t('application:status')}
|
||||
className='!mt-4'
|
||||
name="status"
|
||||
label={t("application:status")}
|
||||
placeholder={t("application:status")}
|
||||
className="!mt-4"
|
||||
onChange={onChange}
|
||||
value={inputValues.status ?? ''}
|
||||
value={inputValues.status ?? ""}
|
||||
error={getFirstErrorTranslation(errors.status)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-12 flex w-full flex-col items-center justify-between sm:w-fit lg:flex-row'>
|
||||
<div className='w-4/5 pr-0 sm:w-[450px] lg:border-r-[1px] lg:border-neutral-700 lg:pr-12'>
|
||||
<div className="mt-12 flex w-full flex-col items-center justify-between sm:w-fit lg:flex-row">
|
||||
<div className="w-4/5 pr-0 sm:w-[450px] lg:border-r-[1px] lg:border-neutral-700 lg:pr-12">
|
||||
<Input
|
||||
name='email'
|
||||
label='Email'
|
||||
placeholder='Email'
|
||||
name="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
onChange={onChange}
|
||||
value={inputValues.email ?? ''}
|
||||
value={inputValues.email ?? ""}
|
||||
error={getFirstErrorTranslation(errors.email)}
|
||||
/>
|
||||
<Checkbox
|
||||
name='isPublicEmail'
|
||||
label={t('application:label-checkbox-email')}
|
||||
id='checkbox-email-visibility'
|
||||
name="isPublicEmail"
|
||||
label={t("application:label-checkbox-email")}
|
||||
id="checkbox-email-visibility"
|
||||
onChange={onChangeCheckbox}
|
||||
checked={inputValues.isPublicEmail}
|
||||
/>
|
||||
<Input
|
||||
name='website'
|
||||
label={t('application:website')}
|
||||
placeholder={t('application:website')}
|
||||
name="website"
|
||||
label={t("application:website")}
|
||||
placeholder={t("application:website")}
|
||||
onChange={onChange}
|
||||
value={inputValues.website ?? ''}
|
||||
value={inputValues.website ?? ""}
|
||||
error={getFirstErrorTranslation(errors.website)}
|
||||
/>
|
||||
<Textarea
|
||||
name='biography'
|
||||
label={t('application:biography')}
|
||||
placeholder={t('application:biography')}
|
||||
id='textarea-biography'
|
||||
name="biography"
|
||||
label={t("application:biography")}
|
||||
placeholder={t("application:biography")}
|
||||
id="textarea-biography"
|
||||
onChange={onChange}
|
||||
value={inputValues.biography ?? ''}
|
||||
value={inputValues.biography ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12'>
|
||||
<div className='flex w-full items-center pt-10 lg:pt-0'>
|
||||
<Language className='!top-12' />
|
||||
<div className='ml-auto flex'>
|
||||
<div className="flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12">
|
||||
<div className="flex w-full items-center pt-10 lg:pt-0">
|
||||
<Language className="!top-12" />
|
||||
<div className="ml-auto flex">
|
||||
<SwitchTheme />
|
||||
<Link
|
||||
href={`/application/users/${user.id}`}
|
||||
className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
|
||||
title='Preview Public Profile'
|
||||
className="group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800"
|
||||
title="Preview Public Profile"
|
||||
>
|
||||
<EyeIcon
|
||||
height={20}
|
||||
className='opacity-50 transition-opacity group-hover:opacity-100'
|
||||
className="opacity-50 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-14 flex w-full flex-col gap-4'>
|
||||
<div className="mt-14 flex w-full flex-col gap-4">
|
||||
{!hasAllProviders ? (
|
||||
<div className='flex w-full flex-col gap-4'>
|
||||
<h3 className='text-center'>
|
||||
{t('application:signin-with-an-account')}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<h3 className="text-center">
|
||||
{t("application:signin-with-an-account")}
|
||||
</h3>
|
||||
{providers.map((provider, index) => {
|
||||
if (!user.strategies.includes(provider)) {
|
||||
@ -342,7 +342,7 @@ export const UserSettings: React.FC = () => {
|
||||
<SocialMediaButton
|
||||
key={index}
|
||||
socialMedia={provider}
|
||||
className='w-full justify-center'
|
||||
className="w-full justify-center"
|
||||
onClick={handleAddProvider(provider)}
|
||||
/>
|
||||
)
|
||||
@ -352,9 +352,9 @@ export const UserSettings: React.FC = () => {
|
||||
</div>
|
||||
) : null}
|
||||
{user.strategies.length !== 1 && (
|
||||
<div className='mt-4 flex w-full flex-col gap-4'>
|
||||
<h3 className='text-center'>
|
||||
{t('application:signout-with-an-account')}
|
||||
<div className="mt-4 flex w-full flex-col gap-4">
|
||||
<h3 className="text-center">
|
||||
{t("application:signout-with-an-account")}
|
||||
</h3>
|
||||
{providers.map((provider, index) => {
|
||||
if (user.strategies.includes(provider)) {
|
||||
@ -362,7 +362,7 @@ export const UserSettings: React.FC = () => {
|
||||
<SocialMediaButton
|
||||
key={index}
|
||||
socialMedia={provider}
|
||||
className='w-full justify-center'
|
||||
className="w-full justify-center"
|
||||
onClick={handleDeletionProvider(provider)}
|
||||
/>
|
||||
)
|
||||
@ -375,16 +375,16 @@ export const UserSettings: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
||||
<div className='space-x-6'>
|
||||
<Button type='submit'>{t('application:save')}</Button>
|
||||
<Button type='button' color='red' onClick={handleSignout}>
|
||||
{t('application:signout')}
|
||||
<div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
|
||||
<div className="space-x-6">
|
||||
<Button type="submit">{t("application:save")}</Button>
|
||||
<Button type="button" color="red" onClick={handleSignout}>
|
||||
{t("application:signout")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<Button type='button' color='red' onClick={handleSignoutAllDevices}>
|
||||
{t('application:signout-all-devices')}
|
||||
<div className="mt-4">
|
||||
<Button type="button" color="red" onClick={handleSignoutAllDevices}>
|
||||
{t("application:signout-all-devices")}
|
||||
</Button>
|
||||
</div>
|
||||
<FormState
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './UserSettings'
|
||||
export * from "./UserSettings"
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Application'
|
||||
export * from "./Application"
|
||||
|
||||
Reference in New Issue
Block a user