neki/Cool_TODO_manager
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

this is working, need to commit

Browse Source
This commit is contained in:
Max 2025-04-08 15:24:42 +03:00
parent f8816b1627
commit c0730686ac
38 changed files with 1034 additions and 407 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cool_todo_manager/mainApp/host/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

2
cool_todo_manager/mainApp/host/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import('./src/main')
export { }

63
cool_todo_manager/mainApp/host/package.json Normal file
View File

@ -0,0 +1,63 @@
{
"name": "host",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack serve --env mode=development",
"build:dev": "webpack --env mode=development",
"build:prod": "webpack --env mode=production",
"build:mobile": "webpack --env mode=production --env platform=mobile",
"build:desktop": "webpack --env mode=production --env platform=desktop",
"typecheck": "tsc"
},
"dependencies": {
"@packages/build-config": "*",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^6.26.2"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@hello-pangea/dnd": "^18.0.1",
"@radix-ui/react-form": "^0.1.2",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/themes": "^3.2.0",
"@reduxjs/toolkit": "^2.6.1",
"@tailwindcss/postcss": "^4.1.3",
"@tailwindcss/vite": "^4.0.6",
"@tanstack/react-query": "^5.66.0",
"@tanstack/react-query-devtools": "^5.66.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^22.14.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"axios": "^1.7.9",
"css-loader": "^7.1.2",
"eslint": "^9.19.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"jotai": "^2.12.0",
"js-cookie": "^3.0.5",
"mini-css-extract-plugin": "^2.9.2",
"postcss": "^8.5.3",
"postcss-loader": "^8.1.1",
"react-redux": "^9.2.0",
"style-loader": "^4.0.0",
"tailwindcss": "^4.1.3",
"typescript": "~5.7.2",
"typescript-eslint": "^8.22.0",
"vite": "^6.1.0",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^6.26.2"
}
}

5
cool_todo_manager/mainApp/host/postcss.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('@tailwindcss/postcss'),
],
}

0
cool_todo_manager/mainApp/host/public/favicon.ico Normal file
View File

1
cool_todo_manager/mainApp/host/public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

0
cool_todo_manager/mainApp/host/src/App.css Normal file
View File

18
cool_todo_manager/mainApp/host/src/App.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Theme } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';
import './App.css';
//@ts-ignore
import MainApp from 'main/AppMain';
function App() {
return (
<Theme className="size-full" accentColor="amber" grayColor="gray">
I will fuck youuuuuuu!!!!!!
<div className="w-[40rem]">
<MainApp />
</div>
</Theme>
);
}
export default App;

4
cool_todo_manager/mainApp/host/src/context.ts Normal file
View File

@ -0,0 +1,4 @@
import React from "react";
import { appStore } from "./stores/AppStore";
export const Ctx = React.createContext(appStore);

5
cool_todo_manager/mainApp/host/src/index.css Normal file
View File

@ -0,0 +1,5 @@
@import 'tailwindcss';
#root {
height: 100vh;
}

5
cool_todo_manager/mainApp/host/src/main.tsx Normal file
View File

@ -0,0 +1,5 @@
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
createRoot(document.getElementById('root')!).render(<App />);

1
cool_todo_manager/mainApp/host/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

7
cool_todo_manager/mainApp/host/tailwind.config.js Normal file
View File

@ -0,0 +1,7 @@
export const content = [
'./src/**/*.{html,js,tsx}',
];
export const theme = {
extend: {},
};
export const plugins = [];

10
cool_todo_manager/mainApp/host/tsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"outDir": "./dist/",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

94
cool_todo_manager/mainApp/host/webpack.config.ts Normal file
View File

@ -0,0 +1,94 @@
import { BuildMode, BuildPaths, BuildPlatform, buildWebpack } from '@packages/build-config';
import fs from 'fs';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';
import webpack from 'webpack';
import packageJson from './package.json';
interface EnvVariables {
mode?: BuildMode;
analyzer?: boolean;
port?: number;
platform?: BuildPlatform;
}
export default (env: EnvVariables) => {
const paths: BuildPaths = {
output: path.resolve(__dirname, 'build'),
entry: path.resolve(__dirname, 'index.tsx'),
html: path.resolve(__dirname, 'index.html'),
public: path.resolve(__dirname, 'public'),
src: path.resolve(__dirname, 'src'),
}
const config: webpack.Configuration = buildWebpack({
port: env.port ?? 3000,
mode: env.mode ?? 'development',
paths,
analyzer: env.analyzer,
platform: env.platform ?? 'desktop'
})
const tailwindConfigPath = path.resolve(__dirname, 'tailwind.config.js');
if (!fs.existsSync(tailwindConfigPath)) {
console.error('tailwind.config.js does not exist. Please create it or check the path.');
process.exit(1);
} else {
console.log(` tailwind.config.js found at: ${tailwindConfigPath}`);
}
const postcssConfigPath = path.resolve(__dirname, 'postcss.config.js');
if (!fs.existsSync(postcssConfigPath)) {
console.error('postcss.config.js does not exist. Please create it or check the path.');
process.exit(1);
} else {
console.log(`postcss.config.js found at: ${postcssConfigPath}`);
}
if(!config.plugins) {
console.error('No plugins found in webpack configuration');
process.exit(1);
}
if(config.module && config.module.rules) {
config.module.rules.push({
test: /\.css$/,
use: [
env.mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
});
}
config.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new webpack.container.ModuleFederationPlugin({
name: 'todo_thingy',
filename: 'remoteEntry.js',
remotes: {
main: 'todo_thingy@http://localhost:3001/remoteEntry.js',
},
shared: {
...packageJson.dependencies,
'react': {
eager: true,
requiredVersion: packageJson.dependencies['react'],
},
'react-router-dom': {
eager: true,
requiredVersion: packageJson.dependencies['react-router-dom'],
},
'react-dom': {
eager: true,
requiredVersion: packageJson.dependencies['react-dom'],
},
},
}))
return config;
}

7
cool_todo_manager/mainApp/main/package.json
View File

@ -57,6 +57,11 @@
"webpack": "^5.88.2", "webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.9.1", "webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1" "webpack-dev-server": "^4.15.1",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^6.26.2"
} }
} }

13
cool_todo_manager/mainApp/main/src/App.tsx
View File

