Compare commits
2 Commits
develop
...
feature/we
| Author | SHA1 | Date | |
|---|---|---|---|
|
c0730686ac | ||
|
|
f8816b1627 |
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React + TS</title>
|
<title>Vite + React + TS</title>
|
||||||
</head>
|
</head>
|
||||||
2
cool_todo_manager/mainApp/host/index.tsx
Normal file
2
cool_todo_manager/mainApp/host/index.tsx
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import('./src/main')
|
||||||
|
export { }
|
||||||
63
cool_todo_manager/mainApp/host/package.json
Normal file
63
cool_todo_manager/mainApp/host/package.json
Normal 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
5
cool_todo_manager/mainApp/host/postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/postcss'),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
0
cool_todo_manager/mainApp/host/src/App.css
Normal file
0
cool_todo_manager/mainApp/host/src/App.css
Normal file
18
cool_todo_manager/mainApp/host/src/App.tsx
Normal file
18
cool_todo_manager/mainApp/host/src/App.tsx
Normal 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
4
cool_todo_manager/mainApp/host/src/context.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { appStore } from "./stores/AppStore";
|
||||||
|
|
||||||
|
export const Ctx = React.createContext(appStore);
|
||||||
7
cool_todo_manager/mainApp/host/tailwind.config.js
Normal file
7
cool_todo_manager/mainApp/host/tailwind.config.js
Normal 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
10
cool_todo_manager/mainApp/host/tsconfig.json
Normal 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
94
cool_todo_manager/mainApp/host/webpack.config.ts
Normal 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;
|
||||||
|
}
|
||||||
14
cool_todo_manager/mainApp/main/index.html
Normal file
14
cool_todo_manager/mainApp/main/index.html
Normal 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/main/index.tsx
Normal file
2
cool_todo_manager/mainApp/main/index.tsx
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import('./src/main')
|
||||||
|
export { }
|
||||||
67
cool_todo_manager/mainApp/main/package.json
Normal file
67
cool_todo_manager/mainApp/main/package.json
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
{
|
||||||
|
"name": "main",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"description": "",
|
||||||
|
"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/main/postcss.config.js
Normal file
5
cool_todo_manager/mainApp/main/postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/postcss'),
|
||||||
|
],
|
||||||
|
}
|
||||||
0
cool_todo_manager/mainApp/main/public/favicon.ico
Normal file
0
cool_todo_manager/mainApp/main/public/favicon.ico
Normal file
1
cool_todo_manager/mainApp/main/public/vite.svg
Normal file
1
cool_todo_manager/mainApp/main/public/vite.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
0
cool_todo_manager/mainApp/main/src/App.css
Normal file
0
cool_todo_manager/mainApp/main/src/App.css
Normal 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}>
|
<RouterProvider router={router} />
|
||||||
{/* <ThemePanel /> */}
|
</Ctx.Provider>
|
||||||
<RouterProvider router={router} />
|
|
||||||
</Provider>
|
|
||||||
</QueryClientProvider>
|
|
||||||
</Theme>
|
</Theme>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -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')}`
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
@ -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;
|
||||||
@ -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,26 +45,32 @@ 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) => (
|
|
||||||
<TaskCard
|
{!isLoading && tasks.map((task: any, i: number) => (
|
||||||
key={task.id}
|
<TaskCard
|
||||||
id={task.id.toString()}
|
projectId={props.id}
|
||||||
title={task.title}
|
key={task.id}
|
||||||
description={task.status}
|
id={task.id.toString()}
|
||||||
index={i}
|
title={task.title}
|
||||||
status={task.status}
|
description={task.status}
|
||||||
/>
|
index={i}
|
||||||
))}
|
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);
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { observer } from 'mobx-react-lite';
|
||||||
|
import { DragDropContext } from '@hello-pangea/dnd';
|
||||||
|
import { Button, Flex, ScrollArea } from '@radix-ui/themes';
|
||||||
|
|
||||||
|
import CardGroup from '../CardGroup/CardGroup';
|
||||||
|
import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog';
|
||||||
|
import { useStore } from '../../hooks/useStore';
|
||||||
|
|
||||||
|
function MainBoard() {
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
store.mainStore.fetchProjects().catch(console.error);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dragEndHandle = (result: TDragResult) => {
|
||||||
|
console.log(result);
|
||||||
|
};
|
||||||
|
|
||||||
|
const createProject = (newProjectData: any) => {
|
||||||
|
store.mainStore.createProject(newProjectData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const cringe = store.mainStore.projects;
|
||||||
|
const isLoading = store.mainStore.isLoading;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DragDropContext onDragEnd={dragEndHandle}>
|
||||||
|
<ScrollArea scrollbars="horizontal" className="pb-3">
|
||||||
|
<Flex gap={'2'} className="min-w-fit">
|
||||||
|
{isLoading && <div>Loading Projects...</div>}
|
||||||
|
|
||||||
|
{!isLoading &&
|
||||||
|
cringe.map((item: any) => (
|
||||||
|
<CardGroup
|
||||||
|
key={item.id}
|
||||||
|
id={item.id}
|
||||||
|
title={item.title}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</ScrollArea>
|
||||||
|
</DragDropContext>
|
||||||
|
|
||||||
|
<CreateProjectDialog onCreate={createProject}>
|
||||||
|
<Button>Create project</Button>
|
||||||
|
</CreateProjectDialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default observer(MainBoard);
|
||||||
@ -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;
|
||||||
@ -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
4
cool_todo_manager/mainApp/main/src/context.ts
Normal 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
8
cool_todo_manager/mainApp/main/src/hooks/useStore.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { useContext } from "react";
|
||||||
|
import { Ctx } from "../context";
|
||||||
|
|
||||||
|
export function useStore() {
|
||||||
|
const store = useContext(Ctx)
|
||||||
|
|
||||||
|
return store;
|
||||||
|
}
|
||||||
5
cool_todo_manager/mainApp/main/src/index.css
Normal file
5
cool_todo_manager/mainApp/main/src/index.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
|
||||||
|
#root {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
5
cool_todo_manager/mainApp/main/src/main.tsx
Normal file
5
cool_todo_manager/mainApp/main/src/main.tsx
Normal 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,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 { useState } from 'react';
|
|
||||||
import { useLoginMutation } from '../../../services/mainApi';
|
|
||||||
|
|
||||||
export default function LoginPage() {
|
// Импортируем store.authStore
|
||||||
const [login, { isError }] = useLoginMutation();
|
import { useStore } from '../../../hooks/useStore';
|
||||||
|
|
||||||
|
|
||||||
|
function LoginPage() {
|
||||||
const [username, setUsername] = useState('');
|
const [username, setUsername] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
|
|
||||||
const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
|
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);
|
||||||
@ -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);
|
||||||
@ -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
|
||||||
15
cool_todo_manager/mainApp/main/src/stores/AppStore.ts
Normal file
15
cool_todo_manager/mainApp/main/src/stores/AppStore.ts
Normal 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
95
cool_todo_manager/mainApp/main/src/stores/AuthStore.ts
Normal 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
323
cool_todo_manager/mainApp/main/src/stores/MainStore.ts
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
1
cool_todo_manager/mainApp/main/src/vite-env.d.ts
vendored
Normal file
1
cool_todo_manager/mainApp/main/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
7
cool_todo_manager/mainApp/main/tailwind.config.js
Normal file
7
cool_todo_manager/mainApp/main/tailwind.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export const content = [
|
||||||
|
'./src/**/*.{html,js,tsx}',
|
||||||
|
];
|
||||||
|
export const theme = {
|
||||||
|
extend: {},
|
||||||
|
};
|
||||||
|
export const plugins = [];
|
||||||
10
cool_todo_manager/mainApp/main/tsconfig.json
Normal file
10
cool_todo_manager/mainApp/main/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"extends": "../tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
94
cool_todo_manager/mainApp/main/webpack.config.ts
Normal file
94
cool_todo_manager/mainApp/main/webpack.config.ts
Normal 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 ?? 3001,
|
||||||
|
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',
|
||||||
|
exposes: {
|
||||||
|
'./AppMain': './src/App.tsx',
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
18
cool_todo_manager/mainApp/tsconfig.base.json
Normal file
18
cool_todo_manager/mainApp/tsconfig.base.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"target": "es5",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"allowJs": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"resolveJsonModule": true
|
||||||
|
},
|
||||||
|
"ts-node": {
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "CommonJS"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9082
cool_todo_manager/package-lock.json
generated
9082
cool_todo_manager/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,43 +2,8 @@
|
|||||||
"name": "cool_todo_manager",
|
"name": "cool_todo_manager",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"workspaces": [
|
||||||
"scripts": {
|
"mainApp/*",
|
||||||
"dev": "vite",
|
"packages/*"
|
||||||
"build": "tsc -b && vite build",
|
]
|
||||||
"lint": "eslint .",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@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.0",
|
|
||||||
"@tailwindcss/vite": "^4.0.6",
|
|
||||||
"@tanstack/react-query": "^5.66.0",
|
|
||||||
"@tanstack/react-query-devtools": "^5.66.0",
|
|
||||||
"axios": "^1.7.9",
|
|
||||||
"jotai": "^2.12.0",
|
|
||||||
"js-cookie": "^3.0.5",
|
|
||||||
"react": "^19.0.0",
|
|
||||||
"react-dom": "^19.0.0",
|
|
||||||
"react-redux": "^9.2.0",
|
|
||||||
"react-router-dom": "^6.26.2",
|
|
||||||
"tailwindcss": "^4.0.6"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.19.0",
|
|
||||||
"@types/js-cookie": "^3.0.6",
|
|
||||||
"@types/react": "^19.0.8",
|
|
||||||
"@types/react-dom": "^19.0.3",
|
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
|
||||||
"eslint": "^9.19.0",
|
|
||||||
"eslint-plugin-react-hooks": "^5.0.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.18",
|
|
||||||
"globals": "^15.14.0",
|
|
||||||
"typescript": "~5.7.2",
|
|
||||||
"typescript-eslint": "^8.22.0",
|
|
||||||
"vite": "^6.1.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
38
cool_todo_manager/packages/build-config/package.json
Normal file
38
cool_todo_manager/packages/build-config/package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "@packages/build-config",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "./src/index.ts",
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.23.2",
|
||||||
|
"@babel/preset-react": "^7.22.15",
|
||||||
|
"@babel/preset-typescript": "^7.23.2",
|
||||||
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
|
||||||
|
"@svgr/webpack": "^8.1.0",
|
||||||
|
"@types/babel__core": "^7.20.3",
|
||||||
|
"@types/node": "^20.8.3",
|
||||||
|
"@types/webpack": "^5.28.3",
|
||||||
|
"@types/webpack-bundle-analyzer": "^4.6.1",
|
||||||
|
"@types/webpack-dev-server": "^4.7.2",
|
||||||
|
"babel-loader": "^9.1.3",
|
||||||
|
"copy-webpack-plugin": "^11.0.0",
|
||||||
|
"css-loader": "^6.8.1",
|
||||||
|
"fork-ts-checker-webpack-plugin": "^9.0.0",
|
||||||
|
"html-webpack-plugin": "^5.5.3",
|
||||||
|
"mini-css-extract-plugin": "^2.7.6",
|
||||||
|
"react-refresh": "^0.14.0",
|
||||||
|
"react-refresh-typescript": "^2.0.9",
|
||||||
|
"sass": "^1.69.0",
|
||||||
|
"sass-loader": "^13.3.2",
|
||||||
|
"style-loader": "^3.3.3",
|
||||||
|
"ts-loader": "^9.5.0",
|
||||||
|
"ts-node": "^10.9.1",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"webpack": "^5.88.2",
|
||||||
|
"webpack-bundle-analyzer": "^4.9.1",
|
||||||
|
"webpack-cli": "^5.1.4",
|
||||||
|
"webpack-dev-server": "^4.15.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
|
||||||
|
import { BuildOptions } from "./types/types";
|
||||||
|
|
||||||
|
export function buildDevServer(options: BuildOptions): DevServerConfiguration {
|
||||||
|
return {
|
||||||
|
port: options.port ?? 3000,
|
||||||
|
open: true,
|
||||||
|
// если раздавать статику через nginx То надо делать проксирование на Index.html
|
||||||
|
historyApiFallback: true,
|
||||||
|
hot: true
|
||||||
|
}
|
||||||
|
}
|
||||||
87
cool_todo_manager/packages/build-config/src/buildLoaders.ts
Normal file
87
cool_todo_manager/packages/build-config/src/buildLoaders.ts
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import MiniCssExtractPlugin from "mini-css-extract-plugin";
|
||||||
|
import ReactRefreshTypeScript from "react-refresh-typescript";
|
||||||
|
import { ModuleOptions } from "webpack";
|
||||||
|
import { BuildOptions } from "./types/types";
|
||||||
|
|
||||||
|
export function buildLoaders(options: BuildOptions): ModuleOptions['rules'] {
|
||||||
|
const isDev = options.mode === 'development';
|
||||||
|
|
||||||
|
const assetLoader = {
|
||||||
|
test: /\.(png|jpg|jpeg|gif)$/i,
|
||||||
|
type: 'asset/resource',
|
||||||
|
}
|
||||||
|
|
||||||
|
const svgrLoader = {
|
||||||
|
test: /\.svg$/i,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: '@svgr/webpack',
|
||||||
|
options: {
|
||||||
|
icon: true,
|
||||||
|
svgoConfig: {
|
||||||
|
plugins: [
|
||||||
|
{
|
||||||
|
name: 'convertColors',
|
||||||
|
params: {
|
||||||
|
currentColor: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const cssLoaderWithModules = {
|
||||||
|
loader: "css-loader",
|
||||||
|
options: {
|
||||||
|
modules: {
|
||||||
|
localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const scssLoader = {
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
// Creates `style` nodes from JS strings
|
||||||
|
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
|
||||||
|
// Translates CSS into CommonJS
|
||||||
|
cssLoaderWithModules,
|
||||||
|
// Compiles Sass to CSS
|
||||||
|
"sass-loader",
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const tsLoader = {
|
||||||
|
// ts-loader умеет работать с JSX
|
||||||
|
// Если б мы не использовали тайпскрипт: нужен был бы babel-loader
|
||||||
|
exclude: /node_modules/,
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'ts-loader',
|
||||||
|
options: {
|
||||||
|
transpileOnly: true,
|
||||||
|
getCustomTransformers: () => ({
|
||||||
|
before: [isDev && ReactRefreshTypeScript()].filter(Boolean),
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// const babelLoader = buildBabelLoader(options);
|
||||||
|
|
||||||
|
|
||||||
|
return [
|
||||||
|
assetLoader,
|
||||||
|
scssLoader,
|
||||||
|
tsLoader,
|
||||||
|
// babelLoader,
|
||||||
|
svgrLoader
|
||||||
|
]
|
||||||
|
}
|
||||||
52
cool_todo_manager/packages/build-config/src/buildPlugins.ts
Normal file
52
cool_todo_manager/packages/build-config/src/buildPlugins.ts
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import HtmlWebpackPlugin from "html-webpack-plugin";
|
||||||
|
import MiniCssExtractPlugin from "mini-css-extract-plugin";
|
||||||
|
import webpack, { Configuration, DefinePlugin } from "webpack";
|
||||||
|
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
|
||||||
|
import { BuildOptions } from "./types/types";
|
||||||
|
// import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
|
||||||
|
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
|
||||||
|
import CopyPlugin from "copy-webpack-plugin";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
|
export function buildPlugins({mode, paths, analyzer, platform}: BuildOptions): Configuration['plugins'] {
|
||||||
|
const isDev = mode === 'development';
|
||||||
|
const isProd = mode === 'production';
|
||||||
|
|
||||||
|
const plugins: Configuration['plugins'] = [
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: paths.html,
|
||||||
|
favicon: path.resolve(paths.public, 'favicon.ico'),
|
||||||
|
publicPath: '/'
|
||||||
|
}),
|
||||||
|
new DefinePlugin({
|
||||||
|
__PLATFORM__: JSON.stringify(platform),
|
||||||
|
__ENV__: JSON.stringify(mode),
|
||||||
|
}),
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
if(isDev) {
|
||||||
|
plugins.push(new webpack.ProgressPlugin())
|
||||||
|
/** Выносит проверку типов в отдельный процесс: не нагружая сборку */
|
||||||
|
// plugins.push(new ForkTsCheckerWebpackPlugin())
|
||||||
|
plugins.push(new ReactRefreshWebpackPlugin())
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isProd) {
|
||||||
|
plugins.push(new MiniCssExtractPlugin({
|
||||||
|
filename: 'css/[name].[contenthash:8].css',
|
||||||
|
chunkFilename: 'css/[name].[contenthash:8].css',
|
||||||
|
}))
|
||||||
|
plugins.push(new CopyPlugin({
|
||||||
|
patterns: [
|
||||||
|
{ from: path.resolve(paths.public, 'locales'), to: path.resolve(paths.output, 'locales') },
|
||||||
|
],
|
||||||
|
}),)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(analyzer) {
|
||||||
|
plugins.push(new BundleAnalyzerPlugin())
|
||||||
|
}
|
||||||
|
|
||||||
|
return plugins;
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { Configuration } from "webpack";
|
||||||
|
import { BuildOptions } from "./types/types";
|
||||||
|
|
||||||
|
export function buildResolvers(options: BuildOptions): Configuration['resolve'] {
|
||||||
|
return {
|
||||||
|
extensions: ['.tsx', '.ts', '.js'],
|
||||||
|
alias: {
|
||||||
|
'@': options.paths.src,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
28
cool_todo_manager/packages/build-config/src/buildWebpack.ts
Normal file
28
cool_todo_manager/packages/build-config/src/buildWebpack.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import webpack from "webpack";
|
||||||
|
import { buildDevServer } from "./buildDevServer";
|
||||||
|
import { buildLoaders } from "./buildLoaders";
|
||||||
|
import { buildPlugins } from "./buildPlugins";
|
||||||
|
import { buildResolvers } from "./buildResolvers";
|
||||||
|
import { BuildOptions } from "./types/types";
|
||||||
|
|
||||||
|
export function buildWebpack(options: BuildOptions): webpack.Configuration {
|
||||||
|
const {mode, paths} = options
|
||||||
|
const isDev = mode === 'development';
|
||||||
|
|
||||||
|
return {
|
||||||
|
mode: mode ?? 'development',
|
||||||
|
entry: paths.entry,
|
||||||
|
output: {
|
||||||
|
path: paths.output,
|
||||||
|
filename: '[name].[contenthash].js',
|
||||||
|
clean: true
|
||||||
|
},
|
||||||
|
plugins: buildPlugins(options),
|
||||||
|
module: {
|
||||||
|
rules: buildLoaders(options),
|
||||||
|
},
|
||||||
|
resolve: buildResolvers(options),
|
||||||
|
devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
|
||||||
|
devServer: isDev ? buildDevServer(options) : undefined,
|
||||||
|
}
|
||||||
|
}
|
||||||
2
cool_todo_manager/packages/build-config/src/index.ts
Normal file
2
cool_todo_manager/packages/build-config/src/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { buildWebpack } from './buildWebpack'
|
||||||
|
export type { BuildMode, BuildOptions, BuildPaths, BuildPlatform } from './types/types'
|
||||||
18
cool_todo_manager/packages/build-config/src/types/types.ts
Normal file
18
cool_todo_manager/packages/build-config/src/types/types.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
export interface BuildPaths {
|
||||||
|
entry: string;
|
||||||
|
html: string;
|
||||||
|
public: string;
|
||||||
|
output: string;
|
||||||
|
src: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BuildMode = 'production' | 'development';
|
||||||
|
export type BuildPlatform = 'mobile' | 'desktop';
|
||||||
|
|
||||||
|
export interface BuildOptions {
|
||||||
|
port: number;
|
||||||
|
paths: BuildPaths;
|
||||||
|
mode: BuildMode;
|
||||||
|
platform: BuildPlatform;
|
||||||
|
analyzer?: boolean;
|
||||||
|
}
|
||||||
14
cool_todo_manager/packages/build-config/tsconfig.json
Normal file
14
cool_todo_manager/packages/build-config/tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/",
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"target": "es5",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"allowJs": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"composite": true
|
||||||
|
}
|
||||||
|
}
|
||||||
0
cool_todo_manager/packages/tsconfig.base.json
Normal file
0
cool_todo_manager/packages/tsconfig.base.json
Normal 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);
|
|
||||||
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import { QueryClient } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
const queryClient = new QueryClient({
|
|
||||||
defaultOptions: {
|
|
||||||
queries: {
|
|
||||||
retry: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default queryClient;
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import { DragDropContext } from '@hello-pangea/dnd';
|
|
||||||
import { Button, Flex, ScrollArea } from '@radix-ui/themes';
|
|
||||||
import {
|
|
||||||
useCreateProjectMutation,
|
|
||||||
useGetProjectsQuery
|
|
||||||
} from '../../services/mainApi';
|
|
||||||
import CardGroup from '../CardGroup/CardGroup';
|
|
||||||
import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog';
|
|
||||||
|
|
||||||
export default function MainBoard() {
|
|
||||||
const dragEndHandle = (result: TDragResult) => {
|
|
||||||
result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const [createProject] = useCreateProjectMutation();
|
|
||||||
const { data: cringe, isLoading } = useGetProjectsQuery({});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<DragDropContext onDragEnd={dragEndHandle}>
|
|
||||||
<ScrollArea scrollbars="horizontal" className="pb-3">
|
|
||||||
<Flex gap={'2'} className="min-w-fit">
|
|
||||||
{!isLoading &&
|
|
||||||
(cringe as any[]).map((item: any) => (
|
|
||||||
<CardGroup id={item.id} title={item.title} />
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</ScrollArea>
|
|
||||||
</DragDropContext>
|
|
||||||
|
|
||||||
<CreateProjectDialog onCreate={createProject}>
|
|
||||||
<Button>Create project</Button>
|
|
||||||
</CreateProjectDialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["src", "../@types/**/*"]
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user