Compare commits
No commits in common. "4f1dd5eb7a203391d855485a3d1e21aa21f8da65" and "049b925855699b65375da9059fc2a048c16f61fe" have entirely different histories.
4f1dd5eb7a
...
049b925855
112
cool_todo_manager/package-lock.json
generated
112
cool_todo_manager/package-lock.json
generated
@ -9,25 +9,19 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hello-pangea/dnd": "^18.0.1",
|
"@hello-pangea/dnd": "^18.0.1",
|
||||||
"@radix-ui/react-form": "^0.1.2",
|
|
||||||
"@radix-ui/react-icons": "^1.3.2",
|
"@radix-ui/react-icons": "^1.3.2",
|
||||||
"@radix-ui/themes": "^3.2.0",
|
"@radix-ui/themes": "^3.2.0",
|
||||||
"@reduxjs/toolkit": "^2.6.0",
|
|
||||||
"@tailwindcss/vite": "^4.0.6",
|
"@tailwindcss/vite": "^4.0.6",
|
||||||
"@tanstack/react-query": "^5.66.0",
|
"@tanstack/react-query": "^5.66.0",
|
||||||
"@tanstack/react-query-devtools": "^5.66.0",
|
"@tanstack/react-query-devtools": "^5.66.0",
|
||||||
"axios": "^1.7.9",
|
"axios": "^1.7.9",
|
||||||
"jotai": "^2.12.0",
|
"jotai": "^2.12.0",
|
||||||
"js-cookie": "^3.0.5",
|
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-redux": "^9.2.0",
|
|
||||||
"react-router-dom": "^6.26.2",
|
|
||||||
"tailwindcss": "^4.0.6"
|
"tailwindcss": "^4.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.19.0",
|
"@eslint/js": "^9.19.0",
|
||||||
"@types/js-cookie": "^3.0.6",
|
|
||||||
"@types/react": "^19.0.8",
|
"@types/react": "^19.0.8",
|
||||||
"@types/react-dom": "^19.0.3",
|
"@types/react-dom": "^19.0.3",
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
@ -2551,39 +2545,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@reduxjs/toolkit": {
|
|
||||||
"version": "2.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.6.0.tgz",
|
|
||||||
"integrity": "sha512-mWJCYpewLRyTuuzRSEC/IwIBBkYg2dKtQas8mty5MaV2iXzcmicS3gW554FDeOvLnY3x13NIk8MB1e8wHO7rqQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"immer": "^10.0.3",
|
|
||||||
"redux": "^5.0.1",
|
|
||||||
"redux-thunk": "^3.1.0",
|
|
||||||
"reselect": "^5.1.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
|
||||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"react": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"react-redux": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@remix-run/router": {
|
|
||||||
"version": "1.19.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
|
|
||||||
"integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=14.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||||
"version": "4.34.7",
|
"version": "4.34.7",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.7.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.7.tgz",
|
||||||
@ -3159,13 +3120,6 @@
|
|||||||
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
|
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@types/js-cookie": {
|
|
||||||
"version": "3.0.6",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
|
|
||||||
"integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@types/json-schema": {
|
"node_modules/@types/json-schema": {
|
||||||
"version": "7.0.15",
|
"version": "7.0.15",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||||
@ -4458,16 +4412,6 @@
|
|||||||
"node": ">= 4"
|
"node": ">= 4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/immer": {
|
|
||||||
"version": "10.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
|
|
||||||
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/immer"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/import-fresh": {
|
"node_modules/import-fresh": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||||
@ -4565,15 +4509,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/js-cookie": {
|
|
||||||
"version": "3.0.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
|
||||||
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=14"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/js-tokens": {
|
"node_modules/js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
@ -5388,38 +5323,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router": {
|
|
||||||
"version": "6.26.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
|
|
||||||
"integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@remix-run/router": "1.19.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=14.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-router-dom": {
|
|
||||||
"version": "6.26.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
|
|
||||||
"integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@remix-run/router": "1.19.2",
|
|
||||||
"react-router": "6.26.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=14.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16.8",
|
|
||||||
"react-dom": ">=16.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-style-singleton": {
|
"node_modules/react-style-singleton": {
|
||||||
"version": "2.2.3",
|
"version": "2.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
||||||
@ -5448,27 +5351,12 @@
|
|||||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/redux-thunk": {
|
|
||||||
"version": "3.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
|
||||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"peerDependencies": {
|
|
||||||
"redux": "^5.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/regenerator-runtime": {
|
"node_modules/regenerator-runtime": {
|
||||||
"version": "0.14.1",
|
"version": "0.14.1",
|
||||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||||
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
|
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/reselect": {
|
|
||||||
"version": "5.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
|
||||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/resolve-from": {
|
"node_modules/resolve-from": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||||
|
|||||||
@ -11,25 +11,19 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hello-pangea/dnd": "^18.0.1",
|
"@hello-pangea/dnd": "^18.0.1",
|
||||||
"@radix-ui/react-form": "^0.1.2",
|
|
||||||
"@radix-ui/react-icons": "^1.3.2",
|
"@radix-ui/react-icons": "^1.3.2",
|
||||||
"@radix-ui/themes": "^3.2.0",
|
"@radix-ui/themes": "^3.2.0",
|
||||||
"@reduxjs/toolkit": "^2.6.0",
|
|
||||||
"@tailwindcss/vite": "^4.0.6",
|
"@tailwindcss/vite": "^4.0.6",
|
||||||
"@tanstack/react-query": "^5.66.0",
|
"@tanstack/react-query": "^5.66.0",
|
||||||
"@tanstack/react-query-devtools": "^5.66.0",
|
"@tanstack/react-query-devtools": "^5.66.0",
|
||||||
"axios": "^1.7.9",
|
"axios": "^1.7.9",
|
||||||
"jotai": "^2.12.0",
|
"jotai": "^2.12.0",
|
||||||
"js-cookie": "^3.0.5",
|
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-redux": "^9.2.0",
|
|
||||||
"react-router-dom": "^6.26.2",
|
|
||||||
"tailwindcss": "^4.0.6"
|
"tailwindcss": "^4.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.19.0",
|
"@eslint/js": "^9.19.0",
|
||||||
"@types/js-cookie": "^3.0.6",
|
|
||||||
"@types/react": "^19.0.8",
|
"@types/react": "^19.0.8",
|
||||||
"@types/react-dom": "^19.0.3",
|
"@types/react-dom": "^19.0.3",
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
|||||||
@ -1,24 +1,13 @@
|
|||||||
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 queryClient from './api/queryClient';
|
|
||||||
import { store } from './api/RTKQuery';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import MyRoutes from './routes/routes';
|
import MainBoard from './components/MainBoard/MainBoard';
|
||||||
|
|
||||||
const router = createBrowserRouter(MyRoutes);
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<Theme className="size-full" accentColor="amber" grayColor="gray">
|
<Theme accentColor="amber" grayColor="gray">
|
||||||
<QueryClientProvider client={queryClient}>
|
<MainBoard />
|
||||||
<Provider store={store}>
|
|
||||||
{/* <ThemePanel /> */}
|
{/* <ThemePanel /> */}
|
||||||
<RouterProvider router={router} />
|
|
||||||
</Provider>
|
|
||||||
</QueryClientProvider>
|
|
||||||
</Theme>
|
</Theme>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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,14 +0,0 @@
|
|||||||
import axios from "axios";
|
|
||||||
|
|
||||||
const BASE_URL = 'http://localhost:4567';
|
|
||||||
|
|
||||||
export const axiosBase = axios.create({
|
|
||||||
baseURL: BASE_URL,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const axiosAuth = axios.create({
|
|
||||||
baseURL: BASE_URL,
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${localStorage.getItem('token')}` // Maybe we will use cookies
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import { QueryClient } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
const queryClient = new QueryClient({
|
|
||||||
defaultOptions: {
|
|
||||||
queries: {
|
|
||||||
retry: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default queryClient;
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { PropsWithChildren } from 'react';
|
|
||||||
import { Navigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function AuthWrapper(props: PropsWithChildren) {
|
|
||||||
|
|
||||||
if (!localStorage.getItem('token')) {
|
|
||||||
console.log('No token found, redirecting to login');
|
|
||||||
return <Navigate to={'/login'} />
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div>{props.children}</div>;
|
|
||||||
}
|
|
||||||
@ -1,77 +1,34 @@
|
|||||||
import { Droppable } from '@hello-pangea/dnd';
|
import { Droppable } from '@hello-pangea/dnd';
|
||||||
import { Box, Button, Flex, Text } from '@radix-ui/themes';
|
import { Box } from '@radix-ui/themes';
|
||||||
import {
|
|
||||||
useCreateTaskMutation,
|
|
||||||
useDeleteProjectMutation,
|
|
||||||
useGetTasksForGroupQuery,
|
|
||||||
} from '../../services/mainApi';
|
|
||||||
import TaskCard from '../TaskCard/TaskCard';
|
import TaskCard from '../TaskCard/TaskCard';
|
||||||
import AddUserToProjectDialog from '../dialogs/AddUserToProjectDialog/AddUserToProjectDialog';
|
|
||||||
import CreateTaskDialog from '../dialogs/CreateTaskDialog/CreateTaskDialog';
|
|
||||||
import DeleteProjectDialog from '../dialogs/DeleteProjectDialog/CreateTaskDialog';
|
|
||||||
|
|
||||||
import { PlusIcon } from '@radix-ui/react-icons';
|
const tasks = [
|
||||||
|
{ id: 1, title: 'Task 1', description: 'Description for Task 1' },
|
||||||
|
{ id: 2, title: 'Task 2', description: 'Description for Task 2' },
|
||||||
|
];
|
||||||
|
|
||||||
type TCardGroup = {
|
type TCardGroup = {
|
||||||
id: string;
|
id: string
|
||||||
title: string;
|
}
|
||||||
};
|
|
||||||
|
|
||||||
export default function CardGroup(props: TCardGroup) {
|
export default function CardGroup(props: TCardGroup) {
|
||||||
const { data, isLoading } = useGetTasksForGroupQuery(props.id);
|
|
||||||
|
|
||||||
const [createTaskForGroup] = useCreateTaskMutation();
|
|
||||||
const [deleteProject] = useDeleteProjectMutation();
|
|
||||||
|
|
||||||
const createTask = (taskText: string, date: string) => {
|
|
||||||
createTaskForGroup({
|
|
||||||
title: taskText,
|
|
||||||
projectId: props.id,
|
|
||||||
assignedUserId: 1,
|
|
||||||
deadline: date,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteGroup = () => {
|
|
||||||
deleteProject(props.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Droppable droppableId={props.id.toString()}>
|
<Droppable droppableId={props.id}>
|
||||||
{(provided) => (
|
{(provided) => (
|
||||||
<Box className="flex flex-col text-center rounded-lg p-4 bg-gray-200 min-w-fit">
|
|
||||||
<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"
|
{...provided.droppableProps}
|
||||||
>
|
>
|
||||||
{data &&
|
{tasks.map((task, i) => (
|
||||||
data.map((task, i) => (
|
|
||||||
<TaskCard
|
<TaskCard
|
||||||
key={task.id}
|
key={task.id}
|
||||||
id={task.id.toString()}
|
id={task.id.toString() + props.id}
|
||||||
title={task.title}
|
title={task.title}
|
||||||
description={task.status}
|
description={task.description}
|
||||||
index={i}
|
index={i}
|
||||||
status={task.status}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Box>
|
{provided.placeholder}
|
||||||
<Flex gap={'2'} className="mx-auto w-full mt-2">
|
|
||||||
<CreateTaskDialog onClose={createTask}>
|
|
||||||
<Button className='!grow-1'>Add Task</Button>
|
|
||||||
</CreateTaskDialog>
|
|
||||||
<DeleteProjectDialog onClose={deleteGroup}>
|
|
||||||
<Button className='!grow-1' color="red">Delete Project</Button>
|
|
||||||
</DeleteProjectDialog>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<AddUserToProjectDialog projectId={+props.id}>
|
|
||||||
<Button className='!mt-2'>
|
|
||||||
<PlusIcon />
|
|
||||||
Add user
|
|
||||||
</Button>
|
|
||||||
</AddUserToProjectDialog>
|
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Droppable>
|
</Droppable>
|
||||||
|
|||||||
@ -1,36 +1,17 @@
|
|||||||
import { DragDropContext } from '@hello-pangea/dnd';
|
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 CardGroup from '../CardGroup/CardGroup';
|
||||||
import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog';
|
|
||||||
|
|
||||||
export default function MainBoard() {
|
export default function MainBoard() {
|
||||||
const dragEndHandle = (result: TDragResult) => {
|
|
||||||
result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const [createProject] = useCreateProjectMutation();
|
const dragEndHandle = (result: TDragResult ) => {
|
||||||
const { data: cringe, isLoading } = useGetProjectsQuery({});
|
result
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<DragDropContext onDragEnd={dragEndHandle}>
|
<DragDropContext onDragEnd={dragEndHandle}>
|
||||||
<ScrollArea scrollbars="horizontal" className="pb-3">
|
<CardGroup id='qwhdf' />
|
||||||
<Flex gap={'2'} className="min-w-fit">
|
<CardGroup id='123fsduiyuiyi' />
|
||||||
{!isLoading &&
|
|
||||||
(cringe as any[]).map((item: any) => (
|
|
||||||
<CardGroup id={item.id} title={item.title} />
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</ScrollArea>
|
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
|
|
||||||
<CreateProjectDialog onCreate={createProject}>
|
|
||||||
<Button>Create project</Button>
|
|
||||||
</CreateProjectDialog>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,66 +1,35 @@
|
|||||||
import { Draggable } from '@hello-pangea/dnd';
|
import { Draggable } from '@hello-pangea/dnd';
|
||||||
import { Badge, Button, Card, Flex, Text } from '@radix-ui/themes';
|
import { DragHandleHorizontalIcon } from '@radix-ui/react-icons';
|
||||||
import { useUpdateTaskMutation } from '../../services/mainApi';
|
import { Box, Button, Card, Flex, Text } from '@radix-ui/themes';
|
||||||
|
|
||||||
type TTaskCard = {
|
type TTaskCard = {
|
||||||
title?: string;
|
title?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
id?: string;
|
id?: string;
|
||||||
index?: number;
|
index?: number;
|
||||||
status: 'todo' | 'in-progress' | 'completed';
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const badgeNames = {
|
|
||||||
todo: 'To do',
|
|
||||||
'in-progress': 'In progress',
|
|
||||||
completed: 'Completed',
|
|
||||||
} as const
|
|
||||||
|
|
||||||
const badgeColors = {
|
|
||||||
todo: 'blue',
|
|
||||||
'in-progress': 'orange',
|
|
||||||
completed: 'green',
|
|
||||||
} as const
|
|
||||||
|
|
||||||
export default function TaskCard(props: TTaskCard) {
|
export default function TaskCard(props: TTaskCard) {
|
||||||
const [updateTask] = useUpdateTaskMutation();
|
|
||||||
|
|
||||||
const updateStatus = (newStatus: 'todo' | 'in-progress' | 'completed') => {
|
|
||||||
updateTask({ id: props.id, status: newStatus });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Draggable draggableId={props.id || '123'} index={props.index || 0}>
|
<Draggable draggableId={props.id || '123'} index={props.index || 0}>
|
||||||
{(provided) => (
|
{(provided) => (
|
||||||
<Card
|
<Card
|
||||||
className="!w-62 !flex flex-col gap-2"
|
className="!w-62"
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.draggableProps}
|
{...provided.draggableProps}
|
||||||
>
|
>
|
||||||
<Flex direction="column" gap="2">
|
<Flex direction="column" gap="2">
|
||||||
<Flex justify={'between'}>
|
|
||||||
<Text wrap="pretty">{props.title}</Text>
|
<Text wrap="pretty">{props.title}</Text>
|
||||||
<Badge color={badgeColors[props.status] || 'gray'}>{badgeNames[props.status]}</Badge>
|
<Button>Mark completed</Button>
|
||||||
|
<Flex className="w-full !justify-center transition-transform">
|
||||||
|
<Box
|
||||||
|
className="px-10 cursor-grab"
|
||||||
|
{...provided.dragHandleProps}
|
||||||
|
>
|
||||||
|
<DragHandleHorizontalIcon />
|
||||||
|
</Box>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
<Flex justify={'between'}>
|
|
||||||
{props.status !== 'todo' && (
|
|
||||||
<Button color={badgeColors['todo']} onClick={() => updateStatus('todo')}>
|
|
||||||
Todo
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{props.status !== 'in-progress' && (
|
|
||||||
<Button color={badgeColors['in-progress']} onClick={() => updateStatus('in-progress')}>
|
|
||||||
In Progress
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{props.status !== 'completed' && (
|
|
||||||
<Button color={badgeColors['completed']} onClick={() => updateStatus('completed')}>
|
|
||||||
Completed
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</Draggable>
|
</Draggable>
|
||||||
|
|||||||
@ -1,92 +0,0 @@
|
|||||||
import { Button, Dialog, Flex, Select } from '@radix-ui/themes';
|
|
||||||
import { PropsWithChildren, useState } from 'react';
|
|
||||||
import {
|
|
||||||
useAddProjectMemberMutation,
|
|
||||||
useGetAllUsersQuery,
|
|
||||||
} from '../../../services/mainApi';
|
|
||||||
|
|
||||||
type TAddUserToProjectDialog = {
|
|
||||||
projectId: number;
|
|
||||||
} & PropsWithChildren;
|
|
||||||
|
|
||||||
export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
|
|
||||||
const { projectId, children } = props;
|
|
||||||
const { data: users, isLoading, error, refetch } = useGetAllUsersQuery({});
|
|
||||||
const [addProjectMember, { isLoading: isAdding }] =
|
|
||||||
useAddProjectMemberMutation();
|
|
||||||
const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
|
|
||||||
|
|
||||||
const handleAddUser = async () => {
|
|
||||||
if (selectedUserId) {
|
|
||||||
try {
|
|
||||||
await addProjectMember({
|
|
||||||
projectId,
|
|
||||||
memberId: selectedUserId,
|
|
||||||
}).unwrap();
|
|
||||||
setSelectedUserId(null);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to add user:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog.Root onOpenChange={() => refetch()}>
|
|
||||||
<Dialog.Trigger>{children}</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content maxWidth="450px">
|
|
||||||
<Dialog.Title>Add User to Project</Dialog.Title>
|
|
||||||
|
|
||||||
<Flex direction="column" gap="3" mt="4">
|
|
||||||
{isLoading ? (
|
|
||||||
<span>Loading users...</span>
|
|
||||||
) : error ? (
|
|
||||||
<span>Error loading users.</span>
|
|
||||||
) : (
|
|
||||||
<Select.Root
|
|
||||||
value={selectedUserId?.toString() || ''}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setSelectedUserId(Number(value))
|
|
||||||
}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<Select.Trigger aria-label="User">
|
|
||||||
{selectedUserId
|
|
||||||
? users?.find(
|
|
||||||
(user: any) =>
|
|
||||||
user.id === selectedUserId,
|
|
||||||
)?.username
|
|
||||||
: 'Select a user'}
|
|
||||||
</Select.Trigger>
|
|
||||||
<Select.Content>
|
|
||||||
{users?.map((user: any) => (
|
|
||||||
<Select.Item key={user.id} value={user.id}>
|
|
||||||
{user.username}
|
|
||||||
</Select.Item>
|
|
||||||
))}
|
|
||||||
</Select.Content>
|
|
||||||
</Select.Root>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex gap="3" mt="4" justify="end">
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button variant="soft" color="gray">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button
|
|
||||||
color="green"
|
|
||||||
onClick={handleAddUser}
|
|
||||||
disabled={!selectedUserId || isAdding}
|
|
||||||
>
|
|
||||||
{isAdding ? 'Adding...' : 'Add'}
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
</Flex>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import { Button, Dialog, Flex, TextArea, TextField } from '@radix-ui/themes';
|
|
||||||
import { PropsWithChildren, useState } from 'react';
|
|
||||||
|
|
||||||
type TCreateProjectDialog = {
|
|
||||||
onCreate: (f: any) => void;
|
|
||||||
} & PropsWithChildren;
|
|
||||||
|
|
||||||
export default function CreateProjectDialog(props: TCreateProjectDialog) {
|
|
||||||
const [title, setTitle] = useState('');
|
|
||||||
const [description, setDescription] = useState('');
|
|
||||||
|
|
||||||
const handleCreate = () => {
|
|
||||||
props.onCreate({title, description});
|
|
||||||
setTitle('');
|
|
||||||
setDescription('');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog.Root>
|
|
||||||
<Dialog.Trigger>
|
|
||||||
{props.children}
|
|
||||||
</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content maxWidth="450px">
|
|
||||||
<Dialog.Title>Create a New Project</Dialog.Title>
|
|
||||||
|
|
||||||
<Flex direction="column" gap="3" mt="4">
|
|
||||||
<TextField.Root
|
|
||||||
value={title}
|
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
|
||||||
required
|
|
||||||
></TextField.Root>
|
|
||||||
<TextArea
|
|
||||||
value={description}
|
|
||||||
onChange={(e) => setDescription(e.target.value)}
|
|
||||||
placeholder="Optional description"
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex gap="3" mt="4" justify="end">
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button variant="soft" color="gray">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button
|
|
||||||
color="green"
|
|
||||||
onClick={handleCreate}
|
|
||||||
disabled={!title}
|
|
||||||
>
|
|
||||||
Create
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
</Flex>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import { Button, Dialog, Flex, Text, TextField } from '@radix-ui/themes';
|
|
||||||
import { PropsWithChildren, useState } from 'react';
|
|
||||||
|
|
||||||
type TCreateTaskDialog = {
|
|
||||||
onClose: (text: string, timeString: string) => void;
|
|
||||||
} & PropsWithChildren;
|
|
||||||
|
|
||||||
export default function CreateTaskDialog(props: TCreateTaskDialog) {
|
|
||||||
const [text, setText] = useState('');
|
|
||||||
const [deadline, setDeadline] = useState('');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog.Root>
|
|
||||||
<Dialog.Trigger>{props.children}</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content maxWidth="450px">
|
|
||||||
<Dialog.Title>Task creation</Dialog.Title>
|
|
||||||
|
|
||||||
<Flex direction="column" gap="3">
|
|
||||||
<label>
|
|
||||||
<Text as="div" size="2" mb="1" weight="bold">
|
|
||||||
Task description
|
|
||||||
</Text>
|
|
||||||
<TextField.Root
|
|
||||||
defaultValue=""
|
|
||||||
value={text}
|
|
||||||
onChange={(e) => setText(e.target.value)}
|
|
||||||
placeholder="Enter task description"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<Text as="div" size="2" mb="1" weight="bold">
|
|
||||||
Deadline
|
|
||||||
</Text>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
onChange={(e) => setDeadline(e.target.value)}
|
|
||||||
></input>
|
|
||||||
</label>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex gap="3" mt="4" justify="end">
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button variant="soft" color="gray">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
props.onClose(text, deadline);
|
|
||||||
setDeadline('');
|
|
||||||
setText('');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
</Flex>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import { Button, Dialog, Flex } from '@radix-ui/themes';
|
|
||||||
import { PropsWithChildren } from 'react';
|
|
||||||
|
|
||||||
type TCreateTaskDialog = {
|
|
||||||
onClose: () => void;
|
|
||||||
} & PropsWithChildren;
|
|
||||||
|
|
||||||
export default function DeleteProjectDialog(props: TCreateTaskDialog) {
|
|
||||||
return (
|
|
||||||
<Dialog.Root>
|
|
||||||
<Dialog.Trigger>{props.children}</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content maxWidth="450px">
|
|
||||||
<Dialog.Title>Delete project?</Dialog.Title>
|
|
||||||
|
|
||||||
<Flex gap="3" mt="4" justify="end">
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button variant="soft" color="gray">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button
|
|
||||||
color="red"
|
|
||||||
onClick={() => {
|
|
||||||
props.onClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
</Flex>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,5 +1 @@
|
|||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
|
|
||||||
#root {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from "react-dom/client";
|
||||||
import App from './App.tsx';
|
import App from "./App.tsx";
|
||||||
import './index.css';
|
import "./index.css";
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(<App />);
|
createRoot(document.getElementById("root")!).render(<App />);
|
||||||
|
|||||||
@ -1,90 +0,0 @@
|
|||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Heading,
|
|
||||||
Link,
|
|
||||||
Text,
|
|
||||||
TextField,
|
|
||||||
} from '@radix-ui/themes';
|
|
||||||
import { Form } from 'radix-ui';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useLoginMutation } from '../../../services/mainApi';
|
|
||||||
|
|
||||||
export default function LoginPage() {
|
|
||||||
const [login, { isError }] = useLoginMutation();
|
|
||||||
|
|
||||||
const [username, setUsername] = useState('');
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
|
|
||||||
const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
login({ username, password });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-fit">
|
|
||||||
<Heading size="4" className="text-center !mb-2">
|
|
||||||
Login
|
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<Form.Root
|
|
||||||
className="flex flex-col gap-4"
|
|
||||||
onSubmit={submitHandler}
|
|
||||||
>
|
|
||||||
<Form.Field name="email">
|
|
||||||
<Form.Message match={'valueMissing'}>
|
|
||||||
<Text>Username is required</Text>
|
|
||||||
</Form.Message>
|
|
||||||
|
|
||||||
<Form.Control asChild>
|
|
||||||
<TextField.Root
|
|
||||||
type="text"
|
|
||||||
placeholder="Username"
|
|
||||||
value={username}
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
>
|
|
||||||
<TextField.Slot />
|
|
||||||
</TextField.Root>
|
|
||||||
</Form.Control>
|
|
||||||
</Form.Field>
|
|
||||||
|
|
||||||
<Form.Field name="password">
|
|
||||||
<Form.Message match="valueMissing">
|
|
||||||
<Text>Password is required</Text>
|
|
||||||
</Form.Message>
|
|
||||||
|
|
||||||
<Form.Control asChild>
|
|
||||||
<TextField.Root
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
>
|
|
||||||
<TextField.Slot />
|
|
||||||
</TextField.Root>
|
|
||||||
</Form.Control>
|
|
||||||
</Form.Field>
|
|
||||||
|
|
||||||
{isError && (
|
|
||||||
<Text>{'Unable to login. Please try again.'}</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
// onClick={(e) => e.preventDefault()}
|
|
||||||
className="mt-4"
|
|
||||||
>
|
|
||||||
Sign In
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Box className='w-full !flex justify-center'>
|
|
||||||
<Link href="/register">
|
|
||||||
<Text>Register</Text>
|
|
||||||
</Link>
|
|
||||||
</Box>
|
|
||||||
</Form.Root>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Heading,
|
|
||||||
Link,
|
|
||||||
Text,
|
|
||||||
TextField,
|
|
||||||
} from '@radix-ui/themes';
|
|
||||||
import { Form } from 'radix-ui';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useRegisterMutation } from '../../../services/mainApi';
|
|
||||||
|
|
||||||
export default function RegisterPage() {
|
|
||||||
const [register, { isLoading, error }] = useRegisterMutation();
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
username: '',
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
[e.target.name]: e.target.value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
try {
|
|
||||||
await register(formData).unwrap();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to register:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-fit">
|
|
||||||
<Heading size="4" className="text-center !mb-2">
|
|
||||||
Register
|
|
||||||
</Heading>
|
|
||||||
<Form.Root
|
|
||||||
className="flex flex-col gap-4"
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
>
|
|
||||||
<Form.Field name="username">
|
|
||||||
<Form.Message match="valueMissing">
|
|
||||||
<Text>Username is required</Text>
|
|
||||||
</Form.Message>
|
|
||||||
|
|
||||||
<Form.Control asChild>
|
|
||||||
<TextField.Root
|
|
||||||
type="text"
|
|
||||||
name="username"
|
|
||||||
placeholder="Username"
|
|
||||||
required
|
|
||||||
value={formData.username}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<TextField.Slot />
|
|
||||||
</TextField.Root>
|
|
||||||
</Form.Control>
|
|
||||||
</Form.Field>
|
|
||||||
|
|
||||||
<Form.Field name="email">
|
|
||||||
<Form.Message match="valueMissing">
|
|
||||||
<Text>Email is required</Text>
|
|
||||||
</Form.Message>
|
|
||||||
|
|
||||||
<Form.Message match="typeMismatch">
|
|
||||||
<Text>Email is not valid</Text>
|
|
||||||
</Form.Message>
|
|
||||||
|
|
||||||
<Form.Control asChild>
|
|
||||||
<TextField.Root
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="Email"
|
|
||||||
required
|
|
||||||
value={formData.email}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<TextField.Slot />
|
|
||||||
</TextField.Root>
|
|
||||||
</Form.Control>
|
|
||||||
</Form.Field>
|
|
||||||
|
|
||||||
<Form.Field name="password">
|
|
||||||
<Form.Message match="valueMissing">
|
|
||||||
<Text>Password is required</Text>
|
|
||||||
</Form.Message>
|
|
||||||
|
|
||||||
<Form.Control asChild>
|
|
||||||
<TextField.Root
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
required
|
|
||||||
value={formData.password}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<TextField.Slot />
|
|
||||||
</TextField.Root>
|
|
||||||
</Form.Control>
|
|
||||||
</Form.Field>
|
|
||||||
|
|
||||||
<Button type="submit" disabled={isLoading} className="mt-4">
|
|
||||||
Register
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Box className="text-red-500">
|
|
||||||
<Text>Error registering user.</Text>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Box className="w-full !flex justify-center">
|
|
||||||
<Link href="/login">
|
|
||||||
<Text>Login</Text>
|
|
||||||
</Link>
|
|
||||||
</Box>
|
|
||||||
</Form.Root>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import { Box } from '@radix-ui/themes'
|
|
||||||
import { Outlet } from 'react-router-dom'
|
|
||||||
|
|
||||||
export default function MainPage() {
|
|
||||||
return (
|
|
||||||
<Box className='size-full'>
|
|
||||||
<Outlet />
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { createRoutesFromElements, Route } from 'react-router-dom';
|
|
||||||
import AuthWrapper from '../components/AuthWrapper/AuthWrapper';
|
|
||||||
import MainBoard from '../components/MainBoard/MainBoard';
|
|
||||||
import LoginPage from '../pages/auth/LoginPage/LoginPage';
|
|
||||||
import RegisterPage from '../pages/auth/RegisterPage/RegisterPage';
|
|
||||||
import MainPage from '../pages/main/MainPage';
|
|
||||||
|
|
||||||
const MyRoutes = createRoutesFromElements(
|
|
||||||
<>
|
|
||||||
<Route
|
|
||||||
path="/"
|
|
||||||
element={
|
|
||||||
<AuthWrapper>
|
|
||||||
<MainPage />
|
|
||||||
</AuthWrapper>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Route index element={<MainBoard />} />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="login" element={<LoginPage />} />
|
|
||||||
<Route path="register" element={<RegisterPage />} />
|
|
||||||
</>,
|
|
||||||
);
|
|
||||||
|
|
||||||
export default MyRoutes;
|
|
||||||
@ -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;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user