* copy directly from v1. will get working and then convert class to functional components
* screen showing up correctly. Need to convert lifestyle methods
* create channel button working
* save before refactor in prep for bringing in edit_channel functionality
* change function naming
* clean up lint
* clean up for PR review
* clean up for PR review
* remove hoardcoded styles
* add edit_channel screen
* add handlePatchChannel
* add custom useFormInput hook. use edit screen for both create and edit screens. edit or create screen mode determined by channel prop passed in as a channel or null
* rename edit_channel to create_or_edit_channel
* displayname, header, and purpose are now an object with value and onChange props, created from the useFormInput hook. Now only need to pass this new FormInput Prop to the edit_channel_info component and deconstruct there to get the onChange and value
* fix some lint errors
* fix some lint errors
* remove empty line
* pass intl into utils validate functions because they are not Hooks. add validation for displayName including translations.
* Move useFormInput hook to its own hooks file and import
* simplify
* remove editing prop. Was used to determine if the right button was enabled. It was always true for edit_channel screen and always false for create channel screen. The enableRightButton prop call back is was also used for the same reason.
* remove channeUrl editing references. This was not implemented on v1
* pass editing prop back into component and add back logic. When editing one field must change. when creating, just need to check that name is provided
* lint fixes
* fix typing issue for channel types
* scrolling ref should be fixed. Linting should pass now
* Linting should pass now
* require id field in partial Channel. fixes tsc
* remove everything related to renaming the channel URL. This has never been requred for mobile
* manage state with useReducer so that all actions/state in one location. This also removes the number of onXXX functions and reduces the number of functions in the component
* reorganize code. useEffects are at top. Move type and interfaces outside of function component
* Fix lint
* nit: invert if statement checking a negative
* use cneterChannelColor. in figma this is center channel text, but I verified theme color by comparing to SSO login text color
* Simple snapshot tests as a start
* Add more tests
* update snapshot
* add snapshot tests. Add tests for button enabling and disabling
* simplify test with destructuring.
* PR feedback. formatting changes. get user and teamid from one call
* remove FormInput hook and use value/setvalue convention for controlled components
* no need to setChannelDisplayName after creating/updating channel
* Just pass the setXXX function. Don't need to create as separate callback
* modify floatingTextInput component to allow placeholder text
* remove InteractionManager. PR nits
* mv EditChannelComponent into create_or_edit screen. Rename component from EditChannelInfo to ChannelInfoForm
* correct import path
* add IntlShape Type to function input. Wrap screen with withServerDatabase, not withIntl
* remove state setting function calls from inside the reducer. move close function outside of the component. remove setRightButton and rightButton and place rightbutton in initial appState
* move editing const after useX oneliners and before useCallback, useEffect, and useReducers
* rightButton
- useMemo to memoize an object with dependencies
- move out of the appState
emitCanSaveChannel
- wrap with useCallback
onCreateChannel
- wrap with useCallback
onUpdateChannel
- wrap with useCallback
useEffect Navigation
- use the callbacks as dependencies in stead of the depencies of those
callbacks.
* wrap all formatted message with useMemo()
wrap all onXXXChangeText with useCallback and add deps
move all oneliner derived constants directly after useState useMemo
* remove useMemo from formatted text
* switchToCHannel is still not working. failing at
const channel: ChannelModel = await member.channel.fetch();
* use prepareMyChannelsForTeam to update db tables for new channel
* add placeholder text color
* Attach open edit channel screen to `Set Header` button in channel intro view
port SectionItem from V1 and us to add a Switch for setting private/public channel
hook up the plus icon in the channel list header to create a channel (temporary fix to allow debugging)
add new queryChannelsInfoById and queryCurrentChannelInfo query functions
update text for create screen text inputs
* Fix styles and fix actions
* Add autocomplete, fix patch, and address design feedback
* Address feedback
* Add margin between icon and label on Make Private
* Address feedback
* Address feedback
* Address feedback and fix channel list not updating when the channel gets created
* Address feedback and directly add the channel to the default category
* Render at-mentions as Members if no channelId is set
* Display autocomplete on iOS
Co-authored-by: Jason Frerich <jason.frerich@mattermost.com>
Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
import {IntlShape} from 'react-intl';
|
|
|
|
import {Channel, General, Permissions} from '@constants';
|
|
import {t, DEFAULT_LOCALE} from '@i18n';
|
|
import {hasPermission} from '@utils/role';
|
|
|
|
import {generateId} from '../general';
|
|
import {cleanUpUrlable} from '../url';
|
|
|
|
import type ChannelModel from '@typings/database/models/servers/channel';
|
|
|
|
export function getDirectChannelName(id: string, otherId: string): string {
|
|
let handle;
|
|
|
|
if (otherId > id) {
|
|
handle = id + '__' + otherId;
|
|
} else {
|
|
handle = otherId + '__' + id;
|
|
}
|
|
|
|
return handle;
|
|
}
|
|
|
|
export function selectDefaultChannelForTeam<T extends Channel|ChannelModel>(channels: T[], memberships: ChannelMembership[], teamId: string, roles?: Role[], locale = DEFAULT_LOCALE) {
|
|
let channel: T|undefined;
|
|
let canIJoinPublicChannelsInTeam = false;
|
|
|
|
if (roles) {
|
|
canIJoinPublicChannelsInTeam = hasPermission(roles, Permissions.JOIN_PUBLIC_CHANNELS, true);
|
|
}
|
|
const defaultChannel = channels?.find((c) => c.name === General.DEFAULT_CHANNEL);
|
|
const iAmMemberOfTheTeamDefaultChannel = Boolean(defaultChannel && memberships?.find((m) => m.channel_id === defaultChannel.id));
|
|
const myFirstTeamChannel = channels?.filter((c) =>
|
|
(('team_id' in c) ? c.team_id : c.teamId) === teamId &&
|
|
c.type === General.OPEN_CHANNEL &&
|
|
Boolean(memberships?.find((m) => c.id === m.channel_id),
|
|
)).sort(sortChannelsByDisplayName.bind(null, locale))[0];
|
|
|
|
if (iAmMemberOfTheTeamDefaultChannel || canIJoinPublicChannelsInTeam) {
|
|
channel = defaultChannel;
|
|
} else {
|
|
channel = myFirstTeamChannel || defaultChannel;
|
|
}
|
|
|
|
return channel;
|
|
}
|
|
|
|
export function sortChannelsByDisplayName<T extends Channel|ChannelModel>(locale: string, a: T, b: T): number {
|
|
// if both channels have the display_name defined
|
|
const aDisplayName = 'display_name' in a ? a.display_name : a.displayName;
|
|
const bDisplayName = 'display_name' in b ? b.display_name : b.displayName;
|
|
if (aDisplayName && bDisplayName && aDisplayName !== bDisplayName) {
|
|
return aDisplayName.toLowerCase().localeCompare(bDisplayName.toLowerCase(), locale, {numeric: true});
|
|
}
|
|
|
|
return a.name.toLowerCase().localeCompare(b.name.toLowerCase(), locale, {numeric: true});
|
|
}
|
|
|
|
export function sortChannelsModelByDisplayName(locale: string, a: ChannelModel, b: ChannelModel): number {
|
|
// if both channels have the display_name defined
|
|
if (a.displayName && b.displayName && a.displayName !== b.displayName) {
|
|
return a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase(), locale, {numeric: true});
|
|
}
|
|
|
|
return a.name.toLowerCase().localeCompare(b.name.toLowerCase(), locale, {numeric: true});
|
|
}
|
|
|
|
const displayNameValidationMessages = {
|
|
display_name_required: {
|
|
id: t('mobile.rename_channel.display_name_required'),
|
|
defaultMessage: 'Channel name is required',
|
|
},
|
|
display_name_maxLength: {
|
|
id: t('mobile.rename_channel.display_name_maxLength'),
|
|
defaultMessage: 'Channel name must be less than {maxLength, number} characters',
|
|
},
|
|
display_name_minLength: {
|
|
id: t('mobile.rename_channel.display_name_minLength'),
|
|
defaultMessage: 'Channel name must be {minLength, number} or more characters',
|
|
},
|
|
};
|
|
|
|
export const validateDisplayName = (intl: IntlShape, displayName: string): {error: string} => {
|
|
let errorMessage;
|
|
switch (true) {
|
|
case !displayName:
|
|
errorMessage = intl.formatMessage(displayNameValidationMessages.display_name_required);
|
|
break;
|
|
case displayName.length > Channel.MAX_CHANNEL_NAME_LENGTH:
|
|
errorMessage = intl.formatMessage(
|
|
displayNameValidationMessages.display_name_maxLength,
|
|
{maxLength: Channel.MAX_CHANNEL_NAME_LENGTH});
|
|
break;
|
|
case displayName.length < Channel.MIN_CHANNEL_NAME_LENGTH:
|
|
errorMessage = intl.formatMessage(
|
|
displayNameValidationMessages.display_name_minLength,
|
|
{minLength: Channel.MIN_CHANNEL_NAME_LENGTH});
|
|
break;
|
|
|
|
default:
|
|
errorMessage = '';
|
|
}
|
|
return {error: errorMessage};
|
|
};
|
|
|
|
export function generateChannelNameFromDisplayName(displayName: string) {
|
|
let name = cleanUpUrlable(displayName);
|
|
if (name === '') {
|
|
name = generateId();
|
|
}
|
|
return name;
|
|
}
|