@ -1,24 +1,19 @@
import { Theme } from '@radix-ui/themes'; import { Theme } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css'; import '@radix-ui/themes/styles.css';
import { QueryClientProvider } from '@tanstack/react-query';
import { Provider } from 'react-redux';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import queryClient from './api/queryClient';
import { store } from './api/RTKQuery';
import './App.css'; import './App.css';
import MyRoutes from './routes/routes'; import MyRoutes from './routes/routes';
import { appStore } from './stores/AppStore';
import { Ctx } from './context';
const router = createBrowserRouter(MyRoutes); const router = createBrowserRouter(MyRoutes);
function App() { function App() {
return ( return (
<Theme className="size-full" accentColor="amber" grayColor="gray"> <Theme className="size-full" accentColor="amber" grayColor="gray">
<QueryClientProvider client={queryClient}> <Ctx.Provider value={appStore}>
<Provider store={store}>
{/* <ThemePanel /> */}
<RouterProvider router={router} /> <RouterProvider router={router} />
</Provider> </Ctx.Provider>
</QueryClientProvider>
</Theme> </Theme>
); );
} }

33
cool_todo_manager/mainApp/main/src/api/RTKQuery.ts
View File

@ -1,33 +0,0 @@
import { configureStore, isRejectedWithValue, Middleware } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { authApi, mainApi } from '../services/mainApi';
const loggerMiddleware: Middleware = (_store) => (next) => (action) => {
console.log('dispatching', action);
if(isRejectedWithValue(action)) {
// @ts-ignore
const statusCode = action.payload.status;
if(statusCode === 401) {
console.log('Unauthorized, redirecting to login page');
localStorage.removeItem('token');
window.location.href = '/login';
}
}
let result = next(action);
return result;
};
export const store = configureStore({
reducer: {
[mainApi.reducerPath]: mainApi.reducer,
[authApi.reducerPath]: authApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware()
.prepend(loggerMiddleware)
.concat(mainApi.middleware)
.concat(authApi.middleware),
});
setupListeners(store.dispatch);

2
cool_todo_manager/mainApp/main/src/api/axios.ts
View File

@ -9,6 +9,6 @@ export const axiosBase = axios.create({
export const axiosAuth = axios.create({ export const axiosAuth = axios.create({
baseURL: BASE_URL, baseURL: BASE_URL,
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem('token')}` // Maybe we will use cookies Authorization: `Bearer ${localStorage.getItem('token')}`
} }
}); });

11
cool_todo_manager/mainApp/main/src/api/queryClient.ts
View File

@ -1,11 +0,0 @@
import { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 2,
},
},
})
export default queryClient;

7
cool_todo_manager/mainApp/main/src/components/AuthWrapper/AuthWrapper.tsx
View File

@ -1,7 +1,8 @@
import { observer } from 'mobx-react-lite';
import { PropsWithChildren } from 'react'; import { PropsWithChildren } from 'react';
import { Navigate } from 'react-router-dom'; import { Navigate } from 'react-router-dom';
export default function AuthWrapper(props: PropsWithChildren) { const AuthWrapper = observer((props: PropsWithChildren) => {
if (!localStorage.getItem('token')) { if (!localStorage.getItem('token')) {
console.log('No token found, redirecting to login'); console.log('No token found, redirecting to login');
@ -9,4 +10,6 @@ export default function AuthWrapper(props: PropsWithChildren) {
} }
return <div>{props.children}</div>; return <div>{props.children}</div>;
} })
export default AuthWrapper;

40
cool_todo_manager/mainApp/main/src/components/CardGroup/CardGroup.tsx
View File

@ -1,30 +1,34 @@
import { useEffect } from 'react';
import { Droppable } from '@hello-pangea/dnd'; import { Droppable } from '@hello-pangea/dnd';
import { Box, Button, Flex, Text } from '@radix-ui/themes'; import { Box, Button, Flex, Text } from '@radix-ui/themes';
import { import { PlusIcon } from '@radix-ui/react-icons';
useCreateTaskMutation, import { observer } from 'mobx-react-lite';
useDeleteProjectMutation,
useGetTasksForGroupQuery,
} from '../../services/mainApi';
import TaskCard from '../TaskCard/TaskCard'; import TaskCard from '../TaskCard/TaskCard';
import AddUserToProjectDialog from '../dialogs/AddUserToProjectDialog/AddUserToProjectDialog'; import AddUserToProjectDialog from '../dialogs/AddUserToProjectDialog/AddUserToProjectDialog';
import CreateTaskDialog from '../dialogs/CreateTaskDialog/CreateTaskDialog'; import CreateTaskDialog from '../dialogs/CreateTaskDialog/CreateTaskDialog';
import DeleteProjectDialog from '../dialogs/DeleteProjectDialog/CreateTaskDialog'; import DeleteProjectDialog from '../dialogs/DeleteProjectDialog/CreateTaskDialog';
import { PlusIcon } from '@radix-ui/react-icons'; import { useStore } from '../../hooks/useStore';
type TCardGroup = { type TCardGroup = {
id: string; id: string;
title: string; title: string;
}; };
export default function CardGroup(props: TCardGroup) {
const { data, isLoading } = useGetTasksForGroupQuery(props.id);
const [createTaskForGroup] = useCreateTaskMutation(); function CardGroup(props: TCardGroup) {
const [deleteProject] = useDeleteProjectMutation(); const store = useStore();
useEffect(() => {
store.mainStore.fetchTasksForGroup(props.id).catch(console.error);
}, [props.id, store.mainStore]);
const tasks = store.mainStore.tasksByProject.get(props.id) ?? [];
const isLoading = store.mainStore.isLoading;
const createTask = (taskText: string, date: string) => { const createTask = (taskText: string, date: string) => {
createTaskForGroup({ store.mainStore.createTask({
title: taskText, title: taskText,
projectId: props.id, projectId: props.id,
assignedUserId: 1, assignedUserId: 1,
@ -33,7 +37,7 @@ export default function CardGroup(props: TCardGroup) {
}; };
const deleteGroup = () => { const deleteGroup = () => {
deleteProject(props.id); store.mainStore.deleteProject(props.id);
}; };
return ( return (
@ -41,13 +45,16 @@ export default function CardGroup(props: TCardGroup) {
{(provided) => ( {(provided) => (
<Box className="flex flex-col text-center rounded-lg p-4 bg-gray-200 min-w-fit"> <Box className="flex flex-col text-center rounded-lg p-4 bg-gray-200 min-w-fit">
<Text className="mb-2">{props.title}</Text> <Text className="mb-2">{props.title}</Text>
<Box <Box
ref={provided.innerRef} ref={provided.innerRef}
className="bg-gray-200 min-w-full rounded-lg !flex flex-col gap-2" className="bg-gray-200 min-w-full rounded-lg !flex flex-col gap-2"
> >
{data && {isLoading && <Text>Loading...</Text>}
data.map((task, i) => (
{!isLoading && tasks.map((task: any, i: number) => (
<TaskCard <TaskCard
projectId={props.id}
key={task.id} key={task.id}
id={task.id.toString()} id={task.id.toString()}
title={task.title} title={task.title}
@ -56,11 +63,14 @@ export default function CardGroup(props: TCardGroup) {
status={task.status} status={task.status}
/> />
))} ))}
{provided.placeholder}
</Box> </Box>
<Flex gap={'2'} className="mx-auto w-full mt-2"> <Flex gap={'2'} className="mx-auto w-full mt-2">
<CreateTaskDialog onClose={createTask}> <CreateTaskDialog onClose={createTask}>
<Button className='!grow-1'>Add Task</Button> <Button className='!grow-1'>Add Task</Button>
</CreateTaskDialog> </CreateTaskDialog>
<DeleteProjectDialog onClose={deleteGroup}> <DeleteProjectDialog onClose={deleteGroup}>
<Button className='!grow-1' color="red">Delete Project</Button> <Button className='!grow-1' color="red">Delete Project</Button>
</DeleteProjectDialog> </DeleteProjectDialog>
@ -77,3 +87,5 @@ export default function CardGroup(props: TCardGroup) {
</Droppable> </Droppable>
); );
} }
export default observer(CardGroup);

38
cool_todo_manager/mainApp/main/src/components/MainBoard/MainBoard.tsx
View File

@ -1,28 +1,44 @@
import { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { DragDropContext } from '@hello-pangea/dnd'; import { DragDropContext } from '@hello-pangea/dnd';
import { Button, Flex, ScrollArea } from '@radix-ui/themes'; import { Button, Flex, ScrollArea } from '@radix-ui/themes';
import {
useCreateProjectMutation,
useGetProjectsQuery
} from '../../services/mainApi';
import CardGroup from '../CardGroup/CardGroup'; import CardGroup from '../CardGroup/CardGroup';
import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog'; import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog';
import { useStore } from '../../hooks/useStore';
function MainBoard() {
const store = useStore();
useEffect(() => {
store.mainStore.fetchProjects().catch(console.error);
}, []);
export default function MainBoard() {
const dragEndHandle = (result: TDragResult) => { const dragEndHandle = (result: TDragResult) => {
result; console.log(result);
}; };
const [createProject] = useCreateProjectMutation(); const createProject = (newProjectData: any) => {
const { data: cringe, isLoading } = useGetProjectsQuery({}); store.mainStore.createProject(newProjectData);
};
const cringe = store.mainStore.projects;
const isLoading = store.mainStore.isLoading;
return ( return (
<> <>
<DragDropContext onDragEnd={dragEndHandle}> <DragDropContext onDragEnd={dragEndHandle}>
<ScrollArea scrollbars="horizontal" className="pb-3"> <ScrollArea scrollbars="horizontal" className="pb-3">
<Flex gap={'2'} className="min-w-fit"> <Flex gap={'2'} className="min-w-fit">
{isLoading && <div>Loading Projects...</div>}
{!isLoading && {!isLoading &&
(cringe as any[]).map((item: any) => ( cringe.map((item: any) => (
<CardGroup id={item.id} title={item.title} /> <CardGroup
key={item.id}
id={item.id}
title={item.title}
/>
))} ))}
</Flex> </Flex>
</ScrollArea> </ScrollArea>
@ -34,3 +50,5 @@ export default function MainBoard() {
</> </>
); );
} }
export default observer(MainBoard);

39
cool_todo_manager/mainApp/main/src/components/TaskCard/TaskCard.tsx
View File

@ -1,6 +1,7 @@
import { Draggable } from '@hello-pangea/dnd'; import { Draggable } from '@hello-pangea/dnd';
import { Badge, Button, Card, Flex, Text } from '@radix-ui/themes'; import { Badge, Button, Card, Flex, Text } from '@radix-ui/themes';
import { useUpdateTaskMutation } from '../../services/mainApi'; import { observer } from 'mobx-react-lite';
import { useStore } from '../../hooks/useStore';
type TTaskCard = { type TTaskCard = {
title?: string; title?: string;
@ -8,26 +9,32 @@ type TTaskCard = {
id?: string; id?: string;
index?: number; index?: number;
status: 'todo' | 'in-progress' | 'completed'; status: 'todo' | 'in-progress' | 'completed';
projectId: string;
}; };
const badgeNames = { const badgeNames = {
todo: 'To do', todo: 'To do',
'in-progress': 'In progress', 'in-progress': 'In progress',
completed: 'Completed', completed: 'Completed',
} as const } as const;
const badgeColors = { const badgeColors = {
todo: 'blue', todo: 'blue',
'in-progress': 'orange', 'in-progress': 'orange',
completed: 'green', completed: 'green',
} as const } as const;
export default function TaskCard(props: TTaskCard) { const TaskCard = observer((props: TTaskCard) => {
const [updateTask] = useUpdateTaskMutation();
const store = useStore()
const updateStatus = (newStatus: 'todo' | 'in-progress' | 'completed') => { const updateStatus = (newStatus: 'todo' | 'in-progress' | 'completed') => {
updateTask({ id: props.id, status: newStatus }); if (!props.id) return;
store.mainStore.updateTask({ id: props.id, status: newStatus });
}; };
// @ts-ignore
console.log(`rerendered with`, store.mainStore.tasksByProject.get(2) );
return ( return (
<Draggable draggableId={props.id || '123'} index={props.index || 0}> <Draggable draggableId={props.id || '123'} index={props.index || 0}>
@ -36,6 +43,7 @@ export default function TaskCard(props: TTaskCard) {
className="!w-62 !flex flex-col gap-2" className="!w-62 !flex flex-col gap-2"
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps}
> >
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Flex justify={'between'}> <Flex justify={'between'}>
@ -46,17 +54,26 @@ export default function TaskCard(props: TTaskCard) {
<Flex justify={'between'}> <Flex justify={'between'}>
{props.status !== 'todo' && ( {props.status !== 'todo' && (
<Button color={badgeColors['todo']} onClick={() => updateStatus('todo')}> <Button
color={badgeColors['todo']}
onClick={() => updateStatus('todo')}
>
Todo Todo
</Button> </Button>
)} )}
{props.status !== 'in-progress' && ( {props.status !== 'in-progress' && (
<Button color={badgeColors['in-progress']} onClick={() => updateStatus('in-progress')}> <Button
color={badgeColors['in-progress']}
onClick={() => updateStatus('in-progress')}
>
In Progress In Progress
</Button> </Button>
)} )}
{props.status !== 'completed' && ( {props.status !== 'completed' && (
<Button color={badgeColors['completed']} onClick={() => updateStatus('completed')}> <Button
color={badgeColors['completed']}
onClick={() => updateStatus('completed')}
>
Completed Completed
</Button> </Button>
)} )}
@ -65,4 +82,6 @@ export default function TaskCard(props: TTaskCard) {
)} )}
</Draggable> </Draggable>
); );
} })
export default TaskCard;

55
cool_todo_manager/mainApp/main/src/components/dialogs/AddUserToProjectDialog/AddUserToProjectDialog.tsx
View File

@ -1,28 +1,28 @@
import { PropsWithChildren, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Button, Dialog, Flex, Select } from '@radix-ui/themes'; import { Button, Dialog, Flex, Select } from '@radix-ui/themes';
import { PropsWithChildren, useState } from 'react';
import { import { useStore } from '../../../hooks/useStore';
useAddProjectMemberMutation,
useGetAllUsersQuery,
} from '../../../services/mainApi';
type TAddUserToProjectDialog = { type TAddUserToProjectDialog = {
projectId: number; projectId: number;
} & PropsWithChildren; } & PropsWithChildren;
export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) { function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
const { projectId, children } = props; const { projectId, children } = props;
const { data: users, isLoading, error, refetch } = useGetAllUsersQuery({});
const [addProjectMember, { isLoading: isAdding }] =
useAddProjectMemberMutation();
const [selectedUserId, setSelectedUserId] = useState<number | null>(null); const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
const store = useStore();
useEffect(() => {
store.authStore.fetchAllUsers();
}, []);
const handleAddUser = async () => { const handleAddUser = async () => {
if (selectedUserId) { if (selectedUserId) {
try { try {
await addProjectMember({ await store.mainStore.addProjectMember(projectId.toString(), selectedUserId.toString());
projectId,
memberId: selectedUserId,
}).unwrap();
setSelectedUserId(null); setSelectedUserId(null);
} catch (err) { } catch (err) {
console.error('Failed to add user:', err); console.error('Failed to add user:', err);
@ -30,9 +30,12 @@ export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
} }
}; };
const isLoading = store.authStore.isLoading;
const error = store.authStore.error;
const users = store.authStore.allUsers;
return ( return (
<Dialog.Root onOpenChange={() => refetch()}> <Dialog.Root>
<Dialog.Trigger>{children}</Dialog.Trigger> <Dialog.Trigger>{children}</Dialog.Trigger>
<Dialog.Content maxWidth="450px"> <Dialog.Content maxWidth="450px">
@ -42,26 +45,21 @@ export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
{isLoading ? ( {isLoading ? (
<span>Loading users...</span> <span>Loading users...</span>
) : error ? ( ) : error ? (
<span>Error loading users.</span> <span>Error loading users: {error}</span>
) : ( ) : (
<Select.Root <Select.Root
value={selectedUserId?.toString() || ''} value={selectedUserId?.toString() || ''}
onValueChange={(value) => onValueChange={(value) => setSelectedUserId(Number(value))}
setSelectedUserId(Number(value))
}
required required
> >
<Select.Trigger aria-label="User"> <Select.Trigger aria-label="User">
{selectedUserId {selectedUserId
? users?.find( ? users?.find((user: any) => user.id === selectedUserId)?.username
(user: any) =>
user.id === selectedUserId,
)?.username
: 'Select a user'} : 'Select a user'}
</Select.Trigger> </Select.Trigger>
<Select.Content> <Select.Content>
{users?.map((user: any) => ( {users?.map((user: any) => (
<Select.Item key={user.id} value={user.id}> <Select.Item key={user.id} value={user.id.toString()}>
{user.username} {user.username}
</Select.Item> </Select.Item>
))} ))}
@ -76,13 +74,10 @@ export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
Cancel Cancel
</Button> </Button>
</Dialog.Close> </Dialog.Close>
<Dialog.Close> <Dialog.Close>
<Button <Button color="green" onClick={handleAddUser} disabled={!selectedUserId || isLoading}>
color="green" {isLoading ? 'Adding...' : 'Add'}
onClick={handleAddUser}
disabled={!selectedUserId || isAdding}
>
{isAdding ? 'Adding...' : 'Add'}
</Button> </Button>
</Dialog.Close> </Dialog.Close>
</Flex> </Flex>
@ -90,3 +85,5 @@ export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
</Dialog.Root> </Dialog.Root>
); );
} }
export default observer(AddUserToProjectDialog);

4
cool_todo_manager/mainApp/main/src/context.ts Normal file
View File

@ -0,0 +1,4 @@
import React from "react";
import { appStore } from "./stores/AppStore";
export const Ctx = React.createContext(appStore);

8
cool_todo_manager/mainApp/main/src/hooks/useStore.tsx Normal file
View File

@ -0,0 +1,8 @@
import { useContext } from "react";
import { Ctx } from "../context";
export function useStore() {
const store = useContext(Ctx)
return store;
}

2
cool_todo_manager/mainApp/main/src/index.css
View File

@ -1,3 +1,5 @@
@import 'tailwindcss';
#root { #root {
height: 100vh; height: 100vh;
} }

2
cool_todo_manager/mainApp/main/src/main.tsx
View File

@ -1,5 +1,5 @@
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import App from './App'; import App from './App.tsx';
import './index.css'; import './index.css';
createRoot(document.getElementById('root')!).render(<App />); createRoot(document.getElementById('root')!).render(<App />);

42
cool_todo_manager/mainApp/main/src/pages/auth/LoginPage/LoginPage.tsx
View File

@ -1,3 +1,5 @@
import { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { import {
Box, Box,
Button, Button,
@ -8,18 +10,24 @@ import {
TextField, TextField,
} from '@radix-ui/themes'; } from '@radix-ui/themes';
import { Form } from 'radix-ui'; import { Form } from 'radix-ui';
import React from 'react';
import { useLoginMutation } from '../../../services/mainApi';
export default function LoginPage() { // Импортируем store.authStore
const [login, { isError }] = useLoginMutation(); import { useStore } from '../../../hooks/useStore';
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const submitHandler = (e: React.FormEvent<HTMLFormElement>) => { function LoginPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const store = useStore();
// В RTK Query было: [login, { isError } ] = useLoginMutation();
// Теперь берем store.authStore.error, store.authStore.isLoading
const isError = !!store.authStore.error;
const isLoading = store.authStore.isLoading;
const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
login({ username, password }); await store.authStore.login({ username, password }).catch(() => {});
}; };
return ( return (
@ -29,15 +37,11 @@ export default function LoginPage() {
Login Login
</Heading> </Heading>
<Form.Root <Form.Root className="flex flex-col gap-4" onSubmit={submitHandler}>
className="flex flex-col gap-4"
onSubmit={submitHandler}
>
<Form.Field name="email"> <Form.Field name="email">
<Form.Message match={'valueMissing'}> <Form.Message match={'valueMissing'}>
<Text>Username is required</Text> <Text>Username is required</Text>
</Form.Message> </Form.Message>
<Form.Control asChild> <Form.Control asChild>
<TextField.Root <TextField.Root
type="text" type="text"
@ -54,7 +58,6 @@ export default function LoginPage() {
<Form.Message match="valueMissing"> <Form.Message match="valueMissing">
<Text>Password is required</Text> <Text>Password is required</Text>
</Form.Message> </Form.Message>
<Form.Control asChild> <Form.Control asChild>
<TextField.Root <TextField.Root
type="password" type="password"
@ -68,14 +71,11 @@ export default function LoginPage() {
</Form.Field> </Form.Field>
{isError && ( {isError && (
<Text>{'Unable to login. Please try again.'}</Text> <Text>{store.authStore.error || 'Unable to login. Please try again.'}</Text>
)} )}
<Button <Button type="submit" className="mt-4" disabled={isLoading}>
// onClick={(e) => e.preventDefault()} {isLoading ? 'Loading...' : 'Sign In'}
className="mt-4"
>
Sign In
</Button> </Button>
<Box className='w-full !flex justify-center'> <Box className='w-full !flex justify-center'>
@ -88,3 +88,5 @@ export default function LoginPage() {
</> </>
); );
} }
export default observer(LoginPage);

34
cool_todo_manager/mainApp/main/src/pages/auth/RegisterPage/RegisterPage.tsx
View File

@ -1,3 +1,5 @@
import { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { import {
Box, Box,
Button, Button,
@ -8,17 +10,23 @@ import {
TextField, TextField,
} from '@radix-ui/themes'; } from '@radix-ui/themes';
import { Form } from 'radix-ui'; import { Form } from 'radix-ui';
import { useState } from 'react';
import { useRegisterMutation } from '../../../services/mainApi';
export default function RegisterPage() { // Импортируем store.authStore
const [register, { isLoading, error }] = useRegisterMutation(); import { useStore } from '../../../hooks/useStore';
function RegisterPage() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
username: '', username: '',
email: '', email: '',
password: '', password: '',
}); });
const store = useStore();
const isLoading = store.authStore.isLoading;
const error = store.authStore.error;
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ setFormData({
...formData, ...formData,
@ -29,7 +37,7 @@ export default function RegisterPage() {
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
try { try {
await register(formData).unwrap(); await store.authStore.register(formData);
} catch (err) { } catch (err) {
console.error('Failed to register:', err); console.error('Failed to register:', err);
} }
@ -40,15 +48,11 @@ export default function RegisterPage() {
<Heading size="4" className="text-center !mb-2"> <Heading size="4" className="text-center !mb-2">
Register Register
</Heading> </Heading>
<Form.Root <Form.Root className="flex flex-col gap-4" onSubmit={handleSubmit}>
className="flex flex-col gap-4"
onSubmit={handleSubmit}
>
<Form.Field name="username"> <Form.Field name="username">
<Form.Message match="valueMissing"> <Form.Message match="valueMissing">
<Text>Username is required</Text> <Text>Username is required</Text>
</Form.Message> </Form.Message>
<Form.Control asChild> <Form.Control asChild>
<TextField.Root <TextField.Root
type="text" type="text"
@ -67,11 +71,9 @@ export default function RegisterPage() {
<Form.Message match="valueMissing"> <Form.Message match="valueMissing">
<Text>Email is required</Text> <Text>Email is required</Text>
</Form.Message> </Form.Message>
<Form.Message match="typeMismatch"> <Form.Message match="typeMismatch">
<Text>Email is not valid</Text> <Text>Email is not valid</Text>
</Form.Message> </Form.Message>
<Form.Control asChild> <Form.Control asChild>
<TextField.Root <TextField.Root
type="email" type="email"
@ -90,10 +92,10 @@ export default function RegisterPage() {
<Form.Message match="valueMissing"> <Form.Message match="valueMissing">
<Text>Password is required</Text> <Text>Password is required</Text>
</Form.Message> </Form.Message>
<Form.Control asChild> <Form.Control asChild>
<TextField.Root <TextField.Root
type="password" type="password"
name="password"
placeholder="Password" placeholder="Password"
required required
value={formData.password} value={formData.password}
@ -105,12 +107,12 @@ export default function RegisterPage() {
</Form.Field> </Form.Field>
<Button type="submit" disabled={isLoading} className="mt-4"> <Button type="submit" disabled={isLoading} className="mt-4">
Register {isLoading ? 'Loading...' : 'Register'}
</Button> </Button>
{error && ( {error && (
<Box className="text-red-500"> <Box className="text-red-500">
<Text>Error registering user.</Text> <Text>Error registering user: {error}</Text>
</Box> </Box>
)} )}
@ -123,3 +125,5 @@ export default function RegisterPage() {
</Card> </Card>
); );
} }
export default observer(RegisterPage);

8
cool_todo_manager/mainApp/main/src/pages/main/MainPage.tsx
View File

@ -1,10 +1,14 @@
import { Box } from '@radix-ui/themes' import { Box } from '@radix-ui/themes'
import { observer } from 'mobx-react-lite'
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
export default function MainPage() { const MainPage = observer(() => {
return ( return (
<Box className='size-full'> <Box className='size-full'>
<Outlet /> <Outlet />
</Box> </Box>
) )
} })
export default MainPage

231
cool_todo_manager/mainApp/main/src/services/mainApi.ts
View File

@ -1,231 +0,0 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const mainApi = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({
baseUrl: 'http://109.107.166.17:5000/api/',
prepareHeaders: (headers) => {
headers.set(
'Authorization',
`Bearer ${localStorage.getItem('token')}`,
);
return headers;
},
}),
tagTypes: ['Task', 'Project', 'ProjectMembers'],
endpoints: (builder) => ({
getTasks: builder.query<string[], void>({
query: () => ({
url: 'tasks',
method: 'GET',
}),
providesTags: (result) =>
result
? [
...result.map((task) => ({
type: 'Task' as const,
id: task,
})),
{ type: 'Task', id: 'LIST' },
]
: [{ type: 'Task', id: 'LIST' }],
}),
getTasksForGroup: builder.query<any[], string>({
query: (id: string) => ({
url: `tasks/project/${id}`,
method: 'GET',
}),
providesTags: (result) =>
result
? [
...result.map((task) => ({
type: 'Task' as const,
id: task,
})),
{ type: 'Task', id: 'LIST' },
]
: [{ type: 'Task', id: 'LIST' }],
}),
getTask: builder.query<string, string>({
query: (id) => ({
url: `tasks/${id}`,
method: 'GET',
}),
providesTags: (result, error, id) => [{ type: 'Task', id }],
}),
updateTask: builder.mutation({
query: (task) => ({
url: `tasks/${task.id}`,
method: 'PATCH',
body: { status: task.status },
}),
invalidatesTags: (result, error, id) => [{ type: 'Task', id }],
}),
deleteTask: builder.mutation({
query: (id) => ({
url: `tasks/${id}`,
method: 'DELETE',
}),
invalidatesTags: (result, error, id) => [{ type: 'Task', id }],
}),
createTask: builder.mutation({
query: (newTask) => ({
url: 'tasks/create',
method: 'POST',
body: newTask,
}),
invalidatesTags: [{ type: 'Task', id: 'LIST' }],
}),
// PROJECTS
createProject: builder.mutation({
query: (newProject) => ({
url: 'projects/create',
method: 'POST',
body: newProject,
}),
invalidatesTags: [{ type: 'Project', id: 'LIST' }],
}),
getProjects: builder.query({
query: () => ({
url: 'projects/my',
method: 'GET',
}),
providesTags: (result, error, id) => [
{ type: 'Project', id: 'LIST' },
],
}),
getProject: builder.query({
query: (id) => ({
url: `projects/${id}`,
method: 'GET',
}),
providesTags: (result, error, id) => [{ type: 'Project', id }],
}),
updateProject: builder.mutation({
query: ({ id, project }) => ({
url: `projects/${id}`,
method: 'PATCH',
body: project,
}),
invalidatesTags: (result, error, id) => [{ type: 'Project', id }],
}),
deleteProject: builder.mutation({
query: (id) => ({
url: `projects/${id}`,
method: 'DELETE',
}),
invalidatesTags: (result, error, id) => [
{ type: 'Project', id: 'LIST' },
],
}),
// PROJECT MEMBERS
addProjectMember: builder.mutation({
query: ({ projectId, memberId }) => ({
url: `projects/${projectId}/members/add`,
method: 'POST',
body: { userId: memberId, role: '' },
}),
invalidatesTags: (result, error, args) => [
{ type: 'ProjectMembers', id: 'LIST' },
],
}),
getProjectMembers: builder.query({
query: (id) => ({
url: `projects/${id}/members`,
method: 'GET',
}),
providesTags: (result, error, args) => [
{ type: 'ProjectMembers', id: 'LIST' },
],
}),
removeProjectMember: builder.mutation({
query: ({ projectId, memberId }) => ({
url: `projects/${projectId}/members/remove`,
method: 'DELETE',
body: { userId: memberId },
}),
invalidatesTags: (result, error, id) => [
{ type: 'ProjectMembers', id: 'LIST' },
],
}),
}),
});
export const authApi = createApi({
reducerPath: 'authApi',
baseQuery: fetchBaseQuery({
baseUrl: 'http://109.107.166.17:4000/api/',
}),
endpoints: (builder) => ({
login: builder.mutation({
query: (credentials) => ({
url: '/auth/login',
method: 'POST',
body: credentials,
}),
async onQueryStarted(arg, { queryFulfilled }) {
try {
const response = await queryFulfilled;
if (response.data.access_token) {
localStorage.setItem(
'token',
response.data.access_token,
);
if (response.meta?.response?.status === 201)
window.location.href = '/';
}
} catch (error) {}
},
}),
register: builder.mutation({
query: (credentials) => ({
url: '/auth/register',
method: 'POST',
body: credentials,
}),
onQueryStarted: async (arg, { queryFulfilled }) => {
try {
const response = await queryFulfilled;
if (response.meta?.response?.status === 201)
window.location.href = '/login';
} catch (error) {}
},
}),
// USERS
getAllUsers: builder.query({
query: () => ({
url: '/users',
method: 'GET',
}),
keepUnusedDataFor: 0,
}),
}),
});
export const { useLoginMutation, useRegisterMutation, useGetAllUsersQuery } =
authApi;
export const {
useGetTasksQuery,
useCreateTaskMutation,
useUpdateTaskMutation,
useDeleteTaskMutation,
useGetTasksForGroupQuery,
} = mainApi;
export const {
useGetProjectsQuery,
useCreateProjectMutation,
useUpdateProjectMutation,
useDeleteProjectMutation,
} = mainApi;
export const {
useRemoveProjectMemberMutation,
useAddProjectMemberMutation,
useGetProjectMembersQuery,
} = mainApi;

15
cool_todo_manager/mainApp/main/src/stores/AppStore.ts Normal file
View File

@ -0,0 +1,15 @@
import { makeAutoObservable } from 'mobx';
import { MainStore } from './MainStore';
import { AuthStore } from './AuthStore';
export class AppStore {
mainStore: MainStore
authStore: AuthStore
constructor() {
this.mainStore = new MainStore(this)
this.authStore = new AuthStore(this)
makeAutoObservable(this);
}
}
export const appStore = new AppStore()

95
cool_todo_manager/mainApp/main/src/stores/AuthStore.ts Normal file
View File

@ -0,0 +1,95 @@
import { makeAutoObservable, runInAction } from 'mobx';
import axios from 'axios';
import { AppStore } from './AppStore';
export class AuthStore {
appStore: AppStore
isLoading = false;
error: string | null = null;
allUsers: any[] = [];
constructor(appStore:any) {
this.appStore = appStore
makeAutoObservable(this);
}
get token() {
return localStorage.getItem('token') || '';
}
async login(credentials: { username: string; password: string }) {
this.isLoading = true;
this.error = null;
try {
const response = await axios.post(
'http://109.107.166.17:4000/api/auth/login',
credentials,
);
runInAction(() => {
if (response.data.access_token) {
localStorage.setItem('token', response.data.access_token);
window.location.href = '/';
}
this.isLoading = false;
});
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при логине';
this.isLoading = false;
});
throw error;
}
}
async register(credentials: { username: string; password: string }) {
this.isLoading = true;
this.error = null;
try {
const response = await axios.post(
'http://109.107.166.17:4000/api/auth/register',
credentials,
);
runInAction(() => {
if (response.status === 201) {
window.location.href = '/login';
}
this.isLoading = false;
});
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при регистрации';
this.isLoading = false;
});
throw error;
}
}
async fetchAllUsers(force = false) {
if (this.allUsers.length && !force) {
return this.allUsers;
}
this.isLoading = true;
this.error = null;
try {
const response = await axios.get('http://109.107.166.17:4000/api/users');
runInAction(() => {
this.allUsers = response.data;
this.isLoading = false;
});
return this.allUsers;
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при получении пользователей';
this.isLoading = false;
});
throw error;
}
}
}

323
cool_todo_manager/mainApp/main/src/stores/MainStore.ts Normal file
View File

@ -0,0 +1,323 @@
import { makeAutoObservable, runInAction } from 'mobx';
import axios from 'axios';
import { AppStore } from './AppStore';
export class MainStore {
appStore: AppStore
isLoading = false;
error: string | null = null;
tasks: any[] = [];
tasksByProject = new Map<string, any[]>();
projects: any[] = [];
projectById = new Map<string, any>();
projectMembersById = new Map<string, any[]>();
constructor(appStore:any) {
this.appStore = appStore
makeAutoObservable(this);
}
get token() {
return localStorage.getItem('token') || '';
}
get headers() {
return {
Authorization: `Bearer ${this.token}`,
};
}
async fetchTasksForGroup(projectId: string, force = false) {
if (this.tasksByProject.has(projectId) && !force) {
return this.tasksByProject.get(projectId);
}
console.log(`This is tasks for ${projectId}`);
this.isLoading = true;
this.error = null;
try {
const response = await axios.get(
`http://109.107.166.17:5000/api/tasks/project/${projectId}`,
{
headers: this.headers,
},
);
runInAction(() => {
this.tasksByProject.set(projectId, response.data);
this.isLoading = false;
});
return response.data;
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при загрузке задач группы';
this.isLoading = false;
});
throw error;
}
}
async fetchTask(taskId: string) {
this.isLoading = true;
this.error = null;
try {
const response = await axios.get(
`http://109.107.166.17:5000/api/tasks/${taskId}`,
{ headers: this.headers },
);
return response.data;
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при загрузке задачи';
this.isLoading = false;
});
throw error;
} finally {
runInAction(() => {
this.isLoading = false;
});
}
}
async createTask(newTask: any) {
try {
const response = await axios.post(
'http://109.107.166.17:5000/api/tasks/create',
newTask,
{ headers: this.headers },
);
const createdTask = response.data;
this.tasks.push(createdTask);
const oldTasks = this.tasksByProject.get(newTask.projectId) ?? [];
this.tasksByProject.set(newTask.projectId, [...oldTasks, createdTask]);
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при создании задачи';
});
throw error;
}
}
async updateTask(task: { id: string; status: string }) {
try {
const response = await axios.patch(
`http://109.107.166.17:5000/api/tasks/${task.id}`,
{ status: task.status },
{ headers: this.headers },
);
runInAction(() => {
const index = this.tasks.findIndex((t) => t.id === task.id);
if (index !== -1) {
this.tasks[index].status = task.status;
}
const projectId = response.data.project.id;
const oldArray = this.tasksByProject.get(projectId) || [];
const indexInMap = oldArray.findIndex((t) => t.id === +task.id);
if (indexInMap !== -1) {
oldArray[indexInMap].status = task.status;
this.tasksByProject.set(projectId, [...oldArray]);
}
});
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при обновлении задачи';
});
throw error;
}
}
async deleteTask(taskId: string) {
try {
await axios.delete(`http://109.107.166.17:5000/api/tasks/${taskId}`, {
headers: this.headers,
});
// Удаляем локально
runInAction(() => {
this.tasks = this.tasks.filter((t) => t.id !== taskId);
});
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при удалении задачи';
});
throw error;
}
}
async fetchProjects(force = false) {
if (this.projects.length && !force) {
return this.projects;
}
this.isLoading = true;
this.error = null;
try {
const response = await axios.get(
'http://109.107.166.17:5000/api/projects/my',
{ headers: this.headers },
);
runInAction(() => {
this.projects = response.data;
this.isLoading = false;
});
return this.projects;
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при получении проектов';
this.isLoading = false;
});
throw error;
}
}
async fetchProject(projectId: string) {
if (this.projectById.has(projectId)) {
return this.projectById.get(projectId);
}
this.isLoading = true;
this.error = null;
try {
const response = await axios.get(
`http://109.107.166.17:5000/api/projects/${projectId}`,
{ headers: this.headers },
);
runInAction(() => {
this.projectById.set(projectId, response.data);
this.isLoading = false;
});
return response.data;
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при получении проекта';
this.isLoading = false;
});
throw error;
}
}
async createProject(newProject: any) {
try {
const response = await axios.post(
'http://109.107.166.17:5000/api/projects/create',
newProject,
{ headers: this.headers },
);
const created = response.data;
runInAction(() => {
this.projects.push(created);
});
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при создании проекта';
});
throw error;
}
}
async updateProject(id: string, projectData: any) {
try {
await axios.patch(
`http://109.107.166.17:5000/api/projects/${id}`,
projectData,
{ headers: this.headers },
);
this.fetchProjects(true);
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при обновлении проекта';
});
throw error;
}
}
async deleteProject(id: string) {
try {
await axios.delete(`http://109.107.166.17:5000/api/projects/${id}`, {
headers: this.headers,
});
// Удаляем локально
runInAction(() => {
this.projects = this.projects.filter((p) => p.id !== id);
});
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при удалении проекта';
});
throw error;
}
}
async addProjectMember(projectId: string, memberId: string) {
try {
await axios.post(
`http://109.107.166.17:5000/api/projects/${projectId}/members/add`,
{
userId: memberId,
role: '',
},
{ headers: this.headers },
);
this.projectMembersById.delete(projectId);
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при добавлении участника';
});
throw error;
}
}
async fetchProjectMembers(projectId: string, force = false) {
if (this.projectMembersById.has(projectId) && !force) {
return this.projectMembersById.get(projectId);
}
this.isLoading = true;
this.error = null;
try {
const response = await axios.get(
`http://109.107.166.17:5000/api/projects/${projectId}/members`,
{
headers: this.headers,
},
);
runInAction(() => {
this.projectMembersById.set(projectId, response.data);
this.isLoading = false;
});
return response.data;
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при получении участников проекта';
this.isLoading = false;
});
throw error;
}
}
async removeProjectMember(projectId: string, memberId: string) {
try {
await axios.delete(
`http://109.107.166.17:5000/api/projects/${projectId}/members/remove`,
{
data: { userId: memberId },
headers: this.headers,
},
);
this.projectMembersById.delete(projectId);
} catch (error: any) {
runInAction(() => {
this.error = error?.response?.data?.message || 'Ошибка при удалении участника';
});
throw error;
}
}
}

