group drop down list

src/views/home/contests/ModalCreate.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../../components/input/DropDownList';
 import DateInput from '../../../components/input/DateInput';
 import { cn } from '../../../lib/cn';
+import { fetchMyGroups } from '../../../redux/slices/groups';
 
 function toUtc(localDateTime?: string): string {
     if (!localDateTime) return '';
@@ -80,6 +81,16 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
     const contest = useAppSelector(
         (state) => state.contests.createContest.contest,
     );
+    const myname = useAppSelector((state) => state.auth.username);
+    const myGroups = useAppSelector(
+        (state) => state.groups.fetchMyGroups.groups,
+    ).filter((group) =>
+        group.members.some(
+            (member) =>
+                member.username === myname &&
+                member.role.includes('Administrator'),
+        ),
+    );
 
     useEffect(() => {
         if (status === 'successful') {
@@ -92,6 +103,12 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
         }
     }, [status]);
 
+    useEffect(() => {
+        if (active) {
+            dispatch(fetchMyGroups());
+        }
+    }, [active]);
+
     const handleChange = (key: keyof CreateContestBody, value: any) => {
         setForm((prev) => ({ ...prev, [key]: value }));
     };
@@ -105,7 +122,16 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
             }),
         );
     };
+    const groupItems = myGroups.map((v) => {
+        return {
+            value: '' + v.id,
+            text: v.name,
+        };
+    });
+    const groupIdDefaultState =
+        myGroups.find((g) => g.id == form?.groupId) ?? myGroups[0] ?? undefined;
 
+    console.log(groupItems, myGroups, groupIdDefaultState);
     return (
         <Modal
             className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
@@ -165,26 +191,44 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
 
                 <div
                     className={cn(
-                        ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-200',
+                        ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-200 mb-[10px]',
                         form.visibility == 'GroupPrivate' &&
                             'grid-rows-[1fr] opacity-100',
                     )}
                 >
-                    <div className="overflow-hidden">
-                        <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
-                            <NumberInput
-                                defaultState={form.groupId ?? 1}
-                                name="groupId"
-                                label="Id группы"
-                                placeholder="Например: 3"
-                                minValue={1}
-                                maxValue={1000000000000000}
-                                onChange={(v) =>
-                                    handleChange('groupId', Number(v))
-                                }
-                            />
+                    {groupIdDefaultState ? (
+                        <div
+                            className={cn(
+                                form.visibility != 'GroupPrivate' &&
+                                    'overflow-hidden',
+                            )}
+                        >
+                            <div>
+                                <label className="block text-sm mb-2 mt-[10px]">
+                                    Группа для привязки
+                                </label>
+
+                                <DropDownList
+                                    items={groupItems}
+                                    defaultState={{
+                                        value: '' + groupIdDefaultState.id,
+                                        text: groupIdDefaultState.name,
+                                    }}
+                                    onChange={(v) => {
+                                        handleChange('groupId', Number(v));
+                                    }}
+                                    weight="w-full"
+                                />
+                            </div>
                         </div>
-                    </div>
+                    ) : (
+                        <div className="overflow-hidden">
+                            <div className="text-liquid-red my-[20px]">
+                                У вас нет группы вкоторой вы являетесь
+                                Администратором!
+                            </div>
+                        </div>
+                    )}
                 </div>
 
                 {/* Даты */}