Simplify create group dialog

web/components/groups/create-group-button.tsx

@@ -6,7 +6,6 @@ import { ConfirmationButton } from '../confirmation-button'
 import { Col } from '../layout/col'
 import { Spacer } from '../layout/spacer'
 import { Title } from '../title'
-import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { User } from 'common/user'
 import { MAX_GROUP_NAME_LENGTH } from 'common/group'
 import { createGroup } from 'web/lib/firebase/api'
@@ -21,31 +20,18 @@ export function CreateGroupButton(props: {
 }) {
   const { user, className, label, onOpenStateChange, goToGroupOnSubmit, icon } =
     props
-  const [defaultName, setDefaultName] = useState(`${user.name}'s group`)
+
   const [name, setName] = useState('')
-  const [memberUsers, setMemberUsers] = useState<User[]>([])
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [errorText, setErrorText] = useState('')
 
   const router = useRouter()
 
-  function updateMemberUsers(users: User[]) {
-    const usersFirstNames = users.map((user) => user.name.split(' ')[0])
-    const postFix =
-      usersFirstNames.length > 3 ? ` & ${usersFirstNames.length - 3} more` : ''
-    const newName = `${user.name.split(' ')[0]}${
-      users.length > 0 ? ', ' + usersFirstNames.slice(0, 3).join(', ') : ''
-    }${postFix}'s group`
-    setDefaultName(newName)
-    setMemberUsers(users)
-  }
-
   const onSubmit = async () => {
     setIsSubmitting(true)
-    const groupName = name !== '' ? name : defaultName
     const newGroup = {
-      name: groupName,
-      memberIds: memberUsers.map((user) => user.id),
+      name,
+      memberIds: [],
       anyoneCanJoin: true,
     }
     const result = await createGroup(newGroup).catch((e) => {
@@ -62,7 +48,6 @@ export function CreateGroupButton(props: {
     console.log(result.details)
 
     if (result.group) {
-      updateMemberUsers([])
       if (goToGroupOnSubmit)
         router.push(groupPath(result.group.slug)).catch((e) => {
           console.log(e)
@@ -99,41 +84,26 @@ export function CreateGroupButton(props: {
       onSubmitWithSuccess={onSubmit}
       onOpenChanged={(isOpen) => {
         onOpenStateChange?.(isOpen)
-        updateMemberUsers([])
         setName('')
       }}
     >
       <Title className="!my-0" text="Create a group" />
 
       <Col className="gap-1 text-gray-500">
-        <div>You can add markets and members to your group after creation.</div>
+        <div>You can add markets to your group after creation.</div>
       </Col>
-      <div className={'text-error'}>{errorText}</div>
+      {errorText && <div className={'text-error'}>{errorText}</div>}
 
-      <div>
-        <div className="form-control w-full">
-          <label className="label">
-            <span className="mb-0">Add members (optional)</span>
-          </label>
-          <FilterSelectUsers
-            setSelectedUsers={updateMemberUsers}
-            selectedUsers={memberUsers}
-            ignoreUserIds={[user.id]}
-          />
-        </div>
-        <div className="form-control w-full">
-          <label className="label">
-            <span className="mt-1">Group name (optional)</span>
-          </label>
-          <input
-            placeholder={defaultName}
-            className="input input-bordered resize-none"
-            disabled={isSubmitting}
-            value={name}
-            maxLength={MAX_GROUP_NAME_LENGTH}
-            onChange={(e) => setName(e.target.value || '')}
-          />
-        </div>
+      <div className="form-control w-full">
+        <label className="mb-2 ml-1 mt-0">Group name</label>
+        <input
+          placeholder={'Your group name'}
+          className="input input-bordered resize-none"
+          disabled={isSubmitting}
+          value={name}
+          maxLength={MAX_GROUP_NAME_LENGTH}
+          onChange={(e) => setName(e.target.value || '')}
+        />
 
         <Spacer h={4} />
       </div>