3
cool_todo_manager/mainApp/main/webpack.config.ts
View File

@ -29,7 +29,6 @@ export default (env: EnvVariables) => {
platform: env.platform ?? 'desktop' platform: env.platform ?? 'desktop'
}) })
// Check if tailwind.config.js exists
const tailwindConfigPath = path.resolve(__dirname, 'tailwind.config.js'); const tailwindConfigPath = path.resolve(__dirname, 'tailwind.config.js');
if (!fs.existsSync(tailwindConfigPath)) { if (!fs.existsSync(tailwindConfigPath)) {
console.error('tailwind.config.js does not exist. Please create it or check the path.'); console.error('tailwind.config.js does not exist. Please create it or check the path.');
@ -38,7 +37,6 @@ export default (env: EnvVariables) => {
console.log(` tailwind.config.js found at: ${tailwindConfigPath}`); console.log(` tailwind.config.js found at: ${tailwindConfigPath}`);
} }
// Check if postcss.config.js exists
const postcssConfigPath = path.resolve(__dirname, 'postcss.config.js'); const postcssConfigPath = path.resolve(__dirname, 'postcss.config.js');
if (!fs.existsSync(postcssConfigPath)) { if (!fs.existsSync(postcssConfigPath)) {
console.error('postcss.config.js does not exist. Please create it or check the path.'); console.error('postcss.config.js does not exist. Please create it or check the path.');
@ -52,7 +50,6 @@ export default (env: EnvVariables) => {
process.exit(1); process.exit(1);
} }
// Add Tailwind configuration to build plugins
if(config.module && config.module.rules) { if(config.module && config.module.rules) {
config.module.rules.push({ config.module.rules.push({
test: /\.css$/, test: /\.css$/,

170
cool_todo_manager/package-lock.json generated
View File

@ -12,6 +12,125 @@
"packages/*" "packages/*"
] ]
}, },
"mainApp/host": {
"version": "1.0.0",
"dependencies": {
"@packages/build-config": "*",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^6.26.2"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@hello-pangea/dnd": "^18.0.1",
"@radix-ui/react-form": "^0.1.2",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/themes": "^3.2.0",
"@reduxjs/toolkit": "^2.6.1",
"@tailwindcss/postcss": "^4.1.3",
"@tailwindcss/vite": "^4.0.6",
"@tanstack/react-query": "^5.66.0",
"@tanstack/react-query-devtools": "^5.66.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^22.14.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"axios": "^1.7.9",
"css-loader": "^7.1.2",
"eslint": "^9.19.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"jotai": "^2.12.0",
"js-cookie": "^3.0.5",
"mini-css-extract-plugin": "^2.9.2",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
"postcss": "^8.5.3",
"postcss-loader": "^8.1.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-redux": "^9.2.0",
"react-router-dom": "^6.26.2",
"style-loader": "^4.0.0",
"tailwindcss": "^4.1.3",
"typescript": "~5.7.2",
"typescript-eslint": "^8.22.0",
"vite": "^6.1.0",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
},
"mainApp/host/node_modules/css-loader": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
"integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
"dev": true,
"license": "MIT",
"dependencies": {
"icss-utils": "^5.1.0",
"postcss": "^8.4.33",
"postcss-modules-extract-imports": "^3.1.0",
"postcss-modules-local-by-default": "^4.0.5",
"postcss-modules-scope": "^3.2.0",
"postcss-modules-values": "^4.0.0",
"postcss-value-parser": "^4.2.0",
"semver": "^7.5.4"
},
"engines": {
"node": ">= 18.12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"@rspack/core": "0.x || 1.x",
"webpack": "^5.27.0"
},
"peerDependenciesMeta": {
"@rspack/core": {
"optional": true
},
"webpack": {
"optional": true
}
}
},
"mainApp/host/node_modules/semver": {
"version": "7.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
"integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
"dev": true,
"license": "ISC",
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"mainApp/host/node_modules/style-loader": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
"integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 18.12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^5.27.0"
}
},
"mainApp/main": { "mainApp/main": {
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
@ -47,9 +166,14 @@
"jotai": "^2.12.0", "jotai": "^2.12.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"mini-css-extract-plugin": "^2.9.2", "mini-css-extract-plugin": "^2.9.2",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"postcss-loader": "^8.1.1", "postcss-loader": "^8.1.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"react-router-dom": "^6.26.2",
"style-loader": "^4.0.0", "style-loader": "^4.0.0",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.3",
"typescript": "~5.7.2", "typescript": "~5.7.2",
@ -4549,6 +4673,7 @@
"version": "1.23.0", "version": "1.23.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
"integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==", "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=14.0.0" "node": ">=14.0.0"
@ -8860,6 +8985,10 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/host": {
"resolved": "mainApp/host",
"link": true
},
"node_modules/hpack.js": { "node_modules/hpack.js": {
"version": "2.1.6", "version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@ -10181,6 +10310,43 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/mobx": {
"version": "6.13.7",
"resolved": "https://registry.npmjs.org/mobx/-/mobx-6.13.7.tgz",
"integrity": "sha512-aChaVU/DO5aRPmk1GX8L+whocagUUpBQqoPtJk+cm7UOXUk87J4PeWCh6nNmTTIfEhiR9DI/+FnA8dln/hTK7g==",
"dev": true,
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mobx"
}
},
"node_modules/mobx-react-lite": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.1.0.tgz",
"integrity": "sha512-QEP10dpHHBeQNv1pks3WnHRCem2Zp636lq54M2nKO2Sarr13pL4u6diQXf65yzXUn0mkk18SyIDCm9UOJYTi1w==",
"dev": true,
"license": "MIT",
"dependencies": {
"use-sync-external-store": "^1.4.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mobx"
},
"peerDependencies": {
"mobx": "^6.9.0",
"react": "^16.8.0 || ^17 || ^18 || ^19"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/mrmime": { "node_modules/mrmime": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@ -11179,6 +11345,7 @@
"version": "19.1.0", "version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"scheduler": "^0.26.0" "scheduler": "^0.26.0"
@ -11285,6 +11452,7 @@
"version": "6.30.0", "version": "6.30.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz",
"integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==", "integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@remix-run/router": "1.23.0" "@remix-run/router": "1.23.0"
@ -11300,6 +11468,7 @@
"version": "6.30.0", "version": "6.30.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.0.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.0.tgz",
"integrity": "sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==", "integrity": "sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@remix-run/router": "1.23.0", "@remix-run/router": "1.23.0",
@ -11719,6 +11888,7 @@
"version": "0.26.0", "version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/schema-utils": { "node_modules/schema-utils": {