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

add info pannel

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-12-10 02:08:56 +03:00
parent d1a46435c4
commit 47152a921e
8 changed files with 250 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/home/account/missions/MyMissionItem.tsx
View File

@@ -42,9 +42,12 @@ const MissionItem: React.FC<MissionItemProps> = ({
setDeleteModalActive,
}) => {
const navigate = useNavigate();
const difficultyItems = ['Easy', 'Medium', 'Hard'];
const difficultyString =
difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
const calcDifficulty = (d: number) => {
if (d <= 1200) return 'Easy';
if (d <= 2000) return 'Medium';
return 'Hard';
};
const difficultyString = calcDifficulty(difficulty);
const deleteStatus = useAppSelector(
(state) => state.missions.statuses.delete,
);

8
src/views/home/missions/Missions.tsx
View File

@@ -36,6 +36,12 @@ const Missions = () => {
(state) => state.store.articles.articleTagFilter,
);
const calcDifficulty = (d: number) => {
if (d <= 1200) return 'Easy';
if (d <= 2000) return 'Medium';
return 'Hard';
};
useEffect(() => {
dispatch(setMenuActivePage('missions'));
dispatch(fetchMissions({ tags: tagsFilter }));
@@ -83,7 +89,7 @@ const Missions = () => {
id={v.id}
authorId={v.authorId}
name={v.name}
difficulty={'Easy'}
difficulty={calcDifficulty(v.difficulty)}
tags={v.tags}
timeLimit={1000}
memoryLimit={256 * 1024 * 1024}

85
src/views/home/rightpanel/Articles.tsx
View File

@@ -1,40 +1,63 @@
import { FC, Fragment } from 'react';
import { FC, Fragment, useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { fetchNewArticles } from '../../../redux/slices/articles';
export const ArticlesRightPanel: FC = () => {
const items = [
{
name: 'Энтузиаст создал карточки с NFC-метками для знакомства ребёнка с музыкой',
},
{
name: 'Алгоритм Древа Силы, Космический Сортировщик',
},
{
name: 'Космический Сортировщик',
},
{
name: 'Зеркала Многомерности',
},
];
const dispatch = useAppDispatch();
const articles = useAppSelector(
(state) => state.articles.fetchNewArticles.articles,
);
useEffect(() => {
dispatch(fetchNewArticles({ pageSize: 10 }));
}, []);
const getDaysAgo = (dateString: string) => {
const updatedDate = new Date(dateString);
const today = new Date();
// Сбрасываем время для точного сравнения по дням
updatedDate.setHours(0, 0, 0, 0);
today.setHours(0, 0, 0, 0);
const diffTime = today.getTime() - updatedDate.getTime();
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
if (diffDays === 0) return 'Сегодня';
if (diffDays === 1) return '1 день назад';
return `${diffDays} дня назад`;
};
return (
<div className="h-screen w-full overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[10px] flex flex-col">
<div className="text-liquid-white font-bold text-[18px]">
Попоулярные статьи
<div className="text-liquid-white font-bold text-[24px] mb-[10px]">
Новые статьи
</div>
{items.map((v, i) => {
return (
<Fragment key={i}>
{
<div className="font-bold text-liquid-light text-[16px]">
{v.name}
</div>
}
{i + 1 != items.length && (
<div className="h-[1px] w-full bg-liquid-lighter"></div>
)}
</Fragment>
);
})}
{articles &&
articles
.filter((v) => {
const updatedDate = new Date(v.updatedAt);
const threeDaysAgo = new Date();
threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
return updatedDate >= threeDaysAgo;
})
.map((v, i) => {
return (
<Fragment key={i}>
{
<div className="font-bold text-liquid-white text-[16px]">
{v.name}
<div className="text-sm text-liquid-light">
{getDaysAgo(v.updatedAt)}
</div>
</div>
}
{i + 1 != articles.length && (
<div className="h-[1px] w-full bg-liquid-lighter"></div>
)}
</Fragment>
);
})}
</div>
);
};

56
src/views/home/rightpanel/Missions.tsx
View File

@@ -1,5 +1,7 @@
import { FC, Fragment } from 'react';
import { FC, Fragment, useEffect } from 'react';
import { cn } from '../../../lib/cn';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { fetchNewMissions } from '../../../redux/slices/missions';
export const MissionsRightPanel: FC = () => {
const items = [
@@ -24,30 +26,61 @@ export const MissionsRightPanel: FC = () => {
tags: ['matrix', 'geometry', 'simulation'],
},
];
const dispatch = useAppDispatch();
const missions = useAppSelector((state) => state.missions.newMissions);
useEffect(() => {
dispatch(fetchNewMissions({ pageSize: 10 }));
}, []);
const getDaysAgo = (dateString: string) => {
const updatedDate = new Date(dateString);
const today = new Date();
// Сбрасываем время для точного сравнения по дням
updatedDate.setHours(0, 0, 0, 0);
today.setHours(0, 0, 0, 0);
const diffTime = today.getTime() - updatedDate.getTime();
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
if (diffDays === 0) return 'Сегодня';
if (diffDays === 1) return '1 день назад';
return `${diffDays} дня назад`;
};
const calcDifficulty = (d: number) => {
if (d <= 1200) return 'Easy';
if (d <= 2000) return 'Medium';
return 'Hard';
};
return (
<div className="h-screen w-full overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[10px] flex flex-col">
<div className="text-liquid-white font-bold text-[18px]">
Новые задачи
</div>
{items.map((v, i) => {
{missions.map((v, i) => {
return (
<Fragment key={i}>
{
<div className="text-liquid-light text-[16px]">
<div className="font-bold ">{v.name}</div>
<div className="font-bold text-liquid-white">
{v.name}
</div>
<div
className={cn(
'',
v.difficulty == 'Hard' &&
'text-liquid-red',
v.difficulty == 'Medium' &&
'text-liquid-orange',
v.difficulty == 'Easy' &&
'text-liquid-green',
calcDifficulty(v.difficulty) ==
'Hard' && 'text-liquid-red',
calcDifficulty(v.difficulty) ==
'Medium' && 'text-liquid-orange',
calcDifficulty(v.difficulty) ==
'Easy' && 'text-liquid-green',
)}
>
{v.difficulty}
{calcDifficulty(v.difficulty)}
</div>
<div className="flex gap-[10px] overflow-hidden">
{v.tags.slice(0, 2).map((v, i) => (
@@ -55,6 +88,9 @@ export const MissionsRightPanel: FC = () => {
))}
{v.tags.length > 2 && '...'}
</div>
<div className="text-sm text-liquid-light">
{getDaysAgo(v.updatedAt)}
</div>
</div>
}
{i + 1 != items.length && (