add error toasts

src/views/home/missions/ModalCreate.tsx

@@ -8,6 +8,10 @@ import {
     setMissionsStatus,
     uploadMission,
 } from '../../../redux/slices/missions';
+import { toastSuccess } from '../../../lib/toastNotification';
+import { cn } from '../../../lib/cn';
+import { Link } from 'react-router-dom';
+import { NumberInput } from '../../../components/input/NumberInput';
 
 interface ModalCreateProps {
     active: boolean;
@@ -24,6 +28,8 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
     const status = useAppSelector((state) => state.missions.statuses.upload);
     const dispatch = useAppDispatch();
 
+    const [clickSubmit, setClickSubmit] = useState<boolean>(false);
+
     const addTag = () => {
         const newTag = tagInput.trim();
         if (newTag && !tags.includes(newTag)) {
@@ -43,13 +49,14 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
     };
 
     const handleSubmit = async () => {
-        if (!file) return alert('Выберите файл миссии!');
+        setClickSubmit(true);
+        if (!file) return;
         dispatch(uploadMission({ file, name, difficulty, tags }));
     };
 
     useEffect(() => {
         if (status === 'successful') {
-            alert('Миссия успешно загружена!');
+            toastSuccess('Миссия создана!');
             setName('');
             setDifficulty(1);
             setTags([]);
@@ -60,9 +67,18 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
     }, [status]);
 
     useEffect(() => {
+        if (active == true) {
+            setClickSubmit(false);
+        }
         dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
     }, [active]);
 
+    const getNameErrorMessage = (): string => {
+        if (!clickSubmit) return '';
+        if (name == '') return 'Поле не может быть пустым';
+        return '';
+    };
+
     return (
         <Modal
             className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
@@ -82,16 +98,17 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                     defaultState={name}
                     onChange={setName}
                     placeholder="В яблочко"
+                    error={getNameErrorMessage()}
                 />
 
-                <Input
+                <NumberInput
                     name="difficulty"
-                    autocomplete="difficulty"
                     className="mt-[10px]"
-                    type="number"
                     label="Сложность"
-                    defaultState={'' + difficulty}
-                    onChange={(v) => setDifficulty(Number(v))}
+                    defaultState={difficulty}
+                    minValue={1}
+                    maxValue={3500}
+                    onChange={(v) => setDifficulty(v)}
                     placeholder="1"
                 />
 
@@ -106,6 +123,16 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                             className="hidden"
                         />
                     </label>
+                    {
+                        <div
+                            className={cn(
+                                'text-liquid-red text-[14px] h-auto text-left mt-[5px] whitespace-pre-line overflow-hidden ',
+                                (!clickSubmit || file) && 'h-0 mt-0',
+                            )}
+                        >
+                            Необходимо выбрать файл задачи
+                        </div>
+                    }
                 </div>
 
                 {/* Теги */}
@@ -148,6 +175,17 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                     </div>
                 </div>
 
+                <div>
+                    Создать пакет задачи можно на платформе{' '}
+                    <Link
+                        to={'https://polygon.codeforces.com'}
+                        target="_blank"
+                        className="text-[#7489ff] hover:text-[#8c9dfd] transition-color duration-300"
+                    >
+                        polygon
+                    </Link>
+                </div>
+
                 <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
                     <PrimaryButton
                         onClick={handleSubmit}
@@ -159,8 +197,6 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                         text="Отмена"
                     />
                 </div>
-
-                {status == 'failed' && <div>error</div>}
             </div>
         </Modal>
     );