Feature/1558/1559/1649

CHANGELOG.md

@@ -8,4 +8,6 @@
 
 * Fixed bug with displaying incorrect default settings tab.
 
-* Fixed LoadingPanel useEffect bug.
+* Labels for unregistered and duplicate usernames with modals
+
+* Fixed LoadingPanel useEffect bug.

packages/desktop/src/renderer/Root.tsx

@@ -29,6 +29,8 @@ import { ChannelContextMenu } from './components/ContextMenu/menus/ChannelContex
 import { DeleteChannel } from './components/Channel/DeleteChannel/DeleteChannel'
 import ChannelCreationModal from './components/ChannelCreationModal/ChannelCreationModal'
 import { SaveStateComponent } from './components/SaveState/SaveStateComponent'
+import UnregisteredModalContainer from './components/widgets/userLabel/unregistered/UnregisteredModal.container'
+import DuplicateModalContainer from './components/widgets/userLabel/duplicate/DuplicateModal.container'
 // Trigger lerna
 
 export const persistor = persistStore(store)
@@ -42,6 +44,8 @@ export default () => {
               <PersistGate loading={null} persistor={persistor}>
                 <SentryWarning />
                 <WarningModal />
+                <UnregisteredModalContainer />
+                <DuplicateModalContainer />
                 <SearchModal />
                 <ErrorModal />
                 <LoadingPanel />

packages/desktop/src/renderer/components/Channel/Channel.stories.cy.tsx

@@ -11,6 +11,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
 import { DisplayableMessage } from '@quiet/types'
 
 import ChannelComponent from './ChannelComponent'
+import { payloadDuplicated, payloadUnregistered } from '../widgets/userLabel/UserLabel.types'
 
 const Template: ComponentStory<typeof ChannelComponent> = () => {
   const [messages, setMessages] = useState<{
@@ -28,7 +29,7 @@ const Template: ComponentStory<typeof ChannelComponent> = () => {
       message: message,
       createdAt: 0,
       date: '12:46',
-      nickname: 'vader'
+      nickname: 'vader',
     }
     const _messages = mock_messages(_message)
     setMessages(_messages)
@@ -48,42 +49,42 @@ const Template: ComponentStory<typeof ChannelComponent> = () => {
             createdAt: 0,
             channelId: 'general',
             signature: 'signature',
-            pubKey: 'pubKey'
+            pubKey: 'pubKey',
           }}
           user={{
             id: 'id',
             nickname: 'vader',
             hiddenService: {
               onionAddress: 'onionAddress',
-              privateKey: 'privateKey'
+              privateKey: 'privateKey',
             },
             peerId: {
               id: 'id',
               privKey: 'privKey',
-              pubKey: 'pubKey'
+              pubKey: 'pubKey',
             },
             dmKeys: {
               publicKey: 'publicKey',
-              privateKey: 'privateKey'
+              privateKey: 'privateKey',
             },
             userCsr: {
               userCsr: 'userCsr',
               userKey: 'userKey',
               pkcs10: {
                 publicKey: 'publicKey',
                 privateKey: 'privateKey',
-                pkcs10: 'pkcs10'
-              }
+                pkcs10: 'pkcs10',
+              },
             },
             userCertificate: 'userCertificate',
-            joinTimestamp: null
+            joinTimestamp: null,
           }}
           isCommunityInitialized={true}
           uploadedFileModal={{
             open: false,
             handleOpen: function (_args?: any): any {},
             handleClose: function (): any {},
-            src: 'images/butterfly.jpeg'
+            src: 'images/butterfly.jpeg',
           }}
           channelId={'general'}
           channelName={'general'}
@@ -107,6 +108,8 @@ const Template: ComponentStory<typeof ChannelComponent> = () => {
           handleClipboardFiles={function (arg: ArrayBuffer, ext: string, name: string): void {
             throw new Error('Function not implemented.')
           }}
+          duplicatedUsernameModalHandleOpen={() => payloadDuplicated}
+          unregisteredUsernameModalHandleOpen={() => payloadUnregistered}
         />
       </DndProvider>
     </>
@@ -118,7 +121,7 @@ export const Component = Template.bind({})
 const component: ComponentMeta<typeof ChannelComponent> = {
   title: 'Components/ChannelComponentCypress',
   decorators: [withTheme],
-  component: ChannelComponent
+  component: ChannelComponent,
 }
 
 export default component

packages/desktop/src/renderer/components/Channel/Channel.tsx

@@ -55,6 +55,8 @@ const Channel = () => {
   const pendingMessages = useSelector(messages.selectors.messagesSendingStatus)
 
   const uploadedFileModal = useModal<{ src: string }>(ModalName.uploadedFileModal)
+  const { handleOpen: duplicatedUsernameModalHandleOpen } = useModal(ModalName.duplicatedUsernameModal)
+  const { handleOpen: unregisteredUsernameModalHandleOpen } = useModal(ModalName.unregisteredUsernameModal)
 
   const [uploadingFiles, setUploadingFiles] = React.useState<FilePreviewData>({})
 
@@ -220,6 +222,8 @@ const Channel = () => {
     openContextMenu: openContextMenu,
     enableContextMenu: enableContextMenu,
     pendingGeneralChannelRecreation: pendingGeneralChannelRecreation,
+    unregisteredUsernameModalHandleOpen,
+    duplicatedUsernameModalHandleOpen,
   }
 
   const uploadFilesPreviewProps: UploadFilesPreviewsProps = {

packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx

@@ -25,6 +25,7 @@ import { NewMessagesInfoComponent } from './NewMessagesInfo/NewMessagesInfoCompo
 
 import { FileActionsProps } from './File/FileComponent/FileComponent'
 import { UseModalType } from '../../containers/hooks'
+import { HandleOpenModalType } from '../widgets/userLabel/UserLabel.types'
 
 const ChannelMessagesWrapperStyled = styled(Grid)(({ theme }) => ({
   position: 'relative',
@@ -57,6 +58,8 @@ export interface ChannelComponentProps {
   openContextMenu?: () => void
   enableContextMenu?: boolean
   pendingGeneralChannelRecreation: boolean
+  unregisteredUsernameModalHandleOpen: HandleOpenModalType
+  duplicatedUsernameModalHandleOpen: HandleOpenModalType
 }
 
 const enum ScrollPosition {
@@ -90,6 +93,8 @@ export const ChannelComponent: React.FC<ChannelComponentProps & UploadFilesPrevi
   openContextMenu,
   enableContextMenu = false,
   pendingGeneralChannelRecreation,
+  unregisteredUsernameModalHandleOpen,
+  duplicatedUsernameModalHandleOpen,
 }) => {
   const [lastSeenMessage, setLastSeenMessage] = useState<string>()
   const [newMessagesInfo, setNewMessagesInfo] = useState<boolean>(false)
@@ -232,6 +237,8 @@ export const ChannelComponent: React.FC<ChannelComponentProps & UploadFilesPrevi
             cancelDownload={cancelDownload}
             onMathMessageRendered={updateMathMessagesRendered}
             pendingGeneralChannelRecreation={pendingGeneralChannelRecreation}
+            unregisteredUsernameModalHandleOpen={unregisteredUsernameModalHandleOpen}
+            duplicatedUsernameModalHandleOpen={duplicatedUsernameModalHandleOpen}
           />
         </ChannelMessagesWrapperStyled>
         <Grid item>

packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx

@@ -19,15 +19,20 @@ describe('BasicMessage', () => {
     const result = renderComponent(
       <HashRouter>
         <Provider store={store}>
-          <BasicMessageComponent messages={messages} openUrl={jest.fn()} />
+          <BasicMessageComponent
+            duplicatedUsernameModalHandleOpen={jest.fn()}
+            unregisteredUsernameModalHandleOpen={jest.fn()}
+            messages={messages}
+            openUrl={jest.fn()}
+          />
         </Provider>
       </HashRouter>
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-16u9k9h-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -48,10 +53,10 @@ describe('BasicMessage', () => {
                   class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-9pwih8-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-1unmp8r-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -102,15 +107,20 @@ describe('BasicMessage', () => {
     const result = renderComponent(
       <HashRouter>
         <Provider store={store}>
-          <BasicMessageComponent messages={messages} openUrl={jest.fn()} />
+          <BasicMessageComponent
+            duplicatedUsernameModalHandleOpen={jest.fn()}
+            unregisteredUsernameModalHandleOpen={jest.fn()}
+            messages={messages}
+            openUrl={jest.fn()}
+          />
         </Provider>
       </HashRouter>
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-16u9k9h-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -131,10 +141,10 @@ describe('BasicMessage', () => {
                   class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-9pwih8-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-1unmp8r-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -195,15 +205,20 @@ describe('BasicMessage', () => {
     const result = renderComponent(
       <HashRouter>
         <Provider store={store}>
-          <BasicMessageComponent messages={messages} openUrl={jest.fn()} />
+          <BasicMessageComponent
+            duplicatedUsernameModalHandleOpen={jest.fn()}
+            unregisteredUsernameModalHandleOpen={jest.fn()}
+            messages={messages}
+            openUrl={jest.fn()}
+          />
         </Provider>
       </HashRouter>
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-16u9k9h-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-13gdcvl-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -227,10 +242,10 @@ describe('BasicMessage', () => {
                   class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-9pwih8-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-1unmp8r-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -292,15 +307,20 @@ describe('BasicMessage', () => {
     const result = renderComponent(
       <HashRouter>
         <Provider store={store}>
-          <BasicMessageComponent messages={[...message1, ...message2]} openUrl={jest.fn()} />
+          <BasicMessageComponent
+            duplicatedUsernameModalHandleOpen={jest.fn()}
+            unregisteredUsernameModalHandleOpen={jest.fn()}
+            messages={[...message1, ...message2]}
+            openUrl={jest.fn()}
+          />
         </Provider>
       </HashRouter>
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-16u9k9h-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -321,10 +341,10 @@ describe('BasicMessage', () => {
                   class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-9pwih8-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-1unmp8r-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"