fix: channel and community naming #2302

packages/desktop/CHANGELOG.md

@@ -1,19 +1,3 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [2.2.1-alpha.1](https://github.com/TryQuiet/quiet/compare/@quiet/[email protected]...@quiet/[email protected]) (2024-07-29)
-
-
-### Bug Fixes
-
-* **2576:** Update hover and selected contrast and modify sidebar color in dark mode ([#2579](https://github.com/TryQuiet/quiet/issues/2579)) ([d7bf1b9](https://github.com/TryQuiet/quiet/commit/d7bf1b938bce3096fbb9a67296fdca3fc4a157dc))
-
-
-
-
-
 [unreleased]
 
 # New features:
@@ -33,6 +17,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Fixes issue with reconnecting to peers on resume on iOS ([#2424](https://github.com/TryQuiet/quiet/issues/2424))
 * Fixes references to 'invite code' to be 'invite link' in UI ([#2441](https://github.com/TryQuiet/quiet/issues/2441))
 * Fixes issue with image messages not displaying/throwing errors on iOS ([#2526](https://github.com/TryQuiet/quiet/issues/2526))
+* Removing parsing from channel and community naming ([#2302](https://github.com/TryQuiet/quiet/issues/2302))
 
 # Chores
 

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

@@ -67,7 +67,7 @@ describe('Add new channel', () => {
 
     function* testSubmittedChannelName(): Generator {
       const createChannelAction = yield* take(publicChannels.actions.createChannel)
-      expect(createChannelAction.payload.channel.name).toEqual('some-channel-name--')
+      expect(createChannelAction.payload.channel.name).toEqual('Some channel NAME  ')
     }
   })
 
@@ -87,26 +87,4 @@ describe('Add new channel', () => {
     await userEvent.type(input, 'happy-path')
     expect(warning).toBeNull()
   })
-
-  it.each([
-    ['UpperCaseToLowerCase', 'uppercasetolowercase'],
-    ['spaces to hyphens', 'spaces-to-hyphens'],
-    ['!@#$%^&*()', '----------'],
-  ])('user inserting wrong channel name "%s" gets corrected "%s"', async (name: string, corrected: string) => {
-    renderComponent(
-      <CreateChannelComponent
-        open={true}
-        createChannel={() => {}}
-        handleClose={() => {}}
-        clearErrorsDispatch={() => {}}
-      />
-    )
-
-    const input = screen.getByPlaceholderText('Enter a channel name')
-
-    await userEvent.type(input, name)
-    expect(screen.getByTestId('createChannelNameWarning')).toHaveTextContent(
-      `Your channel will be created as #${corrected}`
-    )
-  })
 })

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

@@ -1,32 +1,22 @@
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import { styled } from '@mui/material/styles'
 import { Controller, useForm } from 'react-hook-form'
 
 import { Grid, Typography } from '@mui/material'
 
-import WarningIcon from '@mui/icons-material/Warning'
-
 import Modal from '../../ui/Modal/Modal'
 import LoadingButton from '../../ui/LoadingButton/LoadingButton'
 
 import { TextField } from '../../ui/TextField/TextField'
 import { channelNameField } from '../../../forms/fields/createChannelFields'
 
-import { parseName } from '@quiet/common'
-
 const PREFIX = 'CreateChannelComponent'
 
 const classes = {
   fullContainer: `${PREFIX}fullContainer`,
   gutter: `${PREFIX}gutter`,
   button: `${PREFIX}button`,
   title: `${PREFIX}title`,
-  iconDiv: `${PREFIX}iconDiv`,
-  warningIcon: `${PREFIX}warningIcon`,
-  warningMessage: `${PREFIX}warningMessage`,
-  rootBar: `${PREFIX}rootBar`,
-  progressBar: `${PREFIX}progressBar`,
-  info: `${PREFIX}info`,
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
@@ -58,35 +48,6 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.title}`]: {
     marginBottom: 24,
   },
-
-  [`& .${classes.iconDiv}`]: {
-    width: 24,
-    height: 28,
-    marginRight: 8,
-  },
-
-  [`& .${classes.warningIcon}`]: {
-    color: theme.palette.warning.main,
-  },
-
-  [`& .${classes.warningMessage}`]: {
-    wordBreak: 'break-word',
-  },
-
-  [`& .${classes.rootBar}`]: {
-    width: 350,
-    marginTop: 32,
-    marginBottom: 16,
-  },
-
-  [`& .${classes.progressBar}`]: {
-    backgroundColor: theme.palette.colors.linkBlue,
-  },
-
-  [`& .${classes.info}`]: {
-    lineHeight: '19px',
-    color: theme.palette.colors.darkGray,
-  },
 }))
 
 const createChannelFields = {
@@ -112,9 +73,6 @@ export const CreateChannelComponent: React.FC<CreateChannelProps> = ({
   handleClose,
   clearErrorsDispatch,
 }) => {
-  const [channelName, setChannelName] = useState('')
-  const [parsedNameDiffers, setParsedNameDiffers] = useState(false)
-
   const {
     handleSubmit,
     formState: { errors },
@@ -131,33 +89,29 @@ export const CreateChannelComponent: React.FC<CreateChannelProps> = ({
   }
 
   const submitForm = (handleSubmit: (value: string) => void, values: CreateChannelFormValues) => {
-    handleSubmit(parseName(values.channelName))
+    handleSubmit(values.channelName)
   }
 
   const onChange = (name: string) => {
     setValue('channelName', name)
-    const parsedName = parseName(name)
-    setChannelName(parsedName)
-    setParsedNameDiffers(name !== parsedName)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!open) {
       setValue('channelName', '')
-      setChannelName('')
       clearErrors()
       clearErrorsDispatch()
     }
   }, [open])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (channelCreationError) {
       setError('channelName', { message: channelCreationError })
     }
   }, [channelCreationError])
 
   return (
-    <Modal open={open} handleClose={handleClose} data-testid={'createChannelModal'}>
+    <Modal open={open} handleClose={handleClose} data-testid='createChannelModal'>
       <StyledModalContent container direction='column'>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Grid container justifyContent='flex-start' direction='column' className={classes.fullContainer}>
@@ -167,16 +121,16 @@ export const CreateChannelComponent: React.FC<CreateChannelProps> = ({
             <Typography variant='body2'>Channel name</Typography>
             <Controller
               control={control}
-              defaultValue={''}
+              defaultValue=''
               rules={createChannelFields.channelName.validation}
-              name={'channelName'}
+              name='channelName'
               render={({ field }) => (
                 <TextField
                   {...createChannelFields.channelName.fieldProps}
                   fullWidth
-                  classes={''}
+                  classes=''
                   variant='outlined'
-                  placeholder={'Enter a channel name'}
+                  placeholder='Enter a channel name'
                   autoFocus
                   errors={errors}
                   onchange={event => {
@@ -190,28 +144,11 @@ export const CreateChannelComponent: React.FC<CreateChannelProps> = ({
                     field.onBlur()
                   }}
                   value={field.value}
-                  data-testid={'createChannelInput'}
+                  data-testid='createChannelInput'
                 />
               )}
             />
-            <div className={classes.gutter}>
-              {!errors.channelName && channelName.length > 0 && parsedNameDiffers && (
-                <Grid container alignItems='center' direction='row'>
-                  <Grid item className={classes.iconDiv}>
-                    <WarningIcon className={classes.warningIcon} />
-                  </Grid>
-                  <Grid item xs>
-                    <Typography
-                      variant='body2'
-                      className={classes.warningMessage}
-                      data-testid={'createChannelNameWarning'}
-                    >
-                      Your channel will be created as <b>{`#${channelName}`}</b>
-                    </Typography>
-                  </Grid>
-                </Grid>
-              )}
-            </div>
+            <div className={classes.gutter} />
             <LoadingButton
               variant='contained'
               color='primary'

packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.test.tsx

@@ -130,32 +130,6 @@ describe('Create community', () => {
     await waitFor(() => expect(handleCommunityAction).toBeCalledWith(communityName))
   })
 
-  it.each([
-    ['UpperCaseToLowerCase', 'uppercasetolowercase'],
-    ['spaces to hyphens', 'spaces-to-hyphens'],
-    ['!@#$%^&*()', '----------'],
-  ])('user inserting wrong community name "%s" gets corrected "%s"', async (name: string, corrected: string) => {
-    renderComponent(
-      <PerformCommunityActionComponent
-        open={true}
-        handleClose={() => {}}
-        communityOwnership={CommunityOwnership.Owner}
-        handleCommunityAction={() => {}}
-        handleRedirection={() => {}}
-        isConnectionReady={true}
-        isCloseDisabled={true}
-        hasReceivedResponse={false}
-      />
-    )
-
-    const input = screen.getByPlaceholderText('Community name')
-
-    await userEvent.type(input, name)
-    expect(screen.getByTestId('createCommunityNameWarning')).toHaveTextContent(
-      `Your community will be created as #${corrected}`
-    )
-  })
-
   it('user inserting invalid community name should see an error', async () => {
     const handleCommunityAction = jest.fn()
     const name = 'too-long-community-name'