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

update articles slice

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-11-13 16:32:32 +03:00
parent 18d17f895d
commit ded41ba7f0
8 changed files with 496 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Article.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
import { fetchArticleById } from '../redux/slices/articles';
import MarkdownPreview from '../views/articleeditor/MarckDownPreview';
import { useQuery } from '../hooks/useQuery';
import { ArticlesRightPanel } from '../views/home/rightpanel/Articles';
const Article = () => {
// Получаем параметры из URL
@@ -19,8 +20,12 @@ const Article = () => {
return <Navigate to="/home" replace />;
}
const dispatch = useAppDispatch();
const article = useAppSelector((state) => state.articles.currentArticle);
const status = useAppSelector((state) => state.articles.statuses.fetchById);
const article = useAppSelector(
(state) => state.articles.fetchArticleById.article,
);
const status = useAppSelector(
(state) => state.articles.fetchArticleById.status,
);
useEffect(() => {
dispatch(fetchArticleById(articleIdNumber));
@@ -65,7 +70,7 @@ const Article = () => {
)}
</div>
<div className=""></div>
<ArticlesRightPanel />
</div>
);
};

122
src/pages/ArticleEditor.tsx
View File

@@ -23,26 +23,33 @@ const ArticleEditor = () => {
const query = useQuery();
const back = query.get('back') ?? undefined;
const articleId = Number(query.get('articleId') ?? undefined);
const article = useAppSelector((state) => state.articles.currentArticle);
const refactor = articleId != undefined && !isNaN(articleId);
const refactor = articleId && !isNaN(articleId);
// Достаём данные из redux
const article = useAppSelector(
(state) => state.articles.fetchArticleById.article,
);
const statusCreate = useAppSelector(
(state) => state.articles.createArticle.status,
);
const statusUpdate = useAppSelector(
(state) => state.articles.updateArticle.status,
);
const statusDelete = useAppSelector(
(state) => state.articles.deleteArticle.status,
);
// Локальные состояния
const [code, setCode] = useState<string>(article?.content || '');
const [name, setName] = useState<string>(article?.name || '');
const [tagInput, setTagInput] = useState<string>('');
const [tags, setTags] = useState<string[]>(article?.tags || []);
const [activeEditor, setActiveEditor] = useState<boolean>(false);
const statusCreate = useAppSelector(
(state) => state.articles.statuses.create,
);
const statusUpdate = useAppSelector(
(state) => state.articles.statuses.update,
);
const statusDelete = useAppSelector(
(state) => state.articles.statuses.delete,
);
// ==========================
// Теги
// ==========================
const addTag = () => {
const newTag = tagInput.trim();
if (newTag && !tags.includes(newTag)) {
@@ -55,53 +62,63 @@ const ArticleEditor = () => {
setTags(tags.filter((tag) => tag !== tagToRemove));
};
// ==========================
// Эффекты по статусам
// ==========================
useEffect(() => {
if (statusCreate == 'successful') {
dispatch(setArticlesStatus({ key: 'create', status: 'idle' }));
navigate(back ? back : '/home/articles');
if (statusCreate === 'successful') {
dispatch(
setArticlesStatus({ key: 'createArticle', status: 'idle' }),
);
navigate(back ?? '/home/articles');
}
}, [statusCreate]);
useEffect(() => {
if (statusDelete == 'successful') {
dispatch(setArticlesStatus({ key: 'delete', status: 'idle' }));
navigate(back ? back : '/home/articles');
}
}, [statusDelete]);
useEffect(() => {
if (statusUpdate == 'successful') {
dispatch(setArticlesStatus({ key: 'update', status: 'idle' }));
navigate(back ? back : '/home/articles');
if (statusUpdate === 'successful') {
dispatch(
setArticlesStatus({ key: 'updateArticle', status: 'idle' }),
);
navigate(back ?? '/home/articles');
}
}, [statusUpdate]);
useEffect(() => {
if (statusDelete === 'successful') {
dispatch(
setArticlesStatus({ key: 'deleteArticle', status: 'idle' }),
);
navigate(back ?? '/home/articles');
}
}, [statusDelete]);
// ==========================
// Получение статьи
// ==========================
useEffect(() => {
if (articleId) {
dispatch(fetchArticleById(articleId));
}
}, [articleId]);
// Обновление локального состояния после загрузки статьи
useEffect(() => {
if (article && refactor) {
setCode(article?.content || '');
setName(article?.name || '');
setTags(article?.tags || []);
setCode(article.content || '');
setName(article.name || '');
setTags(article.tags || []);
}
}, [article]);
// ==========================
// Рендер
// ==========================
return (
<div className="h-screen grid grid-rows-[60px,1fr]">
{activeEditor ? (
<Header
backClick={() => {
setActiveEditor(false);
}}
/>
<Header backClick={() => setActiveEditor(false)} />
) : (
<Header
backClick={() => navigate(back ? back : '/home/articles')}
/>
<Header backClick={() => navigate(back ?? '/home/articles')} />
)}
{activeEditor ? (
@@ -113,6 +130,8 @@ const ArticleEditor = () => {
? `Редактирование статьи: \"${article?.name}\"`
: 'Создание статьи'}
</div>
{/* Кнопки действий */}
<div>
{refactor ? (
<div className="flex gap-[20px]">
@@ -129,16 +148,16 @@ const ArticleEditor = () => {
}}
text="Обновить"
className="mt-[20px]"
disabled={statusUpdate == 'loading'}
disabled={statusUpdate === 'loading'}
/>
<ReverseButton
onClick={() => {
dispatch(deleteArticle(articleId));
}}
onClick={() =>
dispatch(deleteArticle(articleId))
}
color="error"
text="Удалить"
className="mt-[20px]"
disabled={statusDelete == 'loading'}
disabled={statusDelete === 'loading'}
/>
</div>
) : (
@@ -154,11 +173,12 @@ const ArticleEditor = () => {
}}
text="Опубликовать"
className="mt-[20px]"
disabled={statusCreate == 'loading'}
disabled={statusCreate === 'loading'}
/>
)}
</div>
{/* Название */}
<Input
defaultState={name}
name="articleName"
@@ -166,13 +186,11 @@ const ArticleEditor = () => {
className="mt-[20px] max-w-[600px]"
type="text"
label="Название"
onChange={(v) => {
setName(v);
}}
onChange={setName}
placeholder="Новая статья"
/>
{/* Блок для тегов */}
{/* Теги */}
<div className="mt-[20px] max-w-[600px]">
<div className="grid grid-cols-[1fr,140px] items-end gap-2">
<Input
@@ -181,14 +199,11 @@ const ArticleEditor = () => {
className="mt-[20px] max-w-[600px]"
type="text"
label="Теги"
onChange={(v) => {
setTagInput(v);
}}
onChange={setTagInput}
defaultState={tagInput}
placeholder="arrays"
onKeyDown={(e) => {
console.log(e.key);
if (e.key == 'Enter') addTag();
if (e.key === 'Enter') addTag();
}}
/>
<PrimaryButton
@@ -215,6 +230,7 @@ const ArticleEditor = () => {
</div>
</div>
{/* Просмотр и переход в редактор */}
<PrimaryButton
onClick={() => setActiveEditor(true)}
text="Редактировать текст"
@@ -222,7 +238,7 @@ const ArticleEditor = () => {
/>
<MarkdownPreview
content={code}
className="bg-transparent border-liquid-lighter border-[3px] rounder-[20px] mt-[20px]"
className="bg-transparent border-liquid-lighter border-[3px] rounded-[20px] mt-[20px]"
/>
</div>
)}

7
src/pages/Home.tsx
View File

@@ -11,12 +11,13 @@ import Articles from '../views/home/articles/Articles';
import Groups from '../views/home/groups/Groups';
import Contests from '../views/home/contests/Contests';
import { PrimaryButton } from '../components/button/PrimaryButton';
import Group from '../views/home/groups/Group';
import Group from '../views/home/group/Group';
import Contest from '../views/home/contest/Contest';
import Account from '../views/home/account/Account';
import ProtectedRoute from '../components/router/ProtectedRoute';
import { MissionsRightPanel } from '../views/home/rightpanel/Missions';
import { ArticlesRightPanel } from '../views/home/rightpanel/Articles';
import { GroupRightPanel } from '../views/home/rightpanel/Group';
const Home = () => {
const name = useAppSelector((state) => state.auth.username);
@@ -78,6 +79,10 @@ const Home = () => {
<Routes>
<Route path="articles/*" element={<ArticlesRightPanel />} />
<Route path="missions/*" element={<MissionsRightPanel />} />
<Route
path="group/:groupId"
element={<GroupRightPanel />}
/>
</Routes>
}
</div>

423
src/redux/slices/articles.ts
View File

@@ -1,7 +1,9 @@
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import axios from '../../axios';
// ─── Типы ────────────────────────────────────────────
// =====================
// Типы
// =====================
type Status = 'idle' | 'loading' | 'successful' | 'failed';
@@ -15,39 +17,145 @@ export interface Article {
updatedAt: string;
}
interface ArticlesState {
articles: Article[];
currentArticle?: Article;
interface ArticlesResponse {
hasNextPage: boolean;
statuses: {
create: Status;
update: Status;
delete: Status;
fetchAll: Status;
fetchById: Status;
articles: Article[];
}
// =====================
// Состояние
// =====================
interface ArticlesState {
fetchArticles: {
articles: Article[];
hasNextPage: boolean;
status: Status;
error?: string;
};
fetchArticleById: {
article?: Article;
status: Status;
error?: string;
};
createArticle: {
article?: Article;
status: Status;
error?: string;
};
updateArticle: {
article?: Article;
status: Status;
error?: string;
};
deleteArticle: {
status: Status;
error?: string;
};
fetchMyArticles: {
articles: Article[];
status: Status;
error?: string;
};
error: string | null;
}
const initialState: ArticlesState = {
fetchArticles: {
articles: [],
currentArticle: undefined,
hasNextPage: false,
statuses: {
create: 'idle',
update: 'idle',
delete: 'idle',
fetchAll: 'idle',
fetchById: 'idle',
status: 'idle',
error: undefined,
},
fetchArticleById: {
article: undefined,
status: 'idle',
error: undefined,
},
createArticle: {
article: undefined,
status: 'idle',
error: undefined,
},
updateArticle: {
article: undefined,
status: 'idle',
error: undefined,
},
deleteArticle: {
status: 'idle',
error: undefined,
},
fetchMyArticles: {
articles: [],
status: 'idle',
error: undefined,
},
error: null,
};
// ─── Async Thunks ─────────────────────────────────────
// =====================
// Async Thunks
// =====================
// POST /articles
// Все статьи
export const fetchArticles = createAsyncThunk(
'articles/fetchArticles',
async (
{
page = 0,
pageSize = 10,
tags,
}: { page?: number; pageSize?: number; tags?: string[] } = {},
{ rejectWithValue },
) => {
try {
const params: any = { page, pageSize };
if (tags && tags.length > 0) params.tags = tags;
const response = await axios.get<ArticlesResponse>('/articles', {
params,
});
return response.data;
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message || 'Ошибка при получении статей',
);
}
},
);
// Мои статьи
export const fetchMyArticles = createAsyncThunk(
'articles/fetchMyArticles',
async (_, { rejectWithValue }) => {
try {
const response = await axios.get<Article[]>('/articles/my');
return response.data;
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message ||
'Ошибка при получении моих статей',
);
}
},
);
// Статья по ID
export const fetchArticleById = createAsyncThunk(
'articles/fetchById',
async (articleId: number, { rejectWithValue }) => {
try {
const response = await axios.get<Article>(`/articles/${articleId}`);
return response.data;
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message || 'Ошибка при получении статьи',
);
}
},
);
// Создание статьи
export const createArticle = createAsyncThunk(
'articles/createArticle',
'articles/create',
async (
{
name,
@@ -57,12 +165,12 @@ export const createArticle = createAsyncThunk(
{ rejectWithValue },
) => {
try {
const response = await axios.post('/articles', {
const response = await axios.post<Article>('/articles', {
name,
content,
tags,
});
return response.data as Article;
return response.data;
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message || 'Ошибка при создании статьи',
@@ -71,9 +179,9 @@ export const createArticle = createAsyncThunk(
},
);
// PUT /articles/{articleId}
// Обновление статьи
export const updateArticle = createAsyncThunk(
'articles/updateArticle',
'articles/update',
async (
{
articleId,
@@ -84,12 +192,15 @@ export const updateArticle = createAsyncThunk(
{ rejectWithValue },
) => {
try {
const response = await axios.put(`/articles/${articleId}`, {
const response = await axios.put<Article>(
`/articles/${articleId}`,
{
name,
content,
tags,
});
return response.data as Article;
},
);
return response.data;
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message || 'Ошибка при обновлении статьи',
@@ -98,9 +209,9 @@ export const updateArticle = createAsyncThunk(
},
);
// DELETE /articles/{articleId}
// Удаление статьи
export const deleteArticle = createAsyncThunk(
'articles/deleteArticle',
'articles/delete',
async (articleId: number, { rejectWithValue }) => {
try {
await axios.delete(`/articles/${articleId}`);
@@ -113,186 +224,136 @@ export const deleteArticle = createAsyncThunk(
},
);
// GET /articles
export const fetchArticles = createAsyncThunk(
'articles/fetchArticles',
async (
{
page = 0,
pageSize = 10,
tags,
}: { page?: number; pageSize?: number; tags?: string[] },
{ rejectWithValue },
) => {
try {
const params: any = { page, pageSize };
if (tags && tags.length > 0) params.tags = tags;
const response = await axios.get('/articles', { params });
return response.data as {
hasNextPage: boolean;
articles: Article[];
};
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message || 'Ошибка при получении статей',
);
}
},
);
// GET /articles/{articleId}
export const fetchArticleById = createAsyncThunk(
'articles/fetchArticleById',
async (articleId: number, { rejectWithValue }) => {
try {
const response = await axios.get(`/articles/${articleId}`);
return response.data as Article;
} catch (err: any) {
return rejectWithValue(
err.response?.data?.message || 'Ошибка при получении статьи',
);
}
},
);
// ─── Slice ────────────────────────────────────────────
// =====================
// Slice
// =====================
const articlesSlice = createSlice({
name: 'articles',
initialState,
reducers: {
clearCurrentArticle: (state) => {
state.currentArticle = undefined;
},
setArticlesStatus: (
state,
action: PayloadAction<{
key: keyof ArticlesState['statuses'];
status: Status;
}>,
action: PayloadAction<{ key: keyof ArticlesState; status: Status }>,
) => {
const { key, status } = action.payload;
state.statuses[key] = status;
if (state[key]) {
(state[key] as any).status = status;
}
},
},
extraReducers: (builder) => {
// ─── CREATE ARTICLE ───
builder.addCase(createArticle.pending, (state) => {
state.statuses.create = 'loading';
state.error = null;
});
builder.addCase(
createArticle.fulfilled,
(state, action: PayloadAction<Article>) => {
state.statuses.create = 'successful';
state.articles.push(action.payload);
},
);
builder.addCase(
createArticle.rejected,
(state, action: PayloadAction<any>) => {
state.statuses.create = 'failed';
state.error = action.payload;
},
);
// ─── UPDATE ARTICLE ───
builder.addCase(updateArticle.pending, (state) => {
state.statuses.update = 'loading';
state.error = null;
});
builder.addCase(
updateArticle.fulfilled,
(state, action: PayloadAction<Article>) => {
state.statuses.update = 'successful';
const index = state.articles.findIndex(
(a) => a.id === action.payload.id,
);
if (index !== -1) state.articles[index] = action.payload;
if (state.currentArticle?.id === action.payload.id)
state.currentArticle = action.payload;
},
);
builder.addCase(
updateArticle.rejected,
(state, action: PayloadAction<any>) => {
state.statuses.update = 'failed';
state.error = action.payload;
},
);
// ─── DELETE ARTICLE ───
builder.addCase(deleteArticle.pending, (state) => {
state.statuses.delete = 'loading';
state.error = null;
});
builder.addCase(
deleteArticle.fulfilled,
(state, action: PayloadAction<number>) => {
state.statuses.delete = 'successful';
state.articles = state.articles.filter(
(a) => a.id !== action.payload,
);
if (state.currentArticle?.id === action.payload)
state.currentArticle = undefined;
},
);
builder.addCase(
deleteArticle.rejected,
(state, action: PayloadAction<any>) => {
state.statuses.delete = 'failed';
state.error = action.payload;
},
);
// ─── FETCH ARTICLES ───
// fetchArticles
builder.addCase(fetchArticles.pending, (state) => {
state.statuses.fetchAll = 'loading';
state.error = null;
state.fetchArticles.status = 'loading';
state.fetchArticles.error = undefined;
});
builder.addCase(
fetchArticles.fulfilled,
(
state,
action: PayloadAction<{
hasNextPage: boolean;
articles: Article[];
}>,
) => {
state.statuses.fetchAll = 'successful';
state.articles = action.payload.articles;
state.hasNextPage = action.payload.hasNextPage;
},
);
builder.addCase(
fetchArticles.rejected,
(state, action: PayloadAction<any>) => {
state.statuses.fetchAll = 'failed';
state.error = action.payload;
(state, action: PayloadAction<ArticlesResponse>) => {
state.fetchArticles.status = 'successful';
state.fetchArticles.articles = action.payload.articles;
state.fetchArticles.hasNextPage = action.payload.hasNextPage;
},
);
builder.addCase(fetchArticles.rejected, (state, action: any) => {
state.fetchArticles.status = 'failed';
state.fetchArticles.error = action.payload;
});
// ─── FETCH ARTICLE BY ID ───
// fetchMyArticles
builder.addCase(fetchMyArticles.pending, (state) => {
state.fetchMyArticles.status = 'loading';
state.fetchMyArticles.error = undefined;
});
builder.addCase(
fetchMyArticles.fulfilled,
(state, action: PayloadAction<Article[]>) => {
state.fetchMyArticles.status = 'successful';
state.fetchMyArticles.articles = action.payload;
},
);
builder.addCase(fetchMyArticles.rejected, (state, action: any) => {
state.fetchMyArticles.status = 'failed';
state.fetchMyArticles.error = action.payload;
});
// fetchArticleById
builder.addCase(fetchArticleById.pending, (state) => {
state.statuses.fetchById = 'loading';
state.error = null;
state.fetchArticleById.status = 'loading';
state.fetchArticleById.error = undefined;
});
builder.addCase(
fetchArticleById.fulfilled,
(state, action: PayloadAction<Article>) => {
state.statuses.fetchById = 'successful';
state.currentArticle = action.payload;
state.fetchArticleById.status = 'successful';
state.fetchArticleById.article = action.payload;
},
);
builder.addCase(fetchArticleById.rejected, (state, action: any) => {
state.fetchArticleById.status = 'failed';
state.fetchArticleById.error = action.payload;
});
// createArticle
builder.addCase(createArticle.pending, (state) => {
state.createArticle.status = 'loading';
state.createArticle.error = undefined;
});
builder.addCase(
fetchArticleById.rejected,
(state, action: PayloadAction<any>) => {
state.statuses.fetchById = 'failed';
state.error = action.payload;
createArticle.fulfilled,
(state, action: PayloadAction<Article>) => {
state.createArticle.status = 'successful';
state.createArticle.article = action.payload;
},
);
builder.addCase(createArticle.rejected, (state, action: any) => {
state.createArticle.status = 'failed';
state.createArticle.error = action.payload;
});
// updateArticle
builder.addCase(updateArticle.pending, (state) => {
state.updateArticle.status = 'loading';
state.updateArticle.error = undefined;
});
builder.addCase(
updateArticle.fulfilled,
(state, action: PayloadAction<Article>) => {
state.updateArticle.status = 'successful';
state.updateArticle.article = action.payload;
},
);
builder.addCase(updateArticle.rejected, (state, action: any) => {
state.updateArticle.status = 'failed';
state.updateArticle.error = action.payload;
});
// deleteArticle
builder.addCase(deleteArticle.pending, (state) => {
state.deleteArticle.status = 'loading';
state.deleteArticle.error = undefined;
});
builder.addCase(
deleteArticle.fulfilled,
(state, action: PayloadAction<number>) => {
state.deleteArticle.status = 'successful';
state.fetchArticles.articles =
state.fetchArticles.articles.filter(
(a) => a.id !== action.payload,
);
state.fetchMyArticles.articles =
state.fetchMyArticles.articles.filter(
(a) => a.id !== action.payload,
);
},
);
builder.addCase(deleteArticle.rejected, (state, action: any) => {
state.deleteArticle.status = 'failed';
state.deleteArticle.error = action.payload;
});
},
});
export const { clearCurrentArticle, setArticlesStatus } = articlesSlice.actions;
export const { setArticlesStatus } = articlesSlice.actions;
export const articlesReducer = articlesSlice.reducer;

63
src/views/home/account/articles/ArticlesBlock.tsx
View File

@@ -3,8 +3,7 @@ import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
import { cn } from '../../../../lib/cn';
import { ChevroneDown, Edit } from '../../../../assets/icons/groups';
import { fetchArticles } from '../../../../redux/slices/articles';
import { fetchMyArticles } from '../../../../redux/slices/articles';
import { useNavigate } from 'react-router-dom';
export interface ArticleItemProps {
@@ -13,19 +12,19 @@ export interface ArticleItemProps {
tags: string[];
}
const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
const ArticleItem: FC<ArticleItemProps> = ({ id, name, tags }) => {
const navigate = useNavigate();
return (
<div
className={cn(
'w-full relative rounded-[10px] text-liquid-white mb-[20px]',
// type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
'gap-[20px] px-[20px] py-[10px] box-border',
'border-b-[1px] border-b-liquid-lighter cursor-pointer hover:bg-liquid-lighter transition-all duration-300',
)}
onClick={() => {
navigate(`/article/${id}?back=/home/account/articles`);
}}
onClick={() =>
navigate(`/article/${id}?back=/home/account/articles`)
}
>
<div className="h-[23px] flex">
<div className="text-[18px] font-bold w-[60px] mr-[20px] flex items-center">
@@ -35,13 +34,14 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
{name}
</div>
</div>
<div className="text-[14px] flex text-liquid-light gap-[10px] mt-[10px]">
{tags.map((v, i) => (
<div
key={i}
className={cn(
'rounded-full px-[16px] py-[8px] bg-liquid-lighter',
v == 'Sertificated' && 'text-liquid-green',
v === 'Sertificated' && 'text-liquid-green',
)}
>
{v}
@@ -52,6 +52,7 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
<img
className="absolute right-[10px] top-[10px] h-[24px] w-[24px] hover:bg-liquid-light rounded-[5px] transition-all duration-300"
src={Edit}
alt="Редактировать"
onClick={(e) => {
e.stopPropagation();
navigate(
@@ -69,13 +70,24 @@ interface ArticlesBlockProps {
const ArticlesBlock: FC<ArticlesBlockProps> = ({ className = '' }) => {
const dispatch = useAppDispatch();
const articles = useAppSelector((state) => state.articles.articles);
const [active, setActive] = useState<boolean>(true);
// ✅ Берём только "мои статьи"
const articles = useAppSelector(
(state) => state.articles.fetchMyArticles.articles,
);
const status = useAppSelector(
(state) => state.articles.fetchMyArticles.status,
);
const error = useAppSelector(
(state) => state.articles.fetchMyArticles.error,
);
useEffect(() => {
dispatch(setMenuActiveProfilePage('articles'));
dispatch(fetchArticles({}));
}, []);
dispatch(fetchMyArticles());
}, [dispatch]);
return (
<div className="h-full w-full relative p-[20px]">
<div
@@ -84,24 +96,26 @@ const ArticlesBlock: FC<ArticlesBlockProps> = ({ className = '' }) => {
className,
)}
>
{/* Заголовок */}
<div
className={cn(
'h-[40px] text-[24px] font-bold flex gap-[10px] border-b-[1px] border-b-transparent items-center cursor-pointer transition-all duration-300',
active && 'border-b-liquid-lighter',
)}
onClick={() => {
setActive(!active);
}}
onClick={() => setActive(!active)}
>
<span>Мои статьи</span>
<img
src={ChevroneDown}
alt="toggle"
className={cn(
'transition-all duration-300',
active && 'rotate-180',
)}
/>
</div>
{/* Контент */}
<div
className={cn(
'grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
@@ -110,8 +124,25 @@ const ArticlesBlock: FC<ArticlesBlockProps> = ({ className = '' }) => {
>
<div className="overflow-hidden">
<div className="grid gap-[20px] pt-[20px] pb-[20px] box-border">
{articles.map((v, i) => (
<ArticleItem key={i} {...v} />
{status === 'loading' && (
<div className="text-liquid-light">
Загрузка статей...
</div>
)}
{status === 'failed' && (
<div className="text-liquid-red">
Ошибка:{' '}
{error || 'Не удалось загрузить статьи'}
</div>
)}
{status === 'successful' &&
articles.length === 0 && (
<div className="text-liquid-light">
У вас пока нет статей
</div>
)}
{articles.map((v) => (
<ArticleItem key={v.id} {...v} />
))}
</div>
</div>

73
src/views/home/articles/Articles.tsx
View File

@@ -7,51 +7,84 @@ import { useNavigate } from 'react-router-dom';
import { fetchArticles } from '../../../redux/slices/articles';
import Filters from './Filter';
export interface Article {
id: number;
name: string;
tags: string[];
}
const Articles = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const articles = useAppSelector((state) => state.articles.articles);
const status = useAppSelector((state) => state.articles.statuses.fetchAll);
// ✅ Берём данные из нового состояния
const articles = useAppSelector(
(state) => state.articles.fetchArticles.articles,
);
const status = useAppSelector(
(state) => state.articles.fetchArticles.status,
);
const error = useAppSelector((state) => state.articles.fetchArticles.error);
useEffect(() => {
dispatch(setMenuActivePage('articles'));
dispatch(fetchArticles({}));
}, []);
if (status == 'loading') return <div>Загрузка...</div>;
}, [dispatch]);
// ========================
// Состояния загрузки / ошибки
// ========================
if (status === 'loading') {
return (
<div className=" h-full w-full box-border p-[20px] pt-[20px]">
<div className="h-full w-full flex items-center justify-center text-liquid-light text-[18px]">
Загрузка статей...
</div>
);
}
if (status === 'failed') {
return (
<div className="h-full w-full flex flex-col items-center justify-center text-liquid-red text-[18px]">
Ошибка при загрузке статей
{error && (
<div className="text-liquid-light text-[14px] mt-2">
{error}
</div>
)}
</div>
);
}
// ========================
// Основной контент
// ========================
return (
<div className="h-full w-full box-border p-[20px]">
<div className="h-full box-border">
{/* Заголовок */}
<div className="relative flex items-center mb-[20px]">
<div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
Статьи
</div>
<SecondaryButton
onClick={() => {
navigate('/article/create');
}}
onClick={() => navigate('/article/create')}
text="Создать статью"
className="absolute right-0"
/>
</div>
{/* Фильтры */}
<Filters />
<div>
{articles.map((v, i) => (
<ArticleItem key={i} {...v} />
))}
{/* Список статей */}
<div className="mt-[20px]">
{articles.length === 0 ? (
<div className="text-liquid-light text-[16px]">
Пока нет статей
</div>
) : (
articles.map((v) => <ArticleItem key={v.id} {...v} />)
)}
</div>
<div>pages</div>
{/* Пагинация (пока заглушка) */}
<div className="mt-[20px] text-liquid-light text-[14px]">
pages
</div>
</div>
</div>
);

0
src/views/home/groups/Group.tsx → src/views/home/group/Group.tsx
View File

60
src/views/home/rightpanel/Group.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { FC } from 'react';
export const GroupRightPanel: FC = () => {
const items = [
{
name: 'Игнат Герасименко',
role: 'Администратор',
},
{
name: 'Алиса Макаренко',
role: 'Модератор',
},
{
name: 'Федор Картман',
role: 'Модератор',
},
{
name: 'Карина Механаджанович',
role: 'Участник',
},
{
name: 'Михаил Ангрский',
role: 'Участник',
},
{
name: 'newuser',
role: 'Участник (Вы)',
},
];
return (
<div className="h-screen w-full overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[5px] flex flex-col">
<div className="text-liquid-white font-bold text-[18px]">
Пользователи
</div>
{items.map((v, i) => {
return (
<>
{
<div className="text-liquid-light text-[16px] grid grid-cols-[40px,1fr] gap-[10px] items-center cursor-pointer hover:bg-liquid-lighter transition-all duration-300 rounded-[10px] p-[5px]">
<div className="h-[40px] w-[40px] rounded-[10px] bg-[#D9D9D9]"></div>
<div className="flex flex-col">
<div className="text-liquid-white font-bold text-[16px] leading-5">
{v.name}
</div>
<div className="text-liquid-light font-normal text-[16px] leading-5">
{v.role}
</div>
</div>
</div>
}
{i + 1 != items.length && (
<div className="h-[1px] w-full bg-liquid-lighter"></div>
)}
</>
);
})}
</div>
);
};