LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main branch changes

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-12-25 17:35:56 +03:00
parent 781945b358
commit 106510e3c9
4 changed files with 209 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/api/missionsUpload.ts Normal file
View File

@@ -0,0 +1,39 @@
export interface UploadMissionRequest {
missionFile: File;
difficulty: number;
tags?: string[] | null;
}
export const buildUploadMissionFormData = (
request: UploadMissionRequest,
): FormData => {
const formData = new FormData();
formData.append('missionFile', request.missionFile);
formData.append('difficulty', request.difficulty.toString());
// tags:
// - undefined => fromArchive (do not include tags key at all)
// - [] => empty list (not reliably representable via multipart without backend support)
// - [..] => custom tags, repeated keys
if (Array.isArray(request.tags)) {
request.tags.forEach((tag) => formData.append('tags', tag));
}
return formData;
};
export const getProblemXmlMissingNameMessage = (responseData: unknown) => {
const asText =
typeof responseData === 'string'
? responseData
: responseData == null
? ''
: JSON.stringify(responseData);
if (/problem\.xml/i.test(asText) || /Mission name was not found/i.test(asText)) {
return 'В архиве отсутствует имя в problem.xml';
}
return null;
};

18
src/components/modal/Modal.tsx
View File

@@ -15,8 +15,8 @@ interface ModalProps {
}
const modalbgVariants = {
closed: { opacity: 0 },
open: { opacity: 1 },
closed: { opacity: 0, backdropFilter: 'blur(0px)' },
open: { opacity: 1, backdropFilter: 'blur(6px)' },
};
const modalVariants = {
@@ -47,13 +47,15 @@ export const Modal: React.FC<ModalProps> = ({
exit={modalbgVariants.closed}
transition={{ duration: 0.15 }}
className={cn(
' fixed top-0 left-0 h-svh w-svw backdrop-filter transition-[background-color,backdrop-filter,opacity] z-50',
backdrop == 'blur' && open && 'backdrop-blur-sm',
backdrop == 'opaque' &&
open &&
'bg-[#00000055] pointer-events-none',
'fixed top-0 left-0 h-svh w-svw z-50',
backdrop === 'opaque' && 'bg-[#00000055]',
)}
></motion.div>
style={
backdrop === 'blur'
? undefined
: { backdropFilter: 'none' }
}
/>
)}
</AnimatePresence>
<div className="fixed top-0 left-0 h-svh w-svw flex items-center justify-center pointer-events-none z-50">

59
src/redux/slices/missions.ts
View File

@@ -1,6 +1,11 @@
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import axios from '../../axios';
import { toastError } from '../../lib/toastNotification';
import {
buildUploadMissionFormData,
getProblemXmlMissingNameMessage,
UploadMissionRequest,
} from '../../api/missionsUpload';
// ─── Типы ────────────────────────────────────────────
@@ -148,27 +153,45 @@ export const fetchMyMissions = createAsyncThunk(
export const uploadMission = createAsyncThunk(
'missions/uploadMission',
async (
{
file,
name,
difficulty,
tags,
}: { file: File; name: string; difficulty: number; tags: string[] },
request: UploadMissionRequest,
{ rejectWithValue },
) => {
try {
const formData = new FormData();
formData.append('MissionFile', file);
formData.append('Name', name);
formData.append('Difficulty', difficulty.toString());
tags.forEach((tag) => formData.append('Tags', tag));
const formData = buildUploadMissionFormData(request);
const response = await axios.post('/missions/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
return response.data; // Mission
} catch (err: any) {
return rejectWithValue(err.response?.data);
const status = err?.response?.status;
const responseData = err?.response?.data;
if (status === 400) {
const msg = getProblemXmlMissingNameMessage(responseData);
if (msg) {
return rejectWithValue({
errors: {
missionFile: [msg],
},
});
}
}
if (responseData?.errors) {
return rejectWithValue(responseData);
}
const fallback =
typeof responseData === 'string'
? responseData
: 'Не удалось загрузить миссию';
return rejectWithValue({
errors: {
general: [fallback],
},
});
}
},
);
@@ -351,17 +374,19 @@ const missionsSlice = createSlice({
(state, action: PayloadAction<any>) => {
state.statuses.upload = 'failed';
const errors = action.payload.errors as Record<
string,
string[]
>;
const errors = action.payload?.errors as
| Record<string, string[]>
| undefined;
if (errors) {
Object.values(errors).forEach((messages) => {
messages.forEach((msg) => {
toastError(msg);
});
});
state.create.errors = errors;
} else {
toastError('Не удалось загрузить миссию');
}
},
);

111
src/views/home/missions/ModalCreate.tsx
View File

@@ -12,6 +12,7 @@ import { toastSuccess } from '../../../lib/toastNotification';
import { cn } from '../../../lib/cn';
import { Link } from 'react-router-dom';
import { NumberInput } from '../../../components/input/NumberInput';
import { DropDownList, DropDownListItem } from '../../../components/input/DropDownList';
interface ModalCreateProps {
active: boolean;
@@ -19,23 +20,37 @@ interface ModalCreateProps {
}
const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
const [name, setName] = useState<string>('');
type TagsMode = 'fromArchive' | 'none' | 'custom';
const [difficulty, setDifficulty] = useState<number>(1);
const [file, setFile] = useState<File | null>(null);
const [tagInput, setTagInput] = useState<string>('');
const [tags, setTags] = useState<string[]>([]);
const [tagsMode, setTagsMode] = useState<TagsMode>('fromArchive');
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)) {
setTags([...tags, newTag]);
setTagInput('');
const normalizeTags = (raw: string[]): string[] => {
const result: string[] = [];
const seen = new Set<string>();
for (const t of raw) {
const trimmed = t.trim();
if (!trimmed) continue;
const key = trimmed.toLowerCase();
if (seen.has(key)) continue;
seen.add(key);
result.push(trimmed);
}
return result;
};
const addTag = () => {
const parts = tagInput.split(',').map((v) => v.trim());
const next = normalizeTags([...tags, ...parts]);
setTags(next);
setTagInput('');
};
const removeTag = (tagToRemove: string) => {
@@ -51,16 +66,27 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
const handleSubmit = async () => {
setClickSubmit(true);
if (!file) return;
dispatch(uploadMission({ file, name, difficulty, tags }));
const payloadTags =
tagsMode === 'custom' ? normalizeTags(tags) : undefined;
dispatch(
uploadMission({
missionFile: file,
difficulty,
tags: payloadTags,
}),
);
};
useEffect(() => {
if (status === 'successful') {
toastSuccess('Миссия создана!');
setName('');
setDifficulty(1);
setTags([]);
setFile(null);
setTagInput('');
setTagsMode('fromArchive');
dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
setActive(false);
}
@@ -73,12 +99,32 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
}, [active]);
const getNameErrorMessage = (): string => {
const getDifficultyErrorMessage = (): string => {
if (!clickSubmit) return '';
if (name == '') return 'Поле не может быть пустым';
if (!Number.isFinite(difficulty) || difficulty < 1)
return 'Укажите сложность (минимум 1)';
return '';
};
const tagsModeItems: DropDownListItem[] = [
{ text: 'Теги: из архива', value: 'fromArchive' },
{ text: 'Теги: без тегов', value: 'none' },
{ text: 'Теги: свои', value: 'custom' },
];
const isTagsMode = (v: string): v is TagsMode =>
v === 'fromArchive' || v === 'none' || v === 'custom';
const currentTagsModeItem =
tagsModeItems.find((i) => i.value === tagsMode) ?? tagsModeItems[0];
useEffect(() => {
if (tagsMode === 'none') {
setTags([]);
setTagInput('');
}
}, [tagsMode]);
return (
<Modal
className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
@@ -89,18 +135,6 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
<div className="w-[500px]">
<div className="font-bold text-[30px]">Добавить задачу</div>
<Input
name="name"
autocomplete="name"
className="mt-[10px]"
type="text"
label="Название"
defaultState={name}
onChange={setName}
placeholder="В яблочко"
error={getNameErrorMessage()}
/>
<NumberInput
name="difficulty"
className="mt-[10px]"
@@ -110,6 +144,7 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
maxValue={3500}
onChange={(v) => setDifficulty(v)}
placeholder="1"
error={getDifficultyErrorMessage()}
/>
<div className="mt-4">
@@ -137,16 +172,38 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
{/* Теги */}
<div className="mb-[50px] max-w-[600px]">
<div className="mt-[20px]">
<div className="text-[18px] text-liquid-white font-medium h-[23px] mb-[10px]">
Режим тегов
</div>
<DropDownList
items={tagsModeItems}
defaultState={currentTagsModeItem}
onChange={(v) => {
if (isTagsMode(v)) setTagsMode(v);
}}
weight="w-full"
/>
{tagsMode === 'none' && (
<div className="text-liquid-red text-[14px] mt-[8px] whitespace-pre-line">
Пустой список тегов сейчас не поддерживается в multipart.
Будет использован режим “из архива”.
</div>
)}
</div>
{tagsMode === 'custom' && (
<>
<div className="grid grid-cols-[1fr,140px] items-end gap-2">
<Input
name="articleTag"
autocomplete="articleTag"
name="missionTags"
autocomplete="missionTags"
className="mt-[20px] max-w-[600px]"
type="text"
label="Теги"
label="Теги (через запятую)"
onChange={(v) => setTagInput(v)}
defaultState={tagInput}
placeholder="arrays"
placeholder="arrays, dp"
onKeyDown={(e) => {
if (e.key === 'Enter') addTag();
}}
@@ -173,6 +230,8 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
</div>
))}
</div>
</>
)}
</div>
<div>