From 7ac4f86cd5433d153c2c52f804e60ab4c3ae0923 Mon Sep 17 00:00:00 2001 From: Divlo Date: Sat, 19 Feb 2022 23:20:33 +0100 Subject: [PATCH] feat: interact with user settings/profile (#9) --- .eslintignore | 8 - .eslintrc.json | 26 +- .gitattributes | 1 + .lighthouserc.json | 2 + .lintstagedrc.json | 4 +- .prettierignore | 1 - Dockerfile | 6 +- README.md | 1 - components/Application/Application.tsx | 22 +- .../Application/Channels/Channel/Channel.tsx | 4 +- components/Application/Channels/Channels.tsx | 4 +- .../ConfirmGuildJoin/ConfirmGuildJoin.tsx | 8 +- .../Application/CreateGuild/CreateGuild.tsx | 7 +- .../GuildLeftSidebar/GuildLeftSidebar.tsx | 8 +- components/Application/Guilds/Guilds.tsx | 2 +- .../GuildPublic/GuildPublic.tsx | 14 +- .../JoinGuildsPublic/JoinGuildsPublic.tsx | 6 +- .../Application/Members/Member/Member.tsx | 6 +- components/Application/Members/Members.tsx | 2 +- .../Application/Messages/Message/Message.tsx | 10 +- .../Messages/Message/MessageFile/FileIcon.tsx | 2 +- .../Message/MessageFile/MessageFile.tsx | 6 +- components/Application/Messages/Messages.tsx | 4 +- .../Application/PopupGuild/PopupGuild.tsx | 6 +- .../PopupGuildCard/PopupGuildCard.stories.tsx | 2 +- .../PopupGuildCard/PopupGuildCard.test.tsx | 2 +- .../PopupGuildCard/PopupGuildCard.tsx | 11 +- .../Application/SendMessage/SendMessage.tsx | 14 +- components/Application/Sidebar/Sidebar.tsx | 4 +- .../UserProfile/UserProfile.stories.tsx | 7 +- .../UserProfile/UserProfile.test.tsx | 9 +- .../Application/UserProfile/UserProfile.tsx | 50 +- .../UserProfileGuild/UserProfileGuild.tsx | 12 +- .../UserProfileGuilds/UserProfileGuilds.tsx | 25 +- .../UserSettings/UserSettings.stories.tsx | 19 - .../UserSettings/UserSettings.test.tsx | 16 - .../Application/UserSettings/UserSettings.tsx | 236 +- components/Authentication/Authentication.tsx | 24 +- components/ErrorPage/ErrorPage.test.tsx | 4 +- components/ErrorPage/ErrorPage.tsx | 4 +- components/Footer/Footer.stories.tsx | 2 +- components/Footer/Footer.test.tsx | 4 +- components/Footer/Footer.tsx | 4 +- components/Footer/VersionLink.tsx | 2 +- components/Header/Header.stories.tsx | 2 +- components/Header/Header.test.tsx | 4 +- components/Header/Header.tsx | 4 +- components/Header/Language/index.tsx | 8 +- components/Header/SwitchTheme/SwitchTheme.tsx | 6 +- components/design/Button/Button.test.tsx | 4 +- components/design/Checkbox/Checkbox.tsx | 6 +- components/design/Divider/Divider.stories.tsx | 2 +- components/design/Divider/Divider.test.tsx | 2 +- components/design/Divider/Divider.tsx | 4 +- .../design/FormState/FormState.test.tsx | 12 +- components/design/FormState/FormState.tsx | 4 +- components/design/IconButton/IconButton.tsx | 2 +- components/design/IconLink/IconLink.tsx | 8 +- components/design/Input/Input.test.tsx | 14 +- components/design/Input/Input.tsx | 10 +- components/design/Loader/Loader.test.tsx | 2 +- components/design/Main/Main.test.tsx | 2 +- components/design/Main/Main.tsx | 2 +- .../SocialMediaButton.test.tsx | 2 +- components/design/Textarea/Textarea.tsx | 6 +- cypress/fixtures/handler.ts | 4 +- cypress/fixtures/users/[userId]/get.ts | 17 + .../common/application/authentication.spec.ts | 4 +- .../application/[guildId]/[channelId].spec.ts | 8 +- .../application/users/[userId]/index.spec.ts | 35 + cypress/plugins/index.js | 11 +- generators/component/Component.test.tsx.hbs | 2 +- generators/component/index.js | 1 - global.d.ts | 2 + hooks/useForm/getErrorTranslationKey.test.ts | 2 +- hooks/useForm/handleCheckboxBoolean.test.ts | 22 + hooks/useForm/handleCheckboxBoolean.ts | 25 + .../replaceEmptyStringInObjectToNull.test.ts | 20 + .../replaceEmptyStringInObjectToNull.ts | 19 + hooks/useForm/useForm.ts | 50 +- i18n.json | 2 +- locales/en/authentication.json | 3 +- locales/fr/application.json | 4 +- locales/fr/authentication.json | 3 +- next.config.js | 3 +- package-lock.json | 15276 ++++++---------- package.json | 102 +- pages/404.tsx | 2 +- pages/500.tsx | 2 +- pages/_app.tsx | 11 +- pages/application/[guildId]/[channelId].tsx | 2 +- pages/application/users/[userId]/index.tsx | 40 +- .../users/{[userId] => }/settings.tsx | 7 +- pages/authentication/forgot-password.tsx | 9 +- pages/authentication/reset-password.tsx | 7 +- pages/index.tsx | 10 +- plopfile.js | 2 +- styles/global.css | 4 +- .../authentication/AuthenticationContext.tsx | 40 +- tools/types.ts | 3 + tsconfig.json | 11 +- 101 files changed, 6705 insertions(+), 9777 deletions(-) delete mode 100644 .eslintignore create mode 100644 .gitattributes delete mode 100644 components/Application/UserSettings/UserSettings.stories.tsx delete mode 100644 components/Application/UserSettings/UserSettings.test.tsx create mode 100644 cypress/fixtures/users/[userId]/get.ts create mode 100644 cypress/integration/pages/application/users/[userId]/index.spec.ts create mode 100644 global.d.ts create mode 100644 hooks/useForm/handleCheckboxBoolean.test.ts create mode 100644 hooks/useForm/handleCheckboxBoolean.ts create mode 100644 hooks/useForm/replaceEmptyStringInObjectToNull.test.ts create mode 100644 hooks/useForm/replaceEmptyStringInObjectToNull.ts rename pages/application/users/{[userId] => }/settings.tsx (80%) create mode 100644 tools/types.ts diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 54c8e25..0000000 --- a/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -.next -.lighthouseci -storybook-static -coverage -node_modules -next-env.d.ts -**/workbox-*.js -**/sw.js diff --git a/.eslintrc.json b/.eslintrc.json index 82f0ff3..ea73573 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,12 +1,13 @@ { "extends": [ - "standard-with-typescript", - "next", + "conventions", "next/core-web-vitals", "plugin:storybook/recommended", + "plugin:cypress/recommended", "prettier" ], - "plugins": ["unicorn", "import", "prettier"], + "parser": "@typescript-eslint/parser", + "plugins": ["prettier"], "parserOptions": { "project": "./tsconfig.json" }, @@ -17,25 +18,6 @@ }, "rules": { "prettier/prettier": "error", - "import/order": [ - "error", - { - "groups": ["builtin", "external", "internal"], - "newlines-between": "always" - } - ], - "unicorn/prefer-node-protocol": "error", - "unicorn/prevent-abbreviations": [ - "error", - { - "replacements": { - "props": { - "properties": false - } - } - } - ], - "@typescript-eslint/no-namespace": "off", "@next/next/no-img-element": "off" } } diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..6313b56 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.lighthouserc.json b/.lighthouserc.json index e91e4a0..a14d04b 100644 --- a/.lighthouserc.json +++ b/.lighthouserc.json @@ -16,6 +16,8 @@ "assert": { "preset": "lighthouse:recommended", "assertions": { + "image-size-responsive": "warning", + "unsized-images": "warning", "csp-xss": "warning", "non-composited-animations": "warning", "unused-javascript": "warning" diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 564ecca..6e8df8b 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,10 +1,10 @@ { "*": ["editorconfig-checker"], - "*.{js,ts,jsx,tsx}": [ + "*.{js,jsx,ts,tsx}": [ "prettier --write", "eslint --fix", "jest --findRelatedTests" ], - "*.{css,yml,json}": ["prettier --write"], + "*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"], "*.md": ["prettier --write", "markdownlint --dot --fix"] } diff --git a/.prettierignore b/.prettierignore index cc86b20..d2cb86a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,7 +3,6 @@ storybook-static coverage node_modules -next-env.d.ts **/workbox-*.js **/sw.js *.hbs diff --git a/Dockerfile b/Dockerfile index ed3d182..d52d349 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,15 +1,15 @@ -FROM node:16.13.1 AS dependencies +FROM node:16.13.2 AS dependencies WORKDIR /usr/src/app COPY ./package*.json ./ RUN npm install -FROM node:16.13.1 AS builder +FROM node:16.13.2 AS builder WORKDIR /usr/src/app COPY ./ ./ COPY --from=dependencies /usr/src/app/node_modules ./node_modules RUN npm run build -FROM node:16.13.1 AS runner +FROM node:16.13.2 AS runner WORKDIR /usr/src/app ENV NODE_ENV=production COPY --from=builder /usr/src/app/next.config.js ./next.config.js diff --git a/README.md b/README.md index dc7c35b..e4b7c0b 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,6 @@
Conventional Commits semantic-release - Dependabot badge

## 📜 About diff --git a/components/Application/Application.tsx b/components/Application/Application.tsx index 209600a..9a079d3 100644 --- a/components/Application/Application.tsx +++ b/components/Application/Application.tsx @@ -24,7 +24,7 @@ export type ApplicationPath = | '/application/guilds/join' | '/application/guilds/create' | `/application/users/${number}` - | `/application/users/${number}/settings` + | `/application/users/settings` | GuildsChannelsPath export interface ApplicationProps { @@ -135,16 +135,16 @@ export const Application: React.FC = (props) => { return ( <> -
+
handleToggleSidebars('left')} > {!visibleSidebars.left ? : }
{title}
@@ -152,7 +152,7 @@ export const Application: React.FC = (props) => { {title.startsWith('#') && ( handleToggleSidebars('right')} > {!visibleSidebars.right ? : } @@ -162,7 +162,7 @@ export const Application: React.FC = (props) => {
@@ -171,10 +171,10 @@ export const Application: React.FC = (props) => { visible={visibleSidebars.left} isMobile={isMobile} > -
+
= (props) => { selected={path === '/application'} title='Join or create a Guild' > - + @@ -206,7 +206,7 @@ export const Application: React.FC = (props) => {
= (props) => { diff --git a/components/Application/Channels/Channels.tsx b/components/Application/Channels/Channels.tsx index 7ee0e92..64e48f2 100644 --- a/components/Application/Channels/Channels.tsx +++ b/components/Application/Channels/Channels.tsx @@ -17,10 +17,10 @@ export const Channels: React.FC = (props) => { return (
= (props) => { height={150} width={150} /> -
-

Rejoindre la guild ?

+
+

Rejoindre la guild ?

diff --git a/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx b/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx index de701dc..267ff3e 100644 --- a/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx +++ b/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx @@ -2,7 +2,7 @@ import { CogIcon, PlusIcon } from '@heroicons/react/solid' import { useGuildMember } from '../../../contexts/GuildMember' import { Divider } from '../../design/Divider' -import { Channels } from '../../Application/Channels' +import { Channels } from '../Channels' import { IconButton } from '../../design/IconButton' import { GuildsChannelsPath } from '..' @@ -16,8 +16,8 @@ export const GuildLeftSidebar: React.FC = (props) => { const { guild } = useGuildMember() return ( -
-
+
+

{guild.name}

@@ -25,7 +25,7 @@ export const GuildLeftSidebar: React.FC = (props) => { -
+
diff --git a/components/Application/Guilds/Guilds.tsx b/components/Application/Guilds/Guilds.tsx index bbc87bd..682f01e 100644 --- a/components/Application/Guilds/Guilds.tsx +++ b/components/Application/Guilds/Guilds.tsx @@ -17,7 +17,7 @@ export const Guilds: React.FC = (props) => { return (
= (props) => { const { t } = useTranslation() return ( -
+
setIsConfirmed(!isConfirmed)} @@ -36,10 +36,10 @@ export const GuildPublic: React.FC = (props) => { width={80} height={80} /> -
+

{guild.name}

@@ -47,20 +47,20 @@ export const GuildPublic: React.FC = (props) => { {guild.description != null ? ( guild.description ) : ( - + Nothing's here... )}

-

+

{guild.membersCount} {t('application:members')}

{ } return ( -
+
= (props) => { return ( -
-
+
+
= (props) => { {member.user.name}

{member.user.status != null && ( - {member.user.status} + {member.user.status} )}
diff --git a/components/Application/Members/Members.tsx b/components/Application/Members/Members.tsx index c163d5e..a1a10a4 100644 --- a/components/Application/Members/Members.tsx +++ b/components/Application/Members/Members.tsx @@ -15,7 +15,7 @@ export const Members: React.FC = () => { return ( <>
-

+

{capitalize(t('application:members'))}

diff --git a/components/Application/Messages/Message/Message.tsx b/components/Application/Messages/Message/Message.tsx index 3add275..b33f2e7 100644 --- a/components/Application/Messages/Message/Message.tsx +++ b/components/Application/Messages/Message/Message.tsx @@ -17,13 +17,13 @@ export const Message: React.FC = (props) => { return (
-
-
+
+
= (props) => { ) diff --git a/components/Application/Messages/Messages.tsx b/components/Application/Messages/Messages.tsx index 563fe44..9c385d9 100644 --- a/components/Application/Messages/Messages.tsx +++ b/components/Application/Messages/Messages.tsx @@ -12,7 +12,7 @@ export const Messages: React.FC = () => { return (

Nothing to show here! @@ -25,7 +25,7 @@ export const Messages: React.FC = () => { return (

= (props) => {
= (props) => { } description={t('application:create-a-guild-description')} link={{ - icon: , + icon: , text: t('application:create-a-guild'), href: '/application/guilds/create' }} @@ -49,7 +49,7 @@ export const PopupGuild: React.FC = (props) => { } description={t('application:join-a-guild-description')} link={{ - icon: , + icon: , text: t('application:join-a-guild'), href: '/application/guilds/join' }} diff --git a/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.stories.tsx b/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.stories.tsx index a3b500b..23652f3 100644 --- a/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.stories.tsx +++ b/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.stories.tsx @@ -29,7 +29,7 @@ PopupGuildCard.args = { description: 'Create your own guild and manage everything within a few clicks !', link: { - icon: , + icon: , text: 'Create a server', href: '/application/guilds/create' } diff --git a/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx b/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx index e407328..0daf5d0 100644 --- a/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx +++ b/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx @@ -18,7 +18,7 @@ describe('', () => { } description='Create your own guild and manage everything within a few clicks !' link={{ - icon: , + icon: , text: 'Create a server', href: '/application/guilds/create' }} diff --git a/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.tsx b/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.tsx index e4915e0..127b1b9 100644 --- a/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.tsx +++ b/components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.tsx @@ -1,3 +1,4 @@ +import React from 'react' import Link from 'next/link' export interface PopupGuildCardProps { @@ -14,16 +15,16 @@ export const PopupGuildCard: React.FC = (props) => { const { image, description, link } = props return ( -
-
+
+
{image}
-
-

+

+

{description}

- + {link.icon} {link.text} diff --git a/components/Application/SendMessage/SendMessage.tsx b/components/Application/SendMessage/SendMessage.tsx index 5b0d79f..76455a0 100644 --- a/components/Application/SendMessage/SendMessage.tsx +++ b/components/Application/SendMessage/SendMessage.tsx @@ -80,14 +80,14 @@ export const SendMessage: React.FC = (props) => { <> {isVisibleEmojiPicker && }
-
+
= (props) => { autoFocus /> -
+
-
-
+
= (props) => { />
-
+
-
- +
+
-
-
- +
+
+