Compare commits
53 Commits
Author | SHA1 | Date | |
---|---|---|---|
41c2d95dde
|
|||
2a6e3eca84
|
|||
84662c7765
|
|||
7e76598f7f | |||
fd138caa4b | |||
fa7b155ea4 | |||
d210800855 | |||
07c574cb4a | |||
ae953d6c1a | |||
c96385edd5 | |||
cd1a477324 | |||
b5089f7f0b | |||
67a1699102 | |||
e8a9ce4e69 | |||
8f5bc2fe21 | |||
109da1be71 | |||
1ea78821b0 | |||
12ceefd650 | |||
734357b396 | |||
ccaf5234ed | |||
5d350e8db9 | |||
cd164538de | |||
d51de554d6 | |||
a068d31d14 | |||
3d185bf044 | |||
6cfee0f6a3 | |||
66f3e0475f | |||
dee8cc2c41 | |||
91a87199c4 | |||
38e227a9d4 | |||
c4bb7c9b17 | |||
88f1cedcdc | |||
c75dc80f82 | |||
351834633f | |||
7c01246028 | |||
ad64f1c571 | |||
19fc29ad47 | |||
7ad3d226dc | |||
d8cedd7b77 | |||
177676e180 | |||
db4ab7cf6f | |||
8f9ff8de07 | |||
21ee6f1d66 | |||
10b1e568d2 | |||
1882073973 | |||
567829fa3a | |||
c0e2c547ef | |||
f555e406ef | |||
4cd817bb01 | |||
41e9162454 | |||
ff2decc894 | |||
d44a401348 | |||
cb2ddbf661 |
@ -1,2 +1 @@
|
|||||||
ARG VARIANT="16"
|
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:18
|
||||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
|
|
||||||
|
@ -3,20 +3,22 @@
|
|||||||
"dockerComposeFile": "./docker-compose.yml",
|
"dockerComposeFile": "./docker-compose.yml",
|
||||||
"service": "workspace",
|
"service": "workspace",
|
||||||
"workspaceFolder": "/workspace",
|
"workspaceFolder": "/workspace",
|
||||||
"settings": {
|
"customizations": {
|
||||||
"remote.autoForwardPorts": false
|
"vscode": {
|
||||||
|
"settings": {
|
||||||
|
"remote.autoForwardPorts": false
|
||||||
|
},
|
||||||
|
"extensions": [
|
||||||
|
"editorconfig.editorconfig",
|
||||||
|
"esbenp.prettier-vscode",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"bradlc.vscode-tailwindcss",
|
||||||
|
"mikestead.dotenv",
|
||||||
|
"davidanson.vscode-markdownlint",
|
||||||
|
"ms-azuretools.vscode-docker"
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"extensions": [
|
|
||||||
"editorconfig.editorconfig",
|
|
||||||
"esbenp.prettier-vscode",
|
|
||||||
"dbaeumer.vscode-eslint",
|
|
||||||
"divlo.vscode-styled-jsx-syntax",
|
|
||||||
"divlo.vscode-styled-jsx-languageserver",
|
|
||||||
"bradlc.vscode-tailwindcss",
|
|
||||||
"mikestead.dotenv",
|
|
||||||
"davidanson.vscode-markdownlint",
|
|
||||||
"ms-azuretools.vscode-docker"
|
|
||||||
],
|
|
||||||
"forwardPorts": [3000],
|
"forwardPorts": [3000],
|
||||||
"postAttachCommand": ["npm", "install"],
|
"postAttachCommand": ["npm", "install"],
|
||||||
"remoteUser": "node"
|
"remoteUser": "node"
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
version: '3.0'
|
|
||||||
|
|
||||||
services:
|
services:
|
||||||
workspace:
|
workspace:
|
||||||
build:
|
build:
|
||||||
|
@ -1,12 +1,5 @@
|
|||||||
.vscode
|
.*
|
||||||
.git
|
!.npmrc
|
||||||
.env
|
|
||||||
build
|
build
|
||||||
.next
|
|
||||||
coverage
|
coverage
|
||||||
node_modules
|
node_modules
|
||||||
tmp
|
|
||||||
temp
|
|
||||||
.DS_Store
|
|
||||||
.lighthouseci
|
|
||||||
.vercel
|
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
COMPOSE_PROJECT_NAME=thream-website
|
COMPOSE_PROJECT_NAME=thream-website
|
||||||
NEXT_PUBLIC_API_URL=http://localhost:8080
|
NEXT_PUBLIC_API_URL=http://127.0.0.1:8080
|
||||||
PORT=3000
|
PORT=3000
|
||||||
|
@ -1,7 +0,0 @@
|
|||||||
.next
|
|
||||||
.lighthouseci
|
|
||||||
coverage
|
|
||||||
node_modules
|
|
||||||
next-env.d.ts
|
|
||||||
**/workbox-*.js
|
|
||||||
**/sw.js
|
|
@ -6,8 +6,7 @@
|
|||||||
},
|
},
|
||||||
"env": {
|
"env": {
|
||||||
"node": true,
|
"node": true,
|
||||||
"browser": true,
|
"browser": true
|
||||||
"jest": true
|
|
||||||
},
|
},
|
||||||
"rules": {
|
"rules": {
|
||||||
"prettier/prettier": "error",
|
"prettier/prettier": "error",
|
||||||
|
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
|
<!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
|
||||||
|
|
||||||
## What changes this PR introduce?
|
# What changes this PR introduce?
|
||||||
|
|
||||||
## List any relevant issue numbers
|
## List any relevant issue numbers
|
||||||
|
|
||||||
|
6
.github/workflows/analyze.yml
vendored
6
.github/workflows/analyze.yml
vendored
@ -16,12 +16,12 @@ jobs:
|
|||||||
language: ['javascript']
|
language: ['javascript']
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- uses: 'actions/checkout@v2.3.4'
|
- uses: 'actions/checkout@v3.5.3'
|
||||||
|
|
||||||
- name: 'Initialize CodeQL'
|
- name: 'Initialize CodeQL'
|
||||||
uses: 'github/codeql-action/init@v1'
|
uses: 'github/codeql-action/init@v2'
|
||||||
with:
|
with:
|
||||||
languages: ${{ matrix.language }}
|
languages: ${{ matrix.language }}
|
||||||
|
|
||||||
- name: 'Perform CodeQL Analysis'
|
- name: 'Perform CodeQL Analysis'
|
||||||
uses: 'github/codeql-action/analyze@v1'
|
uses: 'github/codeql-action/analyze@v2'
|
||||||
|
12
.github/workflows/build.yml
vendored
12
.github/workflows/build.yml
vendored
@ -10,16 +10,16 @@ jobs:
|
|||||||
build:
|
build:
|
||||||
runs-on: 'ubuntu-latest'
|
runs-on: 'ubuntu-latest'
|
||||||
steps:
|
steps:
|
||||||
- uses: 'actions/checkout@v2'
|
- uses: 'actions/checkout@v3.5.3'
|
||||||
|
|
||||||
- name: 'Use Node.js'
|
- name: 'Setup Node.js'
|
||||||
uses: 'actions/setup-node@v2.4.1'
|
uses: 'actions/setup-node@v3.6.0'
|
||||||
with:
|
with:
|
||||||
node-version: '16.x'
|
node-version: '18.x'
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: 'Install'
|
- name: 'Install dependencies'
|
||||||
run: 'npm install'
|
run: 'npm clean-install'
|
||||||
|
|
||||||
- name: 'Build'
|
- name: 'Build'
|
||||||
run: 'npm run build'
|
run: 'npm run build'
|
||||||
|
21
.github/workflows/lint.yml
vendored
21
.github/workflows/lint.yml
vendored
@ -10,16 +10,16 @@ jobs:
|
|||||||
lint:
|
lint:
|
||||||
runs-on: 'ubuntu-latest'
|
runs-on: 'ubuntu-latest'
|
||||||
steps:
|
steps:
|
||||||
- uses: 'actions/checkout@v2'
|
- uses: 'actions/checkout@v3.5.3'
|
||||||
|
|
||||||
- name: 'Use Node.js'
|
- name: 'Setup Node.js'
|
||||||
uses: 'actions/setup-node@v2.4.1'
|
uses: 'actions/setup-node@v3.6.0'
|
||||||
with:
|
with:
|
||||||
node-version: '16.x'
|
node-version: '18.x'
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: 'Install'
|
- name: 'Install dependencies'
|
||||||
run: 'npm install'
|
run: 'npm clean-install'
|
||||||
|
|
||||||
- name: 'lint:commit'
|
- name: 'lint:commit'
|
||||||
run: 'npm run lint:commit -- --to "${{ github.sha }}"'
|
run: 'npm run lint:commit -- --to "${{ github.sha }}"'
|
||||||
@ -30,8 +30,8 @@ jobs:
|
|||||||
- name: 'lint:markdown'
|
- name: 'lint:markdown'
|
||||||
run: 'npm run lint:markdown'
|
run: 'npm run lint:markdown'
|
||||||
|
|
||||||
- name: 'lint:typescript'
|
- name: 'lint:eslint'
|
||||||
run: 'npm run lint:typescript'
|
run: 'npm run lint:eslint'
|
||||||
|
|
||||||
- name: 'lint:prettier'
|
- name: 'lint:prettier'
|
||||||
run: 'npm run lint:prettier'
|
run: 'npm run lint:prettier'
|
||||||
@ -40,8 +40,3 @@ jobs:
|
|||||||
uses: 'dotenv-linter/action-dotenv-linter@v2'
|
uses: 'dotenv-linter/action-dotenv-linter@v2'
|
||||||
with:
|
with:
|
||||||
github_token: ${{ secrets.github_token }}
|
github_token: ${{ secrets.github_token }}
|
||||||
|
|
||||||
- name: 'lint:docker'
|
|
||||||
uses: 'hadolint/hadolint-action@v1.6.0'
|
|
||||||
with:
|
|
||||||
dockerfile: './Dockerfile'
|
|
||||||
|
14
.github/workflows/release.yml
vendored
14
.github/workflows/release.yml
vendored
@ -8,26 +8,26 @@ jobs:
|
|||||||
release:
|
release:
|
||||||
runs-on: 'ubuntu-latest'
|
runs-on: 'ubuntu-latest'
|
||||||
steps:
|
steps:
|
||||||
- uses: 'actions/checkout@v2.3.4'
|
- uses: 'actions/checkout@v3.5.3'
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
persist-credentials: false
|
persist-credentials: false
|
||||||
|
|
||||||
- name: 'Import GPG key'
|
- name: 'Import GPG key'
|
||||||
uses: 'crazy-max/ghaction-import-gpg@v4'
|
uses: 'crazy-max/ghaction-import-gpg@v5.3.0'
|
||||||
with:
|
with:
|
||||||
gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
|
gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
|
||||||
git_user_signingkey: true
|
git_user_signingkey: true
|
||||||
git_commit_gpgsign: true
|
git_commit_gpgsign: true
|
||||||
|
|
||||||
- name: 'Use Node.js'
|
- name: 'Setup Node.js'
|
||||||
uses: 'actions/setup-node@v2.4.0'
|
uses: 'actions/setup-node@v3.6.0'
|
||||||
with:
|
with:
|
||||||
node-version: '16.x'
|
node-version: '18.x'
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: 'Install'
|
- name: 'Install dependencies'
|
||||||
run: 'npm install'
|
run: 'npm clean-install'
|
||||||
|
|
||||||
- name: 'Release'
|
- name: 'Release'
|
||||||
run: 'npm run release'
|
run: 'npm run release'
|
||||||
|
48
.github/workflows/test.yml
vendored
48
.github/workflows/test.yml
vendored
@ -10,33 +10,33 @@ jobs:
|
|||||||
test-unit:
|
test-unit:
|
||||||
runs-on: 'ubuntu-latest'
|
runs-on: 'ubuntu-latest'
|
||||||
steps:
|
steps:
|
||||||
- uses: 'actions/checkout@v2.3.4'
|
- uses: 'actions/checkout@v3.5.3'
|
||||||
|
|
||||||
- name: 'Use Node.js'
|
- name: 'Setup Node.js'
|
||||||
uses: 'actions/setup-node@v2.4.1'
|
uses: 'actions/setup-node@v3.6.0'
|
||||||
with:
|
with:
|
||||||
node-version: '16.x'
|
node-version: '18.x'
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: 'Install'
|
- name: 'Install dependencies'
|
||||||
run: 'npm install'
|
run: 'npm clean-install'
|
||||||
|
|
||||||
- name: 'Unit Test'
|
- name: 'Unit Test'
|
||||||
run: 'npm run test:unit'
|
run: 'npm run test:unit'
|
||||||
|
|
||||||
test-lighthouse:
|
test-e2e:
|
||||||
runs-on: 'ubuntu-latest'
|
runs-on: 'ubuntu-latest'
|
||||||
steps:
|
steps:
|
||||||
- uses: 'actions/checkout@v2.3.4'
|
- uses: 'actions/checkout@v3.5.3'
|
||||||
|
|
||||||
- name: 'Use Node.js'
|
- name: 'Setup Node.js'
|
||||||
uses: 'actions/setup-node@v2.4.0'
|
uses: 'actions/setup-node@v3.6.0'
|
||||||
with:
|
with:
|
||||||
node-version: '16.x'
|
node-version: '18.x'
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: 'Install'
|
- name: 'Install dependencies'
|
||||||
run: 'npm install'
|
run: 'npm clean-install'
|
||||||
|
|
||||||
- name: 'Build'
|
- name: 'Build'
|
||||||
run: 'npm run build'
|
run: 'npm run build'
|
||||||
@ -44,27 +44,5 @@ jobs:
|
|||||||
- name: 'html-w3c-validator'
|
- name: 'html-w3c-validator'
|
||||||
run: 'npm run test:html-w3c-validator'
|
run: 'npm run test:html-w3c-validator'
|
||||||
|
|
||||||
- name: 'Lighthouse'
|
|
||||||
run: 'npm run test:lighthouse'
|
|
||||||
env:
|
|
||||||
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
|
|
||||||
|
|
||||||
test-e2e:
|
|
||||||
runs-on: 'ubuntu-latest'
|
|
||||||
steps:
|
|
||||||
- uses: 'actions/checkout@v2.3.4'
|
|
||||||
|
|
||||||
- name: 'Use Node.js'
|
|
||||||
uses: 'actions/setup-node@v2.4.0'
|
|
||||||
with:
|
|
||||||
node-version: '16.x'
|
|
||||||
cache: 'npm'
|
|
||||||
|
|
||||||
- name: 'Install'
|
|
||||||
run: 'npm install'
|
|
||||||
|
|
||||||
- name: 'Build'
|
|
||||||
run: 'npm run build'
|
|
||||||
|
|
||||||
- name: 'End To End (e2e) Test'
|
- name: 'End To End (e2e) Test'
|
||||||
run: 'npm run test:e2e'
|
run: 'npm run test:e2e'
|
||||||
|
5
.gitignore
vendored
5
.gitignore
vendored
@ -49,3 +49,8 @@ npm-debug.log*
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
.lighthouseci
|
.lighthouseci
|
||||||
.vercel
|
.vercel
|
||||||
|
*.hbs
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"urls": [
|
"urls": [
|
||||||
"http://localhost:3000/",
|
"http://127.0.0.1:3000/",
|
||||||
"http://localhost:3000/authentication/forgot-password",
|
"http://127.0.0.1:3000/authentication/forgot-password",
|
||||||
"http://localhost:3000/authentication/reset-password",
|
"http://127.0.0.1:3000/authentication/reset-password",
|
||||||
"http://localhost:3000/authentication/signin",
|
"http://127.0.0.1:3000/authentication/signin",
|
||||||
"http://localhost:3000/authentication/signup"
|
"http://127.0.0.1:3000/authentication/signup"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -1,31 +0,0 @@
|
|||||||
{
|
|
||||||
"ci": {
|
|
||||||
"collect": {
|
|
||||||
"startServerCommand": "npm run start",
|
|
||||||
"startServerReadyPattern": "ready on",
|
|
||||||
"startServerReadyTimeout": 20000,
|
|
||||||
"url": [
|
|
||||||
"http://localhost:3000/",
|
|
||||||
"http://localhost:3000/authentication/forgot-password",
|
|
||||||
"http://localhost:3000/authentication/reset-password",
|
|
||||||
"http://localhost:3000/authentication/signin",
|
|
||||||
"http://localhost:3000/authentication/signup"
|
|
||||||
],
|
|
||||||
"numberOfRuns": 1
|
|
||||||
},
|
|
||||||
"assert": {
|
|
||||||
"preset": "lighthouse:recommended",
|
|
||||||
"assertions": {
|
|
||||||
"image-size-responsive": "warning",
|
|
||||||
"unsized-images": "warning",
|
|
||||||
"csp-xss": "warning",
|
|
||||||
"non-composited-animations": "warning",
|
|
||||||
"unused-javascript": "warning"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"upload": {
|
|
||||||
"target": "temporary-public-storage"
|
|
||||||
},
|
|
||||||
"server": {}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,10 +1,6 @@
|
|||||||
{
|
{
|
||||||
"*": ["editorconfig-checker"],
|
"*": ["editorconfig-checker"],
|
||||||
"*.{js,jsx,ts,tsx}": [
|
"*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
|
||||||
"prettier --write",
|
|
||||||
"eslint --fix",
|
|
||||||
"jest --findRelatedTests"
|
|
||||||
],
|
|
||||||
"*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
|
"*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
|
||||||
"*.md": ["prettier --write", "markdownlint --dot --fix"]
|
"*.{md,mdx}": ["prettier --write", "markdownlint-cli2 --fix"]
|
||||||
}
|
}
|
||||||
|
11
.markdownlint-cli2.jsonc
Normal file
11
.markdownlint-cli2.jsonc
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"config": {
|
||||||
|
"extends": "markdownlint/style/prettier",
|
||||||
|
"relative-links": true,
|
||||||
|
"default": true,
|
||||||
|
"MD033": false
|
||||||
|
},
|
||||||
|
"globs": ["**/*.{md,mdx}"],
|
||||||
|
"ignores": ["**/node_modules"],
|
||||||
|
"customRules": ["markdownlint-rule-relative-links"]
|
||||||
|
}
|
@ -1,6 +0,0 @@
|
|||||||
{
|
|
||||||
"default": true,
|
|
||||||
"MD013": false,
|
|
||||||
"MD033": false,
|
|
||||||
"MD041": false
|
|
||||||
}
|
|
@ -1,7 +0,0 @@
|
|||||||
.next
|
|
||||||
.lighthouseci
|
|
||||||
coverage
|
|
||||||
node_modules
|
|
||||||
**/workbox-*.js
|
|
||||||
**/sw.js
|
|
||||||
*.hbs
|
|
2
.vscode/extensions.json
vendored
2
.vscode/extensions.json
vendored
@ -3,8 +3,6 @@
|
|||||||
"editorconfig.editorconfig",
|
"editorconfig.editorconfig",
|
||||||
"esbenp.prettier-vscode",
|
"esbenp.prettier-vscode",
|
||||||
"dbaeumer.vscode-eslint",
|
"dbaeumer.vscode-eslint",
|
||||||
"divlo.vscode-styled-jsx-syntax",
|
|
||||||
"divlo.vscode-styled-jsx-languageserver",
|
|
||||||
"bradlc.vscode-tailwindcss",
|
"bradlc.vscode-tailwindcss",
|
||||||
"mikestead.dotenv",
|
"mikestead.dotenv",
|
||||||
"davidanson.vscode-markdownlint",
|
"davidanson.vscode-markdownlint",
|
||||||
|
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -6,5 +6,9 @@
|
|||||||
"editor.formatOnSave": true,
|
"editor.formatOnSave": true,
|
||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
"source.fixAll": true
|
"source.fixAll": true
|
||||||
}
|
},
|
||||||
|
"eslint.options": {
|
||||||
|
"ignorePath": ".gitignore"
|
||||||
|
},
|
||||||
|
"prettier.ignorePath": ".gitignore"
|
||||||
}
|
}
|
||||||
|
@ -60,7 +60,7 @@ representative at an online or offline event.
|
|||||||
|
|
||||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
reported to the community leaders responsible for enforcement at
|
reported to the community leaders responsible for enforcement at
|
||||||
contact@divlo.fr.
|
<contact@theoludwig.fr>.
|
||||||
All complaints will be reviewed and investigated promptly and fairly.
|
All complaints will be reviewed and investigated promptly and fairly.
|
||||||
|
|
||||||
All community leaders are obligated to respect the privacy and security of the
|
All community leaders are obligated to respect the privacy and security of the
|
||||||
|
@ -16,6 +16,7 @@ All work on **Thream/website** happens directly on [GitHub](https://github.com/T
|
|||||||
- Suggest a new feature idea.
|
- Suggest a new feature idea.
|
||||||
- Correct spelling errors, improvements or additions to documentation files.
|
- Correct spelling errors, improvements or additions to documentation files.
|
||||||
- Improve structure/format/performance/refactor/tests of the code.
|
- Improve structure/format/performance/refactor/tests of the code.
|
||||||
|
- [Add translations](#add-a-translation).
|
||||||
|
|
||||||
## Pull Requests
|
## Pull Requests
|
||||||
|
|
||||||
@ -29,31 +30,7 @@ If you're adding new features to **Thream/website**, please include tests.
|
|||||||
|
|
||||||
## Commits
|
## Commits
|
||||||
|
|
||||||
The commit message guidelines respect
|
The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.
|
||||||
[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
|
|
||||||
and [Semantic Versioning](https://semver.org/) for releases.
|
|
||||||
|
|
||||||
### Types
|
|
||||||
|
|
||||||
Types define which kind of changes you made to the project.
|
|
||||||
|
|
||||||
| Types | Description |
|
|
||||||
| -------- | ------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| feat | A new feature. |
|
|
||||||
| fix | A bug fix. |
|
|
||||||
| docs | Documentation only changes. |
|
|
||||||
| style | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc). |
|
|
||||||
| refactor | A code change that neither fixes a bug nor adds a feature. |
|
|
||||||
| perf | A code change that improves performance. |
|
|
||||||
| test | Adding missing tests or correcting existing tests. |
|
|
||||||
| build | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm). |
|
|
||||||
| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs). |
|
|
||||||
| chore | Other changes that don't modify src or test files. |
|
|
||||||
| revert | Reverts a previous commit. |
|
|
||||||
|
|
||||||
### Scopes
|
|
||||||
|
|
||||||
Scopes define what part of the code changed.
|
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
|
|
||||||
@ -61,3 +38,15 @@ Scopes define what part of the code changed.
|
|||||||
git commit -m "feat(components): add Button"
|
git commit -m "feat(components): add Button"
|
||||||
git commit -m "docs(readme): update installation process"
|
git commit -m "docs(readme): update installation process"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Add a translation
|
||||||
|
|
||||||
|
[Reference issue](https://github.com/Thream/website/issues/24)
|
||||||
|
|
||||||
|
Feel free to contribute to **Thream** and add new languages, we would appreciate your help!
|
||||||
|
|
||||||
|
To add a new language:
|
||||||
|
|
||||||
|
- `npm install`
|
||||||
|
- `npm run generate`
|
||||||
|
- Start editing JSON files with the translation in `locales/{{locale}}` (e.g: `locales/en`)
|
||||||
|
30
Dockerfile
30
Dockerfile
@ -1,23 +1,21 @@
|
|||||||
FROM node:16.14.2 AS dependencies
|
FROM node:18.16.1 AS builder-dependencies
|
||||||
WORKDIR /usr/src/app
|
WORKDIR /usr/src/application
|
||||||
COPY ./package*.json ./
|
COPY ./package*.json ./
|
||||||
RUN npm install
|
RUN npm install
|
||||||
|
|
||||||
FROM node:16.14.2 AS builder
|
FROM node:18.16.1 AS builder
|
||||||
WORKDIR /usr/src/app
|
WORKDIR /usr/src/application
|
||||||
|
COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
|
||||||
COPY ./ ./
|
COPY ./ ./
|
||||||
COPY --from=dependencies /usr/src/app/node_modules ./node_modules
|
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
FROM node:16.14.2 AS runner
|
FROM gcr.io/distroless/nodejs18-debian11:latest AS runner
|
||||||
WORKDIR /usr/src/app
|
WORKDIR /usr/src/application
|
||||||
ENV NODE_ENV=production
|
ENV NODE_ENV=production
|
||||||
COPY --from=builder /usr/src/app/next.config.js ./next.config.js
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
COPY --from=builder /usr/src/app/public ./public
|
COPY --from=builder /usr/src/application/.next/standalone ./
|
||||||
COPY --from=builder /usr/src/app/.next ./.next
|
COPY --from=builder /usr/src/application/.next/static ./.next/static
|
||||||
COPY --from=builder /usr/src/app/i18n.json ./i18n.json
|
COPY --from=builder /usr/src/application/public ./public
|
||||||
COPY --from=builder /usr/src/app/locales ./locales
|
COPY --from=builder /usr/src/application/locales ./locales
|
||||||
COPY --from=builder /usr/src/app/pages ./pages
|
COPY --from=builder /usr/src/application/next.config.js ./next.config.js
|
||||||
COPY --from=builder /usr/src/app/node_modules ./node_modules
|
CMD ["./server.js"]
|
||||||
RUN npx next telemetry disable
|
|
||||||
CMD ["node_modules/.bin/next", "start", "--port", "${PORT}"]
|
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
Thream's website to stay close with your friends and communities.
|
Thream's website to stay close with your friends and communities.
|
||||||
|
|
||||||
It uses [Thream/api](https://github.com/Thream/api) [v1.0.1](https://github.com/Thream/api/releases/tag/v1.0.1).
|
It uses [Thream/api](https://github.com/Thream/api) [v1.2.7](https://github.com/Thream/api/releases/tag/v1.2.7).
|
||||||
|
|
||||||
## ⚙️ Getting Started
|
## ⚙️ Getting Started
|
||||||
|
|
||||||
@ -31,7 +31,7 @@ It uses [Thream/api](https://github.com/Thream/api) [v1.0.1](https://github.com/
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
# Clone the repository
|
# Clone the repository
|
||||||
git clone https://github.com/Thream/website.git
|
git clone git@github.com:Thream/website.git
|
||||||
|
|
||||||
# Go to the project root
|
# Go to the project root
|
||||||
cd website
|
cd website
|
||||||
@ -56,12 +56,12 @@ npm run dev
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
# Setup and run all the services for you
|
# Setup and run all the services for you
|
||||||
docker-compose up --build
|
docker compose up --build
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Services started
|
#### Services started
|
||||||
|
|
||||||
- website : `http://localhost:3000`
|
- `website`: <http://127.0.0.1:3000>
|
||||||
|
|
||||||
## 💡 Contributing
|
## 💡 Contributing
|
||||||
|
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
|
import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
import { useMediaQuery } from 'react-responsive'
|
import { useMediaQuery } from 'react-responsive'
|
||||||
import { useSwipeable } from 'react-swipeable'
|
import { useSwipeable } from 'react-swipeable'
|
||||||
|
|
||||||
import { Sidebar, DirectionSidebar } from './Sidebar'
|
import type { DirectionSidebar } from './Sidebar'
|
||||||
|
import { Sidebar } from './Sidebar'
|
||||||
import { IconButton } from '../design/IconButton'
|
import { IconButton } from '../design/IconButton'
|
||||||
import { IconLink } from '../design/IconLink'
|
import { IconLink } from '../design/IconLink'
|
||||||
import { Guilds } from './Guilds/Guilds'
|
import { Guilds } from './Guilds/Guilds'
|
||||||
@ -40,7 +41,9 @@ export interface ApplicationProps {
|
|||||||
title: string
|
title: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Application: React.FC<ApplicationProps> = (props) => {
|
export const Application: React.FC<
|
||||||
|
React.PropsWithChildren<ApplicationProps>
|
||||||
|
> = (props) => {
|
||||||
const { children, path, guildLeftSidebar, title } = props
|
const { children, path, guildLeftSidebar, title } = props
|
||||||
|
|
||||||
const { user } = useAuthentication()
|
const { user } = useAuthentication()
|
||||||
@ -110,7 +113,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
|
|||||||
const swipeableHandlers = useSwipeable({
|
const swipeableHandlers = useSwipeable({
|
||||||
trackMouse: false,
|
trackMouse: false,
|
||||||
trackTouch: true,
|
trackTouch: true,
|
||||||
preventDefaultTouchmoveEvent: true,
|
preventScrollOnSwipe: true,
|
||||||
onSwipedRight: () => {
|
onSwipedRight: () => {
|
||||||
if (visibleSidebars.right) {
|
if (visibleSidebars.right) {
|
||||||
return setVisibleSidebars({ ...visibleSidebars, right: false })
|
return setVisibleSidebars({ ...visibleSidebars, right: false })
|
||||||
@ -146,7 +149,9 @@ export const Application: React.FC<ApplicationProps> = (props) => {
|
|||||||
<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
|
<IconButton
|
||||||
className='h-10 w-10 p-2'
|
className='h-10 w-10 p-2'
|
||||||
onClick={() => handleToggleSidebars('left')}
|
onClick={() => {
|
||||||
|
return handleToggleSidebars('left')
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
|
{!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -161,7 +166,9 @@ export const Application: React.FC<ApplicationProps> = (props) => {
|
|||||||
<IconButton
|
<IconButton
|
||||||
data-cy='icon-button-right-sidebar-members'
|
data-cy='icon-button-right-sidebar-members'
|
||||||
className='h-10 w-10 p-2'
|
className='h-10 w-10 p-2'
|
||||||
onClick={() => handleToggleSidebars('right')}
|
onClick={() => {
|
||||||
|
return handleToggleSidebars('right')
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
|
{!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -178,7 +185,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
|
|||||||
visible={visibleSidebars.left}
|
visible={visibleSidebars.left}
|
||||||
isMobile={isMobile}
|
isMobile={isMobile}
|
||||||
>
|
>
|
||||||
<div className='top-0 left-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
|
<IconLink
|
||||||
href={`/application/users/settings`}
|
href={`/application/users/settings`}
|
||||||
selected={path === `/application/users/settings`}
|
selected={path === `/application/users/settings`}
|
||||||
@ -215,7 +222,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
|
|||||||
id='application-page-content'
|
id='application-page-content'
|
||||||
onClick={handleCloseSidebars}
|
onClick={handleCloseSidebars}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'h-full-without-header 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':
|
'absolute opacity-20':
|
||||||
isMobile && (visibleSidebars.left || visibleSidebars.right)
|
isMobile && (visibleSidebars.left || visibleSidebars.right)
|
||||||
|
@ -1,20 +1,27 @@
|
|||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { Form } from 'react-component-form'
|
import { Form, useForm } from 'react-component-form'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
import classNames from 'clsx'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import type { HandleUseFormCallback } from 'react-component-form'
|
||||||
|
|
||||||
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
|
|
||||||
import { FormState } from '../../design/FormState'
|
import { FormState } from '../../design/FormState'
|
||||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||||
import { Input } from '../../design/Input'
|
import { Input } from '../../design/Input'
|
||||||
import { Button } from '../../design/Button'
|
import { Button } from '../../design/Button'
|
||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
import {
|
import type {
|
||||||
Channel,
|
Channel,
|
||||||
channelSchema,
|
|
||||||
ChannelWithDefaultChannelId
|
ChannelWithDefaultChannelId
|
||||||
} from '../../../models/Channel'
|
} from '../../../models/Channel'
|
||||||
|
import { channelSchema } from '../../../models/Channel'
|
||||||
|
import { ConfirmPopup } from '../ConfirmPopup'
|
||||||
|
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
name: channelSchema.name
|
||||||
|
}
|
||||||
|
|
||||||
export interface ChannelSettingsProps {
|
export interface ChannelSettingsProps {
|
||||||
channel: Channel
|
channel: Channel
|
||||||
@ -32,32 +39,32 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
|||||||
name: channel.name
|
name: channel.name
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [confirmation, setConfirmation] = useState(false)
|
||||||
|
|
||||||
|
const handleConfirmation = (): void => {
|
||||||
|
return setConfirmation(!confirmation)
|
||||||
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
handleUseForm,
|
||||||
fetchState,
|
fetchState,
|
||||||
message,
|
message,
|
||||||
errors,
|
errors,
|
||||||
getErrorTranslation,
|
|
||||||
handleSubmit,
|
|
||||||
setFetchState,
|
setFetchState,
|
||||||
setMessageTranslationKey
|
setMessage
|
||||||
} = useForm({
|
} = useForm(schema)
|
||||||
validateSchema: {
|
const { getFirstErrorTranslation } = useFormTranslation()
|
||||||
name: channelSchema.name
|
|
||||||
},
|
|
||||||
replaceEmptyStringToNull: true,
|
|
||||||
resetOnSuccess: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const onSubmit: HandleSubmitCallback = async (formData) => {
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
|
||||||
try {
|
try {
|
||||||
await authentication.api.put(`/channels/${channel.id}`, formData)
|
await authentication.api.put(`/channels/${channel.id}`, formData)
|
||||||
setInputValues(formData as any)
|
setInputValues(formData)
|
||||||
await router.push(`/application/${guild.id}/${channel.id}`)
|
await router.push(`/application/${guild.id}/${channel.id}`)
|
||||||
return null
|
return null
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -83,51 +90,68 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFetchState('error')
|
setFetchState('error')
|
||||||
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
||||||
setMessageTranslationKey('application:delete-channel-only-one')
|
setMessage('application:delete-channel-only-one')
|
||||||
} else {
|
} else {
|
||||||
setMessageTranslationKey('errors:server-error')
|
setMessage('errors:server-error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<>
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
<Form
|
||||||
className='my-auto flex flex-col items-center justify-center py-12'
|
onSubmit={handleUseForm(onSubmit)}
|
||||||
>
|
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='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
||||||
<div className='mx-12 flex flex-col'>
|
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
||||||
<Input
|
<div className='mx-12 flex flex-col'>
|
||||||
name='name'
|
<Input
|
||||||
label={t('common:name')}
|
name='name'
|
||||||
placeholder={t('common:name')}
|
label={t('common:name')}
|
||||||
className='!mt-0'
|
placeholder={t('common:name')}
|
||||||
onChange={onChange}
|
className='!mt-0'
|
||||||
value={inputValues.name}
|
onChange={onChange}
|
||||||
error={getErrorTranslation(errors.name)}
|
value={inputValues.name}
|
||||||
data-cy='channel-name-input'
|
error={getFirstErrorTranslation(errors.name)}
|
||||||
/>
|
data-cy='channel-name-input'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
||||||
<div className='space-x-6'>
|
<div className='space-x-6'>
|
||||||
<Button type='submit' data-cy='button-save-channel-settings'>
|
<Button type='submit' data-cy='button-save-channel-settings'>
|
||||||
{t('application:save')}
|
{t('application:save')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type='button'
|
type='button'
|
||||||
color='red'
|
color='red'
|
||||||
onClick={handleDelete}
|
onClick={handleConfirmation}
|
||||||
data-cy='button-delete-channel-settings'
|
data-cy='button-delete-channel-settings'
|
||||||
>
|
>
|
||||||
{t('application:delete')}
|
{t('application:delete')}
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
|
<FormState state={fetchState} message={message} />
|
||||||
</div>
|
</div>
|
||||||
<FormState state={fetchState} message={message} />
|
</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 }
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ConfirmPopup
|
||||||
|
className={classNames('relative top-8 transition-all', {
|
||||||
|
'!top-0': confirmation
|
||||||
|
})}
|
||||||
|
handleYes={handleDelete}
|
||||||
|
handleNo={handleConfirmation}
|
||||||
|
title={`${t('application:delete-the-channel')} ?`}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
54
components/Application/Channels/Channel.tsx
Normal file
54
components/Application/Channels/Channel.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
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'
|
||||||
|
|
||||||
|
export interface ChannelProps {
|
||||||
|
path: GuildsChannelsPath
|
||||||
|
channel: ChannelType
|
||||||
|
selected?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChannelMemo: React.FC<ChannelProps> = (props) => {
|
||||||
|
const { channel, path, selected = false } = props
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const { member } = useGuildMember()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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',
|
||||||
|
{
|
||||||
|
'font-semibold text-green-800 dark:text-green-400': selected
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<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`
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Channel = memo(ChannelMemo)
|
@ -1,55 +0,0 @@
|
|||||||
import classNames from 'classnames'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { CogIcon } from '@heroicons/react/solid'
|
|
||||||
|
|
||||||
import { GuildsChannelsPath } from '../../Application'
|
|
||||||
import { Channel as ChannelType } from '../../../../models/Channel'
|
|
||||||
import { useGuildMember } from '../../../../contexts/GuildMember'
|
|
||||||
import { IconButton } from '../../../design/IconButton'
|
|
||||||
|
|
||||||
export interface ChannelProps {
|
|
||||||
path: GuildsChannelsPath
|
|
||||||
channel: ChannelType
|
|
||||||
selected?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Channel: React.FC<ChannelProps> = (props) => {
|
|
||||||
const { channel, path, selected = false } = props
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const { member } = useGuildMember()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/application/${path.guildId}/${channel.id}`}>
|
|
||||||
<a
|
|
||||||
className={classNames(
|
|
||||||
'group relative my-3 mx-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
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<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`
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1 +0,0 @@
|
|||||||
export * from './Channel'
|
|
@ -1,7 +1,7 @@
|
|||||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||||
|
|
||||||
import { useChannels } from '../../../contexts/Channels'
|
import { useChannels } from '../../../contexts/Channels'
|
||||||
import { GuildsChannelsPath } from '../Application'
|
import type { GuildsChannelsPath } from '../Application'
|
||||||
import { Loader } from '../../design/Loader'
|
import { Loader } from '../../design/Loader'
|
||||||
import { Channel } from './Channel'
|
import { Channel } from './Channel'
|
||||||
|
|
||||||
|
@ -1 +0,0 @@
|
|||||||
export * from './ConfirmGuildJoin'
|
|
@ -1,33 +1,37 @@
|
|||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
|
|
||||||
import { Loader } from '../../design/Loader'
|
import { Loader } from '../../design/Loader'
|
||||||
|
|
||||||
export interface ConfirmGuildJoinProps {
|
export interface ConfirmPopupProps {
|
||||||
className?: string
|
className?: string
|
||||||
|
title: string
|
||||||
handleYes: () => void | Promise<void>
|
handleYes: () => void | Promise<void>
|
||||||
handleNo: () => void | Promise<void>
|
handleNo: () => void | Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
|
export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
|
||||||
...props
|
|
||||||
}) => {
|
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
const handleYesLoading = async (): Promise<void> => {
|
const handleYesLoading = async (): Promise<void> => {
|
||||||
setIsLoading((isLoading) => !isLoading)
|
setIsLoading((isLoading) => {
|
||||||
|
return !isLoading
|
||||||
|
})
|
||||||
await props.handleYes()
|
await props.handleYes()
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={props.className}>
|
<div className={props.className}>
|
||||||
<Loader
|
<Loader
|
||||||
className={classNames('absolute scale-0 transition', {
|
className={classNames(
|
||||||
'scale-100': isLoading
|
'absolute left-1/2 top-1/2 scale-0 transition-all',
|
||||||
})}
|
{
|
||||||
|
'scale-100': isLoading
|
||||||
|
}
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
@ -40,24 +44,24 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
|
|||||||
<Image
|
<Image
|
||||||
quality={100}
|
quality={100}
|
||||||
src='/images/svg/design/join-guild.svg'
|
src='/images/svg/design/join-guild.svg'
|
||||||
alt='Join Guild Illustration'
|
alt='Illustration'
|
||||||
height={150}
|
height={150}
|
||||||
width={150}
|
width={150}
|
||||||
/>
|
/>
|
||||||
<div className='mt-8 flex flex-col'>
|
<div className='mt-8 flex flex-col'>
|
||||||
<h1 className='mb-6 text-center text-xl'>
|
<h1 className='mb-6 text-center text-xl'>{props.title}</h1>
|
||||||
{t('application:join-the-guild')} ?
|
|
||||||
</h1>
|
|
||||||
<div className='flex gap-7'>
|
<div className='flex gap-7'>
|
||||||
<button
|
<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}
|
onClick={handleYesLoading}
|
||||||
|
data-cy='confirm-popup-yes-button'
|
||||||
>
|
>
|
||||||
{t('common:yes')}
|
{t('common:yes')}
|
||||||
</button>
|
</button>
|
||||||
<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}
|
onClick={props.handleNo}
|
||||||
|
data-cy='confirm-popup-no-button'
|
||||||
>
|
>
|
||||||
{t('common:no')}
|
{t('common:no')}
|
||||||
</button>
|
</button>
|
1
components/Application/ConfirmPopup/index.ts
Normal file
1
components/Application/ConfirmPopup/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './ConfirmPopup'
|
@ -1,32 +1,33 @@
|
|||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import { Form } from 'react-component-form'
|
import { Form, useForm } from 'react-component-form'
|
||||||
|
import type { HandleUseFormCallback } from 'react-component-form'
|
||||||
|
|
||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
|
|
||||||
import { Input } from '../../design/Input'
|
import { Input } from '../../design/Input'
|
||||||
import { Main } from '../../design/Main'
|
import { Main } from '../../design/Main'
|
||||||
import { Button } from '../../design/Button'
|
import { Button } from '../../design/Button'
|
||||||
import { FormState } from '../../design/FormState'
|
import { FormState } from '../../design/FormState'
|
||||||
import { Channel, channelSchema } from '../../../models/Channel'
|
import type { Channel } from '../../../models/Channel'
|
||||||
|
import { channelSchema } from '../../../models/Channel'
|
||||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||||
|
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
name: channelSchema.name
|
||||||
|
}
|
||||||
|
|
||||||
export const CreateChannel: React.FC = () => {
|
export const CreateChannel: React.FC = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { guild } = useGuildMember()
|
const { guild } = useGuildMember()
|
||||||
|
|
||||||
const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
|
const { handleUseForm, fetchState, message, errors } = useForm(schema)
|
||||||
useForm({
|
const { getFirstErrorTranslation } = useFormTranslation()
|
||||||
validateSchema: {
|
|
||||||
name: channelSchema.name
|
|
||||||
},
|
|
||||||
resetOnSuccess: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const { authentication } = useAuthentication()
|
const { authentication } = useAuthentication()
|
||||||
|
|
||||||
const onSubmit: HandleSubmitCallback = async (formData) => {
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
|
||||||
try {
|
try {
|
||||||
const { data: channel } = await authentication.api.post<Channel>(
|
const { data: channel } = await authentication.api.post<Channel>(
|
||||||
`/guilds/${guild.id}/channels`,
|
`/guilds/${guild.id}/channels`,
|
||||||
@ -37,20 +38,20 @@ export const CreateChannel: React.FC = () => {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Main>
|
<Main>
|
||||||
<Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
|
<Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
|
||||||
<Input
|
<Input
|
||||||
type='text'
|
type='text'
|
||||||
placeholder={t('common:name')}
|
placeholder={t('common:name')}
|
||||||
name='name'
|
name='name'
|
||||||
label={t('common:name')}
|
label={t('common:name')}
|
||||||
error={getErrorTranslation(errors.name)}
|
error={getFirstErrorTranslation(errors.name)}
|
||||||
data-cy='channel-name-input'
|
data-cy='channel-name-input'
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
@ -1,59 +1,64 @@
|
|||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import { Form } from 'react-component-form'
|
import { Form, useForm } from 'react-component-form'
|
||||||
import { AxiosResponse } from 'axios'
|
import type { AxiosResponse } from 'axios'
|
||||||
|
import type { HandleUseFormCallback } from 'react-component-form'
|
||||||
|
|
||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
|
import type { GuildComplete } from '../../../models/Guild'
|
||||||
import { GuildComplete, guildSchema } from '../../../models/Guild'
|
import { guildSchema } from '../../../models/Guild'
|
||||||
import { Input } from '../../design/Input'
|
import { Input } from '../../design/Input'
|
||||||
import { Main } from '../../design/Main'
|
import { Main } from '../../design/Main'
|
||||||
import { Button } from '../../design/Button'
|
import { Button } from '../../design/Button'
|
||||||
import { FormState } from '../../design/FormState'
|
import { FormState } from '../../design/FormState'
|
||||||
import { Textarea } from '../../design/Textarea'
|
import { Textarea } from '../../design/Textarea'
|
||||||
|
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
name: guildSchema.name,
|
||||||
|
description: guildSchema.description
|
||||||
|
}
|
||||||
|
|
||||||
export const CreateGuild: React.FC = () => {
|
export const CreateGuild: React.FC = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
|
const { handleUseForm, fetchState, message, errors } = useForm(schema)
|
||||||
useForm({
|
const { getFirstErrorTranslation } = useFormTranslation()
|
||||||
validateSchema: {
|
|
||||||
name: guildSchema.name,
|
|
||||||
description: guildSchema.description
|
|
||||||
},
|
|
||||||
resetOnSuccess: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const { authentication } = useAuthentication()
|
const { authentication } = useAuthentication()
|
||||||
|
|
||||||
const onSubmit: HandleSubmitCallback = async (formData) => {
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
|
||||||
try {
|
try {
|
||||||
const { data } = await authentication.api.post<
|
const { data } = await authentication.api.post<
|
||||||
any,
|
any,
|
||||||
AxiosResponse<{ guild: GuildComplete }>
|
AxiosResponse<{ guild: GuildComplete }>
|
||||||
>('/guilds', { name: formData.name, description: formData.description })
|
>('/guilds', { name: formData.name, description: formData.description })
|
||||||
const guildId = data.guild.id
|
const guildId = data.guild.id
|
||||||
const channelId = data.guild.channels[0].id
|
const channel = data.guild.channels[0]
|
||||||
|
if (channel == null) {
|
||||||
|
throw new Error('No channel found')
|
||||||
|
}
|
||||||
|
const channelId = channel.id
|
||||||
await router.push(`/application/${guildId}/${channelId}`)
|
await router.push(`/application/${guildId}/${channelId}`)
|
||||||
return null
|
return null
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Main>
|
<Main>
|
||||||
<Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
|
<Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
|
||||||
<Input
|
<Input
|
||||||
type='text'
|
type='text'
|
||||||
placeholder={t('common:name')}
|
placeholder={t('common:name')}
|
||||||
name='name'
|
name='name'
|
||||||
label={t('common:name')}
|
label={t('common:name')}
|
||||||
error={getErrorTranslation(errors.name)}
|
error={getFirstErrorTranslation(errors.name)}
|
||||||
/>
|
/>
|
||||||
<Textarea
|
<Textarea
|
||||||
label='Description'
|
label='Description'
|
||||||
@ -64,7 +69,11 @@ export const CreateGuild: React.FC = () => {
|
|||||||
{t('application:create')}
|
{t('application:create')}
|
||||||
</Button>
|
</Button>
|
||||||
</Form>
|
</Form>
|
||||||
<FormState id='message' state={fetchState} message={message} />
|
<FormState
|
||||||
|
id='message'
|
||||||
|
state={fetchState}
|
||||||
|
message={message != null ? t(message) : undefined}
|
||||||
|
/>
|
||||||
</Main>
|
</Main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@ import { useGuildMember } from '../../../contexts/GuildMember'
|
|||||||
import { Divider } from '../../design/Divider'
|
import { Divider } from '../../design/Divider'
|
||||||
import { Channels } from '../Channels'
|
import { Channels } from '../Channels'
|
||||||
import { IconButton } from '../../design/IconButton'
|
import { IconButton } from '../../design/IconButton'
|
||||||
import { GuildsChannelsPath } from '..'
|
import type { GuildsChannelsPath } from '..'
|
||||||
|
|
||||||
export interface GuildLeftSidebarProps {
|
export interface GuildLeftSidebarProps {
|
||||||
path: GuildsChannelsPath
|
path: GuildsChannelsPath
|
||||||
@ -28,20 +28,24 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
|
|||||||
<Divider />
|
<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 && (
|
{member.isOwner && (
|
||||||
<Link href={`/application/${path.guildId}/channels/create`} passHref>
|
<Link
|
||||||
<a data-cy='link-add-channel'>
|
href={`/application/${path.guildId}/channels/create`}
|
||||||
<IconButton className='h-10 w-10' title='Add a Channel'>
|
passHref
|
||||||
<PlusIcon />
|
data-cy='link-add-channel'
|
||||||
</IconButton>
|
>
|
||||||
</a>
|
<IconButton className='h-10 w-10' title='Add a Channel'>
|
||||||
|
<PlusIcon />
|
||||||
|
</IconButton>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
<Link href={`/application/${path.guildId}/settings`} passHref>
|
<Link
|
||||||
<a data-cy='link-settings-guild'>
|
href={`/application/${path.guildId}/settings`}
|
||||||
<IconButton className='h-7 w-7' title='Settings'>
|
passHref
|
||||||
<CogIcon />
|
data-cy='link-settings-guild'
|
||||||
</IconButton>
|
>
|
||||||
</a>
|
<IconButton className='h-7 w-7' title='Settings'>
|
||||||
|
<CogIcon />
|
||||||
|
</IconButton>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,10 +3,11 @@ import { useRouter } from 'next/router'
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { Type } from '@sinclair/typebox'
|
import { Type } from '@sinclair/typebox'
|
||||||
import { PhotographIcon } from '@heroicons/react/solid'
|
import { PhotographIcon } from '@heroicons/react/solid'
|
||||||
import { Form } from 'react-component-form'
|
import { Form, useForm } from 'react-component-form'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
import classNames from 'clsx'
|
||||||
|
import type { HandleUseFormCallback } from 'react-component-form'
|
||||||
|
|
||||||
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
|
|
||||||
import { guildSchema } from '../../../models/Guild'
|
import { guildSchema } from '../../../models/Guild'
|
||||||
import { FormState } from '../../design/FormState'
|
import { FormState } from '../../design/FormState'
|
||||||
import { useGuildMember } from '../../../contexts/GuildMember'
|
import { useGuildMember } from '../../../contexts/GuildMember'
|
||||||
@ -14,6 +15,13 @@ import { Textarea } from '../../design/Textarea'
|
|||||||
import { Input } from '../../design/Input'
|
import { Input } from '../../design/Input'
|
||||||
import { Button } from '../../design/Button'
|
import { Button } from '../../design/Button'
|
||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
|
import { ConfirmPopup } from '../ConfirmPopup'
|
||||||
|
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
name: guildSchema.name,
|
||||||
|
description: Type.Optional(guildSchema.description)
|
||||||
|
}
|
||||||
|
|
||||||
export const GuildSettings: React.FC = () => {
|
export const GuildSettings: React.FC = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
@ -26,35 +34,34 @@ export const GuildSettings: React.FC = () => {
|
|||||||
description: guild.description
|
description: guild.description
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [confirmation, setConfirmation] = useState(false)
|
||||||
|
|
||||||
|
const handleConfirmation = (): void => {
|
||||||
|
return setConfirmation(!confirmation)
|
||||||
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
handleUseForm,
|
||||||
fetchState,
|
fetchState,
|
||||||
message,
|
message,
|
||||||
errors,
|
errors,
|
||||||
getErrorTranslation,
|
|
||||||
handleSubmit,
|
|
||||||
setFetchState,
|
setFetchState,
|
||||||
setMessageTranslationKey
|
setMessage
|
||||||
} = useForm({
|
} = useForm(schema)
|
||||||
validateSchema: {
|
const { getFirstErrorTranslation } = useFormTranslation()
|
||||||
name: guildSchema.name,
|
|
||||||
description: Type.Optional(guildSchema.description)
|
|
||||||
},
|
|
||||||
replaceEmptyStringToNull: true,
|
|
||||||
resetOnSuccess: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const onSubmit: HandleSubmitCallback = async (formData) => {
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
|
||||||
try {
|
try {
|
||||||
await authentication.api.put(`/guilds/${guild.id}`, formData)
|
await authentication.api.put(`/guilds/${guild.id}`, formData)
|
||||||
setInputValues(formData as any)
|
setInputValues(formData as unknown as any)
|
||||||
return {
|
return {
|
||||||
type: 'success',
|
type: 'success',
|
||||||
value: 'application:saved-information'
|
message: 'application:saved-information'
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -75,7 +82,7 @@ export const GuildSettings: React.FC = () => {
|
|||||||
) => {
|
) => {
|
||||||
setFetchState('loading')
|
setFetchState('loading')
|
||||||
const files = event?.target?.files
|
const files = event?.target?.files
|
||||||
if (files != null && files.length === 1) {
|
if (files != null && files.length === 1 && files[0] != null) {
|
||||||
const file = files[0]
|
const file = files[0]
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('icon', file)
|
formData.append('icon', file)
|
||||||
@ -84,7 +91,7 @@ export const GuildSettings: React.FC = () => {
|
|||||||
setFetchState('idle')
|
setFetchState('idle')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFetchState('error')
|
setFetchState('error')
|
||||||
setMessageTranslationKey('errors:server-error')
|
setMessage('errors:server-error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -94,7 +101,7 @@ export const GuildSettings: React.FC = () => {
|
|||||||
await authentication.api.delete(`/guilds/${guild.id}`)
|
await authentication.api.delete(`/guilds/${guild.id}`)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFetchState('error')
|
setFetchState('error')
|
||||||
setMessageTranslationKey('errors:server-error')
|
setMessage('errors:server-error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -104,100 +111,121 @@ export const GuildSettings: React.FC = () => {
|
|||||||
await router.push('/application')
|
await router.push('/application')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFetchState('error')
|
setFetchState('error')
|
||||||
setMessageTranslationKey('errors:server-error')
|
setMessage('errors:server-error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<>
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
<Form
|
||||||
className='my-auto flex flex-col items-center justify-center py-12'
|
onSubmit={handleUseForm(onSubmit)}
|
||||||
>
|
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'>
|
{member.isOwner && (
|
||||||
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
||||||
<div className='relative'>
|
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
||||||
<div className='absolute z-50 h-full w-full'>
|
<div className='relative'>
|
||||||
<button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
|
<div className='absolute z-50 h-full w-full'>
|
||||||
<input
|
<button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
|
||||||
type='file'
|
<input
|
||||||
className='absolute h-full w-full cursor-pointer opacity-0'
|
type='file'
|
||||||
onChange={handleFileChange}
|
className='absolute h-full w-full cursor-pointer opacity-0'
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
<PhotographIcon color='white' className='h-8 w-8' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
|
||||||
|
<Image
|
||||||
|
quality={100}
|
||||||
|
className='rounded-full opacity-50'
|
||||||
|
src={
|
||||||
|
guild.icon == null
|
||||||
|
? '/images/data/guild-default.png'
|
||||||
|
: guild.icon
|
||||||
|
}
|
||||||
|
alt='Profil Picture'
|
||||||
|
draggable='false'
|
||||||
|
height={125}
|
||||||
|
width={125}
|
||||||
/>
|
/>
|
||||||
<PhotographIcon color='white' className='h-8 w-8' />
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
|
<div className='mx-12 flex flex-col'>
|
||||||
<Image
|
<Input
|
||||||
quality={100}
|
name='name'
|
||||||
className='rounded-full opacity-50'
|
label={t('common:name')}
|
||||||
src={
|
placeholder={t('common:name')}
|
||||||
guild.icon == null
|
className='!mt-0'
|
||||||
? '/images/data/guild-default.png'
|
onChange={onChange}
|
||||||
: guild.icon
|
value={inputValues.name}
|
||||||
}
|
error={getFirstErrorTranslation(errors.name)}
|
||||||
alt='Profil Picture'
|
data-cy='guild-name-input'
|
||||||
draggable='false'
|
/>
|
||||||
height={125}
|
<Textarea
|
||||||
width={125}
|
name='description'
|
||||||
|
label={'Description'}
|
||||||
|
placeholder={'Description'}
|
||||||
|
id='textarea-description'
|
||||||
|
onChange={onChange}
|
||||||
|
value={inputValues.description ?? ''}
|
||||||
|
data-cy='guild-description-input'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='mx-12 flex flex-col'>
|
|
||||||
<Input
|
|
||||||
name='name'
|
|
||||||
label={t('common:name')}
|
|
||||||
placeholder={t('common:name')}
|
|
||||||
className='!mt-0'
|
|
||||||
onChange={onChange}
|
|
||||||
value={inputValues.name}
|
|
||||||
error={getErrorTranslation(errors.name)}
|
|
||||||
data-cy='guild-name-input'
|
|
||||||
/>
|
|
||||||
<Textarea
|
|
||||||
name='description'
|
|
||||||
label={'Description'}
|
|
||||||
placeholder={'Description'}
|
|
||||||
id='textarea-description'
|
|
||||||
onChange={onChange}
|
|
||||||
value={inputValues.description ?? ''}
|
|
||||||
data-cy='guild-description-input'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
||||||
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
<div className='space-x-6'>
|
||||||
<div className='space-x-6'>
|
{member.isOwner ? (
|
||||||
{member.isOwner ? (
|
<>
|
||||||
<>
|
<Button type='submit' data-cy='button-save-guild-settings'>
|
||||||
<Button type='submit' data-cy='button-save-guild-settings'>
|
{t('application:save')}
|
||||||
{t('application:save')}
|
</Button>
|
||||||
</Button>
|
<Button
|
||||||
|
type='button'
|
||||||
|
color='red'
|
||||||
|
onClick={handleConfirmation}
|
||||||
|
data-cy='button-delete-guild-settings'
|
||||||
|
>
|
||||||
|
{t('application:delete')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
<Button
|
<Button
|
||||||
type='button'
|
|
||||||
color='red'
|
color='red'
|
||||||
onClick={handleDelete}
|
onClick={handleLeave}
|
||||||
data-cy='button-delete-guild-settings'
|
data-cy='button-leave-guild-settings'
|
||||||
>
|
>
|
||||||
{t('application:delete')}
|
{t('application:leave')} {guild.name}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
)}
|
||||||
) : (
|
</div>
|
||||||
<Button
|
<FormState
|
||||||
color='red'
|
state={fetchState}
|
||||||
onClick={handleLeave}
|
message={
|
||||||
data-cy='button-leave-guild-settings'
|
message != null
|
||||||
>
|
? t(message)
|
||||||
{t('application:leave')} {guild.name}
|
: getFirstErrorTranslation(errors.name)
|
||||||
</Button>
|
}
|
||||||
)}
|
/>
|
||||||
</div>
|
</div>
|
||||||
<FormState
|
</Form>
|
||||||
state={fetchState}
|
<div
|
||||||
message={getErrorTranslation(errors.description) ?? message}
|
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 }
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ConfirmPopup
|
||||||
|
className={classNames('relative top-8 transition-all', {
|
||||||
|
'!top-0': confirmation
|
||||||
|
})}
|
||||||
|
handleYes={handleDelete}
|
||||||
|
handleNo={handleConfirmation}
|
||||||
|
title={`${t('application:delete-the-guild')} ?`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,15 @@
|
|||||||
|
import { memo } from 'react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
|
||||||
import { GuildWithDefaultChannelId } from '../../../../models/Guild'
|
import type { GuildWithDefaultChannelId } from '../../../models/Guild'
|
||||||
import { IconLink } from '../../../design/IconLink'
|
import { IconLink } from '../../design/IconLink'
|
||||||
|
|
||||||
export interface GuildProps {
|
export interface GuildProps {
|
||||||
guild: GuildWithDefaultChannelId
|
guild: GuildWithDefaultChannelId
|
||||||
selected?: boolean
|
selected?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Guild: React.FC<GuildProps> = (props) => {
|
const GuildMemo: React.FC<GuildProps> = (props) => {
|
||||||
const { guild, selected } = props
|
const { guild, selected } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -34,3 +35,5 @@ export const Guild: React.FC<GuildProps> = (props) => {
|
|||||||
</IconLink>
|
</IconLink>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const Guild = memo(GuildMemo)
|
@ -1,18 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Guild } from './Guild'
|
|
||||||
import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
|
|
||||||
|
|
||||||
describe('<Guild />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(
|
|
||||||
<Guild
|
|
||||||
guild={{
|
|
||||||
...guildExample,
|
|
||||||
defaultChannelId: 1
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1 +0,0 @@
|
|||||||
export * from './Guild'
|
|
@ -2,7 +2,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
|
|||||||
|
|
||||||
import { Loader } from '../../design/Loader'
|
import { Loader } from '../../design/Loader'
|
||||||
import { useGuilds } from '../../../contexts/Guilds'
|
import { useGuilds } from '../../../contexts/Guilds'
|
||||||
import { GuildsPath } from '..'
|
import type { GuildsPath } from '..'
|
||||||
import { Guild } from './Guild'
|
import { Guild } from './Guild'
|
||||||
|
|
||||||
export interface GuildsProps {
|
export interface GuildsProps {
|
||||||
|
@ -2,16 +2,16 @@ import Image from 'next/image'
|
|||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
import { Emoji } from '../../../Emoji'
|
import { Emoji } from '../../Emoji'
|
||||||
import { ConfirmGuildJoin } from '../../ConfirmGuildJoin'
|
import { ConfirmPopup } from '../ConfirmPopup'
|
||||||
import {
|
import type {
|
||||||
GuildPublic as GuildPublicType,
|
GuildPublic as GuildPublicType,
|
||||||
GuildWithDefaultChannelId
|
GuildWithDefaultChannelId
|
||||||
} from '../../../../models/Guild'
|
} from '../../../models/Guild'
|
||||||
import { useAuthentication } from '../../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
|
|
||||||
export interface GuildPublicProps {
|
export interface GuildPublicProps {
|
||||||
guild: GuildPublicType
|
guild: GuildPublicType
|
||||||
@ -25,7 +25,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
|||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const handleIsConfirmed = (): void => {
|
const handleIsConfirmed = (): void => {
|
||||||
setIsConfirmed((isConfirmed) => !isConfirmed)
|
setIsConfirmed((isConfirmed) => {
|
||||||
|
return !isConfirmed
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleYes = async (): Promise<void> => {
|
const handleYes = async (): Promise<void> => {
|
||||||
@ -40,7 +42,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
|||||||
if (
|
if (
|
||||||
axios.isAxiosError(error) &&
|
axios.isAxiosError(error) &&
|
||||||
error.response?.status === 400 &&
|
error.response?.status === 400 &&
|
||||||
typeof error.response?.data.defaultChannelId === 'number'
|
typeof error?.response?.data.defaultChannelId === 'number'
|
||||||
) {
|
) {
|
||||||
const defaultChannelId = error.response.data.defaultChannelId as number
|
const defaultChannelId = error.response.data.defaultChannelId as number
|
||||||
await router.push(`/application/${guild.id}/${defaultChannelId}`)
|
await router.push(`/application/${guild.id}/${defaultChannelId}`)
|
||||||
@ -91,9 +93,10 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
|||||||
{guild.membersCount} {t('application:members')}
|
{guild.membersCount} {t('application:members')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<ConfirmGuildJoin
|
<ConfirmPopup
|
||||||
|
title={`${t('application:join-the-guild')} ?`}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'w-ful h-ful translate-x- absolute top-1/2 left-full 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
|
||||||
}
|
}
|
@ -1 +0,0 @@
|
|||||||
export * from './GuildPublic'
|
|
@ -3,11 +3,12 @@ import { useEffect, useState } from 'react'
|
|||||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||||
|
|
||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
import { GuildPublic as GuildPublicType } from '../../../models/Guild'
|
import type { GuildPublic as GuildPublicType } from '../../../models/Guild'
|
||||||
import { Loader } from '../../design/Loader'
|
import { Loader } from '../../design/Loader'
|
||||||
import { GuildPublic } from './GuildPublic'
|
import { GuildPublic } from './GuildPublic'
|
||||||
import { usePagination } from '../../../hooks/usePagination'
|
import { usePagination } from '../../../hooks/usePagination'
|
||||||
import { SocketData, handleSocketData } from '../../../tools/handleSocketData'
|
import type { SocketData } from '../../../tools/handleSocketData'
|
||||||
|
import { handleSocketData } from '../../../tools/handleSocketData'
|
||||||
|
|
||||||
export const JoinGuildsPublic: React.FC = () => {
|
export const JoinGuildsPublic: React.FC = () => {
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
@ -22,12 +23,15 @@ export const JoinGuildsPublic: React.FC = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
authentication.socket.on('guilds', (data: SocketData<GuildPublicType>) => {
|
authentication?.socket?.on(
|
||||||
handleSocketData({ data, setItems })
|
'guilds',
|
||||||
})
|
(data: SocketData<GuildPublicType>) => {
|
||||||
|
handleSocketData({ data, setItems })
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
authentication.socket.off('guilds')
|
authentication?.socket?.off('guilds')
|
||||||
}
|
}
|
||||||
}, [authentication.socket, setItems])
|
}, [authentication.socket, setItems])
|
||||||
|
|
||||||
@ -45,7 +49,7 @@ export const JoinGuildsPublic: React.FC = () => {
|
|||||||
<input
|
<input
|
||||||
data-cy='search-guild-input'
|
data-cy='search-guild-input'
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className='my-6 mx-auto 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'
|
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'
|
type='search'
|
||||||
name='search-guild'
|
name='search-guild'
|
||||||
placeholder={`🔎 ${t('application:search')}...`}
|
placeholder={`🔎 ${t('application:search')}...`}
|
||||||
|
48
components/Application/Members/Member.tsx
Normal file
48
components/Application/Members/Member.tsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import { memo } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
import type { MemberWithPublicUser } from '../../../models/Member'
|
||||||
|
import { Emoji } from '../../Emoji'
|
||||||
|
|
||||||
|
export interface MemberProps {
|
||||||
|
member: MemberWithPublicUser
|
||||||
|
}
|
||||||
|
|
||||||
|
const MemberMemo: React.FC<MemberProps> = (props) => {
|
||||||
|
const { member } = 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'>
|
||||||
|
<Image
|
||||||
|
src={
|
||||||
|
member.user.logo == null
|
||||||
|
? '/images/data/user-default.png'
|
||||||
|
: member.user.logo
|
||||||
|
}
|
||||||
|
alt={"Users's profil picture"}
|
||||||
|
height={50}
|
||||||
|
width={50}
|
||||||
|
draggable={false}
|
||||||
|
className='rounded-full'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{member.user.status != null && member.user.status}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Member = memo(MemberMemo)
|
@ -1,11 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Member } from './Member'
|
|
||||||
import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
|
|
||||||
|
|
||||||
describe('<Member />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(<Member member={memberExampleComplete} />)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,41 +0,0 @@
|
|||||||
import Image from 'next/image'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
import { MemberWithPublicUser } from '../../../../models/Member'
|
|
||||||
|
|
||||||
export interface MemberProps {
|
|
||||||
member: MemberWithPublicUser
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Member: React.FC<MemberProps> = (props) => {
|
|
||||||
const { member } = props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/application/users/${member.user.id}`}>
|
|
||||||
<a>
|
|
||||||
<div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 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'
|
|
||||||
: member.user.logo
|
|
||||||
}
|
|
||||||
alt={"Users's profil picture"}
|
|
||||||
height={50}
|
|
||||||
width={50}
|
|
||||||
draggable={false}
|
|
||||||
className='rounded-full'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='ml-5'>
|
|
||||||
<p data-cy='member-user-name' className='truncate font-bold'>
|
|
||||||
{member.user.name}
|
|
||||||
</p>
|
|
||||||
{member.user.status != null && member.user.status}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1 +0,0 @@
|
|||||||
export * from './Member'
|
|
@ -0,0 +1,48 @@
|
|||||||
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
import TextareaAutosize from 'react-textarea-autosize'
|
||||||
|
|
||||||
|
import type { MessageProps } from '../Message'
|
||||||
|
|
||||||
|
export interface EditMessageProps extends MessageProps {
|
||||||
|
handleEdit: () => Promise<void>
|
||||||
|
handleKeyDown: React.KeyboardEventHandler<HTMLFormElement>
|
||||||
|
textareaRef: React.RefObject<HTMLTextAreaElement>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EditMessage: React.FC<
|
||||||
|
React.PropsWithChildren<EditMessageProps>
|
||||||
|
> = ({ handleEdit, handleKeyDown, textareaRef, message }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
|
||||||
|
event
|
||||||
|
) => {
|
||||||
|
event.preventDefault()
|
||||||
|
await handleEdit()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
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'
|
||||||
|
maxRows={6}
|
||||||
|
name='message'
|
||||||
|
defaultValue={message.value}
|
||||||
|
ref={textareaRef}
|
||||||
|
autoFocus
|
||||||
|
onFocus={(event) => {
|
||||||
|
event.currentTarget.setSelectionRange(
|
||||||
|
event.currentTarget.value.length,
|
||||||
|
event.currentTarget.value.length
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1 @@
|
|||||||
|
export * from './EditMessage'
|
@ -1,11 +1,15 @@
|
|||||||
|
import { useState, useRef } from 'react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import date from 'date-and-time'
|
import date from 'date-and-time'
|
||||||
|
|
||||||
import { MessageWithMember } from '../../../../models/Message'
|
import type { MessageWithMember } from '../../../../models/Message'
|
||||||
import { MessageText } from './MessageText'
|
import { MessageText } from './MessageText'
|
||||||
import { Loader } from '../../../design/Loader'
|
import { Loader } from '../../../design/Loader'
|
||||||
import { MessageFile } from './MessageFile'
|
import { MessageFile } from './MessageFile'
|
||||||
|
import { useAuthentication } from '../../../../tools/authentication'
|
||||||
|
import { MessageOptions } from './MessageOptions'
|
||||||
|
import { EditMessage } from './EditMessage'
|
||||||
|
|
||||||
export interface MessageProps {
|
export interface MessageProps {
|
||||||
message: MessageWithMember
|
message: MessageWithMember
|
||||||
@ -14,43 +18,76 @@ export interface MessageProps {
|
|||||||
export const Message: React.FC<MessageProps> = (props) => {
|
export const Message: React.FC<MessageProps> = (props) => {
|
||||||
const { message } = props
|
const { message } = props
|
||||||
|
|
||||||
|
const textareaReference = useRef<HTMLTextAreaElement>(null)
|
||||||
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
|
const { authentication, user } = useAuthentication()
|
||||||
|
|
||||||
|
const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
|
||||||
|
event
|
||||||
|
) => {
|
||||||
|
if (event.key === 'Enter' && !event.shiftKey) {
|
||||||
|
event.preventDefault()
|
||||||
|
event.currentTarget.dispatchEvent(
|
||||||
|
new Event('submit', { cancelable: true, bubbles: true })
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = async (): Promise<void> => {
|
||||||
|
const newMessage = textareaReference.current?.value ?? message.value
|
||||||
|
if (
|
||||||
|
typeof newMessage === 'string' &&
|
||||||
|
newMessage.length > 0 &&
|
||||||
|
newMessage !== message.value
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
await authentication.api.put(`/messages/${message.id}`, {
|
||||||
|
value: newMessage
|
||||||
|
})
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
handleEditMode()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditMode = (): void => {
|
||||||
|
setIsEditing((oldIsEditing) => {
|
||||||
|
return !oldIsEditing
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className='flex p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
|
|
||||||
data-cy={`message-${message.id}`}
|
data-cy={`message-${message.id}`}
|
||||||
|
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}`}>
|
<Link href={`/application/users/${message.member.user.id}`}>
|
||||||
<a>
|
<div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
|
||||||
<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='h-10 w-10 drop-shadow-md'>
|
<Image
|
||||||
<Image
|
quality={100}
|
||||||
quality={100}
|
className='rounded-full'
|
||||||
className='rounded-full'
|
src={
|
||||||
src={
|
message.member.user.logo == null
|
||||||
message.member.user.logo == null
|
? '/images/data/user-default.png'
|
||||||
? '/images/data/user-default.png'
|
: message.member.user.logo
|
||||||
: message.member.user.logo
|
}
|
||||||
}
|
alt={"Users's profil picture"}
|
||||||
alt={"Users's profil picture"}
|
width={50}
|
||||||
width={50}
|
height={50}
|
||||||
height={50}
|
draggable={false}
|
||||||
draggable={false}
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
<div className='w-full'>
|
<div className='relative w-full whitespace-pre-wrap break-words break-all'>
|
||||||
<div className='flex w-max items-center'>
|
<div className='flex w-max items-center'>
|
||||||
<Link href={`/application/users/${message.member.user.id}`}>
|
<Link href={`/application/users/${message.member.user.id}`}>
|
||||||
<a>
|
<span
|
||||||
<span
|
data-cy='message-member-user-name'
|
||||||
data-cy='message-member-user-name'
|
className='font-bold text-gray-900 dark:text-gray-200'
|
||||||
className='font-bold text-gray-900 dark:text-gray-200'
|
>
|
||||||
>
|
{message.member.user.name}
|
||||||
{message.member.user.name}
|
</span>
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</Link>
|
</Link>
|
||||||
<span
|
<span
|
||||||
data-cy='message-date'
|
data-cy='message-date'
|
||||||
@ -59,8 +96,28 @@ export const Message: React.FC<MessageProps> = (props) => {
|
|||||||
{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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{message.member.userId === user.id && (
|
||||||
|
<MessageOptions
|
||||||
|
message={message}
|
||||||
|
editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
|
||||||
|
handleEdit={isEditing ? handleEdit : handleEditMode}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{message.type === 'text' ? (
|
{message.type === 'text' ? (
|
||||||
<MessageText message={message} />
|
<>
|
||||||
|
{isEditing ? (
|
||||||
|
<EditMessage
|
||||||
|
message={message}
|
||||||
|
textareaRef={textareaReference}
|
||||||
|
handleEdit={handleEdit}
|
||||||
|
handleKeyDown={handleTextareaKeyDown}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<MessageText message={message} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
) : message.type === 'file' ? (
|
) : message.type === 'file' ? (
|
||||||
<MessageFile message={message} />
|
<MessageFile message={message} />
|
||||||
) : (
|
) : (
|
||||||
|
@ -3,7 +3,7 @@ import axios from 'axios'
|
|||||||
import prettyBytes from 'pretty-bytes'
|
import prettyBytes from 'pretty-bytes'
|
||||||
import { DownloadIcon } from '@heroicons/react/solid'
|
import { DownloadIcon } from '@heroicons/react/solid'
|
||||||
|
|
||||||
import { MessageWithMember } from '../../../../../models/Message'
|
import type { MessageWithMember } from '../../../../../models/Message'
|
||||||
import { Loader } from '../../../../design/Loader'
|
import { Loader } from '../../../../design/Loader'
|
||||||
import { FileIcon } from './FileIcon'
|
import { FileIcon } from './FileIcon'
|
||||||
import { api } from '../../../../../tools/api'
|
import { api } from '../../../../../tools/api'
|
||||||
|
@ -0,0 +1,44 @@
|
|||||||
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
|
||||||
|
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:'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MessageOptions: React.FC<
|
||||||
|
React.PropsWithChildren<MessageOptionsProps>
|
||||||
|
> = ({ handleEdit, editMode, message }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { authentication } = useAuthentication()
|
||||||
|
|
||||||
|
const handleDeleteMessage = async (): Promise<void> => {
|
||||||
|
try {
|
||||||
|
await authentication.api.delete(`/messages/${message.id}`)
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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')}
|
||||||
|
onClick={handleEdit}
|
||||||
|
>
|
||||||
|
<Emoji value={editMode} size={18} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className='message-options rounded-r-lg border-r-slate-600'
|
||||||
|
title={t('application:delete')}
|
||||||
|
onClick={handleDeleteMessage}
|
||||||
|
>
|
||||||
|
<Emoji value=':wastebasket:' size={18} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1 @@
|
|||||||
|
export * from './MessageOptions'
|
@ -4,11 +4,13 @@ import gfm from 'remark-gfm'
|
|||||||
import remarkBreaks from 'remark-breaks'
|
import remarkBreaks from 'remark-breaks'
|
||||||
import remarkMath from 'remark-math'
|
import remarkMath from 'remark-math'
|
||||||
import rehypeKatex from 'rehype-katex'
|
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 { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
|
||||||
import { MessageWithMember } from '../../../../../models/Message'
|
import type { MessageWithMember } from '../../../../../models/Message'
|
||||||
|
|
||||||
export interface MessageContentProps {
|
export interface MessageContentProps {
|
||||||
message: MessageWithMember
|
message: MessageWithMember
|
||||||
@ -25,7 +27,7 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
<Emoji value={message.value} size={40} />
|
<Emoji value={message.value} size={40} tooltip />
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -39,8 +41,34 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
|
|||||||
rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
|
rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
|
||||||
linkTarget='_blank'
|
linkTarget='_blank'
|
||||||
components={{
|
components={{
|
||||||
|
a: (props) => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
className='text-green-800 hover:underline dark:text-green-400'
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
emoji: (props) => {
|
emoji: (props) => {
|
||||||
return <Emoji value={props.value} size={20} />
|
return <Emoji value={props.value} size={20} tooltip />
|
||||||
|
},
|
||||||
|
code: (properties) => {
|
||||||
|
const { inline, className, children, ...props } = properties
|
||||||
|
const match = /language-(\w+)/.exec(className ?? '')
|
||||||
|
return !(inline as boolean) && match != null ? (
|
||||||
|
<SyntaxHighlighter
|
||||||
|
style={vscDarkPlus as any}
|
||||||
|
language={match[1]}
|
||||||
|
PreTag='div'
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{String(children).replace(/\n$/, '')}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
) : (
|
||||||
|
<code className={className} {...props}>
|
||||||
|
{children}
|
||||||
|
</code>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { PopupGuild } from './PopupGuild'
|
|
||||||
|
|
||||||
describe('<PopupGuild />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(<PopupGuild />)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,9 +1,10 @@
|
|||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
|
import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
|
||||||
import { PopupGuildCard } from './PopupGuildCard/PopupGuildCard'
|
import { PopupGuildCard } from './PopupGuildCard'
|
||||||
|
|
||||||
export interface PopupGuildProps {
|
export interface PopupGuildProps {
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
@ -23,11 +23,12 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
|
|||||||
<p className='mt-6 px-8 text-center text-sm text-gray-200'>
|
<p className='mt-6 px-8 text-center text-sm text-gray-200'>
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
<Link href={link.href}>
|
<Link
|
||||||
<a 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'>
|
href={link.href}
|
||||||
{link.icon}
|
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.text}
|
>
|
||||||
</a>
|
{link.icon}
|
||||||
|
{link.text}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,30 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
import { PlusSmIcon } from '@heroicons/react/solid'
|
|
||||||
import Image from 'next/image'
|
|
||||||
|
|
||||||
import { PopupGuildCard } from './PopupGuildCard'
|
|
||||||
|
|
||||||
describe('<PopupGuildCard />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(
|
|
||||||
<PopupGuildCard
|
|
||||||
image={
|
|
||||||
<Image
|
|
||||||
quality={100}
|
|
||||||
src='/images/svg/design/create-server.svg'
|
|
||||||
alt=''
|
|
||||||
width={230}
|
|
||||||
height={230}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
description='Create your own guild and manage everything within a few clicks !'
|
|
||||||
link={{
|
|
||||||
icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
|
|
||||||
text: 'Create a server',
|
|
||||||
href: '/application/guilds/create'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1 +0,0 @@
|
|||||||
export * from './PopupGuildCard'
|
|
@ -1,11 +1,12 @@
|
|||||||
import { useState, useRef } from 'react'
|
import { useState, useRef } from 'react'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import TextareaAutosize from 'react-textarea-autosize'
|
import TextareaAutosize from 'react-textarea-autosize'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
|
|
||||||
import { GuildsChannelsPath } from '..'
|
import type { GuildsChannelsPath } from '..'
|
||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
import { EmojiPicker, EmojiPickerOnClick } from '../../Emoji'
|
import type { EmojiPickerOnClick } from '../../Emoji'
|
||||||
|
import { EmojiPicker } from '../../Emoji'
|
||||||
|
|
||||||
export interface SendMessageProps {
|
export interface SendMessageProps {
|
||||||
path: GuildsChannelsPath
|
path: GuildsChannelsPath
|
||||||
@ -53,7 +54,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
|||||||
event
|
event
|
||||||
) => {
|
) => {
|
||||||
const files = event?.target?.files
|
const files = event?.target?.files
|
||||||
if (files != null && files.length === 1) {
|
if (files != null && files.length === 1 && files[0] != null) {
|
||||||
const file = files[0]
|
const file = files[0]
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', file)
|
formData.append('file', file)
|
||||||
@ -65,7 +66,9 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleVisibleEmojiPicker = (): void => {
|
const handleVisibleEmojiPicker = (): void => {
|
||||||
setIsVisibleEmojiPicker((isVisible) => !isVisible)
|
setIsVisibleEmojiPicker((isVisible) => {
|
||||||
|
return !isVisible
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
|
const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
|
||||||
@ -96,7 +99,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
|||||||
onKeyDown={handleTextareaKeyDown}
|
onKeyDown={handleTextareaKeyDown}
|
||||||
>
|
>
|
||||||
<TextareaAutosize
|
<TextareaAutosize
|
||||||
className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 font-paragraph tracking-wide outline-none'
|
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')}
|
placeholder={t('application:write-a-message')}
|
||||||
wrap='soft'
|
wrap='soft'
|
||||||
maxRows={6}
|
maxRows={6}
|
||||||
|
@ -1,12 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Sidebar } from './Sidebar'
|
|
||||||
|
|
||||||
describe('<Sidebar />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(
|
|
||||||
<Sidebar direction='left' visible={true} isMobile={false} />
|
|
||||||
)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,6 +1,6 @@
|
|||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
|
|
||||||
import { ApplicationProps } from '..'
|
import type { ApplicationProps } from '..'
|
||||||
|
|
||||||
export type DirectionSidebar = 'left' | 'right'
|
export type DirectionSidebar = 'left' | 'right'
|
||||||
|
|
||||||
@ -11,7 +11,9 @@ export interface SidebarProps {
|
|||||||
isMobile: boolean
|
isMobile: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Sidebar: React.FC<SidebarProps> = (props) => {
|
export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
|
||||||
|
props
|
||||||
|
) => {
|
||||||
const { direction, visible, children, path, isMobile } = props
|
const { direction, visible, children, path, isMobile } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -19,13 +21,13 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
|||||||
className={classNames(
|
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 top-0 right-0 flex-col space-y-1 overflow-y-auto':
|
'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
|
||||||
direction === 'right',
|
direction === 'right',
|
||||||
'w-72': direction === 'right' && visible,
|
'w-72': direction === 'right' && visible,
|
||||||
'invisible w-0 opacity-0': !visible,
|
'invisible w-0 opacity-0': !visible,
|
||||||
'w-80': direction === 'left' && visible,
|
'w-80': direction === 'left' && visible,
|
||||||
'max-w-max': typeof path !== 'string' && direction === 'left',
|
'max-w-max': typeof path !== 'string' && direction === 'left',
|
||||||
'top-0 right-0': direction === 'right' && isMobile,
|
'right-0 top-0': direction === 'right' && isMobile,
|
||||||
absolute: isMobile
|
absolute: isMobile
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
|
@ -1,23 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import {
|
|
||||||
guildExample,
|
|
||||||
guildExample2
|
|
||||||
} from '../../../cypress/fixtures/guilds/guild'
|
|
||||||
import {
|
|
||||||
userExample,
|
|
||||||
userSettingsExample
|
|
||||||
} from '../../../cypress/fixtures/users/user'
|
|
||||||
import { UserProfile } from './UserProfile'
|
|
||||||
|
|
||||||
describe('<UserProfile />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(
|
|
||||||
<UserProfile
|
|
||||||
user={{ ...userExample, settings: userSettingsExample }}
|
|
||||||
guilds={[guildExample, guildExample2]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -2,8 +2,8 @@ import Image from 'next/image'
|
|||||||
import date from 'date-and-time'
|
import date from 'date-and-time'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
|
||||||
import { UserPublic } from '../../../models/User'
|
import type { UserPublic } from '../../../models/User'
|
||||||
import { Guild } from '../../../models/Guild'
|
import type { Guild } from '../../../models/Guild'
|
||||||
|
|
||||||
export interface UserProfileProps {
|
export interface UserProfileProps {
|
||||||
className?: string
|
className?: string
|
||||||
@ -16,94 +16,88 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
|||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className='relative flex h-full flex-col items-center justify-center'>
|
||||||
<div className='relative flex h-full flex-col items-center justify-center'>
|
<div className='transition'>
|
||||||
<div className='transition'>
|
<div className='max-w-[1000px] px-12'>
|
||||||
<div className='max-w-[1000px] px-12'>
|
<div className='flex items-center justify-between'>
|
||||||
<div className='flex items-center justify-between'>
|
<div className='flex w-max flex-col items-center gap-7 md:flex-row'>
|
||||||
<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 items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
|
<Image
|
||||||
<Image
|
quality={100}
|
||||||
quality={100}
|
className='rounded-full'
|
||||||
className='rounded-full'
|
src={
|
||||||
src={
|
user.logo != null
|
||||||
user.logo != null
|
? user.logo
|
||||||
? user.logo
|
: '/images/data/user-default.png'
|
||||||
: '/images/data/user-default.png'
|
}
|
||||||
}
|
alt='Profil Picture'
|
||||||
alt='Profil Picture'
|
draggable='false'
|
||||||
draggable='false'
|
height={125}
|
||||||
height={125}
|
width={125}
|
||||||
width={125}
|
/>
|
||||||
/>
|
</div>
|
||||||
|
<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'
|
||||||
|
>
|
||||||
|
{user.name}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
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')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='ml-10 flex flex-col'>
|
<div className='my-2 text-left'>
|
||||||
<div className='mb-2 flex items-center'>
|
{user.email != null && (
|
||||||
<p
|
<p className='font-bold'>
|
||||||
className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
|
Email:{' '}
|
||||||
data-cy='user-name'
|
<a
|
||||||
>
|
href={`mailto:${user.email}`}
|
||||||
{user.name}
|
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>
|
</p>
|
||||||
<p
|
)}
|
||||||
className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
|
{user.website != null && (
|
||||||
data-cy='user-createdAt'
|
<p className='font-bold'>
|
||||||
>
|
{t('application:website')}:{' '}
|
||||||
{date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
|
<a
|
||||||
|
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'
|
||||||
|
>
|
||||||
|
{user.website}
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
)}
|
||||||
<div className='my-2 text-left'>
|
{user.status != null && (
|
||||||
{user.email != null && (
|
<p className='flex font-bold'>
|
||||||
<p className='font-bold'>
|
{t('application:status')}:{' '}
|
||||||
Email:{' '}
|
<span className='ml-2 font-normal tracking-wide'>
|
||||||
<a
|
{user.status}
|
||||||
href={`mailto:${user.email}`}
|
</span>
|
||||||
target='_blank'
|
</p>
|
||||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] 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')}:{' '}
|
|
||||||
<a
|
|
||||||
href={user.website}
|
|
||||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] 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'>
|
|
||||||
{user.status}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{user.biography != null && (
|
|
||||||
<div className='mt-7 text-center'>
|
|
||||||
<p>{user.biography}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
{user.biography != null && (
|
||||||
|
<div className='mt-7 text-center'>
|
||||||
|
<p>{user.biography}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<style jsx global>{`
|
|
||||||
#application-page-content {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import { useState, useMemo } from 'react'
|
import { useState, useMemo } from 'react'
|
||||||
import { Form } from 'react-component-form'
|
import { Form, useForm } from 'react-component-form'
|
||||||
import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
|
import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
|
||||||
import { Type } from '@sinclair/typebox'
|
import { Type } from '@sinclair/typebox'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
import type { HandleUseFormCallback } from 'react-component-form'
|
||||||
|
|
||||||
import { Input } from '../../design/Input'
|
import { Input } from '../../design/Input'
|
||||||
import { Checkbox } from '../../design/Checkbox'
|
import { Checkbox } from '../../design/Checkbox'
|
||||||
@ -16,10 +17,21 @@ import { Language } from '../../Header/Language'
|
|||||||
import { useAuthentication } from '../../../tools/authentication'
|
import { useAuthentication } from '../../../tools/authentication'
|
||||||
import { Button } from '../../design/Button'
|
import { Button } from '../../design/Button'
|
||||||
import { FormState } from '../../design/FormState'
|
import { FormState } from '../../design/FormState'
|
||||||
import { useForm, HandleSubmitCallback } from '../../../hooks/useForm'
|
|
||||||
import { userSchema } from '../../../models/User'
|
import { userSchema } from '../../../models/User'
|
||||||
import { userSettingsSchema } from '../../../models/UserSettings'
|
import { userSettingsSchema } from '../../../models/UserSettings'
|
||||||
import { ProviderOAuth, providers } from '../../../models/OAuth'
|
import type { ProviderOAuth } from '../../../models/OAuth'
|
||||||
|
import { providers } from '../../../models/OAuth'
|
||||||
|
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
name: userSchema.name,
|
||||||
|
status: Type.Optional(userSchema.status),
|
||||||
|
email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
|
||||||
|
website: Type.Optional(userSchema.website),
|
||||||
|
biography: Type.Optional(userSchema.biography),
|
||||||
|
isPublicGuilds: userSettingsSchema.isPublicGuilds,
|
||||||
|
isPublicEmail: userSettingsSchema.isPublicEmail
|
||||||
|
}
|
||||||
|
|
||||||
export const UserSettings: React.FC = () => {
|
export const UserSettings: React.FC = () => {
|
||||||
const { user, setUser, authentication } = useAuthentication()
|
const { user, setUser, authentication } = useAuthentication()
|
||||||
@ -35,32 +47,22 @@ export const UserSettings: React.FC = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
handleUseForm,
|
||||||
fetchState,
|
fetchState,
|
||||||
setFetchState,
|
setFetchState,
|
||||||
message,
|
message,
|
||||||
setMessageTranslationKey,
|
setMessage,
|
||||||
errors,
|
errors
|
||||||
getErrorTranslation,
|
} = useForm(schema)
|
||||||
handleSubmit
|
const { getFirstErrorTranslation } = useFormTranslation()
|
||||||
} = useForm({
|
|
||||||
validateSchema: {
|
|
||||||
name: userSchema.name,
|
|
||||||
status: Type.Optional(userSchema.status),
|
|
||||||
email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
|
|
||||||
website: Type.Optional(userSchema.website),
|
|
||||||
biography: Type.Optional(userSchema.biography),
|
|
||||||
isPublicGuilds: userSettingsSchema.isPublicGuilds,
|
|
||||||
isPublicEmail: userSettingsSchema.isPublicEmail
|
|
||||||
},
|
|
||||||
replaceEmptyStringToNull: true,
|
|
||||||
resetOnSuccess: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const hasAllProviders = useMemo(() => {
|
const hasAllProviders = useMemo(() => {
|
||||||
return providers.every((provider) => user.strategies.includes(provider))
|
return providers.every((provider) => {
|
||||||
|
return user.strategies.includes(provider)
|
||||||
|
})
|
||||||
}, [user.strategies])
|
}, [user.strategies])
|
||||||
|
|
||||||
const onSubmit: HandleSubmitCallback = async (formData) => {
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
|
||||||
try {
|
try {
|
||||||
const { isPublicGuilds, isPublicEmail, ...userData } = formData
|
const { isPublicGuilds, isPublicEmail, ...userData } = formData
|
||||||
const userSettings = { isPublicEmail, isPublicGuilds }
|
const userSettings = { isPublicEmail, isPublicGuilds }
|
||||||
@ -68,12 +70,12 @@ export const UserSettings: React.FC = () => {
|
|||||||
`/users/current?redirectURI=${window.location.origin}/authentication/signin`,
|
`/users/current?redirectURI=${window.location.origin}/authentication/signin`,
|
||||||
userData
|
userData
|
||||||
)
|
)
|
||||||
setInputValues(formData as any)
|
setInputValues(formData as unknown as any)
|
||||||
const hasEmailChanged = user.email !== userCurrentData.user.email
|
const hasEmailChanged = user.email !== userCurrentData.user.email
|
||||||
if (hasEmailChanged) {
|
if (hasEmailChanged) {
|
||||||
return {
|
return {
|
||||||
type: 'success',
|
type: 'success',
|
||||||
value: 'application:success-email-changed'
|
message: 'application:success-email-changed'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { data: userCurrentSettings } = await authentication.api.put(
|
const { data: userCurrentSettings } = await authentication.api.put(
|
||||||
@ -92,7 +94,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
type: 'success',
|
type: 'success',
|
||||||
value: 'application:saved-information'
|
message: 'application:saved-information'
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
||||||
@ -100,22 +102,22 @@ export const UserSettings: React.FC = () => {
|
|||||||
if (message.endsWith('already taken.')) {
|
if (message.endsWith('already taken.')) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'authentication:already-used'
|
message: 'authentication:already-used'
|
||||||
}
|
}
|
||||||
} else if (message.endsWith('email to sign in.')) {
|
} else if (message.endsWith('email to sign in.')) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'authentication:email-required-to-sign-in'
|
message: 'authentication:email-required-to-sign-in'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -147,7 +149,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
) => {
|
) => {
|
||||||
setFetchState('loading')
|
setFetchState('loading')
|
||||||
const files = event?.target?.files
|
const files = event?.target?.files
|
||||||
if (files != null && files.length === 1) {
|
if (files != null && files.length === 1 && files[0] != null) {
|
||||||
const file = files[0]
|
const file = files[0]
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('logo', file)
|
formData.append('logo', file)
|
||||||
@ -165,19 +167,19 @@ export const UserSettings: React.FC = () => {
|
|||||||
setFetchState('idle')
|
setFetchState('idle')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFetchState('error')
|
setFetchState('error')
|
||||||
setMessageTranslationKey('errors:server-error')
|
setMessage('errors:server-error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSignout = async (): Promise<void> => {
|
const handleSignout = async (): Promise<void> => {
|
||||||
try {
|
setFetchState('loading')
|
||||||
setFetchState('loading')
|
await authentication.signoutServerSide()
|
||||||
await authentication.signoutServerSide()
|
}
|
||||||
} catch (error) {
|
|
||||||
setFetchState('error')
|
const handleSignoutAllDevices = async (): Promise<void> => {
|
||||||
setMessageTranslationKey('errors:server-error')
|
setFetchState('loading')
|
||||||
}
|
await authentication.signoutAllDevicesServerSide()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDeletionProvider = (
|
const handleDeletionProvider = (
|
||||||
@ -190,15 +192,15 @@ export const UserSettings: React.FC = () => {
|
|||||||
setUser((oldUser) => {
|
setUser((oldUser) => {
|
||||||
return {
|
return {
|
||||||
...oldUser,
|
...oldUser,
|
||||||
strategies: oldUser.strategies.filter(
|
strategies: oldUser.strategies.filter((strategy) => {
|
||||||
(strategy) => strategy !== provider
|
return strategy !== provider
|
||||||
)
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
setMessageTranslationKey('application:success-deleted-provider')
|
setMessage('application:success-deleted-provider')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFetchState('error')
|
setFetchState('error')
|
||||||
setMessageTranslationKey('errors:server-error')
|
setMessage('errors:server-error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -217,7 +219,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
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-col items-center justify-center sm:w-fit lg:flex-row'>
|
||||||
@ -257,7 +259,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
className='!mt-0'
|
className='!mt-0'
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
value={inputValues.name ?? ''}
|
value={inputValues.name ?? ''}
|
||||||
error={getErrorTranslation(errors.name)}
|
error={getFirstErrorTranslation(errors.name)}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
name='status'
|
name='status'
|
||||||
@ -266,7 +268,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
className='!mt-4'
|
className='!mt-4'
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
value={inputValues.status ?? ''}
|
value={inputValues.status ?? ''}
|
||||||
error={getErrorTranslation(errors.status)}
|
error={getFirstErrorTranslation(errors.status)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -279,7 +281,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
placeholder='Email'
|
placeholder='Email'
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
value={inputValues.email ?? ''}
|
value={inputValues.email ?? ''}
|
||||||
error={getErrorTranslation(errors.email)}
|
error={getFirstErrorTranslation(errors.email)}
|
||||||
/>
|
/>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
name='isPublicEmail'
|
name='isPublicEmail'
|
||||||
@ -294,7 +296,7 @@ export const UserSettings: React.FC = () => {
|
|||||||
placeholder={t('application:website')}
|
placeholder={t('application:website')}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
value={inputValues.website ?? ''}
|
value={inputValues.website ?? ''}
|
||||||
error={getErrorTranslation(errors.website)}
|
error={getFirstErrorTranslation(errors.website)}
|
||||||
/>
|
/>
|
||||||
<Textarea
|
<Textarea
|
||||||
name='biography'
|
name='biography'
|
||||||
@ -310,16 +312,15 @@ export const UserSettings: React.FC = () => {
|
|||||||
<Language className='!top-12' />
|
<Language className='!top-12' />
|
||||||
<div className='ml-auto flex'>
|
<div className='ml-auto flex'>
|
||||||
<SwitchTheme />
|
<SwitchTheme />
|
||||||
<Link href={`/application/users/${user.id}`}>
|
<Link
|
||||||
<a
|
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'
|
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'
|
title='Preview Public Profile'
|
||||||
>
|
>
|
||||||
<EyeIcon
|
<EyeIcon
|
||||||
height={20}
|
height={20}
|
||||||
className='opacity-50 transition-opacity group-hover:opacity-100'
|
className='opacity-50 transition-opacity group-hover:opacity-100'
|
||||||
/>
|
/>
|
||||||
</a>
|
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -376,7 +377,15 @@ export const UserSettings: React.FC = () => {
|
|||||||
{t('application:signout')}
|
{t('application:signout')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<FormState state={fetchState} message={message} />
|
<div className='mt-4'>
|
||||||
|
<Button type='button' color='red' onClick={handleSignoutAllDevices}>
|
||||||
|
{t('application:signout-all-devices')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<FormState
|
||||||
|
state={fetchState}
|
||||||
|
message={message != null ? t(message) : undefined}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
)
|
)
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
|
import { useMemo } from 'react'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import { useForm } from 'react-component-form'
|
||||||
|
import type { HandleUseFormCallback } from 'react-component-form'
|
||||||
|
|
||||||
import { Main } from '../design/Main'
|
import { Main } from '../design/Main'
|
||||||
import { Input } from '../design/Input'
|
import { Input } from '../design/Input'
|
||||||
@ -11,12 +14,10 @@ import { FormState } from '../design/FormState'
|
|||||||
import { AuthenticationForm } from '.'
|
import { AuthenticationForm } from '.'
|
||||||
import { userSchema } from '../../models/User'
|
import { userSchema } from '../../models/User'
|
||||||
import { api } from '../../tools/api'
|
import { api } from '../../tools/api'
|
||||||
import {
|
import type { Tokens } from '../../tools/authentication'
|
||||||
Tokens,
|
import { Authentication as AuthenticationClass } from '../../tools/authentication'
|
||||||
Authentication as AuthenticationClass
|
|
||||||
} from '../../tools/authentication'
|
|
||||||
import { useForm, HandleSubmitCallback } from '../../hooks/useForm'
|
|
||||||
import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
|
import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
|
||||||
|
import { useFormTranslation } from '../../hooks/useFormTranslation'
|
||||||
|
|
||||||
export interface AuthenticationProps {
|
export interface AuthenticationProps {
|
||||||
mode: 'signup' | 'signin'
|
mode: 'signup' | 'signin'
|
||||||
@ -29,26 +30,31 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
const { lang, t } = useTranslation()
|
const { lang, t } = useTranslation()
|
||||||
const { theme } = useTheme()
|
const { theme } = useTheme()
|
||||||
|
|
||||||
const { errors, fetchState, message, getErrorTranslation, handleSubmit } =
|
const schema = useMemo(() => {
|
||||||
useForm({
|
return {
|
||||||
validateSchema: {
|
...(mode === 'signup' && { name: userSchema.name }),
|
||||||
...(mode === 'signup' && { name: userSchema.name }),
|
email: userSchema.email,
|
||||||
email: userSchema.email,
|
password: userSchema.password
|
||||||
password: userSchema.password
|
}
|
||||||
},
|
}, [mode])
|
||||||
resetOnSuccess: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const onSubmit: HandleSubmitCallback = async (formData) => {
|
const { handleUseForm, errors, fetchState, message } = useForm(schema)
|
||||||
|
const { getFirstErrorTranslation } = useFormTranslation()
|
||||||
|
|
||||||
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (
|
||||||
|
formData,
|
||||||
|
formElement
|
||||||
|
) => {
|
||||||
if (mode === 'signup') {
|
if (mode === 'signup') {
|
||||||
try {
|
try {
|
||||||
await api.post(
|
await api.post(
|
||||||
`/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
|
`/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
|
||||||
{ ...formData, language: lang, theme }
|
{ ...formData, language: lang, theme }
|
||||||
)
|
)
|
||||||
|
formElement.reset()
|
||||||
return {
|
return {
|
||||||
type: 'success',
|
type: 'success',
|
||||||
value: 'authentication:success-signup'
|
message: 'authentication:success-signup'
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
||||||
@ -56,23 +62,23 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
if (message.endsWith('already taken.')) {
|
if (message.endsWith('already taken.')) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'authentication:already-used'
|
message: 'authentication:already-used'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
const { data } = await api.post<Tokens>('/users/signin', formData)
|
const { data } = await api.post<Tokens>('/users/signin', formData)
|
||||||
const authentication = new AuthenticationClass(data)
|
const authentication = new AuthenticationClass(data, true)
|
||||||
authentication.signin()
|
authentication.signin()
|
||||||
await router.push('/application')
|
await router.push('/application')
|
||||||
return null
|
return null
|
||||||
@ -80,12 +86,12 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'authentication:wrong-credentials'
|
message: 'authentication:wrong-credentials'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
value: 'errors:server-error'
|
message: 'errors:server-error'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -97,14 +103,14 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
<div className='pt-8 text-center font-paragraph text-lg'>
|
<div className='pt-8 text-center font-paragraph text-lg'>
|
||||||
{t('authentication:or')}
|
{t('authentication:or')}
|
||||||
</div>
|
</div>
|
||||||
<AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
|
<AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
|
||||||
{mode === 'signup' && (
|
{mode === 'signup' && (
|
||||||
<Input
|
<Input
|
||||||
type='text'
|
type='text'
|
||||||
placeholder={t('common:name')}
|
placeholder={t('common:name')}
|
||||||
name='name'
|
name='name'
|
||||||
label={t('common:name')}
|
label={t('common:name')}
|
||||||
error={getErrorTranslation(errors.name)}
|
error={getFirstErrorTranslation(errors.name)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Input
|
<Input
|
||||||
@ -112,7 +118,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
placeholder='Email'
|
placeholder='Email'
|
||||||
name='email'
|
name='email'
|
||||||
label='Email'
|
label='Email'
|
||||||
error={getErrorTranslation(errors.email)}
|
error={getFirstErrorTranslation(errors.email)}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
type='password'
|
type='password'
|
||||||
@ -120,7 +126,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
name='password'
|
name='password'
|
||||||
label={t('authentication:password')}
|
label={t('authentication:password')}
|
||||||
showForgotPassword={mode === 'signin'}
|
showForgotPassword={mode === 'signin'}
|
||||||
error={getErrorTranslation(errors.password)}
|
error={getFirstErrorTranslation(errors.password)}
|
||||||
/>
|
/>
|
||||||
<Button data-cy='submit' className='mt-6 w-full' type='submit'>
|
<Button data-cy='submit' className='mt-6 w-full' type='submit'>
|
||||||
{t('authentication:submit')}
|
{t('authentication:submit')}
|
||||||
@ -133,15 +139,17 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
|
|||||||
: '/authentication/signup'
|
: '/authentication/signup'
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<a>
|
{mode === 'signup'
|
||||||
{mode === 'signup'
|
? t('authentication:already-have-an-account')
|
||||||
? t('authentication:already-have-an-account')
|
: t('authentication:dont-have-an-account')}
|
||||||
: t('authentication:dont-have-an-account')}
|
|
||||||
</a>
|
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
</AuthenticationForm>
|
</AuthenticationForm>
|
||||||
<FormState id='message' state={fetchState} message={message} />
|
<FormState
|
||||||
|
id='message'
|
||||||
|
state={fetchState}
|
||||||
|
message={message != null ? t(message) : undefined}
|
||||||
|
/>
|
||||||
</Main>
|
</Main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
import { Form, FormProps } from 'react-component-form'
|
import type { FormProps } from 'react-component-form'
|
||||||
|
import { Form } from 'react-component-form'
|
||||||
|
|
||||||
export const AuthenticationForm: React.FC<FormProps> = (props) => {
|
export const AuthenticationForm: React.FC<FormProps> = (props) => {
|
||||||
const { className, children, ...rest } = props
|
const { className, children, ...rest } = props
|
||||||
|
@ -3,7 +3,8 @@ import { useRouter } from 'next/router'
|
|||||||
|
|
||||||
import { api } from '../../tools/api'
|
import { api } from '../../tools/api'
|
||||||
import { Authentication, isTokens } from '../../tools/authentication'
|
import { Authentication, isTokens } from '../../tools/authentication'
|
||||||
import { SocialMediaButton, SocialMedia } from '../design/SocialMediaButton'
|
import type { SocialMedia } from '../design/SocialMediaButton'
|
||||||
|
import { SocialMediaButton } from '../design/SocialMediaButton'
|
||||||
import { providers } from '../../models/OAuth'
|
import { providers } from '../../models/OAuth'
|
||||||
|
|
||||||
export const AuthenticationSocialMedia: React.FC = () => {
|
export const AuthenticationSocialMedia: React.FC = () => {
|
||||||
@ -24,7 +25,7 @@ export const AuthenticationSocialMedia: React.FC = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const data = router.query
|
const data = router.query
|
||||||
if (isTokens(data)) {
|
if (isTokens(data)) {
|
||||||
const authentication = new Authentication(data)
|
const authentication = new Authentication(data, true)
|
||||||
authentication.signin()
|
authentication.signin()
|
||||||
router.push('/application').catch(() => {})
|
router.push('/application').catch(() => {})
|
||||||
}
|
}
|
||||||
|
@ -5,17 +5,18 @@ import { EMOJI_SET } from './emojiPlugin'
|
|||||||
export interface EmojiProps {
|
export interface EmojiProps {
|
||||||
value: string
|
value: string
|
||||||
size: number
|
size: number
|
||||||
|
tooltip?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Emoji: React.FC<EmojiProps> = (props) => {
|
export const Emoji: React.FC<EmojiProps> = (props) => {
|
||||||
const { value, size } = props
|
const { value, size, tooltip = false } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EmojiMart
|
<EmojiMart
|
||||||
set={EMOJI_SET}
|
set={EMOJI_SET}
|
||||||
emoji={value}
|
emoji={value}
|
||||||
size={size}
|
size={size}
|
||||||
tooltip
|
tooltip={tooltip}
|
||||||
fallback={() => {
|
fallback={() => {
|
||||||
return <>{value}</>
|
return <>{value}</>
|
||||||
}}
|
}}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import 'emoji-mart/css/emoji-mart.css'
|
import 'emoji-mart/css/emoji-mart.css'
|
||||||
import { EmojiData, Picker } from 'emoji-mart'
|
import type { EmojiData } from 'emoji-mart'
|
||||||
|
import { Picker } from 'emoji-mart'
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
|
|
||||||
import { EMOJI_SET } from '../emojiPlugin'
|
import { EMOJI_SET } from '../emojiPlugin'
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { visit } from 'unist-util-visit'
|
import { visit } from 'unist-util-visit'
|
||||||
import { Plugin, Transformer } from 'unified'
|
import type { Plugin, Transformer } from 'unified'
|
||||||
import { Literal, Parent } from 'unist'
|
import type { Literal, Parent } from 'unist'
|
||||||
import type { ElementContent } from 'hast'
|
import type { ElementContent } from 'hast'
|
||||||
import type { EmojiSet } from 'emoji-mart'
|
import type { EmojiSet } from 'emoji-mart'
|
||||||
|
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
import { isStringWithOnlyOneEmoji } from './isStringWithOnlyOneEmoji'
|
|
||||||
|
|
||||||
describe('components/Emoji/isStringWithOnlyOneEmoji', () => {
|
|
||||||
it('returns true with a string with only one emoji', () => {
|
|
||||||
expect(isStringWithOnlyOneEmoji(':wave:')).toBeTruthy()
|
|
||||||
expect(isStringWithOnlyOneEmoji(':smile:')).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns false with a string with multiple emoji or with text', () => {
|
|
||||||
expect(isStringWithOnlyOneEmoji(':wave: :smile:')).toBeFalsy()
|
|
||||||
expect(isStringWithOnlyOneEmoji(':wave: some text')).toBeFalsy()
|
|
||||||
expect(isStringWithOnlyOneEmoji('some text :wave:')).toBeFalsy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns false with a string without emoji', () => {
|
|
||||||
expect(isStringWithOnlyOneEmoji('some text')).toBeFalsy()
|
|
||||||
})
|
|
||||||
})
|
|
45
components/ErrorPage.tsx
Normal file
45
components/ErrorPage.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
import type { FooterProps } from './Footer'
|
||||||
|
import { Footer } from './Footer'
|
||||||
|
import { Header } from './Header'
|
||||||
|
|
||||||
|
export interface ErrorPageProps extends FooterProps {
|
||||||
|
statusCode: number
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
|
||||||
|
const { message, statusCode, version } = props
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='flex h-screen flex-col pt-0'>
|
||||||
|
<Header />
|
||||||
|
<main className='flex min-w-full flex-1 flex-col items-center justify-center'>
|
||||||
|
<h1 className='my-6 text-4xl font-semibold'>
|
||||||
|
{t('errors:error')}{' '}
|
||||||
|
<span
|
||||||
|
className='text-green-800 dark:text-green-400'
|
||||||
|
data-cy='status-code'
|
||||||
|
>
|
||||||
|
{statusCode}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className='text-center text-lg'>
|
||||||
|
{message}{' '}
|
||||||
|
<Link
|
||||||
|
href='/'
|
||||||
|
className='text-green-800 hover:underline dark:text-green-400'
|
||||||
|
>
|
||||||
|
{t('errors:return-to-home-page')}
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<Footer version={version} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -1,15 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { ErrorPage } from '.'
|
|
||||||
|
|
||||||
describe('<ErrorPage />', () => {
|
|
||||||
it('should render the message and statusCode', () => {
|
|
||||||
const messageContent = 'message content'
|
|
||||||
const statusCode = 404
|
|
||||||
const { getByText } = render(
|
|
||||||
<ErrorPage statusCode={statusCode} message={messageContent} />
|
|
||||||
)
|
|
||||||
expect(getByText(messageContent)).toBeInTheDocument()
|
|
||||||
expect(getByText(statusCode)).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,53 +0,0 @@
|
|||||||
import useTranslation from 'next-translate/useTranslation'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
export interface ErrorPageProps {
|
|
||||||
statusCode: number
|
|
||||||
message: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
|
|
||||||
const { message, statusCode } = props
|
|
||||||
const { t } = useTranslation()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1 className='my-6 text-4xl font-semibold'>
|
|
||||||
{t('errors:error')}{' '}
|
|
||||||
<span
|
|
||||||
className='text-green-800 dark:text-green-400'
|
|
||||||
data-cy='status-code'
|
|
||||||
>
|
|
||||||
{statusCode}
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
<p className='text-center text-lg'>
|
|
||||||
{message}{' '}
|
|
||||||
<Link href='/'>
|
|
||||||
<a className='text-green-800 hover:underline dark:text-green-400'>
|
|
||||||
{t('errors:return-to-home-page')}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<style jsx global>
|
|
||||||
{`
|
|
||||||
main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 100vw;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
#__next {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
</style>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1 +0,0 @@
|
|||||||
export * from './ErrorPage'
|
|
@ -1,16 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Footer } from '.'
|
|
||||||
|
|
||||||
describe('<Footer />', () => {
|
|
||||||
it('should render with appropriate link tag version', () => {
|
|
||||||
const version = '1.0.0'
|
|
||||||
const { getByText } = render(<Footer version={version} />)
|
|
||||||
const versionLink = getByText(`website v${version}`) as HTMLAnchorElement
|
|
||||||
expect(getByText('Thream')).toBeInTheDocument()
|
|
||||||
expect(versionLink).toBeInTheDocument()
|
|
||||||
expect(versionLink.href).toEqual(
|
|
||||||
`https://github.com/Thream/website/releases/tag/v${version}`
|
|
||||||
)
|
|
||||||
})
|
|
||||||
})
|
|
@ -15,10 +15,11 @@ export const Footer: React.FC<FooterProps> = (props) => {
|
|||||||
return (
|
return (
|
||||||
<footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
|
<footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
|
||||||
<p>
|
<p>
|
||||||
<Link href='/'>
|
<Link
|
||||||
<a className='text-green-800 hover:underline dark:text-green-400'>
|
href='/'
|
||||||
Thream
|
className='text-green-800 hover:underline dark:text-green-400'
|
||||||
</a>
|
>
|
||||||
|
Thream
|
||||||
</Link>{' '}
|
</Link>{' '}
|
||||||
| {t('common:all-rights-reserved')}
|
| {t('common:all-rights-reserved')}
|
||||||
</p>
|
</p>
|
||||||
|
@ -8,6 +8,7 @@ export const VersionLink: React.FC<VersionLinkProps> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
|
data-cy={`version-link-${repository}`}
|
||||||
className='text-green-800 hover:underline dark:text-green-400'
|
className='text-green-800 hover:underline dark:text-green-400'
|
||||||
href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
|
href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
|
||||||
target='_blank'
|
target='_blank'
|
||||||
|
@ -13,7 +13,7 @@ export const Head: React.FC<HeadProps> = (props) => {
|
|||||||
|
|
||||||
const {
|
const {
|
||||||
title = 'Thream',
|
title = 'Thream',
|
||||||
image = '/images/icons/96x96.png',
|
image = 'https://thream.divlo.fr/images/icons/128x128.png',
|
||||||
description = t('common:description'),
|
description = t('common:description'),
|
||||||
url = 'https://thream.divlo.fr/'
|
url = 'https://thream.divlo.fr/'
|
||||||
} = props
|
} = props
|
||||||
@ -42,7 +42,7 @@ export const Head: React.FC<HeadProps> = (props) => {
|
|||||||
<meta name='twitter:card' content='summary' />
|
<meta name='twitter:card' content='summary' />
|
||||||
<meta name='twitter:description' content={description} />
|
<meta name='twitter:description' content={description} />
|
||||||
<meta name='twitter:title' content={title} />
|
<meta name='twitter:title' content={title} />
|
||||||
<meta name='twitter:image:src' content={image} />
|
<meta name='twitter:image' content={image} />
|
||||||
|
|
||||||
{/* PWA Data */}
|
{/* PWA Data */}
|
||||||
<link rel='manifest' href='/manifest.json' />
|
<link rel='manifest' href='/manifest.json' />
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Header } from '.'
|
|
||||||
|
|
||||||
describe('<Header />', () => {
|
|
||||||
it('should render', () => {
|
|
||||||
const { getByText } = render(<Header />)
|
|
||||||
expect(getByText('Thream')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
@ -9,20 +9,19 @@ export const Header: React.FC = () => {
|
|||||||
<header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
|
<header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
|
||||||
<div className='container flex justify-between'>
|
<div className='container flex justify-between'>
|
||||||
<Link href='/'>
|
<Link href='/'>
|
||||||
<a>
|
<div className='flex items-center justify-center'>
|
||||||
<div className='flex items-center justify-center'>
|
<Image
|
||||||
<Image
|
priority
|
||||||
quality={100}
|
quality={100}
|
||||||
width={60}
|
width={60}
|
||||||
height={60}
|
height={60}
|
||||||
src='/images/icons/Thream.png'
|
src='/images/icons/Thream.png'
|
||||||
alt='Thream'
|
alt='Thream'
|
||||||
/>
|
/>
|
||||||
<span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
|
<span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
|
||||||
Thream
|
Thream
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</Link>
|
</Link>
|
||||||
<div className='flex justify-between'>
|
<div className='flex justify-between'>
|
||||||
<Language />
|
<Language />
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import { useCallback, useEffect, useState } from 'react'
|
import { useCallback, useState, useRef } from 'react'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
import setLanguage from 'next-translate/setLanguage'
|
import setLanguage from 'next-translate/setLanguage'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
|
|
||||||
|
import i18n from '../../../i18n.json'
|
||||||
import { Arrow } from './Arrow'
|
import { Arrow } from './Arrow'
|
||||||
import { LanguageFlag } from './LanguageFlag'
|
import { LanguageFlag } from './LanguageFlag'
|
||||||
import i18n from '../../../i18n.json'
|
import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter'
|
||||||
|
|
||||||
export interface LanguageProps {
|
export interface LanguageProps {
|
||||||
className?: string
|
className?: string
|
||||||
@ -15,22 +16,17 @@ export const Language: React.FC<LanguageProps> = (props) => {
|
|||||||
const { className } = props
|
const { className } = props
|
||||||
const { lang: currentLanguage } = useTranslation()
|
const { lang: currentLanguage } = useTranslation()
|
||||||
const [hiddenMenu, setHiddenMenu] = useState(true)
|
const [hiddenMenu, setHiddenMenu] = useState(true)
|
||||||
|
const languageClickRef = useRef<HTMLDivElement | null>(null)
|
||||||
|
|
||||||
const handleHiddenMenu = useCallback(() => {
|
const handleHiddenMenu = useCallback(() => {
|
||||||
setHiddenMenu(!hiddenMenu)
|
setHiddenMenu((oldHiddenMenu) => {
|
||||||
}, [hiddenMenu])
|
return !oldHiddenMenu
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useClickOutsideAlerter(languageClickRef, () => {
|
||||||
if (!hiddenMenu) {
|
return setHiddenMenu(true)
|
||||||
window.document.addEventListener('click', handleHiddenMenu)
|
})
|
||||||
} else {
|
|
||||||
window.document.removeEventListener('click', handleHiddenMenu)
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.document.removeEventListener('click', handleHiddenMenu)
|
|
||||||
}
|
|
||||||
}, [hiddenMenu, handleHiddenMenu])
|
|
||||||
|
|
||||||
const handleLanguage = async (language: string): Promise<void> => {
|
const handleLanguage = async (language: string): Promise<void> => {
|
||||||
await setLanguage(language)
|
await setLanguage(language)
|
||||||
@ -38,7 +34,10 @@ export const Language: React.FC<LanguageProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='relative flex cursor-pointer flex-col items-center justify-center'>
|
<div
|
||||||
|
className='relative flex cursor-pointer flex-col items-center justify-center'
|
||||||
|
ref={languageClickRef}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
data-cy='language-click'
|
data-cy='language-click'
|
||||||
className='mr-5 flex items-center'
|
className='mr-5 flex items-center'
|
||||||
@ -64,7 +63,9 @@ export const Language: React.FC<LanguageProps> = (props) => {
|
|||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
|
className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
|
||||||
onClick={async () => await handleLanguage(language)}
|
onClick={async () => {
|
||||||
|
return await handleLanguage(language)
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<LanguageFlag language={language} />
|
<LanguageFlag language={language} />
|
||||||
</li>
|
</li>
|
||||||
|
78
components/Header/SwitchTheme.tsx
Normal file
78
components/Header/SwitchTheme.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import classNames from 'clsx'
|
||||||
|
import { useTheme } from 'next-themes'
|
||||||
|
|
||||||
|
export const SwitchTheme: React.FC = () => {
|
||||||
|
const [mounted, setMounted] = useState(false)
|
||||||
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClick = (): void => {
|
||||||
|
setTheme(theme === 'dark' ? 'light' : 'dark')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className='flex items-center'
|
||||||
|
data-cy='switch-theme-click'
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
<div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
|
||||||
|
<div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
|
||||||
|
<div
|
||||||
|
data-cy='switch-theme-dark'
|
||||||
|
className={classNames(
|
||||||
|
'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
|
||||||
|
{
|
||||||
|
'opacity-100': theme === 'dark',
|
||||||
|
'opacity-0': theme === 'light'
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className='relative flex h-[10px] w-[10px] items-center justify-center'>
|
||||||
|
🌜
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
data-cy='switch-theme-light'
|
||||||
|
className={classNames(
|
||||||
|
'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
|
||||||
|
{
|
||||||
|
'opacity-100': theme === 'light',
|
||||||
|
'opacity-0': theme === 'dark'
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className='relative flex h-[10px] w-[10px] items-center justify-center'>
|
||||||
|
🌞
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
|
||||||
|
{
|
||||||
|
'left-[27px]': theme === 'dark',
|
||||||
|
'left-0': theme === 'light'
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
style={{ border: '1px solid #4d4d4d' }}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
data-cy='switch-theme-input'
|
||||||
|
type='checkbox'
|
||||||
|
aria-label='Dark mode toggle'
|
||||||
|
className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
|
||||||
|
defaultChecked
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -1,126 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { useTheme } from 'next-themes'
|
|
||||||
|
|
||||||
export const SwitchTheme: React.FC = () => {
|
|
||||||
const [mounted, setMounted] = useState(false)
|
|
||||||
const { theme, setTheme } = useTheme()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (!mounted) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClick = (): void => {
|
|
||||||
setTheme(theme === 'dark' ? 'light' : 'dark')
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className='flex items-center'
|
|
||||||
data-cy='switch-theme-click'
|
|
||||||
onClick={handleClick}
|
|
||||||
>
|
|
||||||
<div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
|
|
||||||
<div className='toggle-track'>
|
|
||||||
<div
|
|
||||||
data-cy='switch-theme-dark'
|
|
||||||
className='toggle-track-check absolute'
|
|
||||||
>
|
|
||||||
<span className='toggle_Dark relative flex items-center justify-center'>
|
|
||||||
🌜
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
data-cy='switch-theme-light'
|
|
||||||
className='toggle-track-x absolute'
|
|
||||||
>
|
|
||||||
<span className='toggle_Light relative flex items-center justify-center'>
|
|
||||||
🌞
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='toggle-thumb absolute' />
|
|
||||||
<input
|
|
||||||
data-cy='switch-theme-input'
|
|
||||||
type='checkbox'
|
|
||||||
aria-label='Dark mode toggle'
|
|
||||||
className='toggle-screenreader-only absolute overflow-hidden'
|
|
||||||
defaultChecked
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style jsx>
|
|
||||||
{`
|
|
||||||
.toggle-theme-button {
|
|
||||||
touch-action: pan-x;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.toggle-track {
|
|
||||||
width: 50px;
|
|
||||||
height: 24px;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: #4d4d4d;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.toggle-track-check {
|
|
||||||
width: 14px;
|
|
||||||
height: 10px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: auto;
|
|
||||||
line-height: 0;
|
|
||||||
left: 8px;
|
|
||||||
opacity: ${theme === 'dark' ? 1 : 0};
|
|
||||||
transition: opacity 0.25s ease;
|
|
||||||
}
|
|
||||||
.toggle-track-x {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: auto;
|
|
||||||
line-height: 0;
|
|
||||||
right: 10px;
|
|
||||||
opacity: ${theme === 'dark' ? 0 : 1};
|
|
||||||
}
|
|
||||||
.toggle_Dark,
|
|
||||||
.toggle_Light {
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
.toggle-thumb {
|
|
||||||
left: ${theme === 'dark' ? '27px' : '0px'};
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
border: 1px solid #4d4d4d;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fafafa;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: all 0.25s ease;
|
|
||||||
top: 1px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.toggle-screenreader-only {
|
|
||||||
border: 0;
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
height: 1px;
|
|
||||||
margin: -1px;
|
|
||||||
padding: 0;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
</style>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1 +0,0 @@
|
|||||||
export * from './SwitchTheme'
|
|
@ -1,10 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { ScrollableBody } from './ScrollableBody'
|
|
||||||
|
|
||||||
describe('<ScrollableBody />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(<ScrollableBody />)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,18 +0,0 @@
|
|||||||
export const ScrollableBody: React.FC = (props) => {
|
|
||||||
const { children } = props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{children}
|
|
||||||
<style jsx global>{`
|
|
||||||
body {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
|
|
||||||
z-index: 1000;
|
|
||||||
height: calc(100vh - 64px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1 +0,0 @@
|
|||||||
export * from './ScrollableBody'
|
|
@ -1,10 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Button } from '.'
|
|
||||||
|
|
||||||
describe('<Button />', () => {
|
|
||||||
it('should render', () => {
|
|
||||||
const { getByText } = render(<Button>Submit</Button>)
|
|
||||||
expect(getByText('Submit')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,5 +1,5 @@
|
|||||||
import { forwardRef } from 'react'
|
import { forwardRef } from 'react'
|
||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
|
|
||||||
const className =
|
const className =
|
||||||
'py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'
|
'py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Checkbox } from './Checkbox'
|
|
||||||
|
|
||||||
describe('<Checkbox />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(<Checkbox label='Checkbox' />)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,4 +1,4 @@
|
|||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
|
|
||||||
export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
|
export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
|
||||||
className?: string
|
className?: string
|
||||||
@ -13,7 +13,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
|
|||||||
{...props}
|
{...props}
|
||||||
type='checkbox'
|
type='checkbox'
|
||||||
id={id}
|
id={id}
|
||||||
className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:top-[50%] before:left-[59%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:top-[62.5%] after:left-[36%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
|
className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
|
className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { Divider } from '.'
|
|
||||||
|
|
||||||
describe('<Divider />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(<Divider />)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,34 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { FormState } from '.'
|
|
||||||
|
|
||||||
describe('<FormState />', () => {
|
|
||||||
it('should return nothing if the state is idle', () => {
|
|
||||||
const { container } = render(<FormState state='idle' />)
|
|
||||||
expect(container.innerHTML.length).toEqual(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should return nothing if the message is null', () => {
|
|
||||||
const { container } = render(<FormState state='error' />)
|
|
||||||
expect(container.innerHTML.length).toEqual(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render the <Loader /> if state is loading', () => {
|
|
||||||
const { getByTestId } = render(<FormState state='loading' />)
|
|
||||||
expect(getByTestId('loader')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render the success message if state is success', () => {
|
|
||||||
const message = 'Success Message'
|
|
||||||
const { getByText } = render(
|
|
||||||
<FormState state='success' message={message} />
|
|
||||||
)
|
|
||||||
expect(getByText(message)).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render the error message if state is error', () => {
|
|
||||||
const message = 'Error Message'
|
|
||||||
const { getByText } = render(<FormState state='error' message={message} />)
|
|
||||||
expect(getByText(message)).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,7 +1,7 @@
|
|||||||
import classNames from 'classnames'
|
import classNames from 'clsx'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
import type { FetchState as FormStateType } from 'react-component-form'
|
||||||
|
|
||||||
import { FetchState as FormStateType } from '../../../hooks/useFetchState'
|
|
||||||
import { Loader } from '../Loader'
|
import { Loader } from '../Loader'
|
||||||
|
|
||||||
export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {
|
export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {
|
||||||
@ -16,7 +16,7 @@ export const FormState: React.FC<FormStateProps> = (props) => {
|
|||||||
|
|
||||||
if (state === 'loading') {
|
if (state === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div data-testid='loader' className='mt-8 flex justify-center'>
|
<div data-cy='loader' className='mt-8 flex justify-center'>
|
||||||
<Loader />
|
<Loader />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -27,31 +27,21 @@ export const FormState: React.FC<FormStateProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
<div
|
{...rest}
|
||||||
{...rest}
|
className={classNames(
|
||||||
className={classNames(
|
props.className,
|
||||||
props.className,
|
'mt-6 flex max-w-xl items-center text-center font-medium',
|
||||||
'mt-6 flex max-w-xl items-center text-center font-medium',
|
{
|
||||||
{
|
'text-red-800 dark:text-red-400': state === 'error',
|
||||||
'text-red-800 dark:text-red-400': state === 'error',
|
'text-green-800 dark:text-green-400': state === 'success'
|
||||||
'text-green-800 dark:text-green-400': state === 'success'
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className='thumbnail inline bg-cover font-headline' />
|
|
||||||
<span id={id} className='pl-2'>
|
|
||||||
<b>{t(`errors:${state}`)}:</b> {message}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.thumbnail {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
background-image: url('/images/svg/icons/input/${state}.svg');
|
|
||||||
}
|
}
|
||||||
`}</style>
|
)}
|
||||||
</>
|
>
|
||||||
|
<div className='inline bg-cover font-headline' />
|
||||||
|
<span id={id} className='pl-2'>
|
||||||
|
<b>{t(`errors:${state}`)}:</b> {message}